عملية تجميل لموقع جيسترا التعريفي

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

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

على صعيد التصميم

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

كان همي الأكبر تحسين وقت التحميل عبر إلغاء جميع صورة الخلفية، وتحسين الأداء عبر التقليل من التأثيرات (وخصوصاً على صعيد استخدام JavaScript).

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

وبالنسبة لـ CSS

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

طبعاً ملفات LESS يجب ترجمتها إلى CSS لتعمل على المستعرضات، وقد قمت باستخدام برمجية SimpleLESS لترجمة الملفات وضغطها بشكل تلقائي عند حفظها.

التصميم تجاوبي طبعاً، وقد استخدمت فيه منهجية التصميم للأجهزة المحمولة أولاً (Mobile First).

يضاف لذلك استخدامي لخط أيقونات (Icon Font) قمت بتوليده من موقع Fontello.

لم أخرج JavaScript من اللعبة

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

حان الوقت لبعض النقد الذاتي

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

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

نرجو أن تخصصوا بضع دقائق لزيارة الموقع الجديد وإبداء آرائكم.

أعتقد أن الوقت قد حان أيضاً لإعادة النظر في تصميم هذه المدونة :)

محمود الدعاس

من مواليد دمشق. ابتدأ بعد التخرج كمبرمج ويب عام 2005 مع شركة إيميا، انتقل بعدها إلى شركة تكنوليد للأتمتة المتكاملة ومنها إلى شقيقتها أتمتة للحلول المتقدمة كمصمم غرافيك ومصمم ومطور ويب. أسس مع مجموعة من زملاء الدراسة موقع HOMELESS-PRO.com لنشر قصص مصورة باللغة العربية للشباب، و Guestra كوكالة تصميم وتطوير.

مواضيع الكاتبموقع الكاتب

لمتابعة الكاتب:
TwitterFacebookPinterest

3 thoughts on “عملية تجميل لموقع جيسترا التعريفي

  1. شكراً للمجهود الممتاز
    زميل العمل والصديق العزيز محمود لولا جهودك ما حصلنا على هذا الموقع المتميز.

  2. فعلا مجهود رائع وتصميم مميز
    ومناسب جدا للاجهزة اللوحية .. و يذكر ب Windows 8

    ملاحظة : اذا امكن جعل الموقع باللغة الانكليزية ايضا لأن ذلك سيحقق لكم انتشار اوسع

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *