چرا دیزاین سیستم؟

امروز قراره راجب یک موضوع ضروری و مهم به اسم Design System (به اختصار DS) صحبت کنیم. موضوعی که این روز ها خیلی بهش توجه میشه و باید اگر تا الان به سمتش نرفتید از همین حالا برنامه ریزیشو انجام بدید و توی اولویت های کاریتون قرارش بدید.

توضیح مختصر

شاید تا به حال UI Kit ها و مجموعه ای از کامپوننت های یک محصول رو دیده باشید. دیزاین سیستم یک مقوله بزرگی هست که سعی میکنیم امروز بخش های مهم اون رو بررسی کنیم. دیزاین سیستم یک منبع کامل از زبان برند، رنگ ها، ایکون ها و اجزا محصول شامل Buttons, Navigation Bars, Inputs و غیره می باشد که طراحان و دولوپر ها برای توسعه محصول از اون منبع استفاده میکنند. اینکه شما برای طراحی یک فرم در محصول از یک طراحی جدید استفاده کنید یا اینکه فرم قبلی را کپی و پیست نمایید کاری بود که قدیم ها صورت میگرفت. اما زمانی که مفهوم Components و Symbols در ابزار های طراحی و سیستم های برنامه نویسی جای خودش رو باز کرد، مفهوم دیزاین سیستم هم کم کم شکل گرفت و ما از این به بعد برای ایجاد یک فرم که شامل Input و Buttons و … میشه نیازی به اون کار های قدیم نداریم و کافیه به دیزاین سیستممون سر بزنیم و از یک Text Input جامع و اصلی استفاده کنیم که در واقع در همه جا قراره از اون استفاده کنیم.

چند سالی میگذره که اکثر شرکت های مطرح دنیا مثل گوگل، اپل، IBM، Airbnb، Microsoft و … دیزاین سیستم های خودشون رو طراحی و توسعه دادند و تمامی محصولات اون ها از همین دیزاین سیستم ها پیروی میکنند و دارای یکپارچگی کامل هستند. برخی از این شرکت ها DS هاشون رو در دسترس عموم گذاشته اند و میتونیم از اون ها برای الگوبرداری و استفاده کمک بگیریم.

چند نمونه از دیزاین سیستم ها:

//www.carbondesignsystem.com

//www.microsoft.com/design/fluent/#/

//ant.design

//material.io/design/

//medium.com/@siw_grinaker/top-12-design-systems-b598368be5a6

این یک توضیح مختصری از بخشی از دیزاین سیستم و مقوله دیزاین سیستم مقوله ای بسیار بزرگ و مهمه. در ادامه به فواید مهم استفاده از Design System خواهیم پرداخت. همراه باشید…

بحث زمان

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

بحث Consistency

موضوع Consistency یا ثبات موضوع دیگه ای هست که شما امکان داره به مرور زمان، اولین Text Input استفاده شده در فرمتون با دو ماه بعدش تفاوت هایی در ظاهر داشته باشه که این اصلا کار اصولی و استانداردی نیست. زمانی که شما از دیزاین سیستم استفاده کنید دیگه این مشکل پیش نمیاد چرا چون شما تنها یک یا دو مدل Text Input دارید که همیشه از همون ها استفاده خواهید کرد.

بحث Agile

شما زمانی که دیزاین سیستمتون از قبل تعریف شده باشه و اونهارو به صورت Symbol or Component تهیه کرده باشید در ابزار های طراحیتون مثل اسکچ یا ادوبی ایکس دی، زمان پیاده سازی یک صفحه جدید بعضی اوقات، کار حتی ۵ دقیقه هم نمیشه زیرا شما فقط کافیه اجزا و کامپوننت هارو کنار همدیگه بچینید و با تغییر محتوا و کمی تغییرات ریز به ایده دلخواهتون از اون صفحه برسید.

بحث دوره زمونه Component ها

این روز ها تمام فریم ورک ها و زبان های برنامه نویسی مثل React و Angular و … به سمت ماژولار شدن و کامپوننت بیس شدن دارن حرکت میکنند و به همین دلیل شما لازم دارید تا برای تعامل بهتر با دولوپر ها همیشه بجای اینکه هربار یک Text Input متفاوت تحویلش بدید، تنها یک دیزاین سیستم یا UI Kit از دیزاین سیستم تحویلشون بدید که داخلش نهایت یک تا دو Text Input اونهم بر اساس نیاز محصول و دیزاین قرار داده شده است.

اما چطور؟

امیدوارم به اندازه کافی به اهمیت و کاربرد های DS پی برده باشید. اما راه اندازی یک دیزاین سیستم بعضا میتونه کار سختی باشه که کمی در اول کار و شروع کار برای شما گیج کننده باشه. برای همین تو مطلب آینده که به زودی منتشرش میکنم (یا اینکه در حال حاضر منتشر شده) به چگونگی ایجاد و نگهداری یک دیزاین سیستم خواهم پرداخت.

در آخر بهتون پیشنهاد میکنم به این مطلب بسنده نکنید و بازهم در این مورد ریسرچ کنید.

اگر هم سوالی داشتید حتما بپرسید. آرزوی بهترین هارو براتون دارم…