چگونه مهارت‌های طراحی UX / UI خود را به عنوان یک توسعه دهنده بهبود بخشیم

ترجمه و تالیف : علیرضا داداشی
تاریخ انتشار : 01 شهریور 99
خواندن در 4 دقیقه
دسته بندی ها : توسعه فردی

من چهار سال پیش در رشته CS فارغ‌التحصیل شدم. اگر در آن زمان از من می‌پرسیدید که چه مسیر شغلی را در پیش خواهم گرفت، احتمالاً توسعه‌ی بک‌اند جاوا یا چیزی شبیه به آن را بیان می‌کردم. هرگز فردی خلاق نبودم، بنابراین به دنبال مسیر شغلی توسعه و طراحی نرفتم.

همه‌ی ما می‌دانیم که در زندگی مسائل بسیاری تغییر می‌کنند. من در طول فعالیت‌های شغلی خود بیشتر و بیشتر به توسعه و طراحی UI علاقه‌مند شدم. به اندازه کافی در شغل خودم خوش شانس بود‌ه‌ام زیرا این توانایی را داشتم تا با وقت گذاشتن و تلاش کردن، مهارت‌های لازم خود برای توسعه‌دهندگی فرانت‌اند را بهبود بخشم.

در طول ۱۲ ماه گذشته، من به دلایل شخصی درک خودم را از طراحی UI / UX بهبود بخشیدم. این کار به من اجازه می‌داد تا در هنگام همکاری و کار با طراحان، تاثیرگذارتر عمل کنم. در این مقاله قصد دارم آموخته‌های خود، منابع جمع‌آوری شده و اشتباهات شخصی خودم را به منظور درس گرفتن سایر توسعه‌دهندگان به اشتراک بگذارم. 

این فقط استعداد نیست

اکنون این مورد برای من کاملاً واضح و مشخص شده است. در گذشته من تصور می‌کردم که طراحان، جادوگرانی هستند که به طور مادرزاد این توانایی را داشتند تا برنامه‌ها و وبسایت‌هایی شگفت‌انگیز را خلق کنند. خب کاشف به عمل آمد که آنان جادوگر نیستند. آن‌ها فقط سخت تلاش کرده‌اند تا کارهای هنری خود را بی نقص کنند. 

برای بعضی از مردم یادگرفتن کدنویسی آسان‌تر از سایر افراد است. افرادی هم وجود دارند که به صورت طبیعی در طراحی کردن استعداد دارند. این موضوع را مد نظر داشته باشید که وجود استعداد به معنای تلاش نکردن نیست. طراحی یک چیز قابل یادگیری است. اشتباه من را مرتکب نشوید زیرا ممکن است شما در باطن خلاق نباشید. حل مشکلات برنامه نویسی نیازمند خلاقیت می‌باشد. حل چالش‌های مربوط به طراحی را نیز با همین طرز فکر انجام دهید.

ببینید، فکر کنید، بدزدید

همانطور که مطالعه کردن کدهای خوب به شما در تبدیل شدن به یک توسعه دهنده بهتر کمک می‌کند، یادگرفتن از فعالیت‌های دیگران نیز شما را به یک طراح بهتر تبدیل خواهد کرد. دفعه‌ی بعدی که از یک وبسایت یا برنامه استفاده می‌کنید، به آن نگاه کنید و پی ببرید که چرا بدین شکل عمل می‌کند. چرا المان‌ها در جایگاه کنونی خود قرار دارند؟ چرا رنگ دکمه خاص است؟ چرا شما باید اقدامات خود را با یک ترتیب خاص انجام دهید؟

می‌توان دکمه‌ی تشویق سایت «Medium» را مثال زد. چرا آن‌ها مثل سایر رسانه‌های اجتماعی از دکمه‌ای به نام "لایک" استفاده نکردند؟ به نظر من این یک تصمیم طراحی هوشمندانه نبود. در عوض آن‌ها می‌توانند با طراحی کردن دقیق یک تعامل، ایده‌ی جامعه‌ی وبسایت خود را تقویت کنند. ۵۰ تشویق گرفتن از یک مقاله یا پاسخ، امری زمان‌بر برای یک کاربر است. اما این به آنان کمک می‌کند تا با نویسنده و محتوای دیده شده ارتباط برقرار کنند.

در سال گذشته سایت‌هایی مانند Awwwards و Dribbble برای من بسیار ارزشمند بودند. بسیاری از طراحی‌هایم، با الهام گرفتن از سایر طراحان بزرگ شکل گرفته است. 

تئوری را بیاموزید

 هنگامی که برای اولین بار شروع به جمع‌آوری طرح‌هایم کردم، نمی‌توانستم درک کنم که علت ظاهر و عملکرد ضعیف آن‌ها چیست. طراحی عجیب بود، رنگ‌ها متناسب نبودند و چیدمان‌ها تناقض داشتند. تصور می‌کردم که با دانشی که از توسعه و نحوه عملکرد سایت‌ها داشتم، می‌توانم مستقیماً وارد این کار شوم. 

کاملاً در اشتباه بودم. به جای استفاده پایه‌ای از تئوری، طراحی‌هایی را از دیدگاه توسعه‌دهندگان خلق کردم. توسعه‌دهندگان نحوه‌ی عملکرد یک سایت را می‌دانند، اما طراحان از نحوه‌ی رفتار و احساس یک سایت مطلع هستند. در اینجا شکافی وجود دارد که شما فقط با کسب پایه و اساس دانش طراحی می‌توانید آن را پر کنید.

من برای به دست آوردن درکی اساسی از تئوری طراحی، بیشتر از Medium و Udemy استفاده کردم. 

چیزی را بسازید

هر استاد CS یا برنامه نویسی به شما خواهد گفت که نوشتن کد، بهترین روش برای تبدیل شدن به یک برنامه نویس بهتر است. همین اصل در مورد طراحی نیز صدق می‌کند. تا زمانی که از طراحی‌های خود چیزی یاد نگیرید، نوع طراحی‌های شما اهمیتی نخواهند داشت. با آن مثل یک پروژه واقعی برخورد کنید. به کاربران خود فکر کنید. وایرفریم، مدل و نمونه‌های اولیه را بسازید. برای بهبود بخشیدن به آن از طرح اصلی استفاده کنید. شما می‌توانید برای کسب بازخورد از آنچه که ایجاد کرده‌اید، از سایت‌هایی مانند Reddit استفاده کنید. 

شما حتی می‌توانید آن را با بهبود مهارت‌های توسعه خود جفت کنید. اخیراً بیشتر پروژه‌های جانبی من به دلیل اشتیاق مشترکم برای بهبود مهارت‌های توسعه وب و طراحی ایجاد شده‌اند. پس از طراحی پروژه خود، می‌توانید آن را توسعه داده و هر دو مورد را نگاه کنید. در اینجا ایده‌هایی برای شروع را بیان می‌کنم:

- تعامل را طراحی کنید. برای الهام گرفتن از دکمه تشویق Medium استفاده کنید.

- برنامه‌ای را برای امور خیریه مورد علاقه خود طراحی کنید. به کاربران متفاوت خود فکر کنید. ممکن است کاربران شما افرادی بالقوه، کمیاب یا معمولی باشند.

- CV خود را طراحی کنید. به رنگ‌های استفاده شده فکر کنید. معنای این رنگ‌ها چه می‌تواند باشد؟ در مورد نحوه استفاده از CV خود فکر کنید. آیا تنها در صفحه نمایش نشان داده خواهد شد یا به شکلی تاثیرگذار عمل خواهد کرد؟ این مسئله می‌تواند چه تاثیری بر طراحی شما داشته باشد؟

- یک وبسایت موجود را مجدداً طراحی کنید. حال این می‌تواند یک ارائه‌دهنده حمل و نقل عمومی یا برند تجاری شما باشد. طرح خود را با نسخه اصلی مقایسه کنید. سپس از دیدگاه کاربر به تفاوت‌های موجود در آن فکر کنید.

- یک چیز فیزیکی را طراحی کنید. حال این می‌تواند روشی جدید در حمل و نقل یا جایگزینی ساده مثل یک چنگال یا صندلی باشد. من به این واقعیت پی برده‌ام که فکر کردن در مورد طراحی چیزهای روزمره، یک روش واقعاً مفید در کسب ذهنیتی برای طراحی چیزی بصری است.

تسلیم نشوید

وقتی به چیزی که سال پیش خلق کردم نگاه می‌کنم، دلسرد می‌شوم. اما مطمئناً همه از یک جایی شروع می‌کنند. اینکه شاهد پیشرفت خود باشید بسیار ارزشمند است. تا زمانی که بتوانید از فعالیت‌های خود درس بگیرید، زمان شما به خوبی سپری خواهد شد. شاید این بتواند به شما کمک کند تا بتوانید آموخته‌های خود را در یک بازه زمانی منظم پیگیری کنید. من هر ماه به برخی از کارهای خود نگاه کرده و تلاش می‌کنم تا از تجربیات خود استفاده کنم. حتی اگر بتوانم بخشی کوچک از اطلاعات مقاله را با خواندن متوجه شوم، هنوز هم آن را یک پیشرفت به شمار خواهم آورد. 

چگونه مهارت‌های طراحی UX / UI خود را به عنوان یک توسعه دهنده بهبود بخشیم

منابع

در اینجا سعی دارم مجموعه کوچکی از ابزارهای مورد علاقه خود را به شما معرفی کنم:

Figma: مختص طراحی و نمونه‌سازی است.

FramerX: مشابه فیگما است، اما React به آن اضافه شده و اجزایش قابل کشف است. 

Coolors: پالت‌های رنگی را کشف و تولید می‌کند.

WebAIM Contrast Checker: اطمینان حاصل می‌کند که رنگ‌های شما دست یافتنی هستند.

Archetype: ویرایشگر و ژنراتور سیستم تایپوگرافی است.

امیدوارم مسائل آموزنده‌ای را از تجربیات من آموخته باشید.

منبع

دیدگاه‌ها و پرسش‌ها

برای ارسال نظر لازم است ابتدا وارد سایت شوید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید