مبادئ التصميم الغرافيكي

من أين جاءت هذه المبادئ الخمسة؟

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

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

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

ما مشكلة ملصق كل عناصره بالحجم نفسه؟

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

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

وما الذي يحدد المرتبة؟ سؤال المتلقي، لا الأهمية التي يعلقها العميل على العناصر. العميل يرى شعاره أهم شيء، والمار يريد أن يعرف ماذا يجري ومتى. وحين يتعارض الاثنان، عليك أن تشرح أن شعارا كبيرا على ملصق لا يقف أحد ليقرأه لا يوصل شيئا إلى أحد. وهذه هي الجملة التي قلنا إنها تحدد سعر العمل.

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

التباين ليس داكنا مقابل فاتح فقط

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

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

وجزء من التباين له رقم، ويستحق أن تستعير ذلك الرقم. يقول معيار WCAG إن نسبة السطوع بين النص وخلفيته ينبغي ألا تقل عن ٤٫٥ إلى ١، وأن ٣ إلى ١ تكفي للنص الكبير. كُتب هذا المعيار لصفحات الويب، ومع ذلك فالرمادي الفاتح على الأبيض الذي يبدو أنيقا في معارض الأعمال لا يجتازه هناك أيضا، ولا يُقرأ في الطباعة.

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

الخط غير المرئي الذي يجب أن يستقر عليه كل شيء

المحاذاة تعني أن يكون لكل عنصر على الصفحة علاقة بصرية بعنصر آخر، لا أن يكون موضوعا في مكان ما فحسب. العين تجد الحواف، بما فيها حواف لم تُرسم قط، والعنصر الذي يخرج قليلا عن إحداها يُقرأ خطأ لا تنويعا.

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

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

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

الفراغ والتكرار، أقل مبدأين تطبيقا

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

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

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

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

أي من هذه المبادئ يمكن كسره؟

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

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

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