15‏/09‏/2016

Admin

تخطيط واجهة العمل باستخدام WireFrames

السلام عليكم ورحمة الله 

WireFrame Tools and Mockup Templates

تخطيط واجهة العمل باستخدام WireFrames


قبل البدء بتصميم الموقع وبرمجته يتوجب عليك التخطيط لما ستقوم به بشكل دقيق، يلجأ المحترفون عادة إلى تخطيط أعمالهم بإستخدام WireFrames.. هل سمعت به مسبقا؟


- ما هو ال WireFrames:
هي عبارة عن مفكرة أولية وبسيطة توضح طريقة تقسيم التصميم وتقديم صورة أولية عن الشكل المقترح للواجهة وكذلك هيكلة محتوى صفحة الويب أو الموقع، الهدف الرئيسي من هذه المفكرة/التخطيط هو أن نوضح للعميل كيف سيكون هيكل وشكل الموقع.

تخطيط واجهة العمل باستخدام WireFrames - دروس4يو Dros4U

ما هي اهمية الـ WireFrames:
– اختبار قابلية الاستخدام للتطبيق الـ usability .
حيث يمكنك النظر للتطبيق بموضوعية والحكم علي سهولة استخدامه و سهوله وصول المستخدم لما يريد من خلال توضيح المسارات و تسمية الروابط ، واختبار بنية التطبيق الأساسية والاشاره الي عيوبه .

– يوضح خريطه الموقع او التطبيق بصرياً .
خريطة التطبيق من الممكن أن تكون مجردة بعض الشيء ومعقدة ، خصوصاً ان كانت كبيرة جداً، هنا يأتي دور الـ wireframes في تحويلها الي صورة بصرية يسهل التعرف عليها و توضيح المسارات.

– يسهل التواصل مع العميل و يوضح بعض المفاهيم الصعب توضيحها .
هناك بعض المصطلحات قد لا يفهمها العميل فيتم توضيحها من خلال الرسم، بحيث لتكون واضحة للعميل.


أهم المواقع التي تتيح لك عمل WireFrames بطريقة إحترافية: 


Lovely Charts is easy to use free online wireframing tool which can be accessed with free registration. The projects are saved online only but you can export the whole chart on to a png or jpg file to show the final wireframe design to your clients. This tool is built to create prototypes fast and nothing else. The library for wireframe may be very less when compared to other apps but you can utilize other library elements in the application which is available in symbols, flowcharts etc.

تخطيط واجهة العمل باستخدام WireFrames - دروس4يو Dros4U


A completely free tool for personal use with all mockup  features you can get your hands on. You must subscribe to the application if you are doing commercial projects and its worth every penny. Project template can be chosen regarding the type of mockup you are trying to build. Everything from mobile app design to website design is possible with this online web application.

تخطيط واجهة العمل باستخدام WireFrames - دروس4يو Dros4U


Register for free to start using this web application for creating cool mockups in any browser and share with anyone. Export to jpg, png and svg in seconds and create professional-quality flowcharts, Org charts, UML diagrams, Network diagrams, Wireframes, Technical drawings and more.

تخطيط واجهة العمل باستخدام WireFrames - دروس4يو Dros4U


Too awesome web application which only has 30 day free trail but you will start using it since it has the best features for any wire framing tool available online today. Finalize the work at the end of the day with a high fidelity solid prototyping features on this web app.

تخطيط واجهة العمل باستخدام WireFrames - دروس4يو Dros4U

Mockflow is a simple website wireframe tool which lets you create blueprints, mockups of websites like drupal, WordPress, mockup app wireframe, software GUI in a matter of minutes. Adding a new project in mockflow wireframe tool is pretty easy as you can choose between web, mobile and theme based options. Showcase your everyday mobile app wireframe projects now easily with mockflow.

تخطيط واجهة العمل باستخدام WireFrames - دروس4يو Dros4U


Balsamiq wireframe tool is available for download to all operating systems. It also provides a web mockup application for online wireframe project creation provided by Balsamic team. A trial version is available for 7 days to test this software by yourself.

تخطيط واجهة العمل باستخدام WireFrames - دروس4يو Dros4U


This online application allows a free plan with 1 project and 10 pages. A website wireframe tool essential for creating mock-ups for website with all web elements in one place. Share your mocks with your friends and export them to psd or png files as you like.

تخطيط واجهة العمل باستخدام WireFrames - دروس4يو Dros4U


This wireframe tool is build for super fast mockup creation online. Start creating your simple projects with this online tool for desktop browser, mobiles, tablet with pre defined templates.  The final output is also saved online and you will end up with a link of your project which you can share with your colleagues.

تخطيط واجهة العمل باستخدام WireFrames - دروس4يو Dros4U


This is a mobile app wireframe tool that is designed to help manage projects for developers, designers or project managers. It can be downloaded for desktop as this software is available for all operating system and for a trial period of 14 days.

تخطيط واجهة العمل باستخدام WireFrames - دروس4يو Dros4U


As it claims this wireframe prototyper is rich in features and provides a completely free lite edition for project management. Create unlimited projects, pages and this offline tool provides interactive widget selection for android, ios and ipad apps along with web apps.

تخطيط واجهة العمل باستخدام WireFrames - دروس4يو Dros4U


Wireframing, prototyping options to create your designs before making live code is possible with Axure. With wireframe support for mobiles, websites, tablets this tool can be perfect for project management of your latest projects. The tutorials for Axure are very precise and you will be able to master the whole tool in no time.

تخطيط واجهة العمل باستخدام WireFrames - دروس4يو Dros4U

Manage Design, content, notes or any resources project with ease with jumpchart online tool.

تخطيط واجهة العمل باستخدام WireFrames - دروس4يو Dros4U


A minmail wireframe tool with little features which might catch your interest. The project  is saved online and a link is provided to view the project next time.

تخطيط واجهة العمل باستخدام WireFrames - دروس4يو Dros4U


نتمنى لكم الفائدة :)

التعليقآت

سجل بريدك الإلكتروني هنا لتصلك أحدث المواضيع