أسس التصميم: دليل شامل للتوازن، والتباين، والتسلسل البصري، والجشطالت، والجريد، والتايبوجرافي، والسياق

ما هي أسس التصميم؟

كل بوستر أو لوجو أو موقع أو صفحة كتاب أعجبتك في حياتك يتبع مجموعة من القواعد، حتى لو بدا وكأنه خرج بدون أي مجهود. هذه القواعد هي أسس التصميم: المبادئ التي تحدد كيف تُرتَّب الأجزاء البصرية لتكون النتيجة واضحة وجذابة وتؤدي وظيفتها. وهي ليست اختراعاً حديثاً. الرسوم الجدارية المصرية القديمة، والزخارف الهندسية الإسلامية، وتصميم صفحات عصر النهضة، والبوسترات السويسرية، كلها تستخدم الأفكار نفسها عن التوازن والإيقاع والنسبة والنظام، كما أشرح في الفرق بين الفن والتصميم. البرامج تتغير كل سنة؛ أما هذه الأسس فلا تتغير.

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

أهم النقاط

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

عناصر التصميم: المادة الخام التي ترتّبها

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

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

التوازن: توزيع الوزن البصري

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

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

التباين: اجعل الاختلاف واضحاً

التباين هو الفرق بين العناصر، وبه تفهم العين ما المهم، وما الذي ينتمي إلى بعضه، وماذا تقرأ أولاً. تستطيع أن تصنع التباين بـالحجم (كبير أمام صغير)، والقيمة (غامق أمام فاتح)، والسُّمك (خط عريض أمام رفيع)، والشكل (دائري أمام حاد)، والملمس (خشن أمام ناعم)، والاتجاه (رأسي أمام أفقي)، والكثافة (مزدحم أمام فارغ). وتباين الألوان مهم أيضاً، وسنتناوله في مقال الألوان.

والقاعدة الذهبية للتباين هي: إذا كان الشيئان مختلفين، فاجعلهما مختلفين جداً. عنوان بحجم 18 بكسل بجوار نص بحجم 16 بكسل لا يبدو عنواناً؛ يبدو خطأً. اجعله 36. ورمادي غامق بجوار رمادي أغمق قليلاً يبدو متسخاً، وليس مقصوداً. التباين الضعيف من أكثر المشاكل التي أراها في بورتفوليو الطلبة. والتباين أيضاً قضية سهولة وصول: النص ضعيف التباين مع خلفيته صعب القراءة على كثير من الناس، خصوصاً على الموبايل في الشمس. التباين القوي والمقصود يجعل التصميم أجمل وأسهل في الاستخدام في الوقت نفسه.

التأكيد: صناعة نقطة تركيز

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

والخطأ الأشهر هو محاولة التأكيد على كل شيء. عندما يريد العميل اللوجو أكبر، والسعر أكبر، ورقم التليفون أكبر، والعرض أكبر، لا يعود أي شيء بارزاً، ويصرخ التصميم بدون أن يقول شيئاً. إذا كان كل شيء مهماً، فلا شيء مهم. اختر نقطة تركيز رئيسية واحدة، وربما نقطة أو اثنتين ثانويتين، واترك الباقي يدعمها في هدوء. والتعامل مع هذا النقاش مع العملاء مهارة وحده، أتحدث عنها في متى تقول «لا» كمصمم.

التسلسل البصري: التحكم في ترتيب القراءة

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

والتسلسل البصري يتبع أيضاً الطريقة الطبيعية التي يمسح بها الناس الصفحة بأعينهم. في اللغات التي تُكتب من اليسار إلى اليمين، كثيراً ما يمسح قارئ الصفحات المليئة بالنصوص على شكل حرف F: عرضاً في الأعلى، ثم نزولاً على الجانب الأيسر. وفي التصميمات الأبسط، مثل البوسترات والإعلانات وصفحات الهبوط، تميل العين إلى مسار على شكل حرف Z: أعلى اليسار، ثم أعلى اليمين، ثم قطرياً إلى أسفل، ثم عرضاً في الأسفل. وفي العربية وغيرها من اللغات التي تُكتب من اليمين إلى اليسار، تنعكس هذه المسارات وتبدأ من أعلى اليمين. واختبار بسيط للتسلسل: اعرض تصميمك على شخص لمدة خمس ثوانٍ، ثم اسأله ماذا يتذكر. إذا تذكر الشيء الخطأ أولاً، فالتسلسل يحتاج إلى شغل.

المحاذاة: الخطوط الخفية التي تصنع النظام

المحاذاة تعني وضع العناصر بحيث تقع حوافها أو مراكزها على خطوط خفية واحدة. وهي أسهل مبدأ في التطبيق، وأسرع طريقة لتجعل التصميم يبدو احترافياً. عندما تكون العناصر محاذاة، تربطها العين ببعضها، ويبدو التصميم منظماً ومقصوداً. وعندما توضع «تقريباً في المكان الصحيح»، يبدو التصميم مهملاً، حتى لو كان كل عنصر وحده جميلاً. وكما تقول المصممة روبن ويليامز في كتابها الكلاسيكي عن أساسيات التصميم: لا يجب أن يوضع أي شيء على الصفحة بشكل عشوائي؛ كل عنصر يجب أن تكون له علاقة بصرية بعنصر آخر.

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

التقارب: اجمع ما ينتمي إلى بعضه

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

استخدم التقارب لتنظيم المحتوى في مجموعات واضحة. في الكارت الشخصي، اجعل الاسم والمسمى الوظيفي معاً، والتليفون والإيميل والموقع معاً، والعنوان منفصلاً. وفي صفحة الويب، يجب أن تكون المسافة بين الأقسام أكبر بوضوح من المسافة داخل القسم الواحد. وقاعدة عملية أعطيها للمصممين الجدد: حدد قيم المسافات مسبقاً (مثلاً 8 و16 و24 و48 و96 بكسل)، واستخدم القيم الصغيرة داخل المجموعات والقيم الكبيرة بينها. ستقلل الزحمة البصرية فوراً، وغالباً بدون أن تحذف عنصراً واحداً.

التكرار والاتساق: بناء نظام بصري

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

والتكرار هو قلب أي هوية بصرية. اللوجو وحده لا يصنع براند؛ ما يصنعه هو الاستخدام المتكرر لألوانه وخطوطه وعناصره الجرافيكية ونبرته في كل نقطة تواصل، كما أشرح في الفرق بين البراندنج وتصميم اللوجو. وهي أيضاً الفكرة وراء أنظمة التصميم وأدلة الهوية: قرر مرة واحدة، ثم كرر. والتكرار لا يعني الملل. كرر الهيكل وغيّر المحتوى، وستحصل على تصميم متسق وحي في الوقت نفسه. واختبار جيد: غطِّ اللوجو. هل ما زلت تعرف لأي براند ينتمي التصميم؟

الإيقاع والنمط: تكرار له نبض

عندما يُنظَّم التكرار في الزمان والمكان، يصبح إيقاعاً. وكما في الموسيقى، يُصنع الإيقاع البصري بتكرار العناصر بفواصل محددة، فتتحرك العين في التصميم وكأن له نبضاً. الإيقاع المنتظم يكرر العنصر نفسه بمسافات متساوية، مثل أعمدة مبنى أو بوستات في جريد إنستجرام. والإيقاع المتبادل يتنقل بين عنصرين أو أكثر، مثل صورة كبيرة ثم صغيرة. والإيقاع المتدرج يغيّر العنصر تدريجياً، فيكبر أو يغمق أو يقترب خطوة بعد خطوة. والإيقاع المنساب يتبع منحنيات عضوية، مثل الأمواج أو كثبان الرمل.

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

الحركة: توجيه العين داخل التصميم

الحركة هي المسار الذي تسلكه عين المشاهد داخل التصميم. حتى الصورة الثابتة يمكن أن تكون فيها حركة قوية إذا صُممت جيداً. وتصنعها بـالخطوط الموجِّهة (الطرق، والأذرع، والحواف، والأسهم)، والإشارات الاتجاهية (شخص ينظر أو يشير نحو العنوان)، والخطوط المائلة التي توحي بطاقة أكبر من الأفقية، والمنحنيات، وتدرج الأحجام من الكبير إلى الصغير، واتجاه القراءة في اللغة. وحتى نظرة الشخص في الصورة قوية جداً: المشاهدون يميلون إلى متابعة اتجاه العينين.

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

المساحة البيضاء: أكثر عنصر لا يأخذ حقه

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

فكّر في المساحة البيضاء على مستويين. المساحة الكبيرة هي الهوامش، والمسافات بين الأقسام، والمساحة التي تتنفس حول اللوجو. والمساحة الصغيرة هي ما بين سطور النص، وبين الحروف، وبين الأيقونة وعنوانها. والاثنتان مهمتان. ويمكن أن تحمل المساحة السلبية معنى أيضاً: السهم المختبئ بين حرفي E وx في لوجو FedEx مثال شهير على تصميم الشكل والأرضية، حيث تصنع المساحة الفارغة صورة ثانية. وعندما يقول العميل إن التصميم «شكله فاضي»، فغالباً تكون المساحة البيضاء هي التي تجعله يبدو غالياً. دافع عنها، واعرض النسخة المزدحمة بجانبها إذا احتجت.

المقياس والنسبة: علاقات أحجام تبدو صحيحة

المقياس هو حجم العنصر مقارنة بغيره أو بالعالم الحقيقي، والنسبة هي علاقة الحجم بين أجزاء الكل الواحد. المقياس يصنع الدراما والتسلسل: عنوان ضخم بجوار نص صغير جداً يبدو جريئاً وصحفياً؛ ومنتج صغير في مساحة فارغة كبيرة يبدو ثميناً. والمقياس غير المتوقع، مثل فنجان قهوة عملاق بجوار مبنى، يلفت الانتباه فوراً. أما النسبة فتصنع التناغم: عندما ترتبط الأجزاء ببعضها بطريقة ثابتة، يبدو الكل «مظبوطاً».

ويستخدم المصممون بعض الأنظمة الكلاسيكية. النسبة الذهبية (حوالي 1 : 1.618) تظهر في العمارة والفن وكثير من التصميمات واللوجوهات؛ وهي مفيدة كدليل، وليست معادلة سحرية. وقاعدة الأثلاث تقسم الإطار إلى شبكة 3×3 وتضع العنصر الرئيسي على إحدى نقاط التقاطع، وهذا غالباً يبدو أكثر حيوية من المنتصف تماماً؛ وهي قاعدة أساسية في التصوير والتكوين. وفي التايبوجرافي، المقياس النمطي للخطوط يضرب الأحجام في نسبة ثابتة (مثلاً 16 و20 و25 و31 و39 بكسل بنسبة 1.25)، فيرتبط كل مستوى عناوين بالمستويات الأخرى. وأياً كان النظام الذي تختاره، فالفكرة واحدة: الأحجام يجب أن تُقرَّر، لا أن تُخمَّن.

الوحدة والتنوع: تصميم واحد، وليس مجموعة أجزاء

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

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

مبادئ الجشطالت: كيف يرى المخ الكل

طُوِّر علم نفس الجشطالت في ألمانيا في أوائل القرن العشرين على يد علماء نفس مثل ماكس فيرتهايمر وفولفجانج كولر وكيرت كوفكا. وفكرته الأساسية أننا نرى الكل قبل الأجزاء: المخ ينظم ما نراه تلقائياً في مجموعات وأنماط. ومبادئ الجشطالت الأساسية تعطي المصممين تفسيراً علمياً لكثير من القواعد السابقة. التقارب: العناصر القريبة تصنع مجموعات. التشابه: العناصر التي تشترك في الشكل أو اللون أو الحجم أو الملمس تُرى مترابطة. الاستمرارية: العين تتبع الخطوط والمنحنيات وتفضّل المسارات الناعمة على التغييرات المفاجئة. الإغلاق: المخ يكمل الأجزاء الناقصة ويرى أشكالاً كاملة، ولهذا ينجح لوجو الباندا الخاص بـWWF بخطوط قليلة جداً.

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

الجريد والتخطيط: الهيكل وراء الصفحة

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

وأهم الأنواع: جريد المخطوطة (كتلة نص واحدة كبيرة، يُستخدم في الكتب)، وجريد الأعمدة (عمودان أو ثلاثة أو ستة أو اثنا عشر عموداً، ويُستخدم في المجلات وتقريباً كل المواقع)، والجريد المعياري (أعمدة وصفوف تكوّن وحدات، مثالي للمحتوى المعقد مثل الكتالوجات ولوحات البيانات)، وجريد السطور الأساسي (خطوط أفقية تقف عليها كل النصوص، فتتحاذى السطور عبر الأعمدة)، والجريد الهرمي الذي يُبنى حول المحتوى نفسه. وتعلّم أجزاءه: الهوامش حول الحواف، والفواصل بين الأعمدة، والوحدات حيث تتقاطع. وعلى الويب يجب أن يكون الجريد متجاوباً: اثنا عشر عموداً على الكمبيوتر قد تصبح أربعة على الموبايل. الجريد أداة وليس قفصاً: بعد أن يستقر، تستطيع كسره عن قصد لصنع التأكيد.

أساسيات التايبوجرافي: النص تصميم

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

ثم تحكّم في المسافات. المسافة بين السطور (الليدينج) للنص عادة حوالي 1.4 إلى 1.6 من حجم الخط. والتراكينج هو المسافة العامة في كلمة أو سطر؛ والحروف الكبيرة اللاتينية غالباً تحتاج إلى زيادة بسيطة. والكيرنينج يضبط المسافة بين أزواج محددة من الحروف، مثل «AV» أو «To»، وهو ضروري في اللوجوهات والعناوين. حافظ على طول سطر مريح، حوالي 45 إلى 75 حرفاً في السطر في النص اللاتيني. وتجنب الكلمات والسطور اليتيمة التي تُترك وحدها. واعرف الفرق بين الوضوح (هل يمكن التعرف على كل حرف؟) وسهولة القراءة (هل النص الطويل مريح في القراءة؟). وفي التصميم العربي، احترم الخط: الحروف العربية متصلة، وليس فيها حروف كبيرة، وتحتاج إلى مسافات سطور واسعة من أجل النقاط والتشكيل، وتبدو أفضل في خطوط صُممت للعربية، وليس في نسخ مولّدة تلقائياً من خطوط لاتينية.

البساطة والوظيفة: الشكل يتبع الوظيفة

عبارة «الشكل يتبع الوظيفة»، التي صاغها المعماري لويس سوليفان، تعني أن شكل التصميم يجب أن يأتي من هدفه. لافتة الطريق يجب أن تُقرأ في ثانية واحدة بسرعة عالية، ولهذا هي بسيطة وعريضة وعالية التباين. ودعوة الفرح لها وظيفة مختلفة، ولهذا يمكن أن تكون مليئة بالتفاصيل والزخارف. قبل أن تختار الأسلوب، اسأل ماذا يجب أن يفعل التصميم: يُعلِم، أو يبيع، أو يوجّه، أو يسلّي، أو يبني الثقة. والإجابة تخبرك بأي الأسس تبدأ.

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

الوضوح وسهولة الوصول: صمّم للجميع

التصميم الذي لا يستطيع الناس قراءته أو استخدامه قد فشل، مهما كان جميلاً. سهولة الوصول تعني أن تصمم بحيث يستطيع أكبر عدد ممكن من الناس استخدام شغلك، بمن فيهم أصحاب ضعف النظر، وعمى الألوان، وعسر القراءة، وصعوبات الحركة، وكبار السن، وأي شخص يستخدم موبايل صغيراً في شمس قوية. وهذا ليس مطلباً لفئة صغيرة؛ ففي وقت ما ينطبق علينا جميعاً. وعلى الويب، تعطي إرشادات سهولة الوصول لمحتوى الويب (WCAG) أهدافاً واضحة، مثل نسبة تباين لا تقل عن 4.5 : 1 للنص العادي.

وبعض القواعد الأساسية تنطبق على كل الوسائط. اجعل النص كبيراً بما يكفي: حوالي 16 بكسل على الشاشات، وعادة من 9 إلى 12 نقطة في الطباعة حسب الخط. واستخدم تبايناً قوياً في القيمة بين النص والخلفية. لا تستخدم اللون وحده أبداً للتعبير عن معنى؛ أضف عنواناً أو أيقونة أو نمطاً. واجعل الأزرار والروابط كبيرة بما يكفي للضغط عليها، على الأقل حوالي 44 بكسل. واكتب نصاً بديلاً له معنى للصور على الويب. ولا تكتب النصوص الطويلة بحروف كبيرة كلها، أو بأوزان رفيعة، أو بخطوط زخرفية. واختبر شغلك بالأبيض والأسود وعلى موبايل حقيقي. التصميم السهل الوصول غالباً تصميم أفضل للجميع: أوضح، وأهدأ، وأسهل في الاستخدام.

السياق والجمهور والهدف: المبدأ الذي فوق كل المبادئ

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

ولهذا فإن البريف ومرحلة البحث ليسا اختياريين. التصميم الجيد ليس ما يحبه المصمم، ولا حتى ما يحبه العميل؛ بل ما ينجح مع الجمهور ويحقق الهدف. والسياق يشمل المنافسين أيضاً: التصميم الجميل الذي يشبه تماماً كل منافس في السوق يفشل في أن يُلاحَظ. ويشمل الوسيط: بوث المعرض يجب أن يُفهم من على بعد عشرة أمتار في ثلاث ثوانٍ، بينما غلاف الكتاب يجب أن ينجح كصورة مصغرة على الإنترنت. وعندما يختلف المصممون حول تصميم، يجب أن يعود النقاش دائماً إلى السياق والأهداف، وليس إلى الذوق الشخصي، وهذه أيضاً أفضل طريقة لعرض أعمالك كمصمم على العملاء.

كسر القواعد، وقائمة مراجعة قبل التسليم

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

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

المبدأ	ماذا يفعل	اختبار سريع
التوازن	يوزّع الوزن البصري ليبدو التصميم ثابتاً	ضيّق عينيك: هل يبدو جانب أثقل بدون سبب؟
التباين	يجعل الاختلافات واضحة والأشياء المهمة ظاهرة	إذا كان الشيئان مختلفين، هل هما مختلفان بوضوح؟
التأكيد	يصنع نقطة تركيز واحدة	ما أول شيء تراه؟
التسلسل البصري	يحدد ترتيب القراءة	بعد 5 ثوانٍ، ماذا يتذكر المشاهد؟
المحاذاة	يربط العناصر بخطوط خفية	هل كل عنصر على خط واحد مع شيء آخر؟
التقارب	يجمّع العناصر المترابطة ويفصل الباقي	هل المسافة بين المجموعات أكبر من المسافة داخلها؟
التكرار	يبني الاتساق والتعرف على البراند	غطِّ اللوجو: هل ما زال البراند معروفاً؟
الإيقاع	يحرّك العين بنبض بصري	هل يبدو المحتوى الطويل متنوعاً وليس رتيباً؟
الحركة	يوجّه العين على مسار مخطط	هل يسحب شيء العين للخارج مبكراً؟
المساحة البيضاء	تعطي التركيز والوضوح والإحساس بالجودة	هل يتنفس التصميم؟
المقياس والنسبة	يصنعان الدراما والتناغم بين الأحجام	هل الأحجام مقررة بنظام، لا بالتخمين؟
الوحدة والتنوع	يجعلان الأجزاء تصميماً واحداً، مع عنصر جذب	هل كل الخطوط والأيقونات والصور تنتمي إلى بعضها؟
الجشطالت	يستغل طريقة المخ في تجميع ما يراه	هل يرى المخ المجموعات التي قصدتها؟
الجريد	يعطي الهيكل والاتساق	هل يوجد هيكل أعمدة واضح؟
التايبوجرافي	يجعل النص مقروءاً ومعبّراً	هل طول السطر والمسافات والحجم مريحة؟
البساطة	تحذف كل ما لا يخدم الرسالة	هل يمكن حذف شيء بدون خسارة؟
سهولة الوصول	تجعل التصميم صالحاً للجميع	هل يعمل بالأبيض والأسود وعلى الموبايل؟
السياق	يناسب الجمهور والثقافة والوسيط والهدف	لمن التصميم، وماذا يجب أن يفعلوا بعده؟

أسس التصميم: أسئلة شائعة

ما هي أسس التصميم الرئيسية؟

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

ما الفرق بين عناصر التصميم وأسس التصميم؟

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

ما أهم مبدأ في أسس التصميم؟

لا يوجد مبدأ واحد هو الأهم، لأنها تعمل معاً. لكن في معظم المشاريع العملية، التسلسل البصري والتباين بداية جيدة، لأنهما يحددان ما يراه المشاهد أولاً وكيف يقرأ الباقي. والسياق يأتي قبلها كلها، لأنه يخبرك بأي الأسس أهم.

ما هي مبادئ الجشطالت في التصميم؟

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

هل يمكن للمصمم أن يكسر أسس التصميم؟

نعم، لكن عن قصد فقط. كسر القاعدة يمكن أن يصنع توتراً أو طاقة أو مفاجأة عندما يخدم الرسالة. وينجح أكثر عندما يفهم المصمم القاعدة جيداً ويكسر مبدأً واحداً في كل مرة مع الحفاظ على قوة المبادئ الأخرى.

لماذا لا يتناول هذا الدليل نظرية الألوان؟

اللون أحد عناصر التصميم، ونظرية الألوان (عجلة الألوان، والتناغمات، والتباين، وسيكولوجية الألوان) موضوع كبير يحتاج إلى دليل مستقل. وسيكون لها مقال منفصل على هذه المدونة.