الـ UI/UX مش إنك تعرف تفتح Figma.
الـ UX إن المستخدم يوصل للي هو عايزه من غير ما يتلخبط، والـ UI هو شكل الشاشة نفسها: الألوان، والخطوط، والزراير. وعلشان تتعلمهم صح فيه ترتيب: أساسيات التصميم، وبعدها تكلم مستخدمين حقيقيين، وبعدين الـ Wireframe، وبعدها Figma والـ Prototype، وفي الآخر تخلي حد يجرب تصميمك وانت ساكت.
علّم على كل حاجة تخلصها وانت ماشي، علشان تعرف انت فين، وترجع تكمّل من نفس المكان.
قبل ما تبدأ
- ذاكر كل يوم، حتى لو شوية. المدد هنا محسوبة على ساعتين في اليوم. لو وقتك أقل هتاخد وقت أطول، وده عادي.
- المدد تقريبية. في ناس هتخلص أسرع وناس أبطأ. عدّي المرحلة لما تبقى جاهز فعلًا، مش لما الوقت يخلص.
- كل مرحلة فيها مشروع. ومن المرحلة التانية لحد الآخر هتشتغل على مشكلة واحدة. احتفظ بكل ورقة وكل رسمة وكل ملاحظة، علشان هتحتاجهم في البورتفوليو.
المرحلة 1 من 5
أساسيات التصميمالألوان والخطوط والمسافات
المدة: 3 لـ 5 أسابيع
الـ UI هو شكل الشاشة نفسها: الألوان، والخطوط، والزراير. بس الشكل الحلو مش ذوق وخلاص، ده قواعد تقدر تتعلمها: إزاي تختار خط، وإزاي تستخدم الألوان، وإزاي المسافات بتنظم الشاشة.
متبدأش بالبرنامج. القواعد دي هتستخدمها في أي برنامج، وعلى الورق كمان. ولو اتعلمتها كويس، أي شاشة هتعملها بعد كده هتبان مترتبة حتى من غير ألوان.
هتتعلم إيه
0 من 12اعمل بإيدك
تشريح 5 شاشات. خد screenshot لـ 5 شاشات من تطبيقات بتستخدمها كل يوم، واكتب على كل واحدة: عينك راحت لإيه الأول وليه، وفيها كام حجم خط، والمسافات ماشية على نظام ولا لأ، وكل لون مستخدم في إيه. وبعدين اختار أسوأ شاشة فيهم، واكتب 5 حاجات هتغيرها فيها وليه.
تعدّي للمرحلة اللي بعدها لما
- تقدر تشرح ليه شاشة مريحة وشاشة تانية لأ، بكلام واضح مش «حلوة» و«وحشة»
- بتلاحظ المسافات والمحاذاة في أي شاشة قبل ما تلاحظ الألوان
- تقدر تختار خط وأحجامه وألوانه، وتتأكد إن الكلام مقروء
المرحلة 2 من 5
User Researchتفهم المشكلة قبل ما ترسم
المدة: 3 لـ 4 أسابيع
الـ UX إن المستخدم يوصل للي هو عايزه من غير ما يتلخبط. وعلشان تعرف هو عايز إيه وبيتلخبط فين، لازم تسأله. هنا بتتعلم تكلم مستخدمين حقيقيين وتفهم مشكلتهم قبل ما ترسم أي حاجة.
دي المرحلة اللي ناس كتير بتنطها، وبعدين تصمم حل جميل لمشكلة محدش عنده. التصميم الكويس بيبدأ من كلام الناس، مش من البرنامج.
هتتعلم إيه
0 من 11اعمل بإيدك
Research لمشكلة حقيقية. اختار مشكلة حواليك، زي حجز ميعاد عند دكتور أو تنظيم مصروف البيت، واعمل interview مع 5 أشخاص بيعانوا منها فعلًا. وطلّع من كلامهم: persona، و journey map، و problem statement في جملة واحدة. المشكلة دي هتكمل معاك لحد آخر الخطة.
تعدّي للمرحلة اللي بعدها لما
- عملت interviews مع 5 أشخاص حقيقيين على الأقل، وكتبت اللي قالوه
- تقدر تكتب المشكلة في جملة واحدة من غير ما تذكر الحل
- كل حاجة في الـ persona بتاعتك تقدر ترجعها لحاجة حد قالها
المرحلة 3 من 5
Wireframeالكروكي قبل ما تبني البيت
المدة: 2 لـ 3 أسابيع
الـ Wireframe رسمة بسيطة للشاشة من غير ألوان، زي الكروكي قبل ما تبني البيت. بيوريك كل حاجة مكانها فين، والمستخدم هيمشي إزاي من شاشة للتانية.
ارسمه على ورقة وقلم الأول. الورق سهل ترميه وتبدأ من جديد، ولما مفيش ألوان، الكل بيركز على السؤال المهم: المستخدم هيوصل للي عايزه ولا لأ؟
هتتعلم إيه
0 من 11اعمل بإيدك
Wireframes لحل المشكلة. ارجع للمشكلة اللي عملت عليها research، وارسم user flow للمهمة الأساسية، وبعدين wireframe على الورق لكل شاشة فيه، من 5 لـ 8 شاشات، ومعاهم الشاشة الفاضية وشاشة الـ error. ومن غير ولا لون.
تعدّي للمرحلة اللي بعدها لما
- كل شاشة عندك ليها هدف واحد تقدر تقوله في جملة
- تقدر تشرح كل قرار في الـ wireframe بحاجة سمعتها في الـ research
- رسمت أكتر من فكرة للشاشة الواحدة قبل ما تختار
- الـ wireframes بتاعة المهمة الأساسية كاملة على الورق قبل ما تفتح Figma
المرحلة 4 من 5
Figma و Prototypeنسخة بتدوس عليها
المدة: 5 لـ 8 أسابيع
Figma هو البرنامج اللي بتصمم عليه وبتعمل بيه Prototype، يعني نسخة بتدوس عليها كأنها تطبيق حقيقي. وفيه خطة مجانية تبدأ بيها.
لاحظ إنه جه في المرحلة الرابعة، مش الأولى. Figma أداة، والأداة بتنفّذ اللي في دماغك. لو دخلته وانت فاهم التصميم والمستخدم هتتعلمه بسرعة. ولو دخلته من غيرهم، هتطلع شاشات شكلها حلو ومحدش عارف يستخدمها.
هتتعلم إيه
0 من 12اعمل بإيدك
الـ Prototype الكامل. حوّل الـ wireframes بتاعتك لتصميم كامل في Figma بـ components و styles، واربط الشاشات في prototype تدوس عليه على موبايلك من أول المهمة الأساسية لآخرها.
تعدّي للمرحلة اللي بعدها لما
- مفيش لون ولا حجم خط في الملف إلا وهو جاي من الـ styles أو الـ variables
- لو غيّرت الزرار الأساسي في الـ component، بيتغير في كل الشاشات
- الـ prototype بيمشي من أول المهمة لآخرها من غير ما تقف وتشرح
المرحلة 5 من 5
Usability Testingحد يجرب وانت ساكت
المدة: 3 لـ 4 أسابيع
وفي الآخر تخلي حد يجرب التصميم وانت ساكت، وتشوف بيتلخبط فين. مش بتسأله «عاجبك؟»، بتديله مهمة وتتفرج.
أول مرة هتتفاجئ: حاجات انت شايفها واضحة جدًا، الناس مش هتلاقيها. وده مش فشل، ده بالظبط اللي الاختبار معمول علشانه. كل لخبطة بتشوفها هنا، كان المستخدم الحقيقي هيقع فيها بعدين.
هتتعلم إيه
0 من 11اعمل بإيدك
جولتين اختبار. خلي 5 أشخاص يجربوا الـ prototype بتاعك وانت ساكت، واكتب كل مكان اتلخبطوا فيه. صلّح أهم 3 مشاكل، وبعدين اختبر مع ناس جديدة وشوف المشاكل قلّت ولا لأ. واحتفظ بنسخة قبل ونسخة بعد.
تعدّي للمرحلة اللي بعدها لما
- عملت جلسة كاملة من غير ما تقول للمستخدم يدوس فين
- عندك قايمة مشاكل مترتبة حسب خطورتها، وصلّحت أهمها
- تقدر توري نسخة قبل ونسخة بعد، وتقول غيّرت إيه وليه
سلم المشاريع
المشاريع هنا مش منفصلة عن بعض: من المرحلة التانية لحد الآخر بتشتغل على نفس المشكلة، وكل مرحلة بتكمّل على اللي قبلها. والخطوة الأخيرة بتجمعهم في قصة واحدة، وتكتبها وانت بتخلص المرحلة الأخيرة.
تشريح 5 شاشات
Visual hierarchy و Typography والألوان
بتتعلم تشوف الشاشة زي designer: ليه الحاجة دي هنا، وليه بالحجم ده.
Research لمشكلة حقيقية
Interviews و Persona و Journey Map
5 مقابلات مع ناس حقيقيين، وتطلع منهم بالمشكلة في جملة واحدة.
Wireframes على الورق
User flow و Wireframe
كل شاشات المهمة الأساسية، من غير ألوان، ومعاهم الشاشة الفاضية وشاشة الـ error.
Prototype في Figma
Figma و Components و Prototype
تصميم كامل بـ design system صغير، وبتدوس عليه على موبايلك كأنه تطبيق.
Case study للبورتفوليو
Research و Figma و Usability Testing
احكي الرحلة كلها: المشكلة، واللي الناس قالوه، والأفكار اللي رميتها وليه، والـ prototype، والمستخدمين اتلخبطوا فين وانت صلّحت إيه. الصور الحلوة جزء منها، بس القصة هي اللي بتوري انت بتفكر إزاي.
مصادر مجانية
كل دول مجانيين، أو فيهم جزء مجاني يكفيك. متجمعش مصادر كتير: اختار مصدر أساسي واحد لكل مرحلة وكمّل بيه، والباقي ارجعله لما تقف في حتة.
أساسيات التصميم
- Butterick’s Practical Typography (بيفتح في تاب جديدة)كتاب أونلاين عن الخطوط، وإزاي تخلي الكلام مريح في القراية.
- Typescale (بيفتح في تاب جديدة)بيطلعلك مجموعة أحجام خطوط متناسقة تمشي عليها في التصميم كله.
- WebAIM Contrast Checker (بيفتح في تاب جديدة)تحط لون الكلام ولون الخلفية، ويقولك مقروء ولا لأ.
- Material Design 3 (بيفتح في تاب جديدة)دليل Google للتصميم: الألوان والخطوط والمسافات والـ components، مشروحين بالتفصيل.
- Apple Human Interface Guidelines (بيفتح في تاب جديدة)دليل Apple لتصميم التطبيقات، هتفهم منه ليه تطبيقات iPhone شكلها كده.
User Research
- Nielsen Norman Group: User Interviews (بيفتح في تاب جديدة)إزاي تجهز وتعمل interview مع مستخدم، وإيه الأسئلة اللي تبعد عنها.
- Nielsen Norman Group: Personas (بيفتح في تاب جديدة)يعني إيه persona، وإزاي تبنيها من research حقيقي.
- Nielsen Norman Group: Journey Mapping (بيفتح في تاب جديدة)شرح الـ journey map وأجزائها، بأمثلة.
Wireframe
- Crazy 8s (بيفتح في تاب جديدة)الطريقة خطوة بخطوة من Design Sprint Kit بتاع Google.
- Mobbin (بيفتح في تاب جديدة)screenshots من تطبيقات حقيقية، تشوف فيها أي pattern اتعمل إزاي قبل ما ترسمه.
Figma
- Figma Learn (بيفتح في تاب جديدة)الشرح الرسمي لـ Figma من الأول: الواجهة، والـ Auto Layout، والـ Components، والـ Prototype.
- Figma على YouTube (بيفتح في تاب جديدة)القناة الرسمية، فيها شروحات لكل خاصية في البرنامج.
- Figma Community (بيفتح في تاب جديدة)ملفات مجانية تفتحها وتشوف الناس عاملاها إزاي من جوه.
Usability Testing
- Nielsen Norman Group: Usability Testing 101 (بيفتح في تاب جديدة)إزاي تعمل usability test من الأول للآخر.
- Why You Only Need to Test with 5 Users (بيفتح في تاب جديدة)المقالة اللي بتشرح ليه 5 مستخدمين في الجولة غالبًا بيكفوا.
- 10 Usability Heuristics (بيفتح في تاب جديدة)الـ 10 مبادئ بتوع Nielsen اللي بتراجع عليهم أي تصميم.
البورتفوليو
- Growth.Design Case Studies (بيفتح في تاب جديدة)case studies على منتجات حقيقية، بتشرح قرارات الـ UX بالرسم خطوة بخطوة.
أكتر الأخطاء اللي بشوفها
- إن البورتفوليو بتاعك يبقى صور حلوة وبس. ورأيي إن البورتفوليو، اللي هو معرض شغلك، لازم يحكي انت فكرت إزاي: مين المستخدم، وقالك إيه، وجربت إيه ورميته وليه، واختبرت مع مين، وغيّرت إيه. الصورة الحلوة بتوري إنك بتعرف تستخدم Figma، والقصة بتوري إنك بتعرف تصمم.
- إنك تبدأ بـ Figma. الـ UI/UX مش إنك تعرف تفتح Figma. لو بدأت بالبرنامج هتحفظ أماكن الزراير، وتفضل مش عارف تقرر حاجة. ابدأ بالأساسيات والمستخدم، والبرنامج هيبقى أسهل جزء.
- إنك تصمم من دماغك من غير ما تكلم حد. انت مش المستخدم. اللي واضح ليك ممكن يبقى لغز لغيرك، ومفيش طريقة تعرف بيها غير إنك تسأل وتتفرج.
- إنك تجري ورا الشكل وتنسى الاستخدام. ألوان وحركات حلوة، والمستخدم مش لاقي الزرار. الشكل الحلو بييجي بعد ما الشاشة تبقى واضحة، مش بداله.
- إنك تشرح للمستخدم وهو بيجرب. أول ما تقول «دوس هنا» الاختبار باظ، لأن المستخدم الحقيقي مش هيلاقيك جنبه. اسكت، واكتب، وصلّح بعدين.
بعد كده
لما تخلص الخطة دي ويبقى عندك أول case study، دي الخطوات اللي بعدها:
- Case study تانية: كرر نفس الرحلة على مشكلة مختلفة، ويفضل في نوع تطبيق مختلف. اتنين كويسين أحسن من خمسة صور بس.
- أساسيات الـ Frontend: HTML و CSS، علشان تفهم المبرمج هيبني تصميمك إزاي، وإيه اللي سهل وإيه اللي صعب. ولو حابب تكمّل فيه، فيه خطة الـ Frontend كاملة هنا.
- الـ Accessibility بالتفصيل: معايير WCAG، وإزاي تصمم لحد نظره ضعيف أو بيستخدم قارئ الشاشة. ده بيفرق في جودة شغلك، وبيخلي تصميمك ينفع ناس أكتر.
احفظ الصفحة دي، وارجعلها كل ما تخلص حاجة وعلّم عليها. ولو وقفت في مرحلة ومش فاهم، ارجع للي قبلها، غالبًا المشكلة هناك.