سیستم طراحی در مقابل راهنمای سبک: تفاوت چیست؟

هنگام توسعه یک وب سایت یا برنامه، حفظ همه چیز در مورد طراحی رابط کاربری می تواند دشوار باشد.

مطمئناً، می‌توانید از اسناد Google یا سایر ردیاب‌های یادداشت برای مستند کردن کدهای رنگ HEX یا انتخاب‌های تایپوگرافی خود استفاده کنید. اما در مورد چیزی مانند طراحی دکمه چطور؟ چگونه مطمئن می شوید که همه دکمه های شما یکسان طراحی شده اند؟ و اینکه دکمه هایی با اهداف متفاوت و متمایز به درستی طراحی شده اند؟

یک راهنمای سبک می تواند در این مورد کمک کند، اما ممکن است کافی نباشد.

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

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

این راهنمای سبک Yelp تشابه خوبی برای نحوه عملکرد آن دارد.

عناصر راهنمای سبک مانند رنگ ها و فونت ها مواد تشکیل دهنده هستند. طراحان به راهنمای سبک مراجعه می کنند تا بدانند هنگام تهیه یک “دستور العمل” از چه موادی باید استفاده کنند.

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

برای برخی برندها و تیم های طراحی، این کافی است.

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

اگرچه این فقط طراحان وب نیستند که از راهنماهای سبک استفاده می کنند. را بگیرید راهنمای سبک Disqus، مثلا.

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

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

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

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

اگر نگاهی به وب بیندازید، متوجه خواهید شد که راهنماهای سبک از برندی به برند دیگر متفاوت است. به عنوان مثال راهنمای سبک دروپال شامل دستورالعمل هایی برای موارد زیر است:

• اصول طراحی
• تایپوگرافی
• رنگ ها
• نشانه گذاری
• توری
• دسترسی

همچنین یک بخش به نام وجود دارد کلمات و عبارات که دستورالعمل های سبک محتوا را برای برند دروپال ارائه می کند.

این دستورالعمل های برند برای Frontifyاز سوی دیگر موارد زیر را شامل می شود:

• هویت نام تجاری
• لوگو
• رنگ
• فونت
• تصویرسازی برند
• تصاویر محصول
• نقل قول ها و اندازه های تصویر

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

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

مگر اینکه شما یک وب سایت کوچک، شخصی و غیرتجاری بسازید، واقعاً دلیل خوبی وجود ندارد نه برای ایجاد یک راهنمای سبک

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

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

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

بیایید از جایی که با قیاس Yelp متوقف شدیم ادامه دهیم.

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

“مواد تشکیل دهنده” راهنمای سبک تضمین می کند که هر جزء و الگو با ظاهر و احساس سازگار طراحی شده است. کتابخانه‌های مؤلفه و الگو تضمین می‌کنند که همه چیز را به ترتیب و روش مناسب برای بهترین نتیجه کنار هم می‌آورید.

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

سازگاری، وضوح و کیفیت نتایج طبیعی کار با یک سیستم طراحی است. در سیستم طراحی بذر صفحه اصلی، Sprout Social توضیح می دهد که چرا این بسیار حیاتی است:

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

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

• فروشگاهی که انتظار می رود سال به سال موجودی خود را به طور تصاعدی افزایش دهد
• یک تیم دیجیتال که در حال گسترش و استخدام کارکنان جدید است تا نیازهای در حال تغییر کسب و کار را برآورده کند
• برندی که در حال گسترش به کانال‌های جدید است و به روشی سریع و مؤثر برای انجام آن نیاز دارد

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

مانند راهنماهای سبک، آنچه تصمیم می گیرید در سیستم طراحی قرار دهید به برند شما و آنچه می سازید بستگی دارد. با این حال، سیستم های طراحی ابزارهای همه جانبه هستند، بنابراین بیشتر شامل موارد زیر است:

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

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

این بخش دستورالعمل هایی را در مورد نحوه برخورد با موارد زیر ارائه می دهد:

• زبان فراگیر
• زبان و دستور زبان
• واژگان
• اصول صدا و لحن
• دستورالعمل های نوشتن
• سبک های نوشتاری

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

شما یک مثال عالی از کارهایی که باید با توکن های طراحی انجام دهید پیدا خواهید کرد سیستم طراحی مرجانی Talend.

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

واضح است که سیستم های طراحی چقدر می توانند برای تیم های دیجیتال سودمند باشند.

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

با این حال، آنها برای ساخت و نگهداری کار زیادی می کنند. بنابراین مهم است که قبل از توسعه یک سرمایه گذاری برای برند خود در نظر بگیرید که آیا این یک سرمایه گذاری ارزشمند است یا خیر.

اگر در حال طراحی یک وب سایت برای یک پروژه شخصی، برای یک کسب و کار کوچک یا با محتوای ثابت هستید که احتمالاً تغییر یا گسترش زیادی پیدا نمی کند یا اصلاً تغییر نمی کند، سیستم طراحی احتمالاً برای شما مفید نخواهد بود.

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

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

بنابراین، حداقل، برای هر پروژه حرفه ای که روی آن کار می کنید، یک راهنمای سبک تهیه کنید.

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

ما را بررسی کنید راهنمای طراحی سیستم های 101 برای کسب اطلاعات بیشتر در مورد مزایای سیستم های طراحی ساختمان، مواردی که باید در سیستم شما گنجانده شود و نمونه های بیشتری از سیستم های طراحی در عمل را مشاهده کنید.