دیزاین سیستم و راهنمای سَبْک ( Design system & Style guide ) - قسمت صفر - معرفی

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

سوال اول، اصلا «دیزاین سیستم‌» چیست و چرا اینقدر اهمیت دارند؟

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

این دوره ابتدا به معرفی «راهنمای سَبْک» (Style guide) می‌پردازد که شاید پیش‌تر از این طراحان گرافیک و نیز کارشناسان تبلیغات و بازاریابی از آن با عناوین مختلف مثل برندینگ، کتابچه برند، هویت بصری و... استفاده می کردند و با آن آشنا بوده‌اند.سپس به ساخت این سند، و تفاوت آن با «دیزاین سیستم» و ساختن یک دیزاین سیستم خوب بر مبنای یک سند راهنمای سَبْک خوب می‌پردازد.

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

این دوره را «کریس نودِر Chris Nodder » در سال 2018 ارائه کرده است ، ایشان از کارشناسان با تجربه طراحی تعاملی و تجربه کاربری بشمار میره و از این دوره به عنوان یکی از پایه های یادگیری «تجربه کاربری» نام برده است .

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

در تعریف (Overview) این دوره اینطور اومده که:

«راهنمای سَبْک» (Style guide) سندی است که لحن (tone) در ارتباطات سازمان و همچنین نحوه طراحی محصولات را مشخص می‌کند. که شامل «برندینگ»، «فلسفه شرکت یا سازمان» همچنین فهم و شناخت از مشتریان و بازار شما می‌باشد. این سند ممکن است عناصر بصری، نوشتاری و در برخی مواقع شیوه گفتاری که از آن استفاده میکنید را تعریف کند. آژانس‌های همکار با سازمان یا شرکت شما ( بخصوص آژانس‌های تبلیغاتی)، فریلنس‌ها(freelance)، طراحان و توسعه‌دهندگان، این سند راهنما را در جهت اطمینان از انتقال صحیح پیام برند شما، به‌کار خواهند گرفت و همچنین استفاده از آن مانع از هدر رفتن وقت، انرژی و تلاش‌های آن‌ها خواهد شد.

با کارشناس UX، «کریس نودر» همراه باشید تا شما را در ساختن یک «راهنمای سَبْک» مبتنی بر استراتژی تجربه کاربری در یک مسیر مشخص و یکپارچه وهمچنین قابل فهم برای همگان راهنمایی کند. بیاموزید چگونه سازگاری، خلاقیت و انعطاف‌پذیری ایجاد کنید تا تیم شما بتوانند با ساختن یک تجربه کاربری عالی، تصویری منسجم و با هویت از سازمانتان ارائه دهند. به علاوه، دریافتن اینکه چطور دیزاین سیستمِ کاملی بسازید که شامل تمام اجزا (Components) و کد‌های مربوط به طراحی رابط کاربری (interface) با قابلیت استفاده چندین‌باره باشد و همیشه از یکسان بودن زبان طراحی از یک محصول به محصول دیگر اطمینان داشته باشید.

سرفصل مباحثی که در این دوره بررسی می‌شوند:

راهنمای سبک (style guide) چیست؟
سیستم‌های طراحی (design systems) چیستند؟
مبانی «راهنمای سبک»
اجزای «راهنمای سبک»
مشخص کردن مخاطبان و دیدگاه‌هایتان
نوشتن یک «راهنمای سبک»
مبانی «دیزاین سیستم»
ساختن یک «دیزاین سیستم»
پذیرش «راهنمای سبک» و «دیزاین سیستم» شما از سوی مردم

جمع و جور کردن کارها با «راهنمای سبک» و «دیزاین سیستم»

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

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

«کریس نودر» اهداف این دوره را اینطور بیان میکند:

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

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

بخش بعد «دیزاین سیستم و راهنمای سبک چیست؟»