زمان تقریبی برای مطالعه: ۵ دقیقه

دیباچه:

شرکت‌های سرآمد، مجموعه قوانین‌شان در حوزه دیزاین را معمولا با دیگران به اشتراک می‌گذارند تا هر کسی بتواند از آن استفاده کند. مثلا گوگل، متریال دیزاین را به عنوان استاندارد دیزاین خودش منتشر کرده است. یا IBM دیزاین سیستمی با عنوان کربن دارد. حتی دولت آمریکا  U.S. Web Design System را برای هماهنگی هر چه بیشتر سایت های دولتی منتشر کرده است. همه این ها نمونه‌هایی از دیزاین سیستم‌ها هستند.

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

به مجموعه ای ضروری از قوانین، محدودیت ها و مرام‌نامه ها که به شکل دیزاین و کد ارائه می‌شوند را دیزاین سیستم می‌گوییم. دیزاین سیستم از جزء شروع شده و به کل گسترش می‌یابد.

دیزاین سیستم سه بخش ضروری دارد:

• قانون: اینکه یک بخش بصری یا یک متن چه شکلی باشد.
• محدودیت: اینکه مثلا نباید خارج از این ۳ رنگ، رنگی استفاده کرد.
• مرام‌نامه: برای چه کاربری چه چیزی را نشان دهیم.
  

دیزاین سیستم همان هویت بصری است؟

نه. نیست.راهنمای هویت بصری اسمش روش هست. تمرکز سند هویت بصری فقط روی چیزهای بصری مربوط به برند است. رنگ، فونت، لوگو و ساختارهای بصری برند.

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

پس دیزاین سیستم همان دیزاین پترن‌ است؟

نه. نیست. دیزاین پترن ها در مورد reusable component هاست. مثل دکمه ها، modal ها و فرم‌ها.

در واقع دیزاین پترن‌ها ادامه همان سندهای هویت بصری هستند. 

پس دیزاین سیستم یک جور فریم‌ورک برای front-end است؟

یک دیزاین سیستم حتما به شکل یک front-end framework خودش را نشان خواهد داد. اما برعکس آن صادق نیست و الزاما هر  front-end framework ای دیزاین سیستم نیست.

فریم ورک ها تمرکزشان بر روی کد و راحتی استفاده از آنها توسط توسعه دهنده است.

مثلا vue و react مجموعه از کدهای جاوااسکریپت را طوری سامان می‌دهند که شما بتوانید به راحتی کامپوننت های خودتان را روی آنها سوار کنید. خودشان دیزاین سیستم نیستند اما حتما در توسعه یک دیزاین سیستم از آنها استفاده می‌کنیم.

به دیزاین سیستم به شکل یک اکوسیستم نگاه کنید

دیزاین سیستم آمیخته ای است از هویت بصری، کامپوننت ها و صدای برند.

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

داستان دیزاین سیستم از کجا شروع شد؟

اینطور گفته اند که ناسا در سال ۱۹۷۵ یک سند برای استانداردهای بصری اش منتشر کرد. احتمالا اگر در تاریخ به قبل‌تر هم بگردیم نمونه هایی از این استاندارد سازی خواهیم یافت.

به هر حال این کار ناسا را ببینید. کار بسیار باکیفیت و قابل تحسینی است.

اما داستان از جایی شروع شد که با بزرگ شدن شرکت ها نیاز به سیستمی برای دیزاین داشتند که بتواند همزمان با آنها بزرگ شود. قابل اسکیل (بزرگ شدن نمایی- رشد) باشد.

 راهنماهای هویت بصری قابل اسکیل نبودند. باید بازنگری و بازطراحی شوند. رابطه کامپوننتی بین اجزای آن وجود ندارد. اما دیزاین سیستم ها متناسب با رشد شرکت، رشد خواهند کرد. پویا و زنده هستند. نسبت به تغییرات کل دیزاین سیستم هوشیار است و خود را منطبق خواهد کرد.نمونه ای از این زنده بودن دیزاین سیستم را در Lonely Planet’s میتوان دید. جایی که تیم طراحان آن آگاه هستند که باید نسبت به تغییرات و تاثیرات آن بر طراحی و دیزاین سیستم هوشیار بود.

فایده دیزاین سیستم برای من/سازمان‌من چیست؟

کسی شک ندارد که دیزاین سیستم برای بزرگ شدن لازم است. برای همکاری آسان‌تر بین تیم ها و کم کردن بحث ها و تسهیل امور به دیزاین سیستم احتیاج داریم.

طراحان دیزاین را به بخش های کوچک تری تقسیم می‌کنند و با در کنار هم قرار دادن این بخش های کوچک تر فرآیند دیزاین را توسعه پذیرتر و آسان تر می‌کنند. برنامه نویسان front-end هم میتوانند با component base کردن فرآیند توسعه، با تغییر یک بخش کل سیستم را به روز کنند. این یعنی زمان توسعه کمتر.

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

دیزاین سیستم برای اعضای جدید فرآیند On boarding راحت تر و کم زمان‌بر تری را ایجاد می‌کند. صرف زمان کمتر برای ورود عضو جدید به تیم یعنی کاهش هزینه های سازمانی به خصوص در ابعاد بزرگ.

استاندارد خاصی برای توسعه دیزاین سیستم ها داریم؟

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

به طور مثال سیلز فور Lightning Design System هیچ استانداری برای توسعه جاوااسکریپت ندارد و دست توسعه دهندهایش را برای استفاده از فریم ورک‌های دلخواه باز گذاشته است. یا گوگل در Material Design تمرکز زیادی روی طراحی انیمیشن های تعاملی و دلپذیر تر کردن آنها کرده است. یا IBM در  Carbon Design System تلاش کرده است علاوه بر تعریف استانداردهای مشخص برای کامپوننت ها با تعیین یک چارچوب باز برای خلق کامپوننت ها دست طراحان را در خلق کردن هم باز بگذارد.

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