المواقع المميزة، لا تكون متميزة في التخصص والمحتويات فقط، بل تجمع مع ذلك التصميم الجيد، والتصميم الجيد يخدم محتويات الموقع ويعرضها بشكل يجعل الزائر يركز على المحتويات ولا يشتت ذهنه شيء آخر، ويسهل على الزائر التنقل بين أقسام الموقع والاستفادة من خدمات الموقع، وكم رأيت مواقعاً ذات محتوى متميز و التصميم يفسد هذا المحتوى فلا أكمل تصفح الموقع، وربما زوار الموقع يفعلون كما أفعل، فلا يؤدي الموقع رسالته التي أنشأ لأجلها. في هذا الدرس سنتحدث عن عن سبع نقاط أساسية في مجال التصميم، إن طبقتها في موقعك ستتجنب الكثير من الأخطاء التي يقع فيها مصمموا المواقع، وبالتالي سيكون تصفح الموقع بالنسبة للزوار أسهل.
وتذكر دائماً: أنظر بعين زوار موقعك حينما تصمم الموقع
1) اختيار الألوان المناسبة:
لا تستخدم في موقعك أكثر من أربعة ألوان، ولا تكتفي بلون واحد! هناك مواقع تستخدم كل لون يمكن استخدامه، فتضع الأحمر الفاقع مع الأصفر والأسود والأزرق في خلطة عجيبة، والنص ملون بألوان مغايرة، فيكون الموقع كدفاتر الرسم للأطفال، ويصاب الزائر بعمى الألوان ولا يستطيع أن يقرأ أو يركز على شيء ما في الموقع، وهناك مواقع تستخدم لوناً واحداً للتصميم بشكل يجعل عملية التركيز على المحتويات أمراً متعباً للعينين.
بالنسبة للمواقع المتخصصة والمواقع الرسمية وكذلك المواقع التي تقدم محتويات كثيرة، فلا بد من استعمال اللون الأبيض كخلفية للمحتويات، أما التصميم العام فالألوان يجب أن تكون هادئة ومتناسقة ولا تتعب العينين، بالنسبة للمواقع الشخصية والصغيرة هناك مجال لاختيار ألوان أخرى كالأسود مثلاً أو أي لون آخر، وإليكم قائمة صغيرة، لبعض الألوان المستخدمة في المواقع:
أزرق، رمادي، أبيض
أصفر، أحمر، رمادي
أحمر، رمادي، أبيض
أخضر، رمادي، أبيض
أزرق، برتقالي، أبيض
أحمر، بيج، أبيض
لاحظوا تكرار اللون الأبيض والرمادي، وهذه ألوان محايدة تستطيع أن تضعها مع أي مجموعة من الألوان، وكذلك الأسود، وسيكون لنا درس قادم مخصص للألوان فقط
2) التوافق مع المتصفحات المختلفة:
معظم المستخدمين العرب يستخدمون متصفح Internet Explorer من مايكروسوفت، فلن تكون هناك مشكلة في مسألة التوافق مع المتصفح، لكن هناك من يستخدم إصدارات قديمة من إكسبلورر، او يستخدم Netscape أو Opera أو Mozilla وهناك من يستخدم أنظمة تشغيل أخرى كنظام Linux أو ماكنتوش، ولذلك يجب أن تتأكد من أن موقعك يظهر بشكل جيد مع معظم المتصفحات، ويكون هذا الأمر أكثر أهمية لو كان الموقع مخصص للتجارة الإلكترونية أو موقع رسمي لمؤسسة ما أو موقع متخصص في مجاله، لذلك يجب أن تتأكد قبل استخدامك لأي تقنية جديدة أنها متوافقة مع معظم المتصفحات، وإلا سيظهر موقعك بشكل غير متوقع في متصفحات الزوار الغير متوافقة مع تقنيات الموقع، ولا تستخدم أية تقنية كالفلاش أو الجافا لمجرد أنك تعرف استخدامها! فقط في حالة وجود فائدة أكيدة أستخدمها كما يحلو لك
وعليك أن تتأكد من أن الموقع يظهر بشكل جيد على عدة كثافات للشاشة، فبعض المواقع تصمم على أساس شاشة بكثافة 786 × 1024، سيظهر هذا الموقع في شاشة ذات كثافة أقل بشكل يحتاج فيه الزائر إلى أن يستخدم شريط التمرير الأفقي لكي يرى المحتويات التي لا تظهر في الشاشة، وهناك برامج تساعدك على اكتشاف أية أخطاء من هذا النوع، أطلع على هذا الموقع وستجد الكثير منها: http://download.cnet.com
3) نظام تصفح جيد:
يحتاج زائر أي موقع إلى أن يتنقل بين أقسام الموقع بكل يسر وسهولة، وأي صعوبة يجدها الزائر في فعل ذلك سيؤدي إلى ابتعاده عن الموقع، يجب أن تكون المادة على بعد خمس نقرات من الفأرة على الأكثر، وكلما قل العدد كان ذلك أفضل، أما التنقل بين الأقسام فيجب أن يكون واضحاً سهلاً منطقياً، فلا تدخل زوار موقعك في متاهات لا يفهمونها، صمم نظام تصفح موقعك وأنت تنظر بعين زوار الموقع، وسيكون أيضاً لنا درس مفصل حول نظام التصفح في الموقع
4) تنظيم المحتويات:
لديك محتويات بأشكال وأنواع، لا يمكنك أن تضعها في صفحة واحدة، أو أن تجعل الموقع عبارة عن صفحة واحدة رئيسية فيها كل الوصلات للمحتويات الموجودة في موقعك، لا بد من تنظيم مبسط ومنطقي للمواد، بحيث تكون المواد المتشابهة في التخصص والنوع في قسم واحد، فالمقالات في قسم، والدروس في قسم آخر، والأخبار في ثالث وهكذا، وإن وضعت كل شيء في مكان واحد لن يستطيع الزائر أن يركز على ما يريده، وتذكر أن الزائر وقته ثمين ولا يريد تضييع وقته في البحث عن المواد.
أما المحتويات الكبيرة فلا بد من تقسيمها على صفحات، لا يمكنك مثلاً أن تضع درساً يحوي على عشرات الصور وآلاف الكلمات في صفحة واحدة، يستغرق ذلك وقتاً طويلاً لكي تظهر الصفحة كاملة لدى الزائر، قسم المادة إلى صفحات متعددة، واجعل المواد في كل صفحة قصيرة وسريعة القراءة.
5) تصميم واحد فقط:
هذه النقطة بسيطة، هناك مواقع تصمم لكل صفحة تصميماً خاصاً بها، وهذا مربك للزائر حيث لا يستطيع أن يفهم إن كان لا يزال في الموقع أم أنه انتقل لموقع آخر، صمم الموقع بواجهة واحدة، ولا تجعل أي صفحة من صفحات موقعك تختلف في تصميمها عن بقية صفحات الموقع.
6) الوصلات:
أسميها الوصلات أو الروابط، أو البعض لا يجد سوى تسميتها لنكاتسمها ما شئت، عليك أولاً أن لا تضع خطاً تحت أي كلمة في موقعك ما لم تكن هذه الكلمة رابطاً لصفحة أخرى، لأن متصفحي الشبكة العالمية تعودوا على أن تكون الكلمات التي في أسفلها خط عبارة عن رابط ينقل المتصفح نحو صفحة أخرى، ثانياً: ميز الوصلات والروابط إما باللون أو بوضع خط أسفلها أو بكلاهما، لا تجعل الروابط متشابهة مع النص بحيث لا يستطيع الزائر التفريق بينهما.
أما الوصلات التي تؤدي إلى مواقع أخرى، فجعلها تظهر في صفحة جديدة من المتصفح، فلا يخرج الزائر من موقعك
7) الصور:
لا تستخدم الصور إلا عند الحاجة فقط، ولا تضع صوراً متحركة أبداً إلا الإعلانات فهذه لها شأن آخر، واحرص على أن لا يكون حجم الصور في الصفحة الواحدة أكبر من 80 كيلوبايت، وقم بضغط الصور وتصغير حجمها بقدر ما تستطيع، حتى لا تهدر هذه الصور وقت الزائر، فيسأم من الموقع.
أما الصور الكبيرة، فضع صور مصغرة لها، بحيث يضغط الزائر على الصورة المصغرة فتظهر له في صفحة جديدة، الصورة مكبرة وواضحة.
إليكم هذه المواقع ذات التصميم الجيد كما أرى، أدرس الألوان والتصميم وكيفية وضع المحتويات فيها:
www.cardesignnews.com
www.sitepoint.com
مواقع ذات تصميم سيء (ما أكثرها
www.scopesys.com
www.lessemf.com
ملاحظة أخيرة: ستكون هناك دروس قادمة عملية، نقوم فيها بتصميم الموقع خطوة خطوة، والصبر زين
