كيفية تحسين مهارات تصميم UI / UX كمطور

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

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

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

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

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

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

إنها ليست موهبة فقط

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

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

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

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

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

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

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

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

تعلم النظرية

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

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

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

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

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

بناء شيء ما

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

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

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

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

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

لا تستسلم

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

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

مصادر

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

أدوات

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

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

المبردات - اكتشف وأنتج لوحات الألوان.

WebAIM Contrast Checker - تأكد من إمكانية الوصول إلى الألوان الخاصة بك.

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

مقالات

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

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

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

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

قائمة كاملة بمخرجات تجربة المستخدم

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

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

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

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

الدورات

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

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

UXTraining.com

استنتاج

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

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