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

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

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

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

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

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

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

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

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

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

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

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

مع التحيّة.

8 تعليقات

أضف تعليقا ←

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

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

    شكرا لك 🙂

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

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

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

  2. samurai قال:

    موضوع جميل وطرح مميز وراقي كل الود والتقدير

  3. محمد حسن قال:

    يعطيكم العافية أستاذ أيمن .. بارك الله فيكم وجزاكم الله عنا كل خير
    أخي الكريم نزلت البرنامج من فترة وواجهت مشكلة في إتجاه النص للغة العربية RTL ولما بحثت عن المشكلة وجدت أحد الأشخاص تحدث عن المشكلة وتم الرد عليه بواسطة فريق مطوري adobeXD بأن المشكلة تم وضعها على قائمة التطوير المستقبلية للشركة ويحتاج الأمر منا للتصويت على المشكلة ليتم إدراجها في المستقبل القريب حيث يعتمد المطورين على نسبة التصويت لتحديد أولوية الميزات
    هذا رابط المشكلة : https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/12962217-hebrew-arabic-right-to-left-rtl-support
    أتمنى أن تتم الإشارة لهذا الموضوع بواسطتكم، وتقبلوا فائق الإحترام والتقدير

    1. مرحبًا أ. محمد، أهلًا وسهلًا بك.
      المعذرة على التأخير في الرد، نسبة لظروف السفر.

      على الويندوز أغلب هذه المشاكل قد تمّ حلها بالفعل، في التحديثات الآخيرة. لكن ما زالت نسخة الماك متأخرة كثيرًا في دعم اللغة العربية 🙁

      شكرًا لك.

  4. زكريا قال:

    السلام عليكم ، الأخ أيمن اريد تعلم تصميم المواقع وكبداية أريد عمل مدونة خاصة بي ولكن معلوماتي قليلة ، أول خطوة قمت بها هي محاولة تعلم لغات الكود ك html وغيرها ولكن أخذ مني الكثير من الوقت وبعد بحث بسيط سمعت بمبرمجين ينصحون بتعلم التصميم في المواقع والبرامج الخاصة من دون الحاجة إلى تعلم كيفية التكويد وبهذا بدأت العمل ب ADOBE XD ولكن في النهاية عرفت أنه برنامج ليس هدفه نشر المواقع . فما العمل وشكرا ؟؟

    1. وعليكم السلام ورحمة الله وبركاته، مرحبًا زكريا. والمعذرة على التأخير في الرد، نسبة لظروف السفر.

      تصميم الواجهات (UI & UX design)، وتطوير الواجهات (كتابة كود الواجهة) يعتبران مجالان منفصلان، لكنهما متداخلان بشكل كبير..
      يمكنك التخصص في أحد المجالين فقط.. أو يمكنك تعلمهما الأثنين، وفي هذه الحالة من الأفضل أن تبدأ في تعلم تصميم الواجهات أولًا، وهنا يمكنك الإستفادة برنامج Adobe XD. وبعد ذلك يمكنك تعلم لغات وتقنيات الـ Front-end develop لتستطيع كتابة كود الواجهة أيضًا.

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

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

اترك تعليقاً