
تصميم واجهة وتجربة المستخدم UX/UI باستخدام أدوبي XD
احترف تصميم تجربة المستخدم وتصميم واجهات التطبيقات
ماذا ستتعلم؟
- فهم مصطلحات ومسار تصميم تجربة المستخدم
- بحث ودراسة المستخدمين والمنافسين
- إجراء مرحلة التحليل وإعداد دراسة حالة
- بناء هيكلية المعلومات وخريطة الموقع
- بناء الشخصية الافتراضية وخريطة تدفق المستخدم
- رسم السكتش وتصميم الويرفريم
- التعرف على برنامج أدوبي XD واستخدامه
- تصميم الجرافيك البصري والبروتوتايب
عن الدورة
يشرح هذا الكورس تصميم تجربة المستخدم UX وتصميم واجهات المواقع والتطبيقات UI باستخدام برنامج أدوبي XD. يبدأ بمقدمة ومصطلحات ومسار تصميم تجربة المستخدم، ثم بحث ودراسة المستخدمين والمنافسين مع دراسة حالة تنافسية عملية ومرحلة التحليل. بعد ذلك تتعلم بناء هيكلية المعلومات وخريطة الموقع، وبناء الشخصية الافتراضية وخريطة تدفق المستخدم، ثم السكتش والويرفريم ومبادئ التصميم. وفي الجزء التطبيقي تتعرف على أدوبي XD وترسم السكتشات وتصمم الويرفريم على ثلاثة أجزاء، ثم تصميم الجرافيك البصري ومهارات تصميم واجهة المستخدم والبروتوتايب. وفي آخر الكورس ملف للملحقات يمكنك تحميله. يناسب هذا الكورس مصممي الجرافيك ومصممي المواقع ومطوري تطبيقات الموبايل وكل من يريد دخول مجال UX وUI. لا تحتاج إلى خبرة سابقة في أدوبي XD، فالكورس يبدأ بالأساسيات. وبعد إنهائه ستكون قادرا على دراسة المستخدمين وتخطيط تجربتهم وتصميم واجهة وبروتوتايب لموقع أو تطبيق.
نتائج متوقعة من الدورة
- القدرة على تصميم واجهات مستخدم جذابة وفعالة باستخدام أدوبي XD.
- فهم مسار المستخدم وإنشاء تجارب مستخدم متكاملة.
- إنتاج بروتوتايب تفاعلي يعكس تجربة المستخدم بشكل احترافي.
- تصميم شخصيات افتراضية وتدفقات المستخدم لتحسين التجربة.
- إعداد مشاريع تصميم كاملة تتضمن الجرافيك البصري والبروتوتايب.
تقييمات المتدربين
محتوى الدورة
1تصميم تجربة المستخدم UX
9 درس
- مقدمة تصميم تجربة المستخدممقدمة في تصميم تجربة المستخدم: تاريخها ومفهومها، والفرق بين UX وUI، ومهام المصمم، وأمثلة تطبيقية، ونموذج قرص العسل، والعلاقة بين المصمم والمبرمج.15:02
- مصطلحات تصميم تجربة المستخدميشرح المصطلحات الأساسية في تجربة المستخدم: نموذج قرص العسل بمفاهيمه مثل الفائدة وقابلية الاستخدام، وتفاعل الإنسان مع الحاسوب، والتصميم التفاعلي، وبيئة العمل، واستراتيجية المحتوى، واختبار قابلية الاستخدام.13:15
- مسار تصميم تجربة المستخدميعرض مسار تصميم تجربة المستخدم ومراحله: الاستراتيجية، والبحث والاستكشاف، والتحليل، والتصميم، والإنتاج، ثم الإطلاق التجريبي والتقييم والإطلاق النهائي.7:04
- بحث و دراسة المستخدمينيشرح تقنيات بحث ودراسة المستخدمين: المقابلات، والاستبيانات، وأدوات تحليل سلوك المستخدم داخل التطبيق، وملاحظة بيئة المستخدم، ودراسة يوم المستخدم.7:50
- بحث و دراسة المنافسينيشرح دراسة أهداف المشروع من مستويات مختلفة، ثم دراسة المنافسين: كيفية إيجادهم، وجمع نقاط قوتهم وضعفهم، وتحديد الميزات التنافسية التي تجذب المستخدمين.6:59
- دراسة حالة تنافسية عمليةدراسة حالة تنافسية عملية لتطبيق مطاعم: البحث عن المنافسين، ومقارنة ميزاتهم مثل العروض وتحديث الوجبات وطرق الدفع والطلبات الخاصة والكبيرة، لتحديد نقاط التفوق.16:00
- مرحلة التحليليشرح مرحلة التحليل في تجربة المستخدم: تحليل المشروع بمعلوماته وأهدافه ومشاكله وحلوله على مثال تطبيق مطعم، ثم حصر الشاشات اللازمة من الترحيبية إلى الدفع والبحث والإعدادات.13:32
- بناء هيكلية المعلومات و خريطة الموقعيشرح هيكلة المعلومات كعلم ترتيب المعلومات بما يوافق توقعات المستخدم مع أمثلة، وتقنية ترتيب البطاقات، ثم بناء خريطة الموقع التي تربط الشاشات وتسلسل الانتقال بينها.8:13
- بناء الشخصية الافتراضية و خريطة تدفق المستخدميشرح بناء الشخصية الافتراضية Persona وما تحتويه من بيانات وأهداف وسلوكيات، ثم خريطة تدفق المستخدم User Flow التي توضح مساره بين شاشات التطبيق.11:18
2تصميم واجهة المستخدم UI باستخدام Adobe XD
9 درس
- السكتش و الويرفريميعرّف مرحلتي السكتش والويرفريم في تصميم الواجهات: السكتش رسم أولي على الورق لتوصيل الفكرة، والويرفريم تصميم منظم على الحاسوب، بمستوى منخفض أو عال من التفاصيل.4:17
- مبادئ التصميميشرح مبادئ التصميم وأثرها على نفسية المستخدم: الألوان الدافئة والباردة ودلالاتها، واختيار الخطوط، والأشكال، والتسلسل الهرمي، والمساحات الفارغة.20:34
- التعرف على أدوبي XDتعريف ببرنامج Adobe XD: الواجهة وأجزاؤها، وأدوات رسم الأشكال والتحكم بأبعادها مع مفتاح Shift، والمحاذاة، والظلال، وعمليات دمج الأشكال وقصها.22:20
- رسم السكتشاتيرسم الاسكتشات الأولية داخل Adobe XD لشاشات التطبيق: السبلاش والترحيبية وإنشاء الحساب وتسجيل الدخول والرئيسية والمنتج والملف الشخصي، باستخدام مربعات وعلامة X للصور والأيقونات.20:00
- تصميم الويرفريم (الجزء الأول)يحوّل الاسكتشات إلى Wireframe في Adobe XD لشاشات السبلاش والترحيبية وإنشاء حساب جديد، مع ضبط المقاسات والهوامش والحواف والألوان والنصوص والأزرار.23:16
- تصميم الويرفريم (الجزء الثانى)يكمل الـ Wireframe للشاشة الرئيسية في Adobe XD: الهيدر والفوتر، وأيقونات البحث والصوت والفلترة، وبطاقات المنتجات، واستخدام Repeat Grid لتكرار العناصر.24:48
- تصميم الويرفريم (الجزء الثالث)يكمل الـ Wireframe لشاشة المنتج وشاشة المينيو في Adobe XD، ويشمل الصورة والمفضلة ومؤشر الصور وتفاصيل المنتج وعداد الكمية وتجميع العناصر.21:33
- تصميم الجرافيك البصرييحوّل الـ Wireframe إلى تصميم UI نهائي في Adobe XD: إضافة الصور بالسحب والإفلات، وتلوين الأسماء، والظلال، والتدرج اللوني، وتغيير الأيقونات والمؤشرات.21:55
- مهارات تصميم الجرافك البصري UI و البروتوتايبيعرض مهارات في Adobe XD: حذف الشاشات وتجميع العناصر، والتدرجات اللونية، وحدود الشاشة وارتفاعها، ثم بناء Prototype بروابط انتقال بين الشاشات ومؤقت لشاشة السبلاش.18:32
3الملحقات
1 ملحقات
- تحميل الملحقات
المحاضر

م/أحمد العصار



