الخطوات الإجرائية الأساسية لتصميم واجهات الموقع الإلكتروني | الفصل السادس | الدرس الثاني

الخطوات الإجرائية الأساسية لتصميم واجهات الموقع الإلكتروني هو عنوان الدرس الثاني من الفصل السادس التي تحمل اسم “تصميم واجهات الموقع الإلكتروني” من مقرر “التصميم الرقمي” الفصل الدراسي الثاني.

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

لذا قم بقراءة أهداف الموضوع جيدًا، ثم احرص على إعادة قراءتها وتحصيل محتوياتها بعد انتهائك من دراسة الموضوع.

أهداف الموضوع

1. تطبيق الخطوات الإجرائية لبدء العمل في أحد برامج تصميم واجهة المستخدم UI.
2. تطبيق الخطوات الإجرائية للتعامل مع الأدوات الأساسية لبرنامج تصميم واجهة المستخدم UI.

هيا لنبدأ!

معرفة بعض أنظمة تصميم واجهات الموقع UI

نتعرف في هذا الموضوع على بعض أنظمة تصميم واجهات الموقع UI، وهي:

Adobe XD

• تُعدُّ منصة Adobe XD من المنصات الشاملة لتصميم واجهة الموقع بما تتميز به، فهي تُمكِّن من عمل التصميم التعاوني والنماذج الأوَّليَّة (Prototypes) الواقعية.
• مدفوع، مع تجربة مجانية لمدة أسبوع.

Figma

• تُمكِّن من عمل التصميم السريع، والنماذج الأولية، كذلك التعاون مع مُصممين آخرين، ويتميز بسهولة استخدامه، كما يحتوي على أداة السبورة البيضاء على الإنترنت، من أجل التفكير التعاوني والعصف الذهني وورش العمل.
• مدفوع.

Sketch

• تُقدِّم منصة Sketch تصميمًا لكلٍ من واجهة المستخدم UI وتجربة المستخدم UX، ويُمكِن من خلالها استخدام الرسم، والتخطيط الشبكي، وعمل النماذج الأولية، وعمل التعديلات النهائية للتصميم.
• مدفوع، مع تجربة مجانية لمدة شهر.

يُمكِنك التعرُّف على أفضل برامج تصميم واجهات المواقع الإلكترونية من خلال الرابط التالي:

أفضل برامج تصميم واجهة المستخدم وتجربة المستخدم UIUX – فرصة

الخطوات الإجرائية لبدء العمل في أحد برامج تصميم واجهة الموقع UI

سنتعرف في هذا القسم على الخطوات الإجرائية لبدء العمل في برامج تصميم واجهة الموقع UI.

أولًا: تسجيل الدخول على creativecloud.adobe.com/apps.

تُعدُّ حزمة Adobe Creative Cloud مكتبةً متكاملةً لأدوات التصميم وإدارة الملفات وعرضها من خلال مكتبات ومستندات سحابية ونماذج أوَّليَّة وأعمال إبداعية، ولبدء العمل على برنامج Adobe XD أحد البرامج التي تُساعِد في تصميم واجهة الموقع أو التطبيقات.

ثانيًا: اختيار تثبيت (أو تنزيل) تطبيق XD من بين التطبيقات.

برنامج أدوبي إكس دي Adobe XD:

يُعدُّ برنامج Adobe XD من البرامج المميزة لتصميم الواجهات للمواقع أو التطبيقات.

ظهرت النسخة الأولى من البرنامج عام 2015م بغرض تدعيم عملية التصميم الرقمي للواجهات ببرنامج يُسهِّل العمل على مصممي واجهات المُستخدِم، فمصمم واجهة المستخدم UI Designer لا يقوم ببرمجة الموقع وكتابة النص البرمجي لأنها من عمل مصمم تجربة المستخدم UX Developer، وهناك عدة مميزات مثالية لبرنامج Adobe Design XD، وهي:

• يدعم Adobe XD حاجة المصممين لإنشاء الرسم اليدوي؛ مما يزيد من سهولة ومرونة التعامل مع البرنامج.
• يُمكِن الاستفادة من مميزات البرنامج في النسخة المجانية المحدودة، والتدرُّب على كافة المزايا التي يُقدمها البرنامج.
• التركيز على واجهات المستخدم والتخصُّص في تصميمها بتوفير مساحة عمل مبسطة وفعَّالة.
• أدوات التعديل تعتمد على السَّحب والإفلات مع عددٍ غير محدودٍ من اللوحات الفنية.
• يدعم وظائف الرسوم المتحركة والفيديو وتأثيرات الحركة.
• يسمح بمشاركة النماذج الأوَّليَّة التفاعلية والأصول مع المطورين.

ثالثًا: التعريف بواجهة صفحة برنامج Adobe XD.

• ملف جديد (New file): لإنشاء مشروع جديد.
• فتح (Open): لفتح مشروع سابق.
• الرئيسية (Home): شاشة بدء البرنامج.
• التعلم (Learn): مكتبة رقمية تتضمن الشروحات التطبيقية.
• الملفات (Files)
• ملفك الخاص (Your file): الملفات التي قمن بإنشائها.
• الملفات المشتركة (Shared with you): الملفات التي اشتركت فيها مع مصممين آخرين.
• إدارة الروابط (Manage links): إدارة جميع الروابط في حسابك.
• المحذوفات (Deleted): الملفات المحذوفة، وعند عدم استعادتها خلال شهر من حذفها فإنها تُحذَف بشكل تلقائي من البرنامج.

رابعًا: إنشاء ملف جديد في برنامج Adobe XD.

لإنشاء ملف جديد (New Document) من خلال تحديد أحد اللوحات الفنية (Art Board)..

1. واجهة تطبيقات الأجهزة الذكية.
2. واجهة موقع إلكتروني.
3. واجهة وسائل التواصل الاجتماعي.
4. واجهة بحجم مُخصَّص.

خامسًا: التعرُّف على مساحة العمل (Workspace).

1. القائمة الرئيسية (Main menu).
2. وضع التصميم (Design mode).
3. وضع النموذج الأولي (Prototype mode).
4. وضع المشاركة (Share mode).
5. معاينة على الجهاز (Preview on device).
6. المعاينة (Preview).
7. نسبة التكبير/ التصغير (Zoom percentage).
8. مفتش الخصائص (Property Inspector).
9. اللوحة القماشية (Pasteboard).
10. اللوحات الفنية (Artboards).
11. الإضافات (Plugins).
12. الطبقات (Layers).
13. المكتبات (Libraries).
14. شريط الأدوات (Toolbar).

يُمكِنك التعرُّف على المزيد من المعلومات عن واجهة برنامج Adobe XD من خلال الرابط التالي:

الخطوات الإجرائية للتعامل مع الأدوات الأساسية لبرنامج Adobe XD

سنتعرف في هذا القسم على الخطوات الإجرائية للتعامل مع الأدوات الأساسية لبرنامج Adobe XD، وهي:

1. التعامل مع الأدوات الأساسية في برنامج Adobe XD.
2. التعامل مع المخطط الهيكلي WireFrame.
3. التعامل مع الطبقات Layers.

نتعرف في هذا الموضوع على النقطة الأولى من الخطوات الإجرائية للتعامل مع الأدوات الأساسية لبرنامج Adobe XD.

أولًا: التعامل مع الأدوات الأساسية في برنامج Adobe XD

أ. التعامل مع الكائنات:

ب. التعامل مع أدوات الرسم Pin, Line:

ج. التعامل مع الحدود، التعبئة، الخطوط المتقطعة:

د. التعامل مع تقاطع الأشكال:

من الخيارات التي تساعد في التصميم في صفحات الويب لرسم الأشكال المختلفة، مثل: الأيقونات أو الأزرار، وهناك بعض الخصائص المساعدة في برنامج Adobe XD تُسهِّل عملية التصميم.

ومن ذلك على سبيل المثال:

أمامك عدة أشكال متشابهة تحوي شكلين أحدهما مربع باللون الأزرق والدائرة باللون الأخضر، وبتحديد الشكلين معًا ثم النقر على بعض الخصائص فإن النتيجة ستكون مختلفة في كل حالة.

يُمكِنك التعرُّف على المزيد من المعلومات عن “الخطوات الإجرائية الأساسية لتصميم واجهات الموقع الإلكتروني” من خلال الرابط التالي:

تصميم واجهات مواقع إلكترونية – ملتقى

إلى هنا يكون قد انتهى موضوع “الخطوات الإجرائية الأساسية لتصميم واجهات الموقع الإلكتروني“، لا تنسوا مراجعة أهداف الموضوع أعلى المقال، وانتظرونا في الموضوع القادم!

روابط هامة

مقررات الفصل الدراسي الثاني