ما هو تصميم واجهة المستخدم UI وكيف تبدأ العمل فيه

بقلم: أمل الحربي @amalalharbi1500

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

أولا ماهي واجهة المستخدم UI؟

واجهة المستخدم UI (User Interface) هي ببساطة هي الشكل الظاهري لأي موقع او تطبيق أو جهاز فهي تشمل الأزرار والأيقونات والألوان وغيره من المكونات الأساسية التي يتفاعل معها المستخدم.

ما الفرق بين تصميم واجهة المستخدمUI وتصميم تجربة المستخدم UX:

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

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

هل تحتاج إلى خبرة تقنية لتبدأ في مجال تصميم واجهة المستخدم؟

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

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

كيف أبدا في تعلم تصميم واجهة المستخدم؟

أولا وكما ذكرنا سابقا فإن تعلم مجال تصميم واجهة المستخدم يتطلب الكثير من الجهد و الوقت، ولذلك إليك 4 خطوات لتبدأ الأن في هذه الرحلة:

1- الخطوة الأولى: اختر برنامج تصميم و إبدا في تعلمه:

هناك العديد من برامج تصميم واجهات المستخدم، تختلف في مزاياها وخصائها وما تقدمه للمصمم، و منها المجاني ومنها ما يتطلب اشتراك شهري او سنوي، و من أفضلها:

• برنامج Adobe XD:

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

• برنامج Figma:

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

2- الخطوة الثانية: محاكاة التصاميم:

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

3- الخطوة الثالثة: استعن بمصادر خارجية:

عندما نتعلم أي مهارة قد نحتاج في البداية او حتى بعد أن نبدأ إلى المساعدة، وهنا يأتي دور الدورات التدريبية والمصادر الأخرى المتوفرة على مواقع الويب، لذلك سأذكر لك الأن عدة دورات مجانية تساعدك على تعلم تصميم واجهات المستخدم والتقدم فيه:

• دورة (مقدمة في واجهة المستخدم و تجربة المستخدم UX/UI) من منصة سطر والتي تتبع الإتحاد السعودي للأمن السيبراني والبرمجة والدرونز.

رابط الدورة: https://satr.codes/courses/ZlDLPAAOOn/view

• دورة عن (تصميم واجهة البرامج والتطبيقات باستخدام برنامج Adobe XD) يقدمها د. محمد شلتوت وهو مصمم مصري متخصص في تصميم وتنفيذ البرامج المتخصصة في التعليم الإلكتروني والفنون البصرية و تبثها منصة رشد التعليمية:

رابط الدورة: https://roshdx.com/courses/adobe_xd_cc/

• دورة عن (إستراتيجيات تصميم واجهات المستخدم) قدمتها أ. رازان صالح الصغير برعاية مبادرة العطاء الرقمي:

رابط الدورة:https://webinar.attaa.sa/view/104

• دورة (تصميم واجهات المستخدم) يقدمها منصور العماري من قناة منصور تك في اليوتيوب:

رابط الدورة: https://www.youtube.com/watch?v=YX3_6cbS_TQ&list=PL1y8qg3u8Htifh5Ul3DjqOjmoVhse-IW

4- الخطوة الرابعة: أنشئ ملف أعمال:

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

المقابل المالي لتصاميم واجهة المستخدم:

يتأثر المقابل المالي للعمل في تصميم واجهة المستخدم بالعديد من العوامل منها، اختلاف المشروع وحجمه و خبرة المصمم ومدة العمل وغيره، ولكن عادة ما يتقاضى المبتدئ في تصميم واجهة المستخدم ما بين 500 و٨٠٠ ريال لموقع وللمتقدم قد تتراوح ما بين 3000 إلى 5000 ألاف، أما في ما يخص وظائف تصميم واجهة المستخدم يبدا راتب المصمم المبتدئ دون خبرة من 5000 ويرتفع حسب سنين الخبرة فمن خبرته العملية في هذا المجال أكثر من 5 سنين فما فوق قد يتراوح بين 8000 إلى 11000 ريال، علما أن هذه الأرقام تقريبية استندنا فيها على تجارب المصممين السابقة.

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

تجارب عملية في تصميم واجهات المستخدم:

ذكرت غادة الجروان حيث بدأت في تعلم تصميم الواجهات عندما دعت الحاجة إلى ذلك، وهي تعمل في مجال التقنية والبرمجة:

“بدأت التجربة في 2020 في مرحلة الحجر الكلي، حين أنا وزميلي فكرنا بمشاركة في هاكاثون ويتطلب العمل على تطبيق فكنا نحتاج مصمم واجهات قررت أتعلمه كفرصة لي وللفريق، أتقنته خلال ست أشهر بعدها بدأت باستقبال الطلبات كفري لانسر“

وذكر احد المصممين المتقدمين في هذا المجال:

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

كما وجه عدة نصائح للمبتدئين في ما يخص تسعير العمل:

“انصح المبتدئين أنهم ما يركزون بتسعير المصممين الآخرين للمشاريع للأسباب الآتية: اختلاف المنطقة والعملة و الظروف المعيشية و الخبرة والتفرغ و العملاء والمشاريع و اختلاف طريقة التعامل مع العميل واقناعه. الأهم من انه يسعر صح هو كيف يتفاهم مع عميله ويسوي شغله على أكمل وجه و أيضا تعلم أساسيات التفاوض وإقناع العميل والدور النفسي بالموضوع. “

وذكرت رغد، وهي مبرمجة كانت بدايتها في هذا المجال من مشروع التخرج:
رغد @RGD_ALTMIMI:

“بتكلم عن تجربتي في مجال UI / UX طبعا بدا من ايام الجامعة بمشروع التخرج المشروع ببالي لكن ما أدرى كيف اصيغه او اظهر الافكار بعدها قررت اني ادخل هالمجال و لما دخلت فيه عااالم واسع و كبير وفعلا ممتع و تخصصت شوي بهذا المجال بحكم ان تخصصي برمجة تطبيقات و مواقع وكان اسهل علي اخذ الفكرة من العميل و احولها لتصميم مع اختيار الالوان و الثيم و الفيكتور و العميل يقدر يستوعب شكل الموقع او التطبيق اللي راح يشوفه قبل عملية البرمجة و هذي تعتبر من اهم الخطوات اللي لازم يتم تنفيذه خلال تنفيذ موقع او تطبيق.”

كما ذكرت سارة محمد، التي تعرفت أيضا على مجال تصميم الواجهات خلال مشوارها الجامعي.
سارة محمد:
Twitter: @Saaso_3 , Instagram: @sarahideasblog))

“بدأت في الجامعة اخذته كمادة اختيارية و اعجبني و بعدها طورت نفسي و اشتغلت عمل حر فيه في عام ٢٠١٤ تقريباً، التجربة الحمدلله ممتازة مليئة بالشغف و الابداع و أجمل مافيها هي مجال شغلي الحالي، الدخل يعتمد بحسب الخبرة و الوقت من الصعب تحديده برقم محدد او معين و ايش حجم المشروع و العميل و التفاصيل الأخرى”

وحدثتنا، عُلا الحربي عن تجربتها في تعلم مجال تصميم واجهة المستخدم ومن ثم الحصول على فرصة عمل فيه و هي مثال على أن من جد و اجتهد بالفعل، وجد:

عُلا الحربي @olaUxUI:

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

 يمكنك الإطلاع على تفاصيل تجربة علا ، من الفيزياء إلى تصميم واجهة المستخدم ، و نصائحها الثمينة للبدء في هذا المجال هنا 

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

ثامر الصعيدي @8pixelco :

“ كانت البدايه عام ٢٠٠٣ في تجربه عمل موقع اكتروني خاص ووقتها لم اكن اعرف شي عن تصميم المواقع الالكترونيه والمحتوى كان قليل جدا فتعلمت اولا على برنامج فرونت بيج فتره من الزمن ثم تعلمت html css JavaScript وساعدني معرفتي للتصميم الجرافيكي في تطوير نفسي اكثر .التجربه كانت بين النجاح والفشل من عام ٢٠٠٣ الى ٢٠١٠ عمل حر و تنقل بين اكثر من شركه قبل الاستقرار في وظيفه ولله . المقابل المادي مناسب ولله الحمد في البدايه ولكن حاليا قل السعر كثيرا وذلك لوجود الكثير من المصممين والمواقع التي توفر ملفات او قوالب جاهزه مع صعوبه الحصول على عميل جديد فالتطبيقات والتواصل الاجتماعي قللت طلبات المواقع كثيرا“