بكفيك غمز!

أحمد شديد

UX/UI Designer, Frontend Developer

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

تجربتي في تعلم تصميم الويب بشكل يومي – الجزء الأول

تجربتي في تعلم تصميم الويب بشكل يومي – الجزء الأول

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

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

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

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

كنت متحمساً جداً في اليوم الأول وبدأت في أول تمرين وهو الصفحة الرئيسية لصفحة المدونة وواجهت عدة مشاكل كما بالصورة:

Screen Shot 2015-02-21 at 3.08.02 PM

اليوم الأول من التعلم

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

من أكثر الأخطاء التي ترتكب هي أن تقول لنفسك “دعني أرتاح غداً من التمرين، لقد تعبت”. غالباً عندما ترتاح يوم سترتاح بقية الأيام :D نعم هذا ما سيحدث. لا ترتاح! اتعب قليلاً لمستقبلك.

ومن هنا بدأت رحلة التعلم، صرت أحمل ملفات PSD مجانية وأقوم بمحاولة عملها HTML/CSS، أو مثلا اخذ ملفات مشروع قديم واقوم بالعمل عليه. كنت أحاول بأن أختار في كل تمرين تحدي جديد، واذا لم اواجه اي مشكلة باليوم الذي اتعلم فيه أحاول أن ابحث عن شيء جديد، لان عدم مواجهة مشاكل يعني أنك لم تتعلم شيء جديد.

الأدوات المساعدة

تطبيق Commit

فكرة التطبيق أنه يقوم بسؤالي يومياً “هل تمرنت اليوم على html/css/js” ؟ وعند الضغط على “نعم” يزيد العداد يوم ويكتب في أسفل الصفحة “233 يوماً متتالياً”.

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

Google Docs

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

قول لا

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

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

الصعوبات

صعوبة إيجاد ملفات PSD بأفكار جديدة لكي أتمرن عليها.

أغلب ملفات ال PSD تشبه بعضها البعض، لذلك كان الحل بأن أقوم بتصفح مواقع مثل Dribbble أو Behance وتحميل تصاميم عادية JPG والتعلم عليها. بعد فترة صرت ألاحظ بأنه لا يوجد فرق كبير بين ملف التصميم المفتوح والصورة، ببساطة لانك كمصمم ويب لن يصعب عليك أن تعرف حجم الخط، لونه، المسافة بين العناصر سواء كان الملف JPG أو PSD.

التعلم أثناء السفر: سافرت مرتين أثناء التعلم وكل مرة كان لها تجربة مختلفة.

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

قل لها بكل بساطة “لا”، سأقوم بتمرين اليوم رغماً عنك :)

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

المرة الثانية: قمت بإعداد خطة مشابهة ومشيت عليها، حاولت أن استغل كل دقيقة كانت لدي أثناء الإنتظار في المطار وأيضاً أثناء الرحلة في الطائرة، كنت أقرأ كتاب Implementing Responsive Design وأطبق ما أتعلم.

حصول مشكلة في الاتصال بالانترنت

كنت اعتمد على مصادر لا يتم فتحها إلا بالانترنت، او مثلا ال Web Fonts. حاول ان تقوم بتحميل كل شيء والتحضير لأي شيء قد لا يكون بالحسبان.

من أين أحصل على التمارين؟

يصلني هذا السؤال بشكل مستمر، لا يوجد مصدر معين أعتمد عليه في التمارين. لكن بشكل عام أبحث في المواقع التالية: Dribbble, Behance, Pinterest وأبحث في جوجل عن ملفات مجانية.

في بعض الحالات يكون التمرين مشروع حقيقي أعمل عليه.

مصادر التعلم

يوجد عدة مصادر مميزة سوف أوصيكم بها.

دروس:

  1. HTML5 Fundamentals
  2. Cross Browser Testing
  3. Javascript Fundamentals
  4. Advanced Javascript
  5. SEO for Web Designers
  6. Responsive Web Design Techniques
  7. CSS3 Animations
  8. PSD to HTML5

كتب:

  1. AtoZ CSS
  2. Implementing Responsive Design
  3. Javascript and jQuery: Interactive Front End Web Development
  4. Eloquent Javascript

مواقع:

  1. CSS Tricks
  2. Smashing Magazine
  3. Sitepoint
  4. Codrops
  5. Webdesigntuts

قائمة قمت بعملها على تويتر تحتوي على أشهر الأشخاص في مجال Front End:

  1. Twitter Front End List

 

مشاركة الناس

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

مشاريع حقيقية

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

كتب هذا المقال في اليوم رقم 234 من التعلم، هل يوجد لديك إضافات أو اقتراحات معينة؟ تفضل بذكرها في التعليقات ولا تنسى أيضاً أن تشارك المقال مع من يهتم بتصميم الويب.

مصدر صورة المقال

تم كتابة الجزء الثاني من المقال بإمكانك مشاهدته من هنا

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

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

  • رافع فحيلي

    رائع !
    يعطيك العافية :)
    بانتظار جديدك

  • iglal

    ربنا يباركلك يا أحمد

  • Omar

    وفقك الله اخي تابع ولا تدع الملل ينال منك ولا تسمح لأي شيء مهما كان ان يوقفك .
    سأحكي لك قصة قصيرة : أنا شخص يعشق تصميم واجهات المواقع وخصوصا واجهات المدونات وصممت العديد منها ولكني لم اكن اعرف اي شيء عن كيفية تكويد هذه التصاميم وتحويلها الى شيء ملموس والاستفادة منها ، لذلك قررت في 25/1/2014 أن ابدأ بتعلم الـ HTML & CSS لعلني استفيد من كل تلك التصاميم واقوم بتحويلها الى قوالب بلوجر او ووردبريس ، وبالفعل بدأت بقوة وعزيمة كبيرتين ولكن للأسف تلك العزيمة لم تدم فقد توقفت عن التعلم بعد اقل من شهر ، وانا الان نادم اشد الندم لأنني لم أكمل رحلة تعلمي وسمحت للكسل بأن ينال مني ، ولكن مع ذلك أقول وعسى ان تكرهوا شيئا وهو خير لكم ، والحمد لله بدأت من جديد بتاريخ 10/1/2015 وقمت بتكويد العديد من تصاميمي وهذه المرة باذن الله لن اسمح لأي شيء بأن يوقفني .
    اعتذر على الاطالة واتمنى لك التوفيق في مسيرتك التعليمية .

  • Hamzaoui

    تجربة رائعة صراحة, أفكار جميلة وتحفيزية لمن يريد مجاراة نفسه والبدء في تعلم شيئ جديد.

  • http://www.sheroodesign.com/ Shareef Bassam

    يعطيك الف عافية تستحق أكثر طبعاً .. مبدع دائماً في عملك وفي مخططاتك وأكيد في حياتك !!
    وأنا لأني احب هذا المجال اعتبرك قدوة كبيرة الي وشكراً اني بستفيد من تجربتك وخبراتك :)

  • Amr A. Elnaggar

    تجربة رائعة و أكيد ممتعة
    حافظ على ارادتك (Y)

  • Salah Elimam

    رائع ! ربنا يوفقك ويعينك يا أحمد ;)

  • Motasem Alsaqqa

    رائع و ملهم , شكرا لمشاركتنا تجربتك

  • Fady Khateeb

    ارجو الاشارة بروابط للأشياء التي تذكرها .. فمثلا انا لا اعرف تطبيق commit وبحثت عنه فلم اجده !!

    • Ahmad Shadeed

      موجود في أول النتائج بجوجل :) تمت اضافته

      • Fady Khateeb

        ههه تسلم انا اندرويديان

  • Mohammed Alozaibi

    مقال رائع, مشكلتي باتعلم اني كنت اتعلم لساعات طويلة في اليوم أو لا اتعلم بالخالص لكن طريقة التمرين اليومي جميلة, واستفدت من نصيحة تدوين الملاحظات(سأحاول)

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

    • Ahmad Shadeed

      عدد الساعات الجيد يكون من ساعة إلى ساعتين أو ثلاث فقط.

      • Mohammed Alozaibi

        شكرررررا

  • http://www.toplifemakers.com/ Abdessalam Med Said

    بارك الله فيك …

  • Taghreed

    شكراً على مقالك الرائع
    بالنسبة لي تعلمت مبادئ الويب ديزاين من htmlو css لكن ليس لدي portfolio أو نماذج تطبيقية
    كثيرا ما فكرت في أن أعمل لنفسي تطبيقات لكن لم أعرف كيف أبدأ وكيف أختار النماذج التي أعمل عليها ليتكون لدي حصيلة من التطبيقات تصقل مهارتي
    هل لديك اقتراحات كيف أختار ترتيب التطبيقات التي أنفذها؟ أو كيف أعد خطة تدريجية ؟؟

    • Ahmad Shadeed

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

      بالتوفيق

      • Taghreed

        شكراً جزيلاً :)

  • Neirube

    وحش! ما شاء الله عنك ،، :)
    إلى الأمام و دع الاستسلام جانباً ،، استغلّ الوقت بينما هوَ لديكَ فلربّما تسلُبُكَ الحياةُ وقتَكَ يوماً لدرجةِ أنّكَ لَن تُصبِحَ قادراً حتى على لعب العابِ الفيديو :P

  • osama algendy

    ما هي البرامج التي تستخدمها في التصميم و التطوير ؟!

  • Omar Ithawi

    وفقك الله :)، بالنسبة لجافاسكربت، فأنا أحب جدا كتاب JavaScript the Good Parts، يمكنك بالطبع مشاهدة الفيديوات الخاصة به https://goo.gl/TqvNbr، أفادتني كثيراً بتقوية الجانب النظري من اللغة.
    بالنسبة لأطر العمل، فلربما من الأفضل أن تبدأ بتعلم ReactJS لعله أبسط من AngularJS حيث أنني بعد سنة من العمل عليه (AngularJs)، لا تزال الكثير من المصطلحات عصيّة علي!

  • Ali Fakhri

    جميل … متابع

  • Idi Isse

    can you give me a link to the “Commit app” I just use itunes in my pc.
    because the link which you give to use is not working and it show :”Item Not Available. The item you’ve requested is not currently available in the U.S. store” and thank you