1- UI/UX مقدمة في
2- مراحل عملية التصميم
3- أساسيات تجربة المستخدم (UX)
4- أساسيات تصميم واجهة المستخدم (UI)
5- إنشاء النماذج الأولية (Prototyping)
6- التفاعل (Interaction Design)
7- الاختبار والتحسين
8- مشروع عملي وتقديم النماذج النهائية
1- UI/UX مقدمة في
المحتوى:
- UI/UX مقدمة عن الـ
- تعريف وأمثلة عملية على الفرق بينهما.
- أهمية التصميم الجيد في تحسين تجربة المستخدم.
- المهارات الأساسية لمصمم UI/UX
- التفكير الإبداعي.
- مهارات التواصل.
- أدوات التصميم الحديثة.
- أدوات سيتم استخدامها في الدورة
- Elementor Pro.
- أدوات إضافية مثل Figma أو Adobe XD للرسومات.
التطبيق العملي:
- تثبيت WordPress وElementor Pro والتعريف بالواجهة.
2- مراحل عملية التصميم
المحتوى:
- المرحلة الأولى: البحث
- كيفية تحليل المستخدمين وتحديد احتياجاتهم.
- أدوات لجمع البيانات مثل Google Forms.
- إنشاء الشخصيات (Personas)
- كيفية تصميم شخصيات المستخدم بناءً على البيانات.
- خريطة رحلة المستخدم (User Journey Map)
- فهم نقاط الاتصال ومشاكل المستخدمين.
التطبيق العملي:
- تحديد جمهور مستهدف لموقع بسيط (مثل متجر إلكتروني).
- إنشاء مخطط مبدئي باستخدام أداة مجانية مثل Miro.
3- أساسيات تجربة المستخدم (UX)
الأهداف:
- إتقان المبادئ الأساسية لتجربة المستخدم.
المحتوى:
- مبادئ تصميم يركز على المستخدم
- سهولة الاستخدام والبساطة.
- قابلية الاستخدام وإمكانية الوصول
- تعريف قابلية الاستخدام.
- تحسين تجربة المستخدم لذوي الاحتياجات الخاصة.
- دراسة حالة لموقع سيئ وتحليل مشاكله
التطبيق العملي:
- تحسين نموذج موقع عبر Elementor بناءً على مبادئ UX.
4- أساسيات تصميم واجهة المستخدم (UI)
الأهداف:
- التعرف على عناصر واجهة المستخدم وتطبيقها في التصميم.
المحتوى:
- مبادئ تصميم واجهات المستخدم
- التباين، المحاذاة، والتسلسل الهرمي البصري.
- اختيار الألوان والخطوط
- استخدام أدوات مثل Adobe Color.
- تصميم شبكات مرنة ومتجاوبة
التطبيق العملي:
- تصميم واجهة بسيطة باستخدام Elementor Pro.
- تخصيص ألوان وخطوط الموقع.
5- إنشاء النماذج الأولية (Prototyping)
الأهداف:
- تعلم بناء النماذج الأولية وعرضها للمستخدمين.
المحتوى:
- مفهوم النماذج الأولية
- أهميتها في عملية التصميم.
- أدوات إنشاء النماذج الأولية
- مقارنة بين Elementor Pro وأدوات مثل Figma.
التطبيق العملي:
- إنشاء صفحات رئيسية (Landing Page) مع تجربة التفاعل باستخدام Elementor.
6- التفاعل (Interaction Design)
الأهداف:
- تحسين تفاعل المستخدم مع الموقع.
المحتوى:
- إضافة الرسوم المتحركة والحركات
- كيفية استخدام ميزات Elementor مثل التحريك البسيط (Motion Effects).
- تصميم تدفقات المستخدم
- ربط صفحات الموقع بوضوح ومنطقية.
التطبيق العملي:
- تصميم تفاعل بسيط مثل القائمة المنسدلة أو نموذج الاتصال.
7- الاختبار والتحسين
الأهداف:
- تقييم التصميم بناءً على التغذية الراجعة وتحسينه.
المحتوى:
- اختبار تجربة المستخدم
- كيفية إجراء اختبار A/B.
- استخدام أدوات مثل Google Analytics لتحليل البيانات.
- تحسين الأداء
- تحسين سرعة الموقع باستخدام إضافات WordPress.
التطبيق العملي:
- تحليل موقع عملي وتحسينه بناءً على الملاحظات.
8- مشروع عملي وتقديم النماذج النهائية
الأهداف:
- تنفيذ مشروع شامل يعكس جميع المهارات المكتسبة.
المحتوى:
- تنفيذ مشروع عملي
- تصميم موقع بسيط (مثل متجر إلكتروني أو مدونة).
- عرض المشروع
- تقديم العمل أمام باقي المشاركين.
- نصائح للتطوير المهني
- بناء محفظة أعمال قوية.
- كيفية البحث عن وظائف أو فرص عمل حر (Freelance).
التطبيق العملي:
- تسليم مشروع متكامل على Elementor Pro يعكس المفاهيم المكتسبة.
1- التعرف على البرنامج وأساسياته
2- أدوات التحديد والتحريك
3- الماسك (Masking) والأدوات الأساسية
4- أدوات الرسم والتجميل
5- النصوص والأشكال والتأثيرات
6- التعديلات والفلاتر المتقدمة
7- الفلاتر المتخصصة
8- مشاريع عملية وتقديم النماذج النهائية
1- التعرف على البرنامج وأساسياته
الأهداف:
- التعرف على واجهة البرنامج وأهم المفاهيم الأساسية.
المحتوى:
- فتح برنامج فوتوشوب وإنشاء ملف جديد.
- التعرف على واجهة البرنامج.
- مفاهيم أساسية:
- الصور المتجهة (Vector) مقابل الصور النقطية (Rasterize).
- الطبقات (Layers).
- البكسل (Pixel).
- الشفافية (Opacity).
التطبيق العملي:
- إنشاء مشروع بسيط يحتوي على طبقات متعددة وتعديل الشفافية.
2- أدوات التحديد والتحريك
الأهداف:
- تعلم أساسيات التحديد والتحريك داخل التصميم.
المحتوى:
- أدوات التحديد والتحريك (Selection and Move).
- طرق إضافية للتحديد:
- التحديد باستخدام نطاق الألوان (Color Range).
- التحديد باستخدام “تحديد السماء” (Select Sky).
- مفهوم الكائنات الذكية (Smart Object).
التطبيق العملي:
- تصميم بسيط يحتوي على عناصر محددة ومتحركة.
3- الماسك (Masking) والأدوات الأساسية
الأهداف:
- فهم أدوات التحكم في التفاصيل الدقيقة وتطبيق الماسك.
المحتوى:
- مفهوم الماسك (Masking).
- مفهوم القناع المقصوص (Clipping Mask).
- تحديد الشعر باستخدام أداة Select and Mask.
- شرح أداة القلم (Pen Tool).
التطبيق العملي:
- استخدام أداة القلم لتحديد شكل معقد وإضافة ماسك.
4- أدوات الرسم والتجميل
الأهداف:
- إتقان أدوات الرسم وأدوات التجميل لتحسين الصور.
المحتوى:
- شرح أداة الفرشاة (Brush Tool).
- شرح أداة ختم النسخ (Clone Stamp Tool).
- شرح أداة الممحاة (Eraser Tool).
- شرح أداة التدريج (Gradient Tool).
- أدوات التجميل (Retouching Tools).
التطبيق العملي:
- تحسين صورة شخصية باستخدام أدوات التجميل.
5- النصوص والأشكال والتأثيرات
الأهداف:
- تصميم نصوص وأشكال مع تطبيق تأثيرات احترافية.
المحتوى:
- أداة الكتابة (Typing Tool).
- أدوات تحديد المسار والأشكال (Path Selection Tool + Shapes).
- شرح خصائص التأثيرات (Blending Options).
- أدوات الدمج (Blending Modes).
التطبيق العملي:
- تصميم بطاقة تحتوي على نصوص وأشكال مع تأثيرات مميزة.
6- التعديلات والفلاتر المتقدمة
الأهداف:
- تطبيق التعديلات المتقدمة باستخدام الفلاتر والضبط.
المحتوى:
- شرح التعديلات (Adjustments).
- فلتر Neural Filters.
- معرض الفلاتر (Filter Gallery).
- فلتر الكاميرا الخام (Camera Raw Filter).
التطبيق العملي:
- تعديل صورة باستخدام Adjustments وCamera Raw Filter.
7- الفلاتر المتخصصة
الأهداف:
- تعلم الفلاتر المتخصصة لتحسين الصور والتصميمات.
المحتوى:
- فلتر Liquify لتعديل الأشكال.
- فلتر Vanishing Point لتطبيق المنظور.
- فلاتر التمويه (Blur).
- بعض الفلاتر الإضافية الأخرى.
التطبيق العملي:
- تصميم يحتوي على تأثيرات باستخدام الفلاتر المختلفة.
8- مشاريع عملية وتقديم النماذج النهائية
الأهداف:
- تنفيذ مشاريع متكاملة تجمع المهارات المكتسبة.
المحتوى:
- التطبيق الأول: تصميم واجهة موقع بسيط.
- التطبيق الثاني: تعديل صورة شخصية باحترافية.
- التطبيق الثالث: إنشاء إعلان بسيط لمنتج.
- التطبيق الرابع: تصميم شعار احترافي.
- التطبيق الخامس: تحسين صور باستخدام Retouching Tools.
- التطبيق السادس: تصميم بطاقة دعوة مميزة.
- التطبيق السابع: تطبيق مشروع شامل يجمع كل الأدوات والفلاتر.
التطبيق العملي:
- تقديم المشاريع ومناقشتها مع المجموعة.