مجله خبری هاست ایران » نقد و بررسی » راهنمای سبک (style guide) برای طراحی سایت
UI/UX نقد و بررسی

راهنمای سبک (style guide) برای طراحی سایت

راهنمای سبک style guide

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

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

Style Guide چیست؟

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

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

چرا راهنمای سبک مهم است؟

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

تعریف استاندارد برای عناصر گرافیکی امکان استفاده مجدد از آن را برای توسعه دهندگان فراهم می‌کند.

راهنمای سبک، شامل چه چیزهایی است؟

Style Guide شامل یکسری موارد کلی هستند که با توجه به شناخت طراح رابط UI/UX از برند کارفرما و مخاطبان سایت طراحی می‌شود. یک راهنمای طراحی معمولاً حاوی موارد زیر است:

پالت رنگ

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

پیشنهاد رنگ برای پروژه کارن
پیشنهاد رنگ برای پروژه کارن

تایپوگرافی

متن‌ها بخش مهمی از یک سایت را تشکیل می‌دهند. در راهنما باید به نام فونت استفاده شده و حالت‌های مختلف انواع مختلف سرتیتر: h1، h2، h3، h4، h5، h6 و نحوه نمایش لینک‌ها اشاره کرد.

تایپوگرافی در راهنمای طراحی

دکمه‌ها

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

راهنمای طراحی دکمه

فرم‌ها

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

راهنمای طراحی فرم

آیکون‌ها

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

راهنمای طراحی آیکون

چند نمونه از طراحی Style Guide که از سایت dribble گلچین شده اند را در ادامه ببینید: