ملخص المقال: ستتعلم في هذا الدليل خطوة بخطوة كيفية إتقان مهارات UX/UI خلال 90 يوماً فقط، من الصفر إلى الاحتراف، باستخدام أدوات مجانية وخطة أكاديمية مجربة.
مقدمة: لماذا مهارة UX/UI هي استثمارك الذكي في 2026؟
في عصر التحول الرقمي، لم يعد تصميم تجربة المستخدم (UX) وواجهات المستخدم (UI) مجرد مهارة ثانوية، بل أصبح مطلباً أساسياً لأي منتج رقمي ناجح – سواء كان تطبيق جوال، موقع إلكتروني، أو حتى منصة تعليمية.
تخيل أن تدخل إلى موقع جميل الشكل، لكنك لا تستطيع العثور على زر الشراء. أو أن تستخدم تطبيقاً بطيئاً ومربكاً. النتيجة واحدة: ستغادر ولن تعود أبداً.
هنا يأتي دور مصمم UX/UI المحترف: يجعل المنتج سهل الاستخدام، جميل المنظر، وممتعاً للتفاعل.
وفقاً لتقرير LinkedIn لعام 2026، فإن الطلب على مصممي UX/UI نما بنسبة 35% خلال العام الماضي وحده، بمتوسط رواتب يتراوح بين 30,000 إلى 80,000 دولار سنوياً للمصمم المتوسط.
والخبر السار: يمكنك إتقان هذه المهارة خلال 3 أشهر فقط، بشرط اتباع خطة منهجية واضحة. وهذا ما سنقدمه لك في هذا الدليل الأكاديمي المهني.
أولاً: الفرق الجوهري بين UX و UI (لن تخلط بينهما بعد اليوم)
قبل أن تبدأ رحلتك، يجب أن تفهم الفرق بين المفهومين. معظم المبتدئين يخلطون بينهما، وهذا يؤخر تقدمهم.
UX (تجربة المستخدم):
- التعريف: كيف يشعر المستخدم عند استخدام المنتج
- التركيز: سهولة الاستخدام، المنطق، التدفق
- أسئلته الأساسية: هل يستطيع المستخدم إنجاز مهمته بسهولة؟
- الأدوات الشائعة: Figma، Miro، Optimal Workshop
UI (واجهة المستخدم):
- التعريف: كيف يبدو المنتج شكلياً
- التركيز: الألوان، الخطوط، الأزرار، الأيقونات
- أسئلته الأساسية: هل التصميم جذاب ومتناسق؟
- الأدوات الشائعة: Figma، Sketch، Adobe XD
💡 القاعدة الذهبية:
“UI بدون UX مثل طلاء جدار جميل على منزل آيل للسقوط – جميل لكنه غير صالح للسكن.”
UX هو الأساس، وUI هو التشطيب.
الخطة المنهجية: 3 أشهر مقسمة بدقة
الشهر الأول: بناء الأساسيات (الأرضية الصلبة)
في هذا الشهر، ستركز على فهم المبادئ النظرية والأدوات الأساسية. لا تتعجل نحو التصميم المعقد.
الأسبوع الأول: فهم عقلية UX/UI
- اقرأ كتاب “Don’t Make Me Think” لـ Steve Krug (يعتبر “الكتاب المقدس” للمبتدئين).
- تابع قناة The Futur على YouTube (محتوى عربي/إنجليزي رائع).
- افهم مبادئ هندسة المعلومات (Information Architecture).
مهمة عملية:
حلل 3 تطبيقات تستخدمها يومياً (مثل: فيسبوك، إنستغرام، تطبيق بنكك). اكتب قائمة بـ 3 أشياء تحبها و3 أشياء تغيرها فيها.
الأسبوع الثاني: إتقان أداة Figma (السلاح الرئيسي)
- Figma هي الأداة الأكثر استخداماً عالمياً، وهي مجانية تماماً للمبتدئين.
- شاهد دورة “Figma for Beginners” على YouTube (قناة Figma الرسمية).
- تعلم الأساسيات: إنشاء إطار (Frame)، إضافة أشكال، نصوص، أيقونات، استخدام المكونات (Components).
مهمة عملية:
أعد تصميم شاشة تسجيل الدخول لأحد التطبيقات التي حللتها الأسبوع الماضي باستخدام Figma.
الأسبوع الثالث: مبادئ التصميم البصري (UI Fundamentals)
- نظرية الألوان: تعلم الفرق بين الألوان الأساسية، الثانوية، والمتكاملة. استخدم موقع Coolors لتوليد لوحات ألوان جاهزة.
- علم الخطوط (Typography): تعلم الفرق بين خطوط Serif (كلاسيكية) و Sans-Serif (حديثة). استخدم خطين كحد أقصى في أي تصميم.
- المسافات والتباين: تعلم قاعدة “8px Grid System” لجعل تصميمك متناسقاً.
مهمة عملية:
صمم بطاقة منتج (Product Card) بسيطة لمنتج افتراضي، مع الانتباه إلى الألوان والخطوط والمسافات.
الأسبوع الرابع: مشروع الشهر الأول
- المشروع: تصميم واجهة كاملة لـ “تطبيق مهام (To-Do List)” مكون من 3 شاشات:
- شاشة تسجيل الدخول
- شاشة إضافة مهمة جديدة
- شاشة عرض المهام
- المطلوب: استخدام Figma فقط، مع توثيق قراراتك التصميمية في مستند منفصل (لماذا اخترت هذه الألوان؟ لماذا هذا الترتيب؟).
الشهر الثاني: التعمق في UX والأبحاث
هذا الشهر مخصص لفهم عقل المستخدم، وليس فقط أدوات التصميم.
الأسبوع الخامس: أبحاث المستخدم (User Research)
- تعلم كيفية إنشاء شخصية المستخدم (User Persona) – وهي نموذج شبه خيالي يمثل جمهورك المستهدف.
- تعلم الفرق بين الأسئلة المفتوحة والمغلقة في الاستبيانات.
- استخدم أدوات مجانية مثل Google Forms أو Typeform لجمع البيانات.
مهمة عملية:
أنشئ شخصيتين مستخدمتين (Personas) لتطبيق المهام الذي صممته سابقاً. مثلاً:
- شخصية 1: طالب جامعي مشغول
- شخصية 2: أم عاملة تحتاج لتنظيم المنزل
الأسبوع السادس: اختبار قابلية الاستخدام (Usability Testing)
- تعلم كيفية إجراء اختبار بسيط مع 3-5 أشخاص لاكتشاف مشاكل التصميم.
- استخدم أداة Maze (نسخة مجانية) لتحويل تصميمات Figma إلى اختبارات تفاعلية.
- تعلم تحليل النتائج: ما الذي واجه المستخدم صعوبة فيه؟ أين أخطأ؟
مهمة عملية:
اطلب من 3 أصدقاء اختبار تطبيق المهام الذي صممته، وسجل ملاحظاتهم. ثم قم بعمل تقرير من صفحة واحدة بالنتائج والتوصيات.
الأسبوع السابع: النماذج الأولية والتفاعل (Prototyping)
- تعلم كيفية تحويل التصاميم الثابتة إلى نماذج أولية تفاعلية (Prototypes) في Figma.
- فهم الفرق بين Low-Fidelity (نماذج ورقية أو بإطارات بسيطة) و High-Fidelity (نماذج قريبة من المنتج النهائي).
- تعلم إضافة تفاعلات بسيطة (الانتقال بين الشاشات، ظهور قوائم منسدلة، إلخ).
مهمة عملية:
أضف تفاعلات إلى تطبيق المهام الخاص بك بحيث يمكن النقر على زر “إضافة مهمة” لفتح شاشة جديدة.
الأسبوع الثامن: مشروع الشهر الثاني
- المشروع: إعادة تصميم (Redesign) أحد المواقع المعروفة التي تعاني من مشاكل في تجربة المستخدم.
- اختر موقعاً مثل: قسم خدمة العملاء في موقع شركة اتصالات، أو صفحة حجز تذكرة في موقع خطوط جوية.
- المطلوب:
- تحليل المشاكل الحالية (مع لقطات شاشة).
- إنشاء شخصيات مستخدمين.
- تصميم واجهة جديدة في Figma.
- اختبارها مع شخصين على الأقل.
- تقديم تقرير نهائي (PDF) يلخص رحلتك.
الشهر الثالث: الاحتراف وبناء المحفظة (Portfolio)
هذا هو الشهر الذي تحول فيه كل ما تعلمته إلى أصول قابلة للتسويق (سواء للحصول على وظيفة أو عمل حر).
الأسبوع التاسع: بناء محفظة أعمال احترافية
- لا تحتاج إلى موقع معقد. استخدم منصات مجانية مثل: Behance أو Dribbble أو Notion.
- لكل مشروع في محفظتك، يجب أن يحتوي على:
- العنوان (مثال: “إعادة تصميم تطبيق بنك الراجحي”).
- التحدي (ما المشكلة التي كنت تحلها؟).
- العملية (الأبحاث، الشخصيات، النماذج الورقية، الاختبارات).
- الحل (روابط النموذج التفاعلي في Figma).
- النتائج (ماذا قال المستخدمون؟ ما الذي تحسن؟).
مهمة عملية:
ارفع المشروعين اللذين نفذتهما في الشهرين الأول والثاني إلى Behance مع وصف تفصيلي لكل خطوة.
الأسبوع العاشر: تعلم أساسيات HTML/CSS (ميزة تنافسية)
- كمصمم UI/UX محترف، لست بحاجة إلى أن تكون مبرمجاً، لكن فهم أساسيات الويب يساعدك في التواصل مع المطورين.
- تابع دورة مجانية: “HTML & CSS for Beginners” على منصة freeCodeCamp (حوالي 10 ساعات).
- تعلم: صناديق الـ Flexbox و Grid، وكيف يترجم المصمم تصميماتك إلى أكواد.
مهمة عملية:
حول أحد تصميماتك البسيطة (مثل بطاقة المنتج) إلى صفحة HTML وCSS فعلية. لا تقلق إذا لم تكن مثالية، المهم الفكرة.
الأسبوع الحادي عشر: الاستعداد لسوق العمل
- للوظائف: رتب سيرتك الذاتية (CV) وأضف رابط محفظتك. استخدم نماذج من Canva أو Novoresume.
- للعمل الحر: سجل في منصات مثل Mostaql أو Khamsat أو Upwork. ابدأ بمشاريع صغيرة (مثل تصميم شعار أو بطاقة منتج) لبناء تقييمات إيجابية.
- استعد للمقابلات: توقع أسئلة مثل: “حدثنا عن مشروع فشلت فيه وماذا تعلمت؟” أو “كيف تتعامل مع عميل يطلب تغييرات غير منطقية؟”.
مهمة عملية:
قدم على 5 وظائف أو مشاريع حرّة هذا الأسبوع (حتى لو لم تحصل عليها، المهم أن تخوض التجربة).
الأسبوع الثاني عشر: المشروع النهائي (تطبيق كامل)
- المشروع: تصميم تطبيق كامل (من 6 إلى 8 شاشات) من الصفر، من الفكرة إلى النموذج التفاعلي.
- اختر فكرة مثل:
- تطبيق لحجز مواعيد الطبيب
- تطبيق لمشاركة الوصفات الصحية
- تطبيق لإدارة المصروفات الشهرية
- المطلوب:
- خطة عمل كاملة (Business Requirements).
- بحث عن المستخدمين (مقابلات أو استبيانات).
- شخصيات مستخدمين وخرائط رحلة.
- تصميم عالي الدقة (High-Fidelity) في Figma.
- نموذج أولي تفاعلي كامل.
- اختبار قابلية الاستخدام مع 3 مستخدمين حقيقيين.
- عرض تقديمي (PDF) يشرح عمليتك بالكامل.
أهم الأدوات المجانية التي ستحتاجها
Figma
- الغرض: تصميم الواجهات والنماذج التفاعلية
- الرابط: figma.com
Miro
- الغرض: رسم خرائط الموقع والجلسات العصف الذهني
- الرابط: miro.com
Coolors
- الغرض: توليد لوحات ألوان احترافية
- الرابط: coolors.co
Google Fonts
- الغرض: خطوط مجانية عربية وإنجليزية
- الرابط: fonts.google.com
Behance
- الغرض: نشر المحفظة الشخصية
- الرابط: behance.net
Maze
- الغرض: اختبار قابلية الاستخدام
- الرابط: maze.co
FontAwesome
- الغرض: مكتبة أيقونات مجانية
- الرابط: fontawesome.com
المصادر الأكاديمية الموصى بها
- كتاب: “The Design of Everyday Things” – Don Norman (أبو UX الحديث).
- كتاب: “Refactoring UI” – Adam Wathan & Steve Schoger (للجزء البصري).
- دورة مجانية: “Google UX Design Professional Certificate” – متاحة على Coursera (بتمويل مالي لمن يحتاج).
- قناة يوتيوب عربية: “Abdullah Aljammaz” – متخصص في UX/UI بالعربية.
- بودكاست: “UI Breakfast” – مقابلات مع خبراء عالميين.
قائمة مراجعة نهائية (Checklist) بعد 3 أشهر
- أتقنت استخدام Figma (إطارات، مكونات، نماذج أولية).
- تفهم الفرق بين UX و UI وتستطيع شرحه لأي شخص.
- أنشأت 3 مشاريع كاملة في محفظتك (تطبيق مهام، إعادة تصميم موقع، تطبيق متكامل).
- تعلمت أساسيات أبحاث المستخدم (شخصيات، استبيانات، مقابلات).
- أجريت 3 اختبارات قابلية استخدام على الأقل مع مستخدمين حقيقيين.
- فهمت أساسيات HTML/CSS البسيطة.
- قدمت على الأقل على وظيفة أو مشروع حر.
- حصلت على 3 تقييمات إيجابية من زملاء أو أساتذة على مشاريعك.
الخلاصة
إتقان مهارة UX/UI في 3 أشهر ليس حلماً، بل هو خطة واقعية إذا التزمت بها يومياً لمدة 3-4 ساعات. المفتاح ليس في الذكاء الخارق، بل في الاتساق (Consistency) والتطبيق العملي من اليوم الأول.
تذكر دائماً:
“أفضل تصميم هو الذي لا يشعر المستخدم بوجوده. عندما ينجز المستخدم مهمته دون تفكير، فأنت نجحت.”
ابدأ اليوم، ولا تنتظر الظروف المثالية. أول خطوة هي الأصعب، لكن بعد 90 يوماً من الآن، ستنظر إلى تصميماتك الأولى وتبتسم، وستفكر: “كيف وصلت إلى هنا؟” – الجواب: بأنك بدأت.