5 برامج تساعدك على تصميم UI/UX إحترافي قبل تطويره برمجياً

حين يعتمد الزائر الأخير موقعك و يبدأ في إستخدامه، فهو لا يتسائل إطلاقا ان قمت بصناعة الموقع باستخدام الـ Php او الـ Asp.net، و لا يطرح سؤالا ان كنت إعتمدت على إطار عمل مثل Laravel او Codeigniter، او اتعمدت احدى فريمووركات الجافاسكربت كإطار رئيسي، ذلك لأن العميل / الزائر بسيط التفكير إن كل ما يدور في رأسه في زيارته الأولى هو لماذا إستخدمت اللون الأزرق الداكن و الأخضر القريب للداكن مع اللون الرمادي في موقعك، إن كل ما يهتم به الزائر هو واجهة برمجيتك الأخير ( سواء كانت موقع، تطبيق، برنامج … )، هذا من جهة المستخدم الأخير، و العميل الذي ستوفر له هذه البرمجية هو الآخر يجهل التقنيات و لا يهمه سوى النتائج، فكيف توفر له النتائج أولا دون الحاجة لإقتضاء صناعة البرمجية قبلا ؟ 

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

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

عودة بنا الى فحوى هذا المقال، ما هي البرامج التي يمكن إستخدامها إذن لصناعة نماذج او Prototype تفاعلية لتطبيقات الموبايل، المواقع و برمجيات الـ Desktop ؟ و ما خصائص كل برنامج ؟ 

1 – Adobe XD : 

لأنه المحبب إلى قلبي سأستهل هذا المقال بهذا البرنامج، قد سبق و وضحت لك سبب حبي لهذا البرنامج في مقال يحمل عنوان 5 أسباب جعلتني أسقط في حب Adobe XD إن كنت مهتماً بقرائته للإطلاع على هذا البرنامج عن قرب، أولا هو من تطوير شركة Adobe التي تتحفنا دائما ببرمجياتها الفريدة من نوعها، ثانيا هو بسيط في الإستخدام، قد يكون أسهل برنامج تصميم تنتجه شركة ادوبي، فهو أيسر من Photoshop و أسهل من Illustrator و أبسط من After Effect، البرنامج خفيف كذلك و ليس كسائر برمجيات Adobe الأخرى، فور تنصيب البرنامج يتيح لك الإختيار بين نوع الـ Prototype القادم منها الموبايل ( ايفون و أندرويد ) و منها الويب و منها تصميمات أخرى، يوفر لك إمكانية تصميم كل صفحة او تصميم في Artboard واحد فقط أيضا. 

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

2 – Sketch : 

اووه غريم برمجيات تصميم الـ UI/UX على نظام الـ Mac Os، نعم البرنامج متاح حاليا فقط على هذا النظام ( يمكنك تنصيبه على نظم اخرى لكن بطرقة ليس رسمية إن صح التعبير )، برمجية Sketch قد حصلت على جائزة أفضل برنامج تصميم في مسابة Apple Design Award لسنة 2012. 

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

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

3 – Protopie :

سبق لنا كذلك و إستعرضنا شرحا كاملاً لهذه المنصة و يمكنك الإطلاع على كل صغيرة و كبيرة في منصة Protopie من خلال مقالنا دليلك لفهم منصة ProtoPie لصناعة و تجسيد تصاميم الـ UI/UX بإحترافية و صناعة نماذج Prototype تفاعلية إن كنت مهتماً بإستكشافه أكثر، لا تختلف منصة Protopie كثيرا عن Adobe XD حين يتعلق الأمر بطريقة هيكلة و صناعة  الواجهات UI، إنما الإختلاف الأكبر يكمن بالضبط في الـ UX .

توفير واجهة UI و بنائها جيد، لكن العميل لا يريد فقط الواجهة، بل يريد ان يتفاعل معها، يوفر لنا Adobe XD بعض الأنيميشن البسيطة و بعض التفاعل البسيط حين النقر على زر محدد او الإنتقال من صفحة الى صفحة، لكن برنامج Protopie يأتي بتهيئة ضخمة جدا حين يتعلق الأمر بتفاعل المستخدم / العميل مع التصميم (Prototype) اذ تستطيع التحكم في كل عنصر على حدة، إظهار و إخفاء العناصر عند النقر في نفس الصفحة ( لفعل نفس العملية في XD عليك إنشاء صفحتين و الإنتقال من واحدة لأخرى مع إخفاء العنصر الذي تريد ) كما يمكنك الإختيار من بين مجموعة ضخمة جدا من الـ Animation و الـ Transitions بين الصفحات مما أعتبره شخصيا واحد من أفضل برامج صناعة الـ UX إطلاقا.

4 – Affinity Designer :

على عكس البرمجيات السابقة التي تعتمد في الأساس على صناعة Extension او تبعية ملفات خاصة بها، فإن برنامج Affinity Designer يدعم كل الملفات الخاصة ببرامج التصميم الشهيرة مثل Illustrator, Photoshop و غيرها، هو الآخر برنامج فيكتوري مخصص لتصميم العديد من الإبداعات على رأسها التصميمات الفيكتورية مثل الشعارات و الأيقونات و البوسترات، و يمكن من خلاله أيضا تصميم واجهات UI/UX للتطبيقات و البرامج و المواقع، البرنامج لا يأتي بخاصية التفاعل مع البرمجية، لكنه حتما يوفر لك الأدوات اللازمة لصناعة و تطوير اي نوع من التصاميم من بينها تصميمات المواقع و التطبيقات.

إن افضل ميزة يأتي بها برنامج Afinity Designer حين يتعلق الأمر بصناعة واجهات البرمجيات هي توفيره لمجموعة من الـ Mockups (  و هي عبارة عن قوالب جاهزة لإستعراض تصميماتك من خلالها بشكل حي ) فإن قمت بتصميم UI/UX خاص بتطبيق موبايل و إنتهيت منه أخيرا و تريد إستخراجه، فلا تنسى ان تستخدم احد الـ Mockups التي يوفرها لك البرنامج لوضع ذلك التصميم داخل هاتف و إستعراضه بشكل أكثر إحترافية، ميزة قد تحتاج الى برنامج آخر من أجل القيام بها تقريبا في كل البرامج السابقة، نعم فلكل برنامج خواصه و هذه ميزة هذا المقال كذلك.

5 – Axur : 

و نختم مقالنا هذا بمنصة Axur القوية كذلك في صناعة تصميمات UI/UX تفاعلية، المنصة تأتي بخواص فريدة أيضا، لعل أبرزها مشاركة المشروع عبر رابط مخصص مع الجميع بحيث يمكن للعميل من خلال الرابط ان يطلع على ما وصلت إليه من تصميمات و يقدم رأيه كذلك، تأتي بكمية من الادوات الجاهزة للإستخدام مباشرة مثل الـ Combo boxes او واجهات Logins جاهزة و غيرها، البرنامج مثالي، قوي، و يمكن إستخدامه على شتى أنواع المنصات.
برنامج Axur قد صنع خصيصا لإستخدامه في صناعة نماذج الويب بشكل كبير، يدعم صناعة نماذج الموبايل و البرامج لكن الأدوات و المستلزمات التي يأتي بها مخصصة بشكل أكثر للويب، يعتمد أيضا على مبدأ الـ Layers ( نفس مبدأ برمجيات أدوبي ) و الميزة الاهم أنه يأتي بخاصية الـ Flow التي تسمح لك أولا بصناعة مسار استخدام برمجيتك ( مثلا في حالة التسجيل تظهر الواجهة الاولى و في حالة أخطأ التسجيل تظهر الواجهة الثانية ) و هو تخطيط توجب عليك القيام به في برمجيات أخرى مثل Lucid Chart مثلا ان اردت إعتماده في أحد البرامج أعلاه، برنامج متميز و قوي كذلك.