من الرسم الأولي إلى النموذج التفاعلي

لا يقفز المصمّمون المحترفون مباشرة إلى الألوان واللمسات النهائية. بل ينتقلون من الخام إلى التفصيلي، ويختبرون الأفكار بتكلفة قليلة قبل استثمار الوقت.

ثلاثة مستويات من الدقّة

• الهيكل الأولي (Wireframe): يُظهر البنية: ما الذي يوضع أين، وما المحتوى والإجراءات التي تحتاجها كل شاشة. سريع الرسم والتغيير. استخدم مربعات رمادية وخطوطًا بسيطة، دون ألوان بعد.
• التصميم النهائي (Mockup): الشكل الأخير: ألوان الهوية، والخطوط، والصور والنصوص الحقيقية، والمسافات الدقيقة.
• النموذج التفاعلي (Prototype): التصاميم (أو حتى الهياكل الأولية) مترابطة بتفاعلات، ليتنقّل الناس بينها ويختبروا التجربة.

عرض الهياكل الأولية على العميل أولًا يوفّر الوقت؛ فتحريك مربع أسهل بكثير من إعادة تصميم شاشة مكتملة.

دورة التصميم

التصميم حلقة لا خط مستقيم:

اختبار قابلية استخدام بسيط

يمكنك الاختبار مع خمسة أشخاص واكتشاف معظم المشكلات الكبيرة:

1. أعطِ كل شخص مهمة واقعية: "أعد طلب آخر طلب بقالة."
2. اطلب منه التفكير بصوت عالٍ أثناء استخدام النموذج.
3. لا تساعد ولا تشرح. دوّن أين يتردّد أو ينقر على الشيء الخطأ أو يستسلم.
4. أصلح أكبر المشكلات أولًا، ثم اختبر مجددًا.

استخدم محتوى حقيقيًا

صمّم بنصوص وأسماء وأسعار وصور واقعية منذ البداية. "Lorem ipsum" يخفي المشكلات: قد يكون اسم منتج حقيقي أطول من النص المؤقت بثلاث مرات، والنص العربي أو الأردي يحتاج إلى ارتفاع أكبر وتخطيط من اليمين إلى اليسار. إن كنت تصمّم لعدة لغات فراجع كل شاشة مهمة بكل لغة.

الجوال أولًا

معظم المستخدمين في العالم العربي وباكستان يتصفّحون من الهواتف. صمّم شاشة الهاتف أولًا ثم وسّع إلى اللوحي والحاسوب. البدء بالصغير يجبرك على إبقاء المهم فقط.

مهمة عملية (30 دقيقة)

1. ارسم على الورق ثلاثة تخطيطات مختلفة للشاشة الرئيسية لتطبيقك.
2. حوّل أفضلها إلى هيكل أولي رمادي في Figma بنص حقيقي.
3. اعرضه على شخص واحد، واطلب منه إيجاد الإجراء الرئيسي، ودوّن ما أربكه.