الهام بمانی
الهام بمانی
خواندن ۵ دقیقه·۱۰ ماه پیش

دیزاین سیستم | Design system

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

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

به یک محصولی فکر کنید که چند تیم مختلف طراحی دارن روی اون کار میکنن؛ زمانی که صحبت از چندین نفر یا چند تیم میشه، هماهنگ بودن آدم ها سخت میشه، هماهنگ بودن طرح‌ها سخت تر!

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

دیزاین سیستم علاوه بر اینکه ابزاری برای طراحان و دولوپر ها هست، برای دستیابی به عناصر انتزاعی مثل ارزش های برند، روش های کار مشترک، طرز فکر، باور های مشترک و ... استفاده میشه.

آیتم های موجود در دیزاین سیستم

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

2. اصول طراحی
اصول طراحی دستورالعمل هایی هست که تیم طراحی رو برای رسیدن به هدف تعیین شده برای محصول نهایی هدایت میکنه و انتخاب ها رو برای طراحان در مسیر طراحی تعیین میکنه.

3. هویت و زبان برند
مواردی که الفبای یک برند رو تشکیل میدن عبارتند از:
•رنگ‌
•فونت‌
•فضا
•اشکال
•آیکون‌
•تصاویر‌
•انیمیشن‌
•آوا و لحن‌
•صدا
در طراحی دیزاین سیستم، قواعدی که باید برای استفاده این موارد و کنار هم قرار دادن اون‌ها و باید‌ها و نباید‌ها در طراحی اون‌ها در سیستم رعایت بشه توضیح داده میشه.

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



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

اندازه تیم میتونه برای هر شرکتی متفاوت باشه اما حداقل افرادی که حضور اونها داخل تیم اجباری هست شامل ( Interaction Designer / طراح تعامل - Visual Designer / طراح بصری - Developer / توسعه دهنده ) و در حالت ایده آل داخل این تیم نقش های دیگه ای مثل ( Resercher / محقق - Architect / معمار - Content Writer / نویسنده محتوا) میتونن حضور داشته باشن.

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

اشاره‌ ای به چند دیزاین سیستم بزرگ

  1. atlassian design

اطلسیان یک شرکت ایتالیایی هست که در زمینه نرم افزار و سرمایه‌گذاری فعالیت میکنه. از مهمترین محصولاتش میشه به نرم افزار jira و Confluence اشاره کرد. اولین دیزاین سیستم این شرکت در سال 2012 منتشر شد. مهمترین خصوصیت این دیزاین سیستم اینه که در طراحی آیتم‌ها از نسبت کنتراست‌های استانداردی استفاده میکنه که حتی کاربرانی که از بینایی کمی هم برخوردارند به راحتی میتونن از محصولات استفاده کنن.


2. carbon design system

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


3. apple human interface guidelines

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

4. material design

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


معرفی ابزارهای طراحی و ساخت دیزاین سیستم

حالا که یه معرفی کوتاه از دیزاین سیستم و چند نمونه از اون رو داشتیم، بد نیست چند تا ابزاری که با اون‌ها میشه سراغ ساخت دیزاین سیستم خودمون بریم هم بشناسیم.

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

  1. Atomize
  2. Invision App
  3. Lingo
  4. Figma
  5. UX pin


نتیجه گیری

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

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


دیزاین سیستمDesign Systemmaterial designدیزاین سیستم design systemسیستم طراحی
طراح رابط و تجربه کاربری
شاید از این پست‌ها خوشتان بیاید