الفرق بين

#Wireframe Vs #Mockup Vs #Prototype

هذي المفاهيم تستخدم في المشاريع التقنية، كالمواقع او التطبيقات

في مرحلة التصميم وقبل البدء في البرمجة الفعليه. وهي تندرج تحت مفهوم #UI #UX

اذا تم تطبيقها بشكل صحيح، سوف توفر الكثير من الوقت والجهد و التكلفة المادية. https://t.co/BRid6Iku22

اولاً : Wirefram

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

يمكن اعداده بقلم وورق او استخدام المواقع مثل :

https://t.co/rTwyaFGiyj https://t.co/6q4xRHNooR

ثانياً : Mockup

بعد الاتفاق على الــ Wireframe , ننتقل للمرحلة الثانية وهي Mockup

في هذي المرحلة راح يكون تصميم حقيقي للصفحات الحقيقه للموقع من حيث الالوان والخطوط والصور والمحتوى كامل. https://t.co/eGhuCs6p5w

وهذه المرحلة مهمه من ناحية الاتفاق على هوية وواجهات المستخدم النهائية. وهي مجرد صور يقوم المبرمج بعمل صفحات مطابقة لما يراه في ال Mockup .

يوجد الكثير من البرامج التي يمكن من خلالها عمل Mouckup مثل Adobe XD , Sketch او مواقع مثل https://t.co/DbHdJ76737

ثالثاً : Prototype

المرحلة الاخيره وهي اختياريه، يتم فيها ربط العناصر بروابط تشعبية، حتى تتضح للعميل او باقي اعضاء الفريق كيف يعمل التطبيق وكيف يتم الانتقال بين الصفحات.

كأنك ترى التطبيق الحقيقي وتسهل اكتشاف الاخطاء في ال work flow .

يمكن عمله عن طريق Adobe XD ، Figma https://t.co/K6dXOQc4xZ