خطة شاملة ومصادر تعلم UX/UI مجاناً

تصميم واجهة المستخدم (UI):

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

الفرق بين تصميم واجهة المستخدم (UI) وتصميم تجربة المستخدم (UX):

يمكنك فهم الفرق بين تصميم واجهة المستخدم (UI) وتصميم تجربة المستخدم (UX) من خلال

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

أساسيات تصميم واجهة المستخدم / أدوات مجانية لتصميم واجهة المستخدم:

هناك بعض الأساسيات التي لا بد من معرفتها قبل التعمق في تعلم UX/UI مجاناً وهي:

1. الألوان:

يمكنك معرفة كل شيء عن الألوان والاستخدام المثالي لها من خلال اتباع هذه الخطوات:

• معرفة نظرية الألوان وتفاعلها في تصميم واجهة المستخدم.
• استخدام مصادر الإلهام للألوان مثل:
• Color Hunt
• Colormind
• Coolors
• Flat UI Colors
• استخدام أدوات لوحة الألوان مثل:
• ColorSpace (توليد لوحات الألوان)
• WebGradients (خلفيات متدرجة)
• Color Palettes - Color Hunt

2. الصور:

يمكنك الحصول على صور مجانية لمشاريعك من هذه المواقع:

• Pixabay
• Freepik
• Pexels
• Pinterest
• Reshot
• Unsplash

3. الأيقونات:

هذه أفضل المواقع المجانية للحصول على الأيقونات:

• Icons8
• Iconfinder
• Feather Icons
• Flaticon
• The Noun Project

4. المبادئ التوجيهية الأساسية:

يمكنك معرفة القواعد والمبادئ التوجيهية الأساسية من خلال معرفة:

• قواعد التصميم الأساسية لواجهة المستخدم.
• إرشادات التصميم المادي (Material Design).
• إرشادات تصميم iOS.

5. الشبكات (Grid):

يمكنك التعلم عن نظام الشبكات (Grid) من خلال فهم:

• مبادئ نظام الشبكات للمبتدئين.
• نظام الشبكة ذات النقاط الثمانية (8-Point Grid).
• كيفية استخدام نظام الشبكة.

6. الرسومات التوضيحية:

يمكنك الحصول على الرسومات التوضيحية من المواقع التالية:

• Humaaans
• StorySet
• UnDraw
• Drawkit
• Vecteezy

بعد معرفة هذه الأشياء يمكنك الآن الدخول إلى مرحلة المستويات لتعلم UX/UI مجاناً.

مستويات التعلم

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

المستوى 0️⃣:

في هذا المستوى ستتعلم مجموعة من الأشياء كالتالي:

1.أداة التصميم:

هناك أداتان أساسيتان للعمل عليهما في تعلم UX/UI مجاناً وهما:

• أداة Adobe XD: ليست مجانية ولكن إذا كانت متاحة يمكنك تعلمها من:
• دروس عربية
• دروس إنجليزية (موصى بها)
• أداة Figma: وهي أداة مجانية يمكنك تعلمها من:
• دروس عربية
• دروس إنجليزية (نوصي بها)

التدريب على استخدام الأدوات:

يمكنك التدريب على استخدام الأدوات من خلال مشاهدة فيديوهات لإنشاء تطبيقات متكاملة كالتالي:

• Adobe XD:

مشاهدة هذا الفديو (يوتيوب)

• Figma:

المستوى 1️⃣:

في هذا المستوى ستقوم بالتدرب على بناء المشاريع ويجب عليك:

1. بناء مشاريع كاملة.
2. إنشاء ملف أعمال (Portfolio).
3. رفع المشاريع على Behance.

المستوى 2️⃣:

في هذا المستوى يجب عليك تعلم:

1. تصميم النماذج الأولية (Wireframes).
2. هندسة المعلومات (Information Architecture).
3. بناء النماذج الرقمية (Prototyping).
4. اختبار قابلية الاستخدام (Usability Testing).

في النهاية نتمنى أن نكون قد أفدناكم ولو بالقليل وقدمنا لكم خطة متكاملة من أجل تعلم UX/UI مجاناً مع وضع أفضل الأدوات التي ستساعدكم في مشواركم ونرجو منكم وضع تعليق بما تريدونة وسنكتبه على مدونة المختبر التقني بأقرب وقت.