ما هي أسس تصميم موقع الكتروني احترافي على مستوى التصميم والتفاعل؟

1. رتب أقسام وصفحات الموقع بشكل مميز

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

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

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

2. حافظ على قواعد التسلسل الهرمي البصري

التسلسل الهرمي البصري هي مجموعة من القواعد التي يمكن للمصمم المواقع اتباعها عند تنظيم وترتيب العناصر المهمة في صفحات الموقع وفق معطيات ومعايير معينة تجذب الزائر وتلفت نظره

هناك بعض الأساسيات يجب إلمام بها عند توزيع عناصر ومكونات الصفحة:

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

3. يجب عليك أن تستفد من المساحات البيضاء

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

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

4. اختر ألوان موقعك بذكاء وبتأني

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

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

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

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

لكن هناك أنظمة لونية تساعدك على مزج الألوان عند تصميم موقع الكتروني وتمنحك القدرة على اختيار الألوان وجعلها متناغمة وهي:

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

5. استعمل الصور ذات الجودة العالية

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

6. حدد خطوط الموقع بذكاء

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

7. امنح موقعك المرونة والسرعة في التنقل !

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

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