تجربتي مع برنامج Adobe XD في تصميم واجهات المواقع

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

حسنًا، نفذت العديد من المشاريع بهذه الطريقة، وكانت كل الأمور سلسة، إلى أن أتت نقطة التحول عندما تعاملت مع عميل من النوع المتردد، الذي يعتمد جزئية معينة، ثم يرجع ليعدل عليها.. لا أبالغ أن قُلت أن المشروع تحول إلى جحيم – بالمعنى الحرفي – لأن التعديل على الكود في كل مرة، جعل الكود الناتج سيء جدًا، وفي كل تعديل يزداد الكود تعقيدًا. ووصلت إلى قناعة أن طريقة التصميم على المتصفح ربما تكون مناسبة إذا كنت تعمل على مشروعٍ شخصي، أو أن العميل سلمك كل الصلاحيات في العمل على المشروع، أما إذا كان المشروع فيه أخذ ورد، فهذه الطريقة غير جيدة أبدًا.

بعدها جربت تصميم الموقع على الأليستريتور قبل التحويل إلى كود، وفعلًا كان المشروع سلس جدًا؛ فبعد إعتماد التصميم من العميل، كان الكود الناتج نظيف ومرتب.

بعد ذلك سمعت عن برنامج Adobe XD المخصص لتصميم واجهات الإستخدام.. بعد الإطلاع على ميزاته قررت العمل عليه فورًا، وفعلًا تحولت عملية التصميم البصري للموقع إلى عملية سهلة وسلسلة، فالإنتاجية في البرنامج عالية جدًا، كما أنه يحتوي على ميزات / أدوات جميلة ستساعدك كثيرًا في عالم تصميم المواقع.

من أقوى ميزات البرنامج

  • من أقوى الميزات في البرنامج، هو أمكانية حفظ أنماط معينة (لون معين / نوع وحجم معين للخط) واستخدامها في مشروعك بكل سهولة، وإذا قمت بإجراء أي تعديل على هذه الأنماط يتم تعميم التعديل على كل الصفحات تلقائيًا. هذا يعني أنه يمكنك تغيير اللون الرئيسي في المشروع كله بضغطة زر واحدة. لا بل ويمكنك حفظ كتلة معينة من التصميم – لنقل هيدر مثلًا – وتكراره في الصفحات، وعند تغيير أي جزئية في الكتلة يتم تعميمه على كامل التصميم.
    هذا النقطة بالتحديد كافية للإنتقال للبرنامج، ميزة جبّارة ستختصر عليك الكثير من الوقت، كما أنك ستتجاوز اللحظات المملة في حالة أردت إجراء تعديل معين على صفحات الموقع. وعن طريق هذه الميزة يمكنك عمل ما يسمى ب Style Guide كامل للموقع، وبناء موقعك عليه، مما سيسهل بناء الموقع، وكذلك تسهيل عملية التعديل على التصميم مستقبلًا.
  • كذلك من أقوى الميزات هو إمكانية ربط الصفحات مع بعضها البعض، أي أن الأزرار في التصميم ستكون قابلة للنقر، وعند مشاركة العمل مع العميل يستطيع العميل التعامل مع التصميم وكأنه موقع قائم بالفعل، مما يوفر للعميل تجربة مشابهة لشكل الموقع النهائي.
  • ميزة Repeat Grid، وبها يمكنك تكرار عناصر معينة في التصميم بشكل سهل ودقيق. مع تغيير محتوى العناصر المُكررة بضغطة زر واحدة!
  • طبعًا طالما أن البرنامج من أدوبي، فلديه تكامل رائع مع الأليستريتور والفوتوشوب، فيمكنك مثلًا تصميم أيقونة في برنامج الأليستريتور ونقلها للبرنامج للتحكم فيها بشكل كامل من تغيير اللون أو حتى تعديل تصميم الأيقونة نفسها.
  • هنالك المزيد من الميزات القوية التي ربما تأتي في القريب العاجل، يمكنك الإطلاع عليها من هنا.

طبعًا البرنامج ليس الأول من نوعه، فهنالك برنامج Sketch، والذي لا يعمل إلا على الماك، لكن يظل البرنامج نقلة نوعية لمن كان يستخدم الأليستريتور أو الفوتوشوب في تصميم واجهات الإستخدام.

ملاحظات من تجربتي

  • البرنامج بسيط جدًا، وقد أخذ مني ساعات فقط، للإطلاع على أدواته، ومعرفة طريقة عملها، طبعًا هذا لمن هو متمرس على برنامجي الأليستريتور والفوتوشوب. هذا يعني أن تكلفة الإنتقال للعمل على البرنامج بسيطة، وهي عدة ساعات فقط من وقتك، وأعدك بإسترداد هذا الوقت في المشروع التالي لك 🙂
  • نسخة الماك تدعم الكتابة باللغة العربية مع بعض المشاكل البسيطة، لكن للإسف للآن نسخة الويندوز لا تدعم الكتابة باللغة العربية – حتى وقت كتابة هذا المقال – لكن هذا من شأنه أن يتغير قريبًا، خاصة وأن البرنامج ما زال في مرحلة البيتا.
  • على الويندوز لا بد أن يكون لديك آخر نسخة من ويندوز 10 لتستطيع استخدام البرنامج، وهذا الأمر قد يكون مزعجًا للبعض.
  • طبعًا البرنامج مخصص في تصميم الواجهات، وليس له علاقة بالكود.. حاليًا لا أعتقد أن هنالك أفضل من كتابة الكود يدويًا.

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

مع التحيّة.

تعليقان

أضف تعليقا ←

  1. السلامم عليكم اخ ايمن
    شكرا لك علي تجربتك الرائعة وكما عودتنا بالجديد المفيد كل مره.

    اريد ايضا بعض المصادر االعربية لتعلم تصميم الشعارات بالخط الحر، مدونات او قنوات يوتيوب .

    شكرا لك 🙂

    1. وعليكم السلام ورحمة الله وبركاته، أهلًا وسهلًا بك.

      المصدر الأول هو اليوتيوب، فلو بحثت عن “الخط الحر” ستجد عشرات الدروس في هذا المجال.
      كما أني قد كتبت بعض المقالات، تجدها في تصنيف الخط الحر..

      بالتوفيق إن شاء الله.

اترك تعليقاً