الوحدة 1: الرسم والتخطيط

صمّم واجهات تطبيقات الموبايلباستخدام Figma

استكشف علم النفس وراء المنتجات الرقمية. يتعلّم الطلاب مبادئ UI/UX الأساسية، ويتقنون Figma لإنشاء نماذج تفاعلية، ويبنون تطبيقات موبايل جميلة متمحورة حول المستخدم من الصفر.

3 وحدات · 12 درساًملفّ أعمال UI/UX

المشروع النهائي

تطبيق FurEver Pet Care

ما الذي ستتعلمه

أربع نتائج تعلّم.مصمّم منتجات واثق واحد.

مهارات حقيقية وقابلة للنقل تجسر التعاطف مع المستخدم وتصميم المنتجات التفاعلية.

أتقن مبادئ UI/UX

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

من المخطط الهيكلي إلى النموذج التفاعلي

استخدم Figma للانتقال من مخطط هيكلي منخفض الدقّة إلى نماذج تفاعلية عالية الدقّة بالكامل.

صمّم بتعاطف

ادمج التفكير المتمحور حول المستخدم لبناء تجارب رقمية سهلة الوصول وسلسة.

ابنِ ملفّ أعمال رقمي

انشر نماذج تطبيقاتك التفاعلية على ملفّ Behance احترافي.

الأدوات والتقنيات

منظومة أدوات المصمّم

تعلّم تصميم المنتجات عبر العمل التطبيقي بأدوات إبداعية رائدة في الصناعة.

Figma

المعيار الصناعي لتصميم المنتجات الرقمية. يستخدمه الطلاب لرسم الهيكل التخطيطي وتطبيق التنسيق البصري وبناء نماذج تفاعلية قابلة للنقر.

Behance

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

Canva

أداة تصميم إبداعية تُستخدم لبناء عروض تقديمية احترافية بصرية لتقديم تطبيقاتهم للأقران والأهل.

مسار التعلّم

ثلاث وحدات.ملفّ أعمال منشور في النهاية.

من أوّل مخطط هيكلي إلى تطبيق موبايل تفاعلي منشور على Behance.

أساسيات UI/UX والمخططات الهيكلية

اكتشف علم النفس وراء التصميم الجيّد. أتقن مساحة العمل في Figma وتعلّم رسم مسارات المستخدم ببناء مخطط هيكلي منخفض الدقّة.

أساسيات UI/UX والمخططات الهيكلية

التصميم البصري والنماذج التفاعلية

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

التصميم البصري والنماذج التفاعلية

الشاشات المتقدّمة وعرض الأعمال

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

الشاشات المتقدّمة وعرض الأعمال

المهارات المكتسبة

أكثر من مجرّد بكسلات.

كلّ خرّيج صفّ سابع يخرج بمهارات تصميم تطبيقية وتفكير منتج ومهارات شخصية تؤهّله لعرض ملفّ أعماله بثقة.

المهارات التقنية

النماذج التفاعلية في فيغما

ابنِ نماذج تفاعلية متحرّكة تحاكي تجارب تطبيقات الموبايل الحقيقية.

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

نظّم التخطيطات والتسلسل الهرمي ومسار المستخدم لتجربة بديهية من أوّل لمسة.

الرسوم المتحرّكة الذكية

استخدم الرسوم الذكية في فيغما لإنشاء انتقالات سلسة بين الشاشات والحالات.

تخطيطات متجاوبة

صمّم باستخدام التخطيط التلقائي والقيود لتتكيّف الشاشات مع أي جهاز.

المهارات الشخصية

التعاطف المتمحور حول المستخدم

ضع نفسك مكان المستخدم لتصمّم تجارب تحلّ مشكلات حقيقية.

السرد البصري

أوصل الأفكار ورحلات المنتج عبر الصور والألوان والخطوط.

النقد البنّاء

قدّم وتقبّل ملاحظات التصميم بطريقة تدفع العمل قدماً باحترام ووضوح.

عرض الأعمال

نسّق واعرض أعمال التصميم الخاصّة بك كمصمّم منتجات محترف.

الخاتمة

مشروع التخرّجتطبيق FurEver Pet Care.

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

تطبيق FurEver Pet Care

حوّل أفكارك إلى واقع! يصمّم الطلاب نموذج تطبيق موبايل تفاعلي بالكامل يتضمّن إعداداً متحرّكاً وملفّات تبنّي ومحدّد عيادات ومتجر طعام للحيوانات.

إعداد متحرّك: رحّب بالمستخدمين بشاشات افتتاحية سلسة برسوم ذكية.
ملفّات التبنّي: صمّم بطاقات ملفّات تعريف الحيوانات بالصور والقصص.
محدّد العيادات والمتجر: ابنِ شاشات مترابطة للعثور على العيادات وتسوّق طعام الحيوانات.

Student presenting their Behance portfolio on stage

إطلاق ملفّ Behance

اخطُ نحو صناعة التصميم. ينشر الطلاب نماذج Figma الخاصّة بهم على ملفّ Behance احترافي ويعرضون رحلة تصميم تجربة المستخدم أمام جمهور.

النشر على Behance: ارفع ونسّق نماذجك على ملفّ أعمال احترافي.
سرد UX: اشرح للجمهور قراراتك التصميمية ورحلة المستخدم.

الوحدة 2 : مختبر النماذج

صمّم تطبيق الويب الخاص بكUI/UX باستخدام Figma

كُن مصمّم ويب! سيتعلّم الطلاب الفرق بين تصميم الويب وتصميم الموبايل لإنشاء تجارب ويب متجاوبة وجذّابة. سيتقنون عملية تصميم تجربة المستخدم المكوّنة من 5 مراحل، ومكتبات المكوّنات، والـ gamification لبناء واجهات ويب احترافية في Figma.

3 أقسام · 12 درساً · تصميم UI/UX للويب

المشروع النهائي

نموذج واجهة تطبيق ويب

أدوات المعيار الصناعي

منظومة الأدوات.

منصّات ومنهجيات تصميم احترافية لمصمّمي UX الشباب.

Figma

يُستخدم لتصميم تخطيطات ويب متجاوبة وبناء مكتبات مكوّنات قابلة لإعادة الاستخدام وصياغة نماذج تفاعلية متحرّكة تحاكي تجربة الويب النهائية.

Behance

حيث ينشر الطلاب واجهة تطبيق الويب النهائية كدراسة حالة احترافية، موثّقين عملية تصميم تجربة المستخدم لجمهور إبداعي عالمي.

Canva

يُستخدم لبناء عروض تقديمية مصقولة تشرح للأقران والأهل قرارات تصميم تجربة المستخدم واستراتيجية التجاوب والتفاعلات الدقيقة.

ما الذي ستتعلمه

أربع نتائج تعلّم.مصمّم ويب واحد.

مهارات حقيقية قابلة للنقل تجسر التصميم الإبداعي والتخطيطات التقنية.

أتقن مكوّنات واجهة الويب

صمّم صفحات ويب متجاوبة باستخدام مكوّنات Figma والمتغيّرات وتقنيات الإخفاء.

طبّق عملية تصميم تجربة المستخدم

اتّبع عملية تصميم تجربة المستخدم المكوّنة من 5 مراحل للبحث ووضع القصص وبناء نماذج متمحورة حول المستخدم.

هندسة التفاعلات الدقيقة

استخدم أدوات Figma لبناء واجهات لمس/نقر عاطفية وتفاعلية بأسلوب الألعاب.

ابنِ تطبيق ويب متجاوب

صمّم واجهة تطبيق ويب كاملة تنتقل بسلاسة بين الحاسوب والموبايل.

المنهج

خريطة الطريق خطوة بخطوة.

من أساسيات صفحة الويب إلى نموذج ويب تفاعلي متجاوب بالكامل.

عملية تصميم تجربة المستخدم والسرد البصري

تعمّق في عملية تصميم تجربة المستخدم المكوّنة من 5 مراحل! افهم الفرق بين الويب والموبايل وتعلّم استخدام السرد البصري لجذب المستخدمين.

عملية تصميم تجربة المستخدم والسرد البصري

التصميم الذكي والعاطفة

أحيِ تصاميمك. أتقن أقسام الـ Hero في Figma والإخفاء والمكوّنات الذكية واكتشف كيف تثير التفاعلات الدقيقة مشاعر المستخدمين.

التصميم الذكي والعاطفة

التلعيب والويب المتجاوب

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

التلعيب والويب المتجاوب

المهارات المكتسبة

أكثر من مجرّد بكسلات.

كلّ خرّيج يخرج بمهارات تصميم تطبيقية وتفكير منتج ومهارات شخصية تؤهّله لعرض ملفّ أعماله بثقة.

المهارات التقنية

النماذج التفاعلية في فيغما

أتقن أدوات النماذج التفاعلية في Figma لبناء مسارات تطبيقات ويب قابلة للنقر.

التصميم المتجاوب

ابن تخطيطات تتكيف بسلاسة عبر شاشات الحاسوب والأجهزة اللوحية والموبايل.

التفاعلات الدقيقة

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

أنظمة المكوّنات

صمّم بمكوّنات ذكية قابلة لإعادة الاستخدام ومتغيّرات لأنظمة تصميم قابلة للتوسّع.

المهارات الشخصية

السرد البصري

أوصل الأفكار ورحلات المنتج من خلال سرد بصري مقنع.

التعاطف في التصميم

افهم وصمّم لاحتياجات المستخدم الحقيقية عبر عملية تصميم تجربة المستخدم المكوّنة من 5 مراحل.

التفكير المتمحور حول المستخدم

ضع المستخدم في قلب كلّ قرار وتفاعل تصميمي.

استراتيجية التلعيب

استخدم آليات الألعاب كأشرطة التقدّم والشارات لزيادة التفاعل.

المشروع الختامي

المشروع النهائي.

استعراض مهارات UI/UX المتقدّمة عبر نموذج ويب تفاعلي كامل.

نموذج واجهة تطبيق ويب

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

العرض والتقديم

يوثّق الطلاب رحلة التصميم، ويشرحون قرارات تصميم تجربة المستخدم ومحفّزات التصميم العاطفية واستراتيجيات التخطيط المتجاوب أمام جمهور مباشر.