لزوم دانش UI Design برای فرانت‌اند دولوپرها

لزوم دانش UI Design برای فرانت‌اند دولوپرها

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

من به عنوان یه فرانت‌اند دولوپر، توی این مقاله در مورد این می‌نویسم که چطور می‌شه از طرف خودمون و به اندازه خودمون، این قابلیت، یعنی آشنایی با پایه‌ها و درک UI Designer رو توسعه بدیم.

وقتی توی یک تیم با یه UI Designer سر و کار داریم

احتمالا خیلی از ما با دیزاینرهایی کار کردیم که باهاشون به شدت مشکل داشتیم. اما نکته‌ای که هست اینه که همونجور که دیزاینرهای بدی وجود دارن، فرانت‌اند دولوپرهای بد هم کم نیست؛ و به نفعمونه که ما تو دید دیزاینرها(ی خوب)، فرانت‌اند دولوپر خوبی باشیم.
مزیت‌های مختلفی رو می‌شه برای وجود این رابطه نام برد. در نهایت چیزی که به دست میاد رو اینجوری می‌شه خلاصه کرد:

  • دیزاین بهتر قابل‌پیاده‌سازی می‌شه. بنابراین توی زمان کلی دولوپمنت صرفه‌جویی می‌شه.
  • نامرتبی‌های دیزاین مشخص می‌شه. بنابراین دیزاینی خواهیم داشت تمیز و Scalable در طی زمان.
  • UI Designer می‌تونه تمرکزش رو بیشتر روی کار اصلی بذاره تا تمیزکاری‌های زمان‌بر.
  • خیلی واقعی باعث پیشرفت UI Designer در کارش می‌شید.
  • بین شما و UI Designer رابطه دوطرفه شکل میگیره و بعد از اون شما احتمالا یه UI Designer مورد علاقه، و طرف مقابل یک Front-End Developer مورد علاقه داره که راحت با هم کار میکنین و در مواقع مورد نیاز، اولین کسی خواهید بود که دیزاینر دلش می‌خواد به تیم اضافه بشه.

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

یه نکته‌ی خیلی مهم وجود داره که باعث شده تا درست کردن این رابطه اهمیت زیادی داشته باشه:
ابزارهای مختلف طراحی UI مثل Figma, Adobe XD, Sketch و ...، هنوز اونقدری که باید، پیشرفت نکردن. همه‌شون فیچرهای خوب و کاربردی مختلفی دارن، ولی هنوز به واقعیت وب، پیاده‌سازی Component based و منطق CSS نرسیدن. بنابراین در طی زمان تولید دیزاین احتمالش وجود داره که توی Spacing ها، توی Instanceهای مختلف کامپوننت‌ها، توی رنگ‌ها،Shadowها، و بطور کلی استایل‌های مختلف، ناهماهنگی دیده بشه.

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

مثلا فرض کنید دیزاینی دارید که همه Spacing ها بر اساس eight-point grid جلو رفتن. از اونجایی که سینک نگه‌داشتن همه Spacing ها با ابزارهای موجود اونقدر کار آسونی نیست، میدونید که اگه به اندازه‌ای رسیدین که ۳۰ پیکسل بود، باید تبدیلش کنید به ۳۲ پیکسل. UI Designer یا منظورش همون ۳۲ پیکسل بوده، یا داره کارش رو اشتباه انجام میده.

وقتی پروژه‌ی شخصی خودمون رو داریم

خیلی از ماها هر چند وقت یکبار یه پروژه کوچیکی رو انجام میدیم. ممکنه یه ابزار آنلاین باشه، یه پلاگین باشه یا هرچی. به هر حال احتمالا لازم داریم که یه UI یا یه Landing Page برای کارمون داشته باشیم. از اونجایی که پروژه ما Enterprise حساب نمیشه، با دانش کم میتونیم مستقل باشیم و UI مورد نیازمون رو خودمون تولید کنیم. UI خوب باعث میشه پروژه‌تون به سطح بالایی از کیفیت برسه و کاربرهای بیشتری رو درگیر کنید. خودتون به شخصه موقع انتخاب یه پلاگین از npm برای پروژه‌تون، اونی رو ترجیح میدید که فقط روی گیت‌هابه، یا اونی که لندینگ پیج خوبی داره و همه ویژگی‌هاش رو به خوبی توضیح داده؟

چیزهایی که لازمه بدونیم

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

Grid System

سعی کنید از گریدهای معمول فریموک‌هایی مثل بوت‌استرپ و غیره فراتر برید. در مورد 8point بخونید و اینکه چرا ترجیح دیزاینر‌هاست. یکی از ابزار‌های طراحی UI رو انتخاب کنید و گرید‌هایی که میشه باهاش ساخت رو ببینید و سعی کنید انواعش رو سمت فرانت‌اند پیاده کنید.

Building Better UI Designs With Layout Grids

https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01

The 8-Point Grid

https://spec.fm/specifics/8-pt-grid

Spacing

یکی از بزرگترین مشکلاتمون وقتی که میخوایم چیزی رو طراحی کنیم، اندازه‌ها، فاصله‌ها و بطور کلی Spacing هست. قوانین، مقاله‌ها و بحث‌های مختلفی توی این موضوع شده و خیلی از دیزاین سیستم‌ها هم قانون‌های خودشون رو وضع کردن. اما چیزی که ما نیاز داریم تا بدونیم بیشتر Modular Scaling هست. اندازه‌های علمی‌ای که بعضا از بررسی طبیعت و نحوه کار چشم انسان بدست اومدن و باعث می‌شن لازم نباشه تا ما دوباره چرخ رو اختراع کنیم.
Modular Scaling اینجوری کار میکنه که با یه مقدار Base شروع میکنید و اون رو در ضرایب مختلف ضرب میکنید. این ضرایب هستن که Scaleهای مختلفی رو بهتون میدن و باعث میشن دیزاینتون تفاوت کنه.
ابزار آنلاین TypeScale بهتون کمک میکنه تا ضریب دلخواهتون رو پیدا کنید. یادتون باشه که این اندازه‌ها فقط مختص تایپوگرافی نیست و میشه از اونا تو همه‌جای دیزاین استفاده کرد.
بنابراین وقتی یه دیزاینی بهتون دادن که اندازه‌ی Sidebar با اندازه گرید فریمورک شما همخونی نداشت، احتمالا دیزاین مشکلی نداره. منطق Spacing رو از دیزاینر بپرسید و سیستم‌تون رو به اون نحو طراحی کنید.

ببینید که چطور توی توییتر از Golden Ration استفاده شده.
8pt Soft Grid and Modular Scale in Figma

https://www.youtube.com/watch?v=JHddHz69B7E

Defining a Modular Type Scale for Web UI

https://blog.prototypr.io/defining-a-modular-type-scale-for-web-ui-51acd5df31aa

Colors

یکی از مهم‌ترین چیزهایی که به یه دیزاین هویت میده، پالت رنگی اون دیزاینه. مشابه قوانین Spacing و حتی مقدار بیشتری، روی رنگ‌ها هم تحقیقات علمی شده. از اینکه هر رنگ باعث چه احساسی توی مغز می‌شه، تا اینکه کدوم رنگ‌ها میتونن بهتر کنار هم گذاشته بشن. یا اینکه چطور و با چه فرمول‌هایی می‌شه Shade یا Hue های مختلف یک رنگ رو محاسبه کرد. خیلی اوقات دیزاینرها از رنگ‌های موجود دیزاین‌سیستم های مختلف مثل Material، Adobe، Atlassian یا بقیه استفاده میکنن. دلیلش اینه که این دیزاین‌سیستم‌ها مختص دنیای دیجیتال (و نه پرینت) درست شدن و میشه مطمئن بود که تو محیط‌های مختلف مثل وب و موبایل برای استفاده Safe هستن.

پیشنهاد من اینه که اگه دارین پروژه‌ی خودتون رو دیزاین میکنین، از دیزاین سیستم‌ها فاصله بگیرید. bold باشید و رنگ‌های غیر متداول رو هم تست کنید. پروسه پیچیده نیست. از ColorHunt رنگی رو که مورد پسندتونه انتخاب کنید، با MyColor.space رنگ‌های Complementary تون رو انتخاب کنید و با کمک Lyft ColorBox سعی کنید Shade رنگ‌هاتون رو تولید کنید. ابزارهای آنلاین مدیریت رنگ بی‌شمارن و طبعا نباید برای تولید رنگ مشکلی داشته باشید.
در نهایت اما بطور کلی وظیفه ما به عنوان فرانت‌اند دولوپر، تولید رنگ‌ها بصورتیه که راحت قابل تغییر باشن.

A Simple Web Developer’s Color Guide

https://www.smashingmagazine.com/2016/04/web-developer-guide-color/

How to Choose Website Color Schemes

https://websitesetup.org/website-color-schemes/

UI Design Tools

XD / Sketch / Figma

کارکردن و آشنایی با ابزارهای دیزاین UI مزیت بزرگی براتون حساب میشه. وقتی معیاب این ابزارها رو بدونین، راحت‌تر و با اطمینان‌تر میتونید یه دیزاین رو پیاده کنید. فعلا سه‌تا ابزار بزرگ برای طراحی UI وجود داره. Figma، Adobe XD و Sketch. بستگی به خودتون داره که کدوم‌ رو ترجیج میدید. اما اگه تا الان با هیچ کدوم کار نکردید، پینشهاد من Figma هست. مزیت اصلی فیگما اینه که با ذهنیت وب تولید شده و بین همه گزینه‌ها یه جورایی «دولوپری»‌تره.

در نهایت

مطمئن باشید که آشنا بودن شما با دیزاین اتلاف وقت نیست و واقعا میتونه سطح کاریتون رو بالا ببره. علاوه بر اون، دیزاینر هم‌تیمینون اگه تو کارش خوب باشه - در حالت عادی - نمیخواد زندگی شما رو سخت‌تر کنه و دانش شما تو این زمینه میتونه این اتفاق رو اگر هم افتاد، به حداقل برسونه.
این دانش‌های بین‌پوزیشنی، باید تو بقیه تایتل‌های شغلی نزدیک بهم دیگه هم وجود داشته باشه. مثل دیزاینری که مقدار کمی FrontEnd Development میدونه، فرانت‌اند دولوپری که مقدار کمی با ساز و کار Backend آشناست.
در نهایت داشتن این ویژگی بین اعضای تیمی که همدیگر رو درک میکنن، باعث میشه همه بتونن با «اطمینان» و «اعتماد متقابل» کار کنن و نتیجه‌ی کار به شدت بهبود پیدا کنه.