التصميم الجرافيكي للمواقع الإلكترونية

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

التسلسل البصري قبل كلّ شيء

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

الخطوط تؤدّي تسعين بالمئة من العمل

• عائلتان خطّيتان كحدّ أقصى. واحدة للعناوين وأخرى للنصّ. ما زاد عن ذلك يُفقد الموقع هويّته ويزيد وزن التحميل.
• سُلّم أحجام لا أحجام عشوائية. حدّد خمسة أو ستة أحجام متناسقة ولا تخرج عنها أبداً.
• طول السطر بين 55 و75 حرفاً. هي القاعدة الأكثر انتهاكاً والأكثر مردودية عند احترامها؛ فبعدها تفقد العين بداية السطر التالي.
• تباعد أسطر سخيّ. من 1.6 إلى 1.75 في النصّ العادي، وأكثر من ذلك في العربية لأنّ حروفها وتشابكاتها تحتاج مساحة تنفّس.

التصميم بالعربية: ما الذي يتغيّر فعلاً

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

اللون أداة وظيفية لا زينة

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

من البصري إلى التحويل

1. حدّد الإجراء الأولوي لكلّ صفحة قبل فتح أي أداة تصميم.
2. ضع هذا الإجراء في الجزء الظاهر من الشاشة ثم كرّره في أسفل الصفحة.
3. احذف كلّ عنصر لا يساعد على الفهم ولا على القرار ولا على الفعل.
4. تحقّق من النتيجة الفعلية على هاتف متوسّط الفئة لا على شاشة استوديو.

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