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

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

WireFrame Tools and Mockup Templates

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

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


- ما هو ال WireFrames:

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

ما هي اهمية الـ WireFrames:

– اختبار قابلية الاستخدام للتطبيق الـ usability .

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

– يوضح خريطه الموقع او التطبيق بصرياً .

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

– يسهل التواصل مع العميل و يوضح بعض المفاهيم الصعب توضيحها .

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

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

NinjaMock

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.

Gliffy

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.

UXPin

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.

MockFlow – Online Wireframe Tool

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.

Balsamiq Mockups – Offline and Online Tool

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.

MockingBird Wireframe Online Tool

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.

Minimal Wireframe Tool _ Online Tool

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.

WireframeSketcher

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.

Justinmind – Free WireFraming Prototyper

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.

Axure – Wireframe Software Tool

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.

JumpChart

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

FrameBox – Online WireFrame Tool

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.

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