واجهات ويب متجاوبةBuild Dynamic User Interfaces (UI) for Websites

خريطة الموقعBuilding a Sitemap

فائدتها: تحدد الصفحات التي يجب تصميمها، وتكشف الناقص والزائد منها، وتخطط لمعمارية المعلومات قبل التصميم.

الخريطة الهرمية (Hierarchical Sitemap) أشهر أنواعها، وتتكون من:

1. الصفحة الرئيسية: نقطة الدخول للموقع.
2. الصفحات الأم (Parent Pages): الأقسام الرئيسية المرتبطة بالرئيسية مباشرة، وتظهر غالبًا في شريط التنقل.
3. الصفحات الفرعية (Child Pages): تتفرع من كل قسم رئيسي.

نماذج هيكلة المحتوى:

تخطيطات المواقع الشائعةCommon Website Layouts

أنماط حركة العين:

• نمط F: يقرأ المستخدم سطرًا أفقيًا في الأعلى، ثم سطرًا أقصر، ثم ينزل رأسيًا على جانب الصفحة. يظهر في الصفحات النصية الكثيفة كالمقالات ونتائج البحث، فضع أهم المعلومات في الأعلى.
• نمط Z: تتحرك العين أفقيًا في الأعلى، ثم قطريًا، ثم أفقيًا في الأسفل. يظهر في الصفحات البسيطة وصفحات الهبوط (Landing Pages)، ويساعد على المسح السريع.

تخطيط الصفحة لأحجام الشاشاتPlotting Responsive Layouts

نقاط التحوّل (Breakpoints): الأحجام التي يتغير عندها التخطيط. فعند تصغير الشاشة إلى حد معيّن، ينتقل التصميم تلقائيًا من شكل الكمبيوتر إلى شكل الجوال.

كيف تخطط: ارسم المخطط على ورق شبكي، وقارن التصميم نفسه على الكمبيوتر والتابلت والجوال. مثلًا: 4 أعمدة على الكمبيوتر، و3 على التابلت، و2 على الجوال.

أسئلة أثناء التخطيط:

• توزيع العناصر: هل يحتاج عنصر أن يتغير مكانه؟ وما الذي يبقى فوق خط الطي (Above the Fold)، أي الظاهر دون تمرير؟
• الصور: هل تحتاج تكبيرًا أو تصغيرًا؟ وهل تبقى الصورة الرئيسية (Hero Image) كبيرة؟
• التنقل: هل يتحول إلى قائمة مخفية (Hamburger Menu)؟ وكيف يتغير مع حجم الشاشة؟

عناصر التصميم المتجاوبCommon Elements Used in Responsive Design

المخططات الورقية والرقمية للموقعCreate Paper and Digital Wireframes for a Responsive Website

1. مخططات ورقية للصفحة الرئيسية:
اعتمد على الـSitemap لتحديد العناصر، وارسم 4 نسخ سريعة بالخطوط والأشكال ونصوص مؤقتة، ثم اختر أفضل الأجزاء واجمعها في نسخة واحدة. وزر الإجراء يُرسم مستطيلًا فيه نص.

2. نسخ لأحجام الشاشات الأخرى:
بعد نسخة الكمبيوتر، ارسم نسخ التابلت والجوال على ورق شبكي: العناصر نفسها، لكن بترتيب وأحجام تناسب كل شاشة. وفكّر: ماذا يبقى؟ وماذا يُحذف؟ وماذا يتغير مكانه؟ واستعن بالعناصر الموفّرة للمساحة: القائمة المخفية، والبطاقات، والشريط المتحرك.

3. مخطط رقمي لشاشة الكمبيوتر:
قبل التحويل تأكد أن التخطيط واضح، وأنك جرّبت أكثر من نسخة وأخذت ملاحظات. ثم في Figma: أنشئ إطارًا بمقاس ويب، وأضف شبكة التخطيط (الهوامش، والأعمدة، والمسافات بينها)، ثم املأ الصفحة بعناصر مؤقتة:

• فوق خط الطي: شريط التنقل، وزر الإجراء الرئيسي، وأهم محتوى يظهر مباشرة.
• تحت خط الطي: بقية المحتوى، والتذييل.

نموذج منخفض الدقة للموقعCreate a Low-Fidelity Prototype for Your Responsive Website

1. حدد المسار: المهمة التي تريد من المستخدم إكمالها، مثل مسار الشراء من اختيار المنتج إلى إتمام الطلب.
   مثال: قسم النساء، ثم اختيار قميص، ثم اللون والمقاس، ثم إضافة للسلة، ثم الدفع: البريد، ثم الشحن، ثم بيانات الدفع والفوترة، ثم Place Order.
2. افتح وضع Prototype في Figma، وحدد نقطة البداية.
3. اربط الإطارات: حدد العنصر، واسحب السهم الأزرق إلى الصفحة التالية، وكرر حتى يكتمل المسار.
4. راجع النموذج: هل يعمل التنقل للأمام والخلف؟ وهل نقطة الدخول واضحة؟ وهل نهاية المهمة واضحة؟ وهل يستطيع المستخدم العودة للبداية بعد الانتهاء؟

Mockups للموقعCreate Mockups for a Website

الخطوات:

1. افتح المخططات في Figma، وأنشئ إطار كمبيوتر جديدًا. وابدأ بما فوق خط الطي.
2. لا تنسخ المخطط حرفيًا: جرّب تحسينات وتغييرات.
3. أضف العناصر: شريط التنقل، والنصوص، والأزرار، ثم عدّل الألوان واضبط الأحجام.
4. الصور والنصوص: الصورة الرئيسية أعلى الصفحة، داخل مستطيلات. والنصوص بعناوين ومحتوى وتسلسل طباعي واضح.
5. الأنماط والمكونات: أنماط للألوان والنصوص والتأثيرات، ومكونات للأزرار والأيقونات والعناصر المتكررة، فتوفر الوقت وتوحّد التصميم. واجمعها في Sticker Sheet ضمن نظام تصميم.
6. أكمل الصفحة: أضف ما تحت خط الطي بالأنماط والمكونات نفسها.
7. كرر لبقية الصفحات: إطار جديد، ثم العناصر، ثم المكونات، ثم النصوص والصور.

إمكانية الوصول في الويبWeb Accessibility

1. هيكلة تدعم الوصول (Accessible Markup)

• ترتيب التنقل (Traversal Order): من أعلى الصفحة إلى أسفلها بترتيب منطقي. في المواقع الإنجليزية من أعلى اليسار إلى أسفل اليمين، وفي العربية من أعلى اليمين. وهذا مهم لمستخدمي لوحة المفاتيح وقارئ الشاشة. رقّم ترتيب التنقل على التصميم، وانتبه للعناصر الخارجة عن الترتيب الطبيعي.

• العناوين المتسلسلة: H1 للأهم، ثم H2، ثم H3. فيتضح هيكل الصفحة ويفهمه قارئ الشاشة.

• تسميات الوصول (Accessibility Labels): وصف واضح لكل عنصر تفاعلي، كالأزرار وخانات الاختيار والقوائم، يزيل الغموض عن مستخدمي قارئ الشاشة.
• المعالم (Landmarks): مناطق محددة في الواجهة، كالترويسة والتنقل والمحتوى الرئيسي والتذييل، يقفز بينها مستخدم قارئ الشاشة.

2. الألوان والتباين: نص داكن على خلفية فاتحة أو العكس. وتجنب الألوان المتقاربة كالرمادي الفاتح على الأبيض، ولا تعتمد على اللون وحده لنقل المعلومة (التفاصيل في الكورس 5).

3. الوصول مع التكبير: يجب أن يتكيف التصميم مع تكبير الشاشة وتكبير الخط، وإلا تداخلت العناصر وصار النص غير مقروء. صمم نسخة عادية ونسخة مكبّرة.

جلسة نقد التصميمDesign Critique Sessions

الأدوار:

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

جهّز نفسك كمقدّم بخمسة أسئلة: من المستخدم؟ وما المشكلة؟ وكيف يحلها التصميم؟ وفي أي مرحلة أنت؟ وعلى ماذا تريد الملاحظات تحديدًا؟

أفضل الممارسات:

• قبل الجلسة: جهّز عرضًا واضحًا، وشارك التصميم مسبقًا.
• أثناءها: اشرح طريقة تفكيرك بوضوح ومباشرة.
• عند استقبال الملاحظات: استمع دون مقاطعة، واطلب التوضيح إن لم تفهم، ولا تدافع فورًا.
• بعدها: راجع الملاحظات وقرر ماذا تطبق. لا يلزمك تطبيق كل شيء، لكن يلزمك تبرير قراراتك.

فريق التطوير الذي ستعمل معه:

• مطوّر الواجهة (Front-end Developer): يبرمج ما يراه المستخدم بناءً على تصميمك.
• مطوّر الخلفية (Back-end Developer): يبرمج بنية الموقع وتخزين البيانات واسترجاعها بناءً على الـSitemap ووظائف الموقع.