الدرس السابع: Wireframing (رسم المخطط الأولي)
مرحبًا بك في مرحلة جديدة. من اليوم ستبدأ العمل بالطريقة التي يعمل بها مصممو UI/UX المحترفون.
قاعدة مهمة جدًا:
لا تبدأ بالألوان أو الصور. ابدأ بالمخطط (Wireframe).
ما هو Wireframe؟
الـ Wireframe هو رسم بسيط يوضح أماكن العناصر داخل الصفحة، بدون ألوان أو صور أو تفاصيل.
فكر فيه كمخطط منزل قبل البناء.
لماذا نستخدم Wireframe؟
لأنه يساعد على:
- تنظيم الصفحة.
- تحديد أماكن العناصر.
- اكتشاف المشاكل مبكرًا.
- تعديل التصميم بسهولة قبل إضافة التفاصيل.
أنواع الـ Wireframe
1. Low-Fidelity Wireframe
هو رسم سريع وبسيط.
يستخدم:
- مستطيلات.
- دوائر.
- خطوط.
مثال:
-------------------------
LOGO
[ مربع بحث ]
-------------------------
[ صورة ]
عنوان المنتج
وصف قصير
[ زر شراء ]
-------------------------
لا توجد ألوان أو أيقونات.
2. High-Fidelity Wireframe
يشبه التصميم النهائي أكثر.
يحتوي على:
- أحجام حقيقية.
- خطوط.
- أيقونات بسيطة.
- تفاصيل أكثر.
لكن لا يزال بدون التصميم النهائي الكامل.
خطوات إنشاء Wireframe
الخطوة الأولى
حدد هدف الصفحة.
مثال:
شاشة تسجيل الدخول.
الخطوة الثانية
حدد العناصر.
مثلاً:
- الشعار.
- العنوان.
- البريد الإلكتروني.
- كلمة المرور.
- زر تسجيل الدخول.
- رابط نسيت كلمة المرور.
الخطوة الثالثة
رتب العناصر.
ابدأ من الأعلى إلى الأسفل.
لا تضع كل شيء في مكان عشوائي.
الخطوة الرابعة
اجعل المستخدم يرى الأهم أولًا.
مثال:
- الشعار.
- العنوان.
- الحقول.
- الزر.
مثال عملي
تصميم Wireframe لتطبيق متجر إلكتروني:
-------------------------
LOGO
🔍 Search
-------------------------
Banner
-------------------------
Category 1
Category 2
Category 3
-------------------------
Product
Image
Title
Price
Buy
-------------------------
لاحظ أنه لا توجد ألوان أو صور حقيقية.
قواعد مهمة
✅ استخدم مستطيلات بدل الصور.
✅ استخدم خطوطًا بدل النصوص الطويلة.
✅ لا تهتم بجمال التصميم الآن.
✅ ركز على ترتيب العناصر.
أخطاء شائعة
❌ استخدام الألوان في Wireframe.
❌ إضافة صور حقيقية.
❌ الاهتمام بالتفاصيل الصغيرة.
❌ تغيير أماكن العناصر باستمرار بدون سبب.
كيف تنشئ Wireframe في Figma؟
- افتح مشروعًا جديدًا.
- أنشئ Frame.
- استخدم أداة Rectangle لرسم أماكن الصور والأزرار.
- استخدم خطوطًا أو مستطيلات صغيرة بدل النصوص.
- اجعل كل شيء باللون الرمادي فقط.
تمرين عملي
صمّم Wireframe لتطبيق مكون من صفحة رئيسية تحتوي على:
- شعار.
- مربع بحث.
- بانر.
- 4 أقسام.
- 4 بطاقات منتجات.
- شريط تنقل سفلي (Bottom Navigation).
ممنوع استخدام أي ألوان أو صور حقيقية.
كيف يفكر المصمم المحترف؟
قبل أن يفتح Figma، يسأل نفسه:
- ماذا يريد المستخدم؟
- ما أول شيء سيراه؟
- أين سيضغط؟
- هل يستطيع الوصول لهدفه بسرعة؟
إذا أجبت عن هذه الأسئلة، فأنت تفكر كمصمم UX.
ما تعلمته اليوم
✅ ما هو Wireframe.
✅ الفرق بين Low-Fidelity وHigh-Fidelity.
✅ خطوات إنشاء Wireframe.
✅ ترتيب العناصر داخل الصفحة.
✅ الأخطاء التي يجب تجنبها.
الواجب
اختر تطبيقًا مشهورًا (مثل متجر إلكتروني أو تطبيق بنكي)، ثم حاول رسم Wireframe لصفحته الرئيسية على ورقة أو في Figma باستخدام مستطيلات وخطوط فقط.
الدرس الثامن (احترافي جدًا)
في الدرس القادم سنتعلم Design System، وهو النظام الذي تعتمد عليه الشركات الكبرى مثل و و.
ستتعلم:
- ما هو Design System.
- إنشاء مكتبة أزرار وحقول احترافية.
- Components.
- Variants.
- Styles.
- Variables.
- وكيف تجعل تعديل مشروع كامل يتم في ثوانٍ بدل ساعات.
بعد هذا الدرس ستبدأ باستخدام نفس أسلوب العمل المتبع في فرق التصميم الاحترافية.
تعليقات
إرسال تعليق