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

تنبيه: حاليًا أقدم العديد من الدروس صوت وصورة لبرنامج Adobe XD على قناتي على اليوتيوب، يمكنك الإطلاع على القناة من هنا:

https://youtube.com/iAyman9

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

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

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

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

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

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

• ميزة Repeat Grid، وبها يمكنك تكرار عناصر معينة في التصميم بشكل سهل ودقيق. مع تغيير محتوى العناصر المُكررة بضغطة زر واحدة!

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

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

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

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

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

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

تحديث مهم: الآن، وفرت أدوبي البرنامج بشكل مجاني، ويمكن تحميل البرنامج من هنا
https://www.adobe.com/mena_en/products/xd.html

مع التحيّة.

Follow @iAyman9