مشاريع التدريب لمطوري الواجهة الأمامية

نشرت: 2020-12-17

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

  1. العمل في وكالة كمطور الواجهة الأمامية.
  2. ادرس في منزلك وقم ببناء مشاريع جانبية.
  3. العمل بالقطعة للعملاء.

لكل منها إيجابيات وسلبيات خاصة به ، ولكن يظل هناك شيء واحد ثابتًا - فكلما زادت المهام المتنوعة التي تحصل عليها ، زادت سرعة تقدمك.

في هذه المقالة ، سننظر في عدد قليل من المشاريع المحتملة التي يمكنك العمل عليها جنبًا إلى جنب ومفردك ، حيث يمكنك تعلم التقنيات والأساليب الجديدة وربما بعض "آها!" لحظات في حياتك المهنية.

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

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

1 - مكتبة واجهة مستخدم مكونة

الصعوبة: سهل-متوسط.

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

يمكنك اختيار تصميم حالي مثل هذا ، والذي يركز على الأزرار / القوائم المنسدلة:

مكتبة واجهة المستخدم المكونة

مصدر

أو يمكنك اختيار واحد أكثر عمومية مثل Bootstrap و Foundation. ما يجب مراعاته:

  • اصطلاح تسمية محدد جيدًا.
  • عرض للمكونات.
  • المعدلات - يحب معظم الناس تغيير العناصر الثانوية ، لذا فكر في كيفية تطبيق ذلك. مثال - تريد الألوان الأساسية والثانوية ؛ النجاح ، حالات الخطأ وما إلى ذلك.
  • احتفظ بها "التوصيل والتشغيل". هدفك هو السماح لمطور آخر باستخدام التعليمات البرمجية الخاصة بك دون الحاجة إلى كتابة أي CSS. يمكنك دمجه مع نظام شبكة أساسي أيضًا.

الهندسة المعمارية الجيدة لمثل هذه المكتبة ليست مسألة تافهة. يمكنك تجربة نفس المهمة في بداية حياتك المهنية وكذلك بعد بضع سنوات من الآن ومقارنة ما تعلمته.

2 - تنفيذ الرسوم المتحركة المعقدة UI

الصعوبة: صعب

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

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

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

3 - لعبة UI

الصعوبة: صعب

مهمة أخرى صعبة! تتميز معظم الألعاب بأسلوب فني فريد جدًا لا يمكن ترجمته بسهولة على الويب. لجعل الأمور أكثر صعوبة ، هناك قاعدة أخرى هنا - لا تستخدم أي صور / svgs لتحقيق الأشكال على واجهة المستخدم.

UI Star Craft 2

المصدر: StarCraft II

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

لجعل الأمور أكثر واقعية ، يمكن استبدال الحد العلوي الأيمن العلوي بواحد من الصف العلوي من الصورة التالية:

لعبة ستار كرافت UI

المصدر: StarCraft II

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

4 - لعبة مسابقة

الصعوبة: متوسطة

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

إذا قمت بالبحث عن "Quiz" في Dribbble ، يمكنك العثور على عدد كبير من الأمثلة ، ولكن إذا وجدت صعوبة في اختيار واحدة ، فيمكنك أن تأخذ هذا:

مثال لعبة مسابقة

مصدر

كما ترى ، هناك شاشتان فقط ، مما يعني أنه سيتعين عليك ابتكار الباقي بناءً على التصميم أعلاه.

ميزات الاختبار:

  • عد الإجابات الصحيحة
  • إجابة من خيارات N.
  • إظهار الإجابات الصحيحة / الخاطئة بعد النقر
  • الإبلاغ عن السؤال المنبثق
  • ارجع إلى جميع الاختبارات ، اختر اختبارًا
  • إظهار النتيجة النهائية بعد انتهاء الاختبار

يمكنك أن تفعل أكثر بكثير من تلك المذكورة أعلاه إذا كنت ترغب في ذلك. هذا بشكل عام نوع من المشروع "ظهيرة واحدة".

5 - اختر موقعًا عشوائيًا واجعله مناسبًا للطباعة

الصعوبة: سهل

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

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

أمثلة على مواقع الويب التي يمكنك استخدامها:

  • صفحة بيع أمازون - ركز فقط على المعلومات المهمة.
  • صفحة مبيعات الدورة التدريبية - من SitePoint.
  • صفحة دورة أخرى

لا تتردد في اختيار أي موقع آخر تريده ، يمكنك جعل هذا الأمر سهلاً أو صعبًا على نفسك. إذا كنت ترغب في رؤية مثال لأسلوب طباعة جيد ، فقم بإلقاء نظرة على https://www.smashingmagazine.com/ ، لقد قاموا بالفعل بتثبيته.

6 - تصميم مجلة معقد

الصعوبة: مجنون

هذا بالإضافة إلى كونه صعبًا ، فهو أيضًا معقد. ويستغرق الأمر وقتًا أطول مقارنة بأي من المهام الأخرى المذكورة أعلاه ، لذلك قد تحتاج إلى تفريغ أكثر من 20-30 ساعة لذلك.

نمط المجلة

مصدر

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

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

حتى مجرد النظر إلى الخلفية خلف العنوان الكبير في الأعلى يخفي بعض الأجزاء الصعبة لتنفيذه.

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

أسلوب مجلة معقد

مصدر

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

7 - لوحة القيادة والرسوم البيانية الخاصة بها

الصعوبة: متوسطة-صعبة

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

للاستعداد لمثل هذا اليوم ، إليك تحدٍ لك:

نفذ التصميم التالي:

مصدر

ما تحتاج إلى مراعاته هنا - يجب أن تكون الرسوم البيانية حقيقية. يجب أن يستخدموا بيانات حقيقية ، ويجب أن تحاول جعلها تبدو مثل تلك التي تراها في الأعلى. هناك العديد من المكتبات التي يمكنك استخدامها ، وعلى الأرجح سيتعين عليك تمديد / تعديل الكثير.

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

فى النهاية:

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

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