أسس ومعايير تصميم الموقع الالكتروني

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

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

مثل هذا الإختلاف في وجهات النظر لا يمنع بالطبع من وجود خطوط عامة يمكن الإعتماد عليها كأسس أو معايير في عملية تصميم وتنفيذ الموقع الالكتروني.

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

أولاً: أهم المقترحات على مستوى التصميم وتفاعل الزائر

رتب عناصر الصفحة

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

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

يوضح الشكل أعلاه مفهوم الشاشة الأولى أو الجزء العلوي من الصفحة وهو أول ماتقع عليه عين الزائر عند زيارة الموقع
يوضح الشكل أعلاه مفهوم الشاشة الأولى أو الجزء العلوي من الصفحة وهو أول ماتقع عليه عين الزائر عند زيارة الموقع

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

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

حافط على التسلسل الهرمي للمكونات بصرياً Visual Hierarchy

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

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

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

  • الإهتمام بنماذج المسح البصري المختلفة (تنقل العين من اليسار إلى اليمين على هيئة حرف F أو حرف Z في المحتوى الغير العربي، وربما يكون العكس صحيح في المحتوى العربي).
  • اعتماد مبدأ التباين في الألوان.
  • الإستفادة من الإختلاف في الأحجام كما في الخظوط مثلاً بحيث يتم اعتماد مبدأ التدرج في الأحجام بين العناوين الكبيرة والنصوص العادية.
  • اعتماد مبادئ التكرار والتقارب وقانون الثلث (تقسيم الصفحة إلى 3 أعمدة).

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

استفد من المساحات البيضاء أو السلبية Negative space

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

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

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

كيفية الإستفادة من المساحات البيضاء أو الفارغة في الصفحة لتساعد بذلك في التركيز على العنصر المراد ملاحظته
الصور التالية توضح كيفية الإستفادة من المساحات البيضاء أو الفارغة في الصفحة لتساعد بذلك في التركيز على العنصر المراد ملاحظته

اختر ألوانك بعناية

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

الطريقة المتبعة هي تقسيم المكونات الموجودة بالصفحة أو الموقع ككل من حيث الألوان إلى مكونات أولية Primary ومكونات ثانوية Secondary ومتعادل Neutral، والذي يستخدم عادة كخلفية، بحيث يأخذ كل مكون من هذه المكونات لون محدد لتشكل هذه الألوان مجتمعة ما يعرف بلوحة الألوان.

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

عجلة الألوان والألوان الأولية والثانوية والثلاثية
عجلة الألوان والألوان الأولية والثانوية والثلاثية وكيفي اشتقاق الألوان منها

تظهر عجلة الألوان أو دائرة الألوان أعلاه الأنواع التالية من الألوان:

  1. الألوان الأولية أو الأساسية Primary Colors (الألوان التي تحمل الرقم 1).
  2. الألوان الثانوية Secondary Colors وأي لون ثانوي هو نتيجة مزج لونين أوليين أو أساسين (الألوان التي تحمل الرقم 2).
  3. الألوان الثلاثية أو ألوان الدرجة الثالثة Tertiary Colors وأي لون ذو درجة ثالثة هو نتيجة مزج لون أساسي ولون ثانوي (الألوان التي لا تحمل أرقام).

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

  1. نظام الألوان التكميلي Complementary color scheme
    هذا النظام يتكون من كل لونين متقابلين على عجلة الألوان
  2. نظام الألوان المتماثلة Analogous color scheme
    ويمثل هذا النظام الألوان التي تقع إلى جنب بعضها البعض على عجلة الألوان
  3. نظام الألوان الثلاثية Triadic color scheme
    إذا قمت برسم مثلث داخل الدائر الداخلية لعجلة الألوان فإن الألوان التي تشير إليها رؤوس المثلث الثلاثة تكون معاً نظام الألوان الثلاثية.
  4. نظام الألوان الرباعي (المربع) Square color scheme
    بالمثل، فإن رسم مربع أو مستطيل داخل عجلة الألوان سينتج نظام من أربع ألوان يسمى النظام الرباعي المربع في حال استخدام المربع، أو النظام الرباعي المستطيل في تم رسم مستطيل داخل العجلة.

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

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

لا تتردد في استعمال الصور

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

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

اختر خطوطك بعناية

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

احرص دائماً على اختيار ما يسمى بالخطوط الآمنة الخاصة بالتصميم على شبكة الإنترنت Web Safe Fonts وهي الخطوط التي يمكن عرضها على مختلف أنواع أجهزة الحاسوب وكمثال عليها خطوط جوجل Google Fonts.

هناك 3 قواعد مهمة يجب مراعاتها في اختيار الخطوط والإستفادة منها في تصميم صفحات الويب وهي:

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

لتوضيح هذه القواعد المختلفة يمكن مثلاً اعتماد خط رئيسي أو أولي لكتابة العناوين العرضة أو الرئيسية بالصفحة، مع استخدام الخط الثانوي لعرض النصوص والفقرات النصية بالصفحة، وأخيراً يمكن تعيين الخط الثالث مثلاً للأزرار أو دعوة الزائر لتنفيذ أعمال معينة على الصفحة Call-to-Action.

اجعل التنقل بين صفحات الموقع سهلاً

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

يمكن تقسيم محتوى الموقع على سبيل المثال إلى محتوى رئيسي وآخر فرعي بحيث يمكن الوصول لهذا المحتوى من خلال قوائم مفصولة ليس مكانها بالضرورة أن يكون على الصفحة الرئيسية.

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

ثانياً: أهم المقترحات على مستوى الأداء

ابن موقع متجاوب Responsive website

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

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

اجعل سرعة تحميل الموقع من ضمن أولوياتك

من منا يرغب في الإنتظار طويلاً ريثما يتم تحميل وعرض مكوناته!

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

  • استخدام الصور المضغوطة ذات الإمتداد المناسب.
  • اعتماد الشبكات الخارجية CDN في تحميل بعض مكتبات الملفات الضرورية في التصميم مثل ملفات الجافاسكريبت.
  • تكون أولوية التحميل لملفات CSS على أن يتم استدعاء ملفات الجافاسكريبت في آخر الصفحة.
  • التأكد من حسن كتابة كود الموقع من الناحية البرمجية.
  • حسن استخدام ما يعرف بالتخزين المسبق أو Caching.
  • استضافة الموقع على خوادم سريعة.

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

ختاماً

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

مواقع اختيار وتكوين الألوان:
https://color.adobe.com/create
https://coolors.co/

مواقع قياس الأداء والسرعة:
https://developers.google.com/speed/pagespeed/insights/
https://gtmetrix.com/

صورة الغلاف من موقع Pixeden