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

ارتباط با استانداردهای تجربه کاربری

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

اما مزیت اصلی آن در چیست؟

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

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

چیزی بیشتر از یک جفت سند!

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

سیستم طراحی (Design Systems)

سیستم طراحی به عنوان یک راهنما مشخص می‌کند که چه چیزی برای قرارد دادن در یک رابط مورد قبول است. شما می‌توانید تصمیم‌گیری‌های طراحی رابط کاربری را یک بار انجام دهید و آن ‌را برای کسانی مستند کنید که قرار است محصول را گسترش دهند و با آن تعامل داشته باشند. هدف اصلی از دیدگاه توسعه دهنده، به حداقل رساندن کار مورد نیاز برای ساخت رابط کاربری است. به طور معمول، ایجاد رابط‌های کاربری هنگام توسعه محصول بخش چالش‌برانگیزی نیستند و صرفا انجام دادن آن‌ها زمان قابل توجهی می‌خواهد؛ چراکه باید کاری را انجام دهید که قبلا هم انجام شده. یک سیستم طراحی خوب، حجم کار را برای توسعه دهندگان و طراحان کاهش می‌دهد. هر چقدر این سند جامع‌تر باشد و اجزای بیشتری از یک عنصر (از جمله موارد بصری و برنامه‌نویسی) را در بر گیرد به سرعت کار افزوده می‌شود. این عناصر می‌توانند از انواع دکمه‌‌ها یا باکس‌های متن و … باشد. بهترین داکیومنت‌های سیستم طراحی شامل توضیحات تکمیلی از جمله CSS های هر عنصر همراه با رنگ و فونت و اندازه و فاصله عناصر با یکدیگر هستند. بعضی از سیستم‌های طراحی، قطعه‌ کدهای هر بخش را نیز شامل می‌شوند و می‌توان قبل از پیاده‌سازی نهایی، به صورت آزمایشی تغییرات طراحی پس از اعمال این قطعه کدها را دید. اما در مراحل ابتدایی کار نیازی به یک سند کامل و جامع نیست. با ساده ترین‌ سیستم طراحی هم می‌توان این یکپارچه‌سازی را شروع کرد!

راهنمای سبک

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

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

راهنمای سبک بیشتر برای آن دسته از افرادی مورد استفاده قرار می‌گیرد که تولید محتوا می‌کنند. مواردی که در این سند آورده شده در طراحی محتوای صوتی و بصری در رسانه‌ها (به غیر از وبسایت و اپلیکیشن موبایل) کاربرد دارد و استفاده می‌شود. این سند به طور کلی شامل نام تجاری، لوگو،‌ فلسفه شرکت و توضیح مشتریان و مخاطبان شرکت یا محصول می‌باشد. این سند بایدها و نبایدهای سبک‌های تصویری، نوشتاری،‌ و گاه حتی گفتاری را توصیف می‌کند که در محتوای ایجاد شده توسط شرکت استفاده می‌شود. در هر قسمت برای هر کدام از این عناصر مثال و نمونه‌هایی آورده شده است. یکی از جذاب ترین راهنماهای سبک را شرکت Ollo ارائه کرده است. طراحی ظاهری فوق العاده آن،‌ این راهنمای سبک را به یکی از مراجع طراحی تبدیل کرده.

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

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

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

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

اجزای اصلی هویت نام تجاری

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

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

ماموریت و چشم انداز: یک داکیومنت در مورد اینکه چرا شرکت وجود دارد و سند دیگری در مورد اینکه در آن قرار است برند به کجا برسد بنویسید. این‌هامی توانند خیلی بزرگ و کلی باشند مثل اینکه بنویسید می‌خواهیم جهان را تغییر دهیم ب خیلی کوچک و جرئی مثلا قرار است فلان مشکل کوچک را حل کنیم.

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

شخصیت برند : لیستی از ۳-۵ ویژگی که نام تجاری را توصیف می کند تهیه کنید. از دیدگاه و نظرات تیم خود در این قسمت کمک بگیرید.

نکته: یکی از روش‌های مفید دیگر جمع آوری فهرستی که نشان دهد چه چیزی معرفی‌گر نام تجاری شما نیست. بسیاری از طراحان و آژانس‌های طراحی پروژه های نام تجاری را با تمرین “Is / Is Not” شروع می‌کنند.

ارزش ها: اصول کلی را برای تصمیم گیری ها و اقدامات شرکت تعیین کنید. این ارزش های قابل یادآوری کمک می‌کند که هم تیم و هم دیگران همواره به اصول اولیه پایبند بمانند.

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