ضمن سلسلة دروس تعليم تصميم واجهات المستخدم باستخدام برنامج Adobe XD، يقدم د. محمد أحمد غزال مجموعة من الدروس المتسلسلة في شرح Adobe XD بالمثال التطبيقي العملي، من خلال تعليم طريقة بناء النموذج الاولي (واجهات المستخدم) لتطبيق خاص بالطبيعة.
فكرة التطبيق:
1- يتم تصنيف موضوعات الطبيعة
2- يتم تمكين المستخدم من البحث عن اي موضوع متعلق بموضوعات الطبيعة
3- يتم تمكين المستخدم من تصفح انشطة وموضوعات الطبيعة
4- يقدم التطبيق امكانية التفاعل مع المحتويات الخاصة بالطبيعة.
5- يقدم التطبيق معارف كافية ضمن تصنيفات متعددة عن كل عنصر من عناصر الطبيعة.
أهداف الدروس المقدمة في هذه السلسلة:-
1- التعرف على مكونات برنامج Adobe XD
2- التعرف على أدوات التصميم والرسم في برنامج Adobe XD
3- التعرف على خطوات بناء مشروع واجهة المستخدم للتطبيق
4- التعرف على طريقة تعريف هوية التطبيق
5- التعرف على مصادر الالوان وتحديد مخطط الالوان الخاص بالتطبيق
6- تمكين الطالب من استخدام اداة القلم في الرسم الحر
7- تمكين الطالب من التعامل تلوين الاشكال
8- تمكين الطالب من تصميم قوالب فنية للصور والازرار
9- تمكين الطالب من استخدام اداة الظل
10- تمكين الطالب من تحريك واجهات التطبيق
11- تمكين الطالب من صناعة الايقونات
12- تمكين الطالب من جمع الايقونات والاشكال المستخدمة في التصميم والرسم
عناوين السلسلة واهداف دروسها:-
الدرس الاول: شرح مختصر عن واجهات التطبيق كاملاً والتعرف على مكونات واجهات التطبيق وكيفية رسمها وتصميمها.
رابط الدرس الأول:- https://youtu.be/LF51Q9JdKPA
أهداف الدرس الاول:-
1- تعريف الطالب بالمشروع ومكوناته
2- تعريف الطالب بالادوات المستخدمة في تصميم واجهات التطبيق Nature App
3- شرح واجهات المستخدم الخاصة في تطبيق Nature App
الدرس الثاني:- تصميم الصفحة الرئيسية للتطبيق (Nature App)
رابط الدرس الثاني:- https://youtu.be/rs1nbEJCWko
أهداف الدرس الثاني:-
1- شرح الهوية البصرية للتطبيق وكيفية استخدام مخطط الالوان
2- شرح كيفية بناء مكتبة خاصة بمشروع التطبيق والتي من خلالها يمكن ارشفة كلاً من الالوان، الصور والاشكال المختلفة.
3- شرح كيفية تلوين الاشكال والخلفيات
4- شرح كيفية تضمين الصور في عمل شفافيات للتطبيق
5- شرح كيفية ادراج الخطوط وتنسيق الخطوط
الدرس الثالث:- تعلم بناء وتصميم القائمة المنسدلة (القائمة الرئيسية للتطبيق)
رابط الدرس الثالث:- https://youtu.be/3cjnxumeScg
أهداف الدرس الثالث:-
1- تعلم نسخ لوحة الرسم
2- تعلم تصميم المربعات
3- تعلم تلوين الاشكال
4- تعلم عمل اشكال شفافة
5- تعلم التكرار الشبكي Repear Grid في تصميم القوائم
6- تعلم رسم ايقونة من الصفر.
الدرس الرابع:- تعلم بناء صفحة المعلومات الخاصة بالتطبيق Nature App
رابط الدرس الرابع:- https://youtu.be/-nswRop5V1g
أهداف الدرس الرابع:-
1- شرح طريقة استخدام اداة القلم
2- تعليم الطالب رسم ورقة شجر باستخدام اداة القلم
3- تعليم الطالب استخدام المكتبات في تنسيق الخطوط
4- تعليم الطالب معالجة وتنسيق الخطوط
الدرس الخامس:- تصميم صفحة محرك البحث الخاصة في التطبيق Nature App
رابط الدرس الخامس:- https://youtu.be/YsF5MC2dy4Q
اهداف الدرس الخامس:-
1- تعليم الطالب نسخ لوحة رسم موجودة
2- تعليم الطالب اعادة تصميم لوحة الرسم
3- تعليم الطالب استخدام اداة المربع لرسم مربع نص
4- تعليم الطالب ادارج خطوط وتلوينها
5- تعليم الطالب استخدام الايقونات
6- تعليم الطالب عن مبدا التمايز اللوني بين الوان الخلفية والوان النصوص والاشكال
الدرس السادس: تصمم صفحة خاصة بتصنفات التطبيق Nature App
رابط الدرس السادس: https://youtu.be/e4A9l4QAJKs
الدرس السابع:-
رابط الدرس السابع: https://youtu.be/YPjkqpU1Na0
الدرس الثامن:-
رابط الدرس الثامن: https://youtu.be/_Y_tLAW1k4g
أهداف الدرس السادس والسابع والثامن:-
1- تعليم الطالب عمل اطارات خاصة بالصور
2- تعليم الطالب طريقة تضمين الصور في واجهات التطبيق
3- تعليم الطالب استخدام الماسك لتضمين الصور في اطارات
4- تعليم الطالب عمل تظليل للاطارات وللاشكال
5- تعليم الطالب على مبدأ التكرار الشبكي
6- تعليم الطالب طريقة جلب الصور والمحتويات من مصادر خارجية
7- تعليم الطالب تصميم الازرار
8- تعلم الطالب دمج الاشكال مع بعضها
9- تعليم الطالب مبدأ قص الاشكال لتصميم اشكال جميلة.
الدرس التاسع: تعلم تحريك الواجهات واخراج النموذج الاولي Prototype
رابط الدرس التاسع: https://youtu.be/Oonf6cravbc
أهداف الدرس التاسع:-
1- تعليم الطالب مبدأ تحريك النوافذ
2- تعليم الطالب الحركة وانواعها
3- تعليم الطالب بناء نموذج اولي Prototype
4- تعليم الطالب الغرض والهدف من تصميم واجهات المستخدم User Interface Prototype
المواضيع التي تم طرحها في هذه السلسلة على النحو التالي:-
Design Shapes Using Adobe XD
Using Mask to design Photo
Using Repeat Grid to design photo gallery
Learn Add, Subtract to create a new shape
Learn prototype to create and design user interface for apps and websites
Learn using Pen tool to draw free shapes
learn using keystroke to help designers
learn using shadow to create wireframe for images, blocks and buttons
learn using fill, border to color the shapes
learn using border radius to enhance the borders of shapes
learn install plugins
learn using library to store color, shapes, and character styles
learn using images as background for artboard
learn using grid to manage the design of artboard
مع خالص تحيات اخوكم الدكتور محمد أحمد غزال
بريد الكتروني:
[email protected]