الخطايا السبع المميتة في تصميم الويب التي ستقضي على مستقبلك كمصمم!!

نصائح لتصميم الويب
2

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

لتصبح مصمم ويب محترف هنالك خطايا سبع مميتة عليك تجنبها بشكل كامل وإلا على الدنيا السلام وقل وداعًا لموقعك ومسيرتك المهنية !


اللون الرمادي على خلفية بيضاء

نصائح لتصميم الويب

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

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

نصائح لتصميم الويب

لكن لا تقلق هنالك العديد من الأدوات المساعدة 🤩

  • الشيء الأول الذي يجب أن تعرفه أن دليل W3C ينص على ما يلي: يجب أن تحقق درجة تباين تبلغ 4.5:1 لمعظم النص.. تحقيق ذلك يعتبر خطوة ابتدائية جيدة.
  • أداة قياس التباين Contrast Ratio التي طورتها Lea Verou، تعتبر أداة فعالة وجيدة جدًا للحصول على المعلومات الرياضية الخاصة بكل لون، وتحوي أيضًا على عينات نصية لترى كيف تبدو الألوان مع بعضها البعض.

نصائح لتصميم الويب

  • موقع Colorable أيضًا يمكن أن يساعدك في ذلك، يعرض لك النص على الخلفية ويمكنك اللعب بالدرحات اللونية إلى أن تصل للون المناسب.

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


النوافذ الشرطية

نصائح لتصميم الويب

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

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

يوفر موقع MODALZ MODALZ MODALZ نصائح حول خيارات بديلة عندما تأتيك الرغبة باستخدام النوافذ الشرطية.

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


حجوم الصور الكبيرة والعشوائية !

نصائح لتصميم الويب

الصور كبيرة الحجم من أكبر الكوارث التي تجعل من المحبط تحميل صفحات موقعك، أو باللغة المحكية تجعل الصفحة ثقيلة! وتحسين حجم الصور من أسهل الأمور التي يمكنك فعلها لتحسين أداء موقعك.

يمكنك العودة إلى الكتاب الإلكتروني Essential Image Optimization، من أجل تعلم المزيد حول كيفية تحسين حجم الصور. لكن إن كنت لا تمتلك طول البال الكافي، فالمؤلف يتيح لك أداة the tl;dr في أعلى الصفحة، التي توجهك نحو مصادر يوصي بها لضغط الصور الآلي، وأدوات أخرى فعالة إن لم ترغب بأتمتة العملية.


رمي أهمية الأداء عرض الحائط !

نصائح لتصميم الويب

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

في الواقع سيتجه معظم المستخدمين لتصفح مواقع سريعة لا تخدم أهدافهم على انتظار تحميل الموقع الذي يرغبون به حقًا ويحوي المعلومات التي يريدونها!

وبالطبع، فإن هذا التعصب ضد البطء له تأثير كبير على تحويل الزوار لموقعك. فوفقًا للأرقام، قد يؤدي إبطاء وقت التحميل من 2.4 إلى 3.3 ثوان إلى فقدان ربع معدل تحويلات الزائر إلى مشتري.

من الواضح أن السرعة يجب أن تكون في أعلى قائمة أولوياتك إن كنت تريد تقديم تجربة مستخدم جيدة ومضاعفة معدل التحويل لديك… ومن ناحية أخرى فكر كمستخدم قبل أن تفكر كمصمم!


استخدام اطار العمل الخاطئ!

نصائح لتصميم الويب

إن خصصت وقتًا لتعلم إطارات العمل الكبيرة مثل React أو Angular فستغريك حتمًا لتستخدمها في كل مشاريعك، لكن وضع مقادير كبيرة من الأكواد المتسلسلة وتقديم تكنولوجيا معقدة والعديد من البهارات والتفاصيل لموقع بسيط لا يعتبر خيارًا حكيمًا!

لم قد “تصنع من الحبة قبة” عندما يكون الموقع الستاتيكي أسرع وأكثر مرونة؟

في بعض الأحيان يكون كتابة كل شيء من الصفر هو القرار الصحيح للمشاريع المعقدة جدًا، حيث تمنحك تحكمًا أكبر بمحتوى الموقع وينتهي بك الأمر مع أساس كود مرن أكثر وتفاصيل أقل!


حجم الخط المجهري 🧐

نصائح لتصميم الويب

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

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

هناك أثر جانبي آخر مثير للاهتمام لاستخدام خط أكبر هو أنه يحسن كتابة الإعلانات لأنه يشجعك على استخدام كلمات أقل!

اقرأ أيضًا: هل ترغب بالتعرّف على نوع أيّ خط في صفحات الويب؟ .. إليك الطريقة


عدم جعل المستخدم أولوية

نصائح لتصميم الويب

كيف ينتهي بك الأمر بتصميم موقع سيء للغاية؟ ببساطة خذ طلبات العميل بعين الاعتبار وتجاهل احتياجات المستخدم كليًا!

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

أنت توجه موقعك لمستخدم وهذا ما عليك التركيز عليه ..

2

شاركنا رأيك حول "الخطايا السبع المميتة في تصميم الويب التي ستقضي على مستقبلك كمصمم!!"

أضف تعليقًا