بكفيك غمز!

أحمد شديد

UX/UI Designer, Frontend Developer

منذ 4 سنوات بواسطة

إطلاق المدونة بتصميمها الجديد

إطلاق المدونة بتصميمها الجديد

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

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

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

اليوم نحن في عام 2015، أصبحت أرى بأن صفحتي على فيسبوك مساحة غير كافية لنشر أفكاري وتجاربي عن تصميم الويب، لذلك قررت أن أعيد تصميم المدونة بالكامل وأبدأ في كتابة مقالات.

في هذه المقالة سوف أشرح تصميم مدونتي الجديد، والتقنيات التي استعملتها فيه وأيضاً بعض الأفكار التي سوف أتركها لتكتشفوها بأنفسكم! =)

التفكير والعصف الذهني

    • بدأت بالتفكير في الطريقة التي سيكون بها التصميم، وسألت نفسي الأسئلة التالية:

  • هل سيكون هناك مساحة جانبية Sidebar واعرض فيها بعض المعلومات؟
  • هل سيكون الموقع على كامل الشاشة Full Width أم محدد بمساحة معينة؟
  • كم عدد التدوينات التي ستعرض في الصفحة الرئيسية؟

تصميم الصفحة الرئيسية

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

حاولوا أن تؤشروا بالماوس على الرسمة أكثر من مرة (4 – 8 مرات) ولاحظوا ماذا سيظهر؟ هل ظهر لديك شيء؟ أخبرنا بالتعليقات.

الشريط الجانبي Sidebar يحتوى على أقسام “اهلا وسهلا، مقال مختار والشبكات الاجتماعية”.في قسم اهلا وسهلا، حاولوا ان تضغطوا على “أخفيني” عدة مرات ولاحظوا ماذا سيظهر! وأخبرنا برأيك في التعليقات ايضا!

about

تصميم صفحة من أنا

في صفحة “من أنا”، تعرض بشكل مصغرات سيرة ذاتية مصغرة، تعرض أمور مهمة مثل المهارات التي أعرفها، لغاتي (نعم اعتبر HTML/CSS لغة اتواصل بها)، نبذة عني وبعض الاقتباسات التي تعلمتها من تجاربي.

بالنسبة لصفحة “المقال”، حالياً أنت تقرأ من خلالها، كيف وجدت تجربة القراءة؟ هل هي مريحة؟ هل يوجد لديك اقتراحات لتحسينها؟ اذا كان جوابك نعم فضلاً قم بذكر ملاحظتك في التعليقات.

مرحلة تطوير الواجهة Front End Development

بدأت هنا بتحويل التصاميم إلى صفحات ويب تفاعلية بإستخدام HTML5, CSS3, Javascript. في البداية قمت بتطبيق الصفحة الرئيسية بإستخدام Bootstrap، ولكن فكرت في نفسي أنه لا يوجد داعي لأن تستخدمها، انت ستصبح مطور Front End في المستقبل وسيكون من الجميل أن تعمل شيء خاص بمدونتك. اقتنعت بالفكرة وقمت بإعادة الصفحة الرئيسية بإستخدام Grid خاص من عملي كما بالصورة التالية:

CSS Grid

لو جئنا لنقارن بين Bootstrap وبين ال Grid التي بنيتها، هناك فرق شاسع جدا. Bootstrap تحتوي على كثير من الأمور التي لا تلزمني (حتى بعد عمل Customize)، يبقى هناك أسماء Classes كثيرة لا يوجد لها داعي. هذا هو السبب الرئيسي في عمل Grid خاص، وفعلا تم عملها في كافة الموقع وهي تجاوبية Responsive أيضاً.

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

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

راعيت أيضاً في التصميم بأن لا استخدم الايقونات على شكل صور png او jpg، السبب في ذلك لزيادة سرعة التصفح ودعم شاشات ال Retina او الدقة العالية.

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

شكراً على وصولك هنا! =)

مصمم تجربة المستخدم UX وواجهات الإستخدام UI، مستشار ومطور واجهات أمامية Front-End Developer، مهتم في كتابة CSS للمشاريع الكبيرة.

  • http://www.feras.ws/ Feras Allaou

    ألف مبروك التصميم الجديد والرائع كما هي أعمالك دائماً.
    بالتوفيق في المدونة الجديدة وننتظر جديدك بشكل دائم :))

    • Ahmad Shadeed

      شكرا عزيزي فراس :)

  • Hamzaoui

    عمل رائع صراحة, واصل أخي أحمد في انتظار المزيد من المقالات

    • Ahmad Shadeed

      كل الشكر :)

  • araby alhomsi

    جميل جداً الصراحة، أعمالك وتصاميمك ملهمة جداً :)
    شكراً لك.

    • Ahmad Shadeed

      العفو :) شكرا لك ايضاً

  • ahmednageep

    تصميم رائع جدا ، مصل كل اعمالك
    وكنت اود ان اسألك ما الفرق بين المصمم والمطور ؟

    • Ahmad Shadeed

      شكرا جزيلا :)
      المصمم عادة ما بكتب كود كود، لكن لما نحكي مصمم ويب في احتمال انه يكون يعرف تصميم وبرمجة او تطوير
      المطور بكون متخصص اكثر بالبرمجة وبكون عنده خبرة اكثر

  • akram khalil

    رائع

  • Mohammed Alozaibi

    كل التوفيق ان شاء الله, مدونة رهيبة جدا منتظرين المزيد

  • ahmad khteeb

    اعمال جميلة جدا واحترافية اتمنى فقط لو تعمل دروس او فيديوهات تعليمية

  • Mohamed RȍnāLdõ

    هل من الممكن ان اخذ منك القالب اخى لمدونتى

  • esraa

    كل التوفيق