كيفية تحسين مهارات واجهة المستخدم / UX كمطور

الصورة من قبل أليس Achterhof على Unsplash

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

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

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

في هذا المنشور ، أود أن أشارك الدروس التي تعلمتها ، والموارد التي جمعتها ، والأخطاء التي ارتكبتها على أمل أن يتمكن المطورون الآخرون من التعلم من رحلتي.

جدول المحتويات

  • انها ليست مجرد موهبة
  • انظر ، فكر ، سرق
  • تعلم النظرية
  • بناء شيء ما
  • لا تستسلم
  • مصادر
  • خاتمة

انها ليست مجرد موهبة

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

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

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

انظر ، فكر ، سرق

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

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

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

أثبتت مواقع مثل Awwwards و Dribbble أنها لا تقدر بثمن بالنسبة لي في العام الماضي. العديد من التصميمات التي قمت بإنشائها قد استلهمت إبداعاتها من إبداعات مصممين رائعين آخرين

تعلم النظرية

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

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

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

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

للحصول على فهم أساسي لنظرية التصميم ، استخدمت معظمها متوسط ​​و Udemy. يمكنك العثور على روابط إلى الموارد التي استخدمتها في القسم أدناه.

بناء شيء ما

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

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

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

اليك بعض الافكار للبدء:

  • تصميم التفاعل. استخدم زر تصفيق Medium للإلهام.
  • تصميم تطبيق للأعمال الخيرية المفضلة لديك. فكر في الأنواع المختلفة من المستخدمين: المستفيدين المحتملين والمتكررين والمنتظمين.
  • تصميم سيرتك الذاتية فكر في الألوان التي تستخدمها وماذا تعني. فكر في كيفية استخدام سيرتك الذاتية. هل سيتم عرضها فقط على الشاشة ، أم ستتم طباعتها؟ كيف يؤثر ذلك على التصميم؟
  • إعادة تصميم موقع ويب حالي. قد يكون مزود النقل المحلي أو علامة تجارية عالمية. قارن بين التصميم والأصل وفكر في الاختلافات من منظور المستخدم.
  • صمم شيئًا ماديًا ، مثل طريقة نقل جديدة أو ربما بديل لشيء بسيط مثل الشوكة أو الكرسي. لقد وجدت أن التفكير في تصميم الأشياء اليومية هو طريقة مفيدة حقًا للدخول في عقلية لتصميم شيء بديهي.

لا تستسلم

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

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

بعض التصميمات التي قمت بإنشائها من الأقدم (يسار) إلى الأحدث (يمين)

مصادر

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

أدوات

Figma - التصميم والنماذج الأولية بالتعاون.

FramerX - يشبه Figma ، ولكن مع React المضافة ، والمكونات القابلة للاكتشاف.

مبردات - اكتشاف وإنشاء منصات الألوان.

WebAIM Contrast Checker - تأكد من أن ألوانك يمكن الوصول إليها.

نسخة أصلية - محرر نظام الطباعة والمولد.

مقالات

7 نصائح عملية للغش في التصميم

10 رموز الغش لتصميم واجهات المستخدم

10 أخطاء في التصميم الصغير لا نزال نرتكبها

تصميم أشكال أفضل

قائمة كاملة من التسليمات UX

مبادئ علم النفس يحتاج كل مصمم UI / UX إلى معرفته

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

16 اقتباسات تحتاج إلى قراءتها كمصمم UX

مبادئ تصميم المنتج في بطاقة واحدة

الدورات

أساسيات تصميم تجربة المستخدم - Udemy

دورة تصميم التطبيقات الكاملة - UX و UI وتصميم التفكير - Udemy

UXTraining.com

خاتمة

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

شكرا للقراءة!