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


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