تصميم واجهة وتجربة المستخدم UX/UI باستخدام فيغما

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

تصميم واجهات المستخدم وتجربته 4.9(73)8 ساعات و12 دقيقة40 درسا4 أقسام

ماذا ستتعلم؟

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

عن الدورة

يشرح هذا الكورس تصميم واجهة وتجربة المستخدم UX وUI باستخدام فيغما Figma. يبدأ بتنزيل البرامج والأدوات ومقدمة عن Figma، ثم صفحة العمل Art Board والأشكال الهندسية والخطوط والألوان والصور، والفرق بين Group وFrame، والعناصر المحفوظة Components، والمحاذاة والتصميم المستجيب Responsive Design، وإنشاء الترابط بين الشاشات، ومشاركة الملف وتصديره. بعدها تدرس تجربة المستخدم: الفرق بين UX وUI، والبحث، وتحليل التجربة UX Analysis، ومسار المستخدم User Flow، والتفكير التصميمي Design Thinking. ثم مبادئ واجهات المستخدم والشاشات الأكثر استخداما، والفرق بين Android وIOS، والدائرة اللونية ومعاني الألوان والخطوط وامتدادات الصور. ويختم بمشروع نهائي من تحديد الأفكار إلى الرفع على بيهانس. ينفع المصممين والمطورين ومن يريد دخول مجال تصميم التطبيقات، ولا يحتاج إلى خبرة سابقة. وبعد الانتهاء ستكون قادرا على تصميم تطبيق كامل ومشاركته.

نتائج متوقعة من الدورة

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

تقييمات المتدربين

التقييمات هنا من المتدربين الذين اشتروا الدورة وأكملوا 50٪ من المحتوى على الأقل — لا توجد تقييمات من شخص لم يطلع على المحتوى.

4.9

★★★★★

73 تقييم

5★

4★

3★

2★

1★

★★★★★عمر ع.·منذ 2 شهرشاهد 50٪

تم عرض كل التقييمات (1)

محتوى الدورة

مبادئ تصميم الـ UI/UX

18 درس

مقدمة الكورسعرض لمحاور الكورس النظرية والعملية: الفرق بين UX وUI، والفرق بين Android وiOS، والألوان والخطوط، والأيقونات والـ Vector وSVG وPNG، ثم برنامج Figma، مع آلية الكورس بمهام بعد كل لقاء.6:27
الفرق بين تصميم تجربة المستخدم وواجهات المستخدم UX vs UIيشرح الفرق بين تجربة المستخدم UX وواجهة المستخدم UI بتشبيه بناء منزل: UX هو الأساس والبحث والتحليل، وUI هو التصميم المرئي، ثم مراحل المشروع من المتطلبات وUser Flow إلى Sketch وWireframe.9:25
ما هي تجربة المتخدم ودراسة الحالة؟يشرح تجربة المستخدم UX ودراسة الحالة أو الجدوى، ومراحل UX من البحث والتحليل إلى User Flow وDesign Thinking، وعناصر البحث: المساهمون والمستخدمون والمنافسون وأهداف المشروع.8:45
ما هو البحث في تجربة المستخدم؟يشرح دراسة المنافسين في بحث تجربة المستخدم: أهميتها، وتحديد المنافس المباشر وغير المباشر، ومقارنة نقاط القوة والضعف، ومراقبة الأسعار وطرق جذب العملاء.7:41
تحليل تجربة المستخدم UX Analysisيشرح تحليل تجربة المستخدم عبر User Persona وUser Story: تعريف كل منهما وأهميته ومحتوياته، وكيف تكتب القصة بالإجابة عن من ومن أجل ماذا ولماذا.5:45
ما هو مسار المستخدم UX User Flowيعرّف مسار المستخدم User Flow وأشكاله الأساسية من مستطيل ومعين ودائرة، ويبني مثال تسجيل الدخول في Figma، مع الإشارة إلى برنامج Miro.11:32
التفكير التصميمي UX Design Thinkingيشرح Design Thinking بمراحله الخمس: التعاطف والتعريف والأفكار والنموذج الأولي والاختبار، وطبيعتها التكرارية مع الرجوع للمراحل السابقة عند وجود خلل.11:36
مقدمة الى واجهات المستخدم Intro to UIيقدم واجهات المستخدم UI وتعريفها وارتباطها بالـ UX، ومبادئها الأساسية: السيطرة على الواجهة، وجعل التصميم مريحا وفعالا، وتقليل الإجراءات، وتناسق الواجهات.6:13
المبدأ الأول والثاني من واجهات المستخدميشرح المبدأين الأول والثاني من مبادئ UI: جعل الصفحات قابلة للرجوع، وسهولة التنقل، وتقديم أفضل الملاحظات، وعدم تكرار العمليات، وتجنب المصطلحات غير المفهومة، وقانون Fitts.8:19
المبدأ الثالث والرابع من واجهات المستخدميكمل مبادئ UI بقانون النقرات الثلاث والتناسق البصري والوظيفي ومع المستخدم، ثم أشكال الواجهات الثلاثة: الرسومية والصوتية والحركية.9:32
الشاشات الاكثر استخداما في التصمبميستعرض الشاشات الأكثر استخداما في التطبيقات: Splash وOnboarding وتسجيل الدخول والتسجيل وتحقق الرمز والملف الشخصي والصفحة الرئيسية، مع أمثلة لتطبيقات المتاجر الإلكترونية.7:23
الفرق بين أنظمة التشغيل Android vs IOSيقارن بين تصميم Android وiOS من حيث الأيقونات الممتلئة والمفرغة، وشريط الحالة وشريط التطبيق، وأزرار التنقل، ومكان البحث، والأزرار والمفاتيح وخانات الاختيار.13:10
ما هي الدائرة اللونيةيشرح الدائرة اللونية: الألوان الأساسية Red وGreen وBlue وكيف ينتج منها باقي الألوان، والألوان الأولية والثانوية والثالثة، والتقسيم إلى حارة وباردة ومتعادلة.7:00
معاني ومدلولات الألوانيشرح معاني الألوان ودلالاتها في التصميم، من الحارة كالأحمر والبرتقالي والأصفر، إلى الباردة كالأخضر والأزرق والبنفسجي، والمتعادلة كالأسود والأبيض والرمادي والبني، مع أمثلة استخدام.7:18
مواقع خاصة بالألوانيشرح نظامي كتابة الألوان Hexadecimal وRGB، وكيفية اختيار الألوان بحسب شعار صاحب العمل، ومواقع تولد تدرجات وتستخرج ألوانا من الصور، وأداة Color Dropper.14:33
أنواع الخطوط ودلالاتها Fonts in UX_UIيشرح أنواع الخطوط Serif وSans Serif، ومبادئ اختيارها: المقروئية، والجمع بين عائلتين للعنوان والنص، وتباين الحجم والوزن، وتجنب كثرة الخطوط، مع مواقع لتنزيل الخطوط.16:07
أشهر المواقع للمصممينيعرض مواقع الصور والأيقونات والفيكتور والرسومات للمصممين مثل Freepik وFlaticon وStorySet وUnsplash، والفرق بين الفيكتور والإلستريشن وصيغ التنزيل المجانية والمدفوعة.9:30
الفرق بين امتدادات الصوريوضح الفرق بين صيغ الصور SVG وPNG وJPG من حيث الحجم والجودة عند التكبير وإمكانية تعديل الألوان داخل Figma والخلفية، ولماذا يفضل SVG.4:56

استخدام فيجما Figma

11 درس

تنزيل البرامج والأدوات اللازمة ومقدمة لبرنامج Figmaيشرح تنزيل برنامج Figma وإنشاء الحساب وتسجيل الدخول، وتنزيل برامج أخرى مثل Photoshop وIllustrator، والتعرف على الواجهة الرئيسية والمشاريع وCommunity، وتشغيله على الويب.13:30
صفحة العمل والعناصر الاساسية في فيجما Art Board in Figmaيشرح واجهة Figma وإنشاء ملف تصميم وصفحة العمل Artboard أو Frame: شريط الأدوات والطبقات، واختيار مقاس الشاشة مثل iPhone، وLayout Grid وAuto Layout، وخصائص Stroke وExport واختصارات F وA.13:30
الأشكال الهندسية في فيجما Shapes in Figmaيشرح الأشكال الهندسية في Figma: المربع والخط والسهم والمثلث والنجمة وخصائصها كعدد الرؤوس والـ radius، وتسمية الصفحات، وضبط التكبير على 100%، وأداة Pencil والـ History.17:30
الخطوط وخصائص الخط Text in Figmaيشرح دمج الأشكال في Figma بأدوات مثل Union وSubtract، ثم أداة النص Text وخصائصها: المحاذاة واختصارات Alt، وLine Height وLetter Spacing، وتنسيق الفقرات، والتحكم بمحاذاة النص رأسيا.14:38
الألوان والصور في فيجما Colors and Imagesيشرح خصائص النص في Figma مثل الخط تحته والمنتصف وتثبيت الخطوط، ثم الألوان والصور وسحب اللون، وإنشاء شاشة Artboard مع معاينة Preview.21:15
الفرق بين ادوات تجميع العناصر Group vs Frameيوضح الفرق بين Group وFrame في Figma، وتعديل الصور وخصائصها، وخصائص Frame في Prototype مثل Overflow وScroll، ولماذا يفضل استخدام Frame.14:41
العناصر المحفوظة وتسهيل العمل في فيجما Componentsيشرح Components في Figma وفائدتها في تعديل العنصر مرة واحدة ليتغير في كل الشاشات، مع Styles للألوان والنصوص والفرق بينها وبين الـ Library.18:17
المحاذاة وجعل التصميم مستجيب Layout and Responsive Designيشرح المحاذاة والتصميم المتجاوب في Figma: مفهوم Responsive، واستخدام Auto Layout وخاصية Wrap، وضبط المسافات بمضاعفات الثمانية، وتحكم Frame في الحجم.14:11
إنشاء الترابط بين الشاشات (الجزء الأول)يبدأ الـ Prototype في Figma: اختيار الجهاز، وربط الشاشات، وأنواع الانتقال مثل Smart Animate وSlide، وخيار Change to وزر الرجوع، وفتح Overlay بخلفية.20:27
إنشاء الترابط بين الشاشات (الجزء الثانى)يشرح محفزات التفاعل في Prototype مثل OnDrag وWhile Hover وMouse Enter وMouse Leave، ثم حالات Hover وPressed باستخدام Component وVariants.8:22
مشاركة وتصدير الملف في فيجما Share and Exportيشرح مشاركة الملف وتصديره في Figma: تثبيت العناصر بـ Position Fix، والتعليقات، وPlugins وWidgets، وصلاحيات المشاهدة والتعديل، والتصدير والاستيراد، وسجل النسخ، والاختصارات.17:53

مشروع متكامل من الألف إلى الياء باستخدام فيجما Figma Project

8 درس

تحديد أهداف وأفكار المشروع النهائييبدأ العمل على المشروع النهائي: توليد فكرة مشروع عبر موقع Goodbrief، ودراسة المنافسين من مواقع جاهزة وUI Kit، وإنشاء User Persona باستخدام قوالب من Figma Community.13:16
مسار المستخدم و السكتش و النموذج الخاص بالمشروع (الجزء الأول)يطبق عمليا بناء User Flow على برنامج Miro لتطبيق طلب وجبات، بالمستطيلات والمعين والدائرة لتسجيل الدخول والمنتجات والدفع وتتبع الطلب، ثم يحول ذلك إلى Sketch لشاشات التطبيق.11:56
مسار المستخدم و السكتش و النموذج الخاص بالمشروع (الجزء الثانى)يبني شاشات الـ Wireframe في Figma خطوة بخطوة، من Splash وOnboarding وتسجيل الدخول والتسجيل، مع ضبط الأزرار والمسافات وحقول الإدخال وشريط البحث ومكان الإعلان.25:57
مسار المستخدم و السكتش و النموذج الخاص بالمشروع (الجزء الثالث)يصمم بطاقة المنتج وشريط التنقل السفلي وصفحة تفاصيل المنتج والسلة، ثم شاشة الدفع وشاشة تتبع الطلب بمؤقت، ضمن مرحلة الـ Wireframe في Figma.15:58
الانتهاء من التصميم مع رفع التصميم على بيهانس (الجزء الأول)يبدأ مرحلة التصميم الفعلي في Figma: إنشاء شعار، واختيار الألوان الأساسية والثانوية، وإضافة رسومات وأيقونات SVG، وتصميم الواجهة وبطاقة المنتج بالألوان المختارة.28:27
الانتهاء من التصميم مع رفع التصميم على بيهانس (الجزء الثانى)يكمل تصميم الشاشات في Figma: صفحة التصنيفات وأيقونات شريط التنقل بين الممتلئة والمفرغة، وأهمية صيغة SVG، وبطاقة الدفع، ونافذة تأكيد بأزرار.19:37
الانتهاء من التصميم مع رفع التصميم على بيهانس (الجزء الثالث)يربط الشاشات في Prototype داخل Figma مع الانتقال بين عناصر المكونات، ثم يعرض طرق إنشاء Mockup للتصميم، تمهيدا لرفعه على Behance.17:55
الانتهاء من التصميم مع رفع التصميم على بيهانس (الجزء الرابع)يشرح رفع المشروع على Behance وإضافة رابط Figma، ثم مفهوم Mask وإخفاء الطبقات، ومعالجة مشكلات الـ Prototype، وختام الكورس بنصيحة متابعة تصاميم الآخرين.20:25