ما يجب على المطور معرفته عندما يقرر خوض تجربة التصميم

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

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

ملاحظات عامة

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

التصميم حس فني قبل كل شيء

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

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

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

أريد التأكيد على أمر في غاية الأهميّة، وهو محاولة فهم عقليّة المستخدم، أمعن في التفكير فيما يكره ويُحب المستخدم، هل هو في عجلةٍ من أمره؟ ما هو مقصده الأساسي؟ ما هو مقدار التشتت المتوقّع من المستخدم؟ حاول جاهدًا الدخول إلى ذهن المستخدِم، سيكون ذلك أمرًا مساعدًا لك في التصميم بالتأكيد.

تجنب تطبيقات التصميم الاحترافية

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

ألا يكفي فهم وتطبيق مبادئ التصميم نفسها؟ لماذا يجب تعلّم استخدام تطبيق جديد، أنت كمطوّر يتقن كتابة الشيفرة، يستحسن بك تصميم الموقع باستخدام CSS و HTML على اعتبار أنها الأدوات التي تتقنها بالفعل، طبعًا لن يكون التصميم ساحرًا آسرًا، ولكن هذا ليس الهدف من الأساس.

لا تحاول وصول عنان السماء بالتصميم بل حاول أن تكون موضوعيا

لا تحاول تصميم مواقع إبداعيّة أو مبتكرة، فيصعب الأمر حتى على محترفي التصميم، حاول فعل ذلك وسينتهي بك المطاف بتصميم يحبّه الأقليّة مقابل أكثريّة تكرهه.

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

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

النصائح العملية

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

الخطوط Typography

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

حاول دائمًا الثبات على تنسيق واحد في كامل التصميم/التطبيق، فإن كان أحد العناوين بحجم ووزن معيّن في أحد الصفحات، تأكّد من أنّه على نفس السويّة في باقي الصفحات، خاصّة وأن CSS تجعل من هذه المهام سهلة التطبيق في المجمل.

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

استخدم المساحات البيضاء whitespace

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

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

النظام الشبكي

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

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

قد يبدو النظام الشبكي مقيّدًا لعمليّة التصميم ولا يحث على الإبداعيّة ولكنّه أمر أساسي لنجاح أي تصميم.

الألوان

يُعتبر التعامل مع الألوان أمرًا ليس بالهيّن، وطالما لديك المجال تجنّب استخدام الكثير من الألوان، لا بل من الأفضل استخدام أدوات آليّة في توليد الألوان، مثل أداة الألوان المقدّمة من شركة أدوبي Adobe Color CC، حيث تسمح لك هذه الأداة إما بالاختيار من مجموعة ألوان موجودة بالفعل أو إنشاء مجموعة لونيّة جديدة تُناسب الهويّة البصريّة/اللونيّة للموقع corporate colour.

لاحظ أنها تتضمّن على خمسة ألوانٍ في اللوحة الواحدة، وهذا أمر حسن في الحقيقة، لا تُفرط في استخدام عديد الألوان، ولا تنس الاستفادة من تباين الألوان في التمييز بين المحتوى الهام والمحتوى الأهم، لأن التباين في الألوان هو الطريقة الأفضل في تمييز المحتوى وليس تعدّد الألوان.

الصور

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

يُمكن لاختيار الصور أن يكون صعبًا، ولكن إليك بعض الاقتراحات التي ستوجهك نحو الطريق الصحيح في الاختيار:

• تجنّب استخدام الصور المتحركة.
• اختر الصور ذات الأماميّة foreground (صدر الصورة) القويّة
• اضغط الصور (compression) ولكن لا تبالغ في الضغط.
• استخدم الوجوه، فهي تجذب نظر الزوّار.
• تجنّب استخدام القصاصات الفنيّة clipart.

خاتمة

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

ترجمة وبتصرف للمقال: When developers design لصاحبه: Paul Boag.