1.4الطباعة، الألوان، الهوامش والتباعد
الأساسي في 30 ثانية
- الطباعة: الخطّ، الحجم، السماكة، تباعد الأسطر — المقروئية أولًا.
- التباعد: هامش (فراغ خارجي) وpadding (فراغ داخلي)؛ المتنفَّس يجعل الصفحة مقروءة.
- الاتّساق: تعريف ألوان وخطوط عامّة يتجنّب اللااتّساق والتعديلات التي لا تنتهي.
الخيط الناظم — نادية تُعنى بالنتيجة
المحتوى موجود، لكن كل شيء ضيّق والألوان متنافرة. تمنح نادية الصفحة متنفَّسًا: مزيد من الفراغ (paddings)، طباعة مقروءة، لونان للعلامة. وفوق ذلك، تفهم أن الأفضل تثبيت هذه الخيارات عامّةً مرّة واحدة، بدل تكرارها عنصرًا عنصرًا.
تكملة 1.3 — من «يعمل» إلى «أنيق».
1. الطباعة والألوان والتباعد
تُضبَط الطباعة (الخطّ، الحجم، السماكة، تباعد الأسطر، تباعد الحروف) في تبويب النمط: الأولوية لـ المقروئية (حجم كافٍ، تباعد أسطر مريح). ويجب أن تحترم الألوان (نصّ، خلفية، حدود) تباينًا كافيًا. والتباعدات — الهوامش (خارجي) والـ paddings (داخلي)، في تبويب المتقدّم — تمنح متنفَّسًا: صفحة ضيّقة تُتعِب، وصفحة مُتنفّسة تتنفّس.
تزيد نادية paddings الحاويات، تختار خطًّا مقروءًا، ولونَين (وردي علامة، رمادي داكن للنص).
2. الاتّساق والإعدادات العامّة
تكرار الإعدادات نفسها على كل عنصر مضيعة للوقت ومصدر لااتّساق. الممارسة الجيّدة: تعريف ألوان وخطوط الموقع العامّة (في إعدادات الموقع / Site Settings) وإعادة استخدامها في كل مكان. تغيير لون العلامة يصير حينها مرّة واحدة، ويتحدّث كل شيء.
إنها بداية تصميم متّسق وقابل للصيانة — سنتعمّق في الإعدادات العامّة في المستوى 2.
🔎 مثال ملموس — التنفيس والمواءمة (حالة نادية)
الطباعة: خطّ مقروء، تباعد أسطر 1.6.
الألوان: وردي علامة (#b4005a) + رمادي داكن للنص.
التباعدات: padding أقسام 40px، هوامش بين الكتل.
عامّ: ألوان/خطّ مُعرَّفة في إعدادات الموقع.
→ تغيير لون العلامة = إعداد واحد، يتحدّث كل شيء.النتيجة: نتيجة أنيقة ومتّسقة.
الدرس: الضبط عامّةً يتجنّب التعديلات التي لا تنتهي.
مفردات القسم
- الطباعة
- الخطّ، الحجم، السماكة، تباعد الأسطر، تباعد الحروف لنصّ.
مثال بسيط: خطّ مقروء، تباعد أسطر مريح للفقرات.
ما ليس كذلك: تكديس 4 خطوط مختلفة «للتنويع».
رد فعل: المقروئية أولًا؛ خطّ أو اثنان يكفيان.
- الألوان
- لون النص، الخلفية، الحدود، الأيقونات (تبويب النمط).
مثال بسيط: وردي علامة + رمادي داكن مقروء للنص.
ما ليس كذلك: نصّ فاتح على خلفية فاتحة (تباين غير كافٍ).
رد فعل: تحقّق من تباين النص/الخلفية.
- الهامش / padding
- الهامش = فراغ خارجي حول عنصر؛ padding = فراغ داخلي (تبويب المتقدّم).
مثال بسيط: padding في زر (متنفَّس حول النص)، هامش بين كتلتَين.
ما ليس كذلك: لصق العناصر دون متنفَّس.
رد فعل: داخلي = padding؛ خارجي = هامش.
- التباين
- فرق السطوع بين النص والخلفية، من أجل المقروئية والوصولية.
مثال بسيط: نصّ رمادي داكن على خلفية بيضاء.
ما ليس كذلك: رمادي فاتح على أبيض، غير مقروء تحت الشمس أو لبعض العيون.
رد فعل: يجب أن يُقرأ النصّ دون جهد.
- الإعدادات العامّة (Site Settings)
- ألوان وخطوط مُعرَّفة مرّة واحدة لكل الموقع ومُعاد استخدامها في كل مكان.
مثال بسيط: تغيير لون العلامة يُحدّث كل الموقع.
ما ليس كذلك: ضبط اللون عنصرًا عنصرًا.
رد فعل: عرّف عامّةً ما يتكرّر.
في التطبيق — تنميق صفحة بنظافة
- اختر خطًّا مقروءًا وتباعد أسطر مريحًا للفقرات.
- عرّف لونَين (واحد للعلامة، واحد للنص) بتباين جيّد.
- أضف متنفَّسًا: paddings الحاويات، هوامش بين الكتل.
- اذهب إلى إعدادات الموقع وثبّت ألوانًا وخطوطًا عامّة.
نصّ جاهز للقول — تبرير الاقتصاد للزبون (20 ث)
«أستخدم لونَين وطباعة مقروءة، مع متنفَّس بين العناصر. هذا متعمَّد: موقع مُقتصِد يُلهم الثقة ويُقرأ بسهولة، خاصّة على الجوّال. وبما أن كل شيء مضبوط عامّةً، إن غيّرتَ رأيك في اللون، نضبطه في كل مكان في لحظة.»
بِع الاقتصاد كخيار ثقة ومقروئية.
قالب للنسخ واللصق — دليل نمط سريع
الخطّ (العناوين): _______________
الخطّ (النص): _______________ تباعد الأسطر: ____
لون العلامة: #_______ لون النص: #_______
التباين مُتحقَّق منه: نعم / لا
padding الأقسام: ____ px الهوامش بين الكتل: ____ px
مُعرَّف عامّةً (Site Settings): نعم / لاموقع تعريفي مُقتصِد
لونان، خطّ أو اثنان، متنفَّس كثير: نتيجة احترافية ومطمئنة.
علامة قويّة
لون العلامة على الأزرار واللمسات، نصّ محايد مقروء.
الجوّال
حجم خطّ كافٍ وتباعد أسطر سخيّ للقراءة بالإبهام.
الوصولية
تباين نص/خلفية كافٍ: مقروء تحت الشمس وللجميع.
✓ ممارسات جيدة
- حُدّ الألوان والخطوط، اخترها متّسقة.
- امنح متنفَّسًا (paddings، هوامش).
- عرّف الألوان والخطوط عامّةً من أجل قابلية الصيانة.
✗ أخطاء شائعة
- تكثير الخطوط والألوان.
- نسيان التباين (نصّ قليل المقروئية).
- ضبط كل عنصر يدويًا بدل العامّ.
النقاط الأساسية
- طباعة مقروءة، تباين كافٍ.
- هامش (خارجي) و padding (داخلي) للتنفيس.
- قليل من الألوان/الخطوط، لكن متّسقة.
- إعدادات عامّة = اتّساق وتعديلات مرّة واحدة.
تحدّي 48 ساعة — طبّق غدًا
على صفحة، ثبّت لونَين وخطًّا أو اثنين في إعدادات الموقع، تحقّق من تباين النص/الخلفية، ونفّس بـ paddings. ثم غيّر لون العلامة عامّةً ولاحظ. 20 دقيقة.
- أختار طباعة مقروءة ومُتباينة.
- أُنفّس بالهوامش والـ paddings.
- أُعرّف الألوان/الخطوط عامّةً.
أسئلة شائعة
كم لونًا وخطًّا أستخدم؟
قليلًا: 2 إلى 3 ألوان و1 إلى 2 خطّ تكفي لنتيجة احترافية ومتّسقة. الازدحام يضرّ بالمقروئية والثقة.
ما الفرق بين الهامش والـ padding؟
الهامش هو الفراغ الخارجي حول عنصر؛ والـ padding، الفراغ الداخلي بين حافة العنصر ومحتواه. كلاهما يُضبَط في تبويب المتقدّم.
لماذا أُعرّف الألوان عامّةً؟
من أجل الاتّساق وقابلية الصيانة: مُعرَّفة مرّة واحدة في إعدادات الموقع، تُعاد في كل مكان وتُعدَّل في مكان واحد.
تريد نادية أن تستطيع تغيير لون العلامة في كل مكان مرّة واحدة إن تردّد الزبون. ماذا تفعل؟