درس] إعادة تصميم شبكة البرامج العربية والمعربة

--------------------------------------------------------------------------------

إكمالاً للمقال السابق [مواقع مهرجة]


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

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


التصميم

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

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

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