رسم مخطط صفحة كاملة
نجمع ما تعلمناه في مخطط صفحة كاملة، للجوال والحاسوب، يكون خريطة مشروعك. ⏱ نحو 20 دقيقة.
- تحدد الأجزاء الأربعة لصفحة الويب.
- تتبع خطوات رسم المخطط من الهدف إلى المراجعة.
- ترسم المحتوى نفسه للجوال والحاسوب.
- تستخدم شبكة الأعمدة لتصطف العناصر.
١أجزاء أي صفحة ويب
انظر إلى أغلب المواقع، ستجد الصفحة الرئيسية مبنية من أربعة أجزاء بالترتيب نفسه تقريبًا:
ستكتب كل جزء من هذه الأجزاء لاحقًا بوسم HTML خاص به: <header> و <main> و <footer>. فالمخطط الجيد نصف الكود.
٢خطوات رسم المخطط
- حدد الهدف: ماذا نريد أن يفعل الزائر؟ (يسجّل في دورة مثلًا).
- اجمع المحتوى: اكتب قائمة بكل ما سيظهر: الشعار، والأقسام، والصور، والنصوص.
- رتّب حسب الأهمية: الأهم في الأعلى وبحجم أكبر، والزر الأساسي واضح.
- ارسم للجوال أولًا: الشاشة الصغيرة تجبرك على اختيار الأهم.
- ثم وسّع للحاسوب: العناصر التي كانت تحت بعضها تصبح جنبًا إلى جنب.
- راجع: هل يصل الزائر إلى الهدف بسهولة؟ اعرض المخطط على زميل.
٣الجوال والحاسوب: المحتوى نفسه، ترتيب مختلف
لاحظ: في الجوال صارت قائمة التنقل أيقونة ☰، والبطاقات صارت تحت بعضها. هذا ما يسمى التصميم المتجاوب، وستبنيه بنفسك في الوحدة السادسة.
٤الشبكة: مسطرة المصمم
حتى تكون العناصر مصطفّة ومتناسقة، يقسم المصممون عرض الصفحة إلى 12 عمودًا متساوية، ويضعون كل عنصر على عدد من الأعمدة:
لماذا 12؟ لأنها تنقسم على 2 و 3 و 4 و 6. وستجد الفكرة نفسها في مكتبة Bootstrap في آخر المقرر.
٥اكتب ملاحظات على مخططك
المخطط وحده لا يقول كل شيء. أضف ملاحظات قصيرة بأسهم، مثل:
- «الشعار يرجع إلى الصفحة الرئيسية عند الضغط».
- «هذه البطاقات تأتي من قائمة الدورات، وعددها يتغيّر».
- «الزر يفتح نموذج التسجيل».
هذه الملاحظات تساعد المطوّر (أنت لاحقًا!) على فهم ما يحدث عند التفاعل.
توقّع وتحقّق
أين يوضع الشعار وروابط التنقل عادة؟
لماذا نرسم للجوال أولًا؟
ثلاث بطاقات متساوية في شبكة من 12 عمودًا، كم عمودًا لكل بطاقة؟
12 ÷ 3 = 4.في الجوال، ماذا يحدث غالبًا للبطاقات التي كانت في صف واحد؟
الخلاصة
- أجزاء الصفحة: الترويسة، والواجهة الرئيسية، والمحتوى، والتذييل.
- الخطوات: الهدف، ثم المحتوى، ثم الترتيب، ثم الجوال، ثم الحاسوب، ثم المراجعة.
- الجوال: عمود واحد وقائمة ☰. الحاسوب: عناصر جنبًا إلى جنب.
- الشبكة 12 عمودًا تجعل العناصر مصطفّة ومتناسقة.
تحدٍّ تصميمي: مخطط الصفحة الرئيسية لمركز تدريب
متوسطارسم في Figma (أو على ورق مربعات) مخططًا هيكليًّا للصفحة الرئيسية لمركز تدريب يقدّم دورات في البرمجة: نسخة للجوال ونسخة للحاسوب. هذا المخطط هو بداية مشروعك في المقرر.
- الترويسة: الشعار وروابط التنقل (☰ في الجوال).
- الواجهة الرئيسية: صورة وعنوان وزر «سجّل الآن».
- قسم «دوراتنا»: ثلاث بطاقات فيها صورة واسم الدورة ومدتها.
- قسم «لماذا نحن؟» بثلاث نقاط قصيرة.
- التذييل: التواصل والحقوق.
- ملاحظتان على الأقل بأسهم.