2-6 الخطوات الإجرائية الأساسية لتصميم واجهات الموقع الإلكتروني.
انظر إلى الجدول أمامك: نقارن بين ثلاث منصات لتصميم واجهات المواقع. الأولى هي Adobe XD، وهي منصة شاملة تتيح لك العمل مع مصممين آخرين وبناء نماذج أولية واقعية تسمى Prototype، وتمنحك تجربة مجانية لمدة أسبوع. المنصة الثانية هي Figma، وتتميز بسهولة الاستخدام مع وجود أداة السبورة البيضاء للتفكير التعاوني والعصف الذهني عبر الإنترنت، وهي مدفوعة. المنصة الثالثة هي Sketch، وتوفر مساحة عمل مخصصة لواجهات المستخدم وتجربة المستخدم UX، وتمكنك من الرسم والتخطيط الشبكي وعمل التعديلات النهائية، مع فترة تجربة مجانية لمدة شهر. انظر كيف تختلف كل منصة في مميزاتها ومدة تجربتها المجانية.
يقوم هذا الدرس على شرح الخطوات الإجرائية الأساسية لتصميم واجهات ومواقع الإنترنت باستخدام برنامج أدوبي إكس دي. يغطي الدرس كيفية فتح البرنامج، إنشاء ملف جديد بلوحات فنية متنوعة، والتعامل مع مساحة العمل وأدوات الرسم الأساسية مثل الأشكال الهندسية وأداة الخط وأداة الرسم الحر. كما يوضح كيفية التحكم في خصائص التعبئة والحدود المتقطعة، بالإضافة إلى دمج وتقاطع الأشكال لتصميم العناصر والأزرار. مثال سريع: إذا أردت رسم زر لموقع إلكتروني، تختار أداة المستطيل من شريط الأدوات، ثم تحدد لون التعبئة باللون الأزرق من نافذة الخصائص وتضبط سماكة الحدود الخارجية ليظهر الزر بشكل احترافي جاهز للاستخدام في واجهة الموقع.
الفكرة الأساسية
يعتمد الدرس على تحويل الأفكار التصميمية لمواقع الإنترنت إلى واجهات رقمية عملية باستخدام برنامج أدوبي إكس دي، وذلك عبر فهم خطوات إنشاء المشروع وتوظيف أدوات الرسم والكائنات والتحكم في خصائصها بدقة.
الشرح
يبدأ العمل بتسجيل الدخول إلى حزمة أدوبي واختيار برنامج أدوبي إكس دي المتخصص في تصميم واجهات المستخدم دون الحاجة لكتابة الأكواد البرمجية. عند فتح البرنامج، تنشئ ملفا جديدا عبر اختيار لوحة فنية مناسبة لمقاسات الأجهزة أو المواقع مثل مقاس 1920 الخاص بالويب. تضم مساحة العمل شريط الأدوات الرئيسي، ومفتش الخصائص للتحكم في الأبعاد والألوان، ولوحة الطبقات. في قسم التعامل مع الكائنات، يمكنك رسم أشكال كالمستطيلات والدوائر من شريط الأدوات، والنقر المزدوج على أي كائن للدخول في وضع تحرير المسار وتعديل نقاط الربط. للخطوط، تستخدم أداة الخط لرسم خطوط مستقيمة رأسية أو أفقية، أو أداة الرسم الحر لرسم مسارات مغلقة أو مفتوحة. لكل شكل خصائص أساسية هي التعبئة لملء اللون الداخلي، والحدود لتحديد الإطار الخارجي وسمكته وشكله إذا كان متصلا أو متقطعا مع التحكم بالقيم. وأخيرا تتيح أدوات التقاطع دمج شكلين أو أكثر معا للوصول إلى أشكال معقدة ومميزة مثل الأيقونات والأزرار.
مثال محلول خطوة بخطوة
لنفترض أنك تريد رسم مربع بتعبئة لونية وحدود خارجية متقطعة: ١. افتح برنامج أدوبي إكس دي واضغط على New Document ثم اختر لوحة فنية لموقع إلكتروني. ٢. اذهب إلى شريط الأدوات واختر أداة المستطيل. ٣. انقر واسحب في مساحة العمل لرسم مربع بالأبعاد المطلوبة. ٤. انتقل إلى نافذة الخصائص لتحديد لون التعبئة ولون الحدود الخارجية. ٥. اضبط خصائص الحدود لتصبح متقطعة عبر إدخال قيم المسافات والسماكة المناسبة مثل تعيين حجم الحد والسماكة والفراغات ليظهر الشكل مطابقا للمطلوب.
أخطاء شائعة
- الخلط بين دور مصمم واجهات المستخدم ومصمم تجربة المستخدم؛ فالأول يصمم الواجهة بينما الثاني يهتم بتجربة الاستخدام.
- نسيان النقر المزدوج على الكائن عند محاولة تعديل نقاط مساره أو تحرير زواياه.
- عدم ضبط قياسات اللوحة الفنية المناسبة لنوع الجهاز المستهدف قبل بدء الرسم.
سؤالان للتدريب مع الإجابة
س١: ما الفرق الأساسي بين خاصية التعبئة وخاصية الحدود في الأشكال المرسومة ببرنامج أدوبي إكس دي؟ الإجابة: التعبئة تعني اللون الداخلي للشكل، بينما الحدود هي الإطار الخارجي المحيط بالشكل مع التحكم بسماكته وشكله سواء أكان متصلا أو متقطعا.
س٢: كيف يمكنك الدخول إلى وضع تحرير المسار لكائن مرسوم بهدف تعديل نقاط ربطه؟ الإجابة: عن طريق النقر المزدوج فوق الكائن.