كل تطبيق وموقع تستخدمه صمّمه شخص ما. مصمّمو UI/UX يقرّرون شكل الشاشات وسهولة استخدامها. وتوظّف الشركات والشركات الناشئة والأعمال الصغيرة مستقلين لهذا العمل في كل أنحاء العالم.
UI و UX: ما الفرق؟
| UX (تجربة المستخدم) | UI (واجهة المستخدم) | |
|---|---|---|
| السؤال | هل هو سهل ومفيد؟ | هل يبدو واضحًا وجذابًا؟ |
| العمل | البحث، ومسارات المستخدم، والبنية، والهياكل الأولية، والاختبار | الألوان، والخطوط، والأيقونات، والأزرار، والتخطيطات، واللمسات البصرية |
| النتيجة | يصل المستخدمون إلى هدفهم دون ارتباك | تبدو الشاشات احترافية ومتناسقة |
يعمل الاثنان دائمًا معًا. التطبيق الجميل الذي يربك المستخدمين يفشل، والتطبيق المفيد الذي يبدو مهملًا يفقد الثقة. معظم أعمال العمل الحر تطلب الاثنين، ويُسمّى ذلك غالبًا UI/UX أو تصميم المنتجات.
ما Figma
Figma أداة تصميم تعمل في المتصفح وكتطبيق للحاسوب. يستخدمها المصمّمون لإنشاء شاشات التطبيقات والمواقع، وبناء مكوّنات قابلة لإعادة الاستخدام، وصنع نماذج تفاعلية قابلة للنقر، ومشاركة العمل مع العملاء والمطوّرين. يمكن لعدة أشخاص العمل في الملف نفسه معًا، ويمكن للعملاء التعليق مباشرة على التصميم.
الخطة المجانية تكفي للتعلّم
لدى Figma خطة مجانية وخطط مدفوعة. للخطة المجانية حدود (مثل عدد مشاريع الفريق وبعض المزايا المتقدّمة)، لكنها تكفي لهذه الدورة كلها ولمشاريع معرض أعمالك الأولى. ويمكن للطلاب والمعلّمين التقدّم لخطة Figma التعليمية المجانية. راجع صفحة الأسعار الحالية قبل دفع أي شيء.
الأجزاء الرئيسية لملف Figma
- الملفات والصفحات: يحتوي الملف على مشروع، وتنظّمه الصفحات (مثل "Wireframes" و"Final screens" و"Components").
- الإطارات (Frames): الشاشات أو لوحات العمل التي تصمّم عليها، مثل شاشة هاتف أو صفحة حاسوب.
- لوحة الطبقات (يسار): كل عنصر بالترتيب. الأسماء الجيدة للطبقات تبقي الملفات مرتّبة.
- لوحة الخصائص (يمين): الحجم والموضع واللون والنص والمؤثرات للعنصر المحدّد.
- شريط الأدوات: أدوات الإطار والشكل والقلم والنص والتعليق.
على ماذا يوظّف العملاء مصمّمي UI/UX
- تصميم تطبيق جوال أو موقع جديد من الصفر.
- إعادة تصميم تطبيق أو موقع قديم.
- صفحات هبوط للمنتجات والحملات.
- لوحات تحكم ولوحات إدارة للبرمجيات.
- أنظمة تصميم ومكتبات مكوّنات.
- نماذج تفاعلية قابلة للنقر لاختبار فكرة أو عرضها على المستثمرين.
ستتعلّم في هذه الدورة التفكير وراء تصميم المنتجات الجيد، ومهارات Figma اللازمة لتنفيذه.
مهمة عملية (15 دقيقة)
- أنشئ حساب Figma مجانيًا وملف تصميم جديدًا.
- أضف ثلاث صفحات: "Wireframes" و"Final screens" و"Components".
- افتح تطبيقين على هاتفك واكتب مشكلة UX ومشكلة UI تلاحظهما في كل منهما.
سجّل الدخول أو أنشئ حسابًا مجانيًا لحفظ تقدّمك وأداء الاختبارات. تسجيل الدخول