مبادئ التصميم: الألوان والخطوط والتباين
قواعد بسيطة تجعل صفحتك مريحة للعين، وواضحة، ولها شخصية. ⏱ نحو 20 دقيقة.
- تختار لوحة ألوان صغيرة بقاعدة 60-30-10.
- تختار خطوطًا مناسبة للنص العربي.
- تتحقق من تباين النص مع خلفيته.
- ترتّب المحتوى بالتسلسل البصري.
- تصف عناصر هوية الموقع.
١الألوان: لوحة صغيرة متناسقة
الموقع الجميل لا يستخدم ألوانًا كثيرة، بل لوحة صغيرة من 3 أو 4 ألوان تتكرر في كل الصفحات:
| الدور | نسبته تقريبًا | أين يُستخدم؟ |
|---|---|---|
| اللون المحايد (الأساس) | 60٪ | الخلفيات والمساحات الكبيرة: أبيض أو رمادي فاتح أو بيج. |
| اللون الأساسي | 30٪ | الشريط العلوي، والعناوين، وأجزاء الهوية. |
| لون التمييز | 10٪ | الأزرار المهمة والروابط فقط، ليلفت النظر. |
وللألوان معانٍ يفهمها الناس دون تفكير: الأخضر للنجاح، والأحمر للخطأ والتحذير، والأزرق للثقة (تستخدمه البنوك كثيرًا).
٢الخطوط: خطّان يكفيان
- استخدم خطين على الأكثر: واحد للعناوين وواحد للنصوص، أو خطًّا واحدًا بأوزان مختلفة.
- للنص العربي اختر خطًّا واضحًا صُمّم للعربية، مثل:
TajawalأوCairoأوNoto Kufi Arabic(منGoogle Fontsمجانًا). - حجم النص الأساسي 16 بكسل على الأقل، والمسافة بين الأسطر واسعة قليلًا.
- لا تكتب فقرة كاملة بخط عريض أو مائل؛ اجعل التمييز لكلمات قليلة.
٣التباين: هل يُقرأ النص؟
التباين هو الفرق بين لون النص ولون خلفيته. نص رمادي فاتح على أبيض يبدو أنيقًا، لكن كثيرين لا يستطيعون قراءته. القاعدة العالمية: نسبة التباين للنص العادي 4.5 إلى 1 على الأقل.
جرّب: غيّر لون النص أو الخلفية وراقب النسبة.
نص أسود على أبيض نسبته 21 إلى 1 (أعلى قيمة). وأي لون باهت على خلفية فاتحة سيفشل.
٤التسلسل البصري: ماذا يُقرأ أولًا؟
العين تقرأ الأكبر والأغمق أولًا. نرتّب أهمية المحتوى بالحجم والوزن واللون:
العنوان كبير وعريض فيُقرأ أولًا، ثم التفاصيل بحجم أصغر، ثم الملاحظة الأقل أهمية بلون أفتح.
٥هوية الموقع
الهوية هي ما يجعلك تعرف الموقع من أول نظرة، حتى لو أخفينا اسمه. تتكوّن من:
| العنصر | مثال |
|---|---|
| الشعار | رسم بسيط واسم، يظهر أعلى كل صفحة. |
| لوحة الألوان | ثلاثة ألوان بشفراتها، مثل: #F4EDE4 و #3B2A1A و #E07A1F. |
| الخطوط | خط العناوين وخط النصوص. |
| أسلوب العناصر | شكل الأزرار (حواف دائرية أو حادة)، وشكل البطاقات والأيقونات. |
نكتب هذه القرارات في صفحة واحدة تسمى دليل الهوية، ونلتزم بها في كل صفحة. وهذا هو مبدأ الاتساق من الدرس السابق.
توقّع وتحقّق
في قاعدة 60-30-10، أين نضع لون التمييز (10٪)؟
ما الحد الأدنى المقبول لنسبة تباين النص العادي؟
كم خطًّا يُنصح به في الموقع؟
ما الذي يُقرأ أولًا في الصفحة عادة؟
الخلاصة
- لوحة الألوان: محايد 60٪، وأساسي 30٪، وتمييز 10٪ للأزرار المهمة.
- خطان على الأكثر، والنص الأساسي 16 بكسل أو أكبر.
- تباين النص العادي 4.5 إلى 1 على الأقل.
- الأكبر والأغمق يُقرأ أولًا.
- الهوية: الشعار والألوان والخطوط وأسلوب العناصر، ثابتة في كل الصفحات.
تحدٍّ تصميمي: دليل هوية لمقهى
متوسطصمّم دليل هوية لمقهى خيالي اسمه «بُنّ». يكفي ورقة واحدة (على الورق أو في Canva أو Figma) فيها قرارات الهوية كلها.
- شعار بسيط (رسم يدوي يكفي).
- لوحة من 3 ألوان، واكتب شفرة HEX لكل لون ودوره (محايد، أساسي، تمييز).
- خط للعناوين وخط للنصوص، مع مثال مكتوب بكل خط.
- شكل الزر الأساسي.