طراحی سایتهای امروزی معمولاً توسط یک تیم انجام میشود؛ تیمی که شامل طراحان رابط کاربری، توسعهدهندگان، مدیران محصول و سایر متخصصان مرتبط است. زمانی که افراد مختلف روی بخشهای گوناگون یک پروژه کار میکنند، داشتن یک چارچوب مشخص برای طراحی اهمیت زیادی پیدا میکند.
استایل گاید (Style Guide) به تیم کمک میکند تا تمام اعضا از قوانین و استانداردهای یکسانی برای طراحی و پیادهسازی استفاده کنند. این راهنما مشخص میکند عناصر مختلف رابط کاربری (UI) مانند رنگها، فونتها، دکمهها، آیکونها، فاصلهها و سایر کامپوننتها چگونه در بخشهای مختلف سایت استفاده شوند.
در مراحل طراحی سایت، استایل گاید را به نوعی میتوان در ارتباط و هماهنگی با هویت بصری برند دانست.
وجود یک استایل گاید باعث میشود صفحات وبسایت از نظر ظاهری و تجربه کاربری هماهنگ باشند و هر بخش، بخشی از یک سیستم طراحی واحد به نظر برسد. همچنین این ساختار باعث میشود فرآیند همکاری میان طراحان و توسعهدهندگان سریعتر انجام شود، تغییرات راحتتر مدیریت شوند و احتمال ایجاد خطا در زمان طراحی و توسعه کاهش پیدا کند.
از طرف دیگر، استایل گاید نقش مهمی در حفظ هویت بصری برند دارد. زمانی که تمام اعضای تیم از یک مرجع مشترک استفاده کنند، نتیجه نهایی وبسایتی حرفهایتر، منسجمتر و قابل توسعهتر خواهد بود.
استایل گاید طراحی سایت چیست؟
استایل گاید طراحی سایت (Web Design Style Guide) مجموعهای از قوانین، استانداردها و الگوهای طراحی است که برای ایجاد هماهنگی میان تمام بخشهای یک وبسایت استفاده میشود. این راهنما به طراحان و توسعهدهندگان کمک میکند تا تمام عناصر رابط کاربری را بر اساس یک چارچوب مشخص طراحی و پیادهسازی کنند.
یک استایل گاید معمولاً شامل جزئیاتی مانند رنگهای برند، تایپوگرافی، سبک تصاویر، آیکونها، دکمهها، فرمها، فاصلهگذاریها و سایر کامپوننتهای رابط کاربری است. هرکدام از این موارد مشخص میکنند عناصر مختلف سایت چگونه طراحی و در بخشهای مختلف استفاده شوند.
هدف اصلی استایل گاید، ایجاد یک تجربه بصری و کاربری یکپارچه است. زمانی که اعضای تیم طراحی و توسعه از یک مرجع مشترک استفاده کنند، صفحات مختلف سایت ظاهر هماهنگتری خواهند داشت و فرآیند ایجاد یا بهروزرسانی بخشهای جدید نیز با سرعت و دقت بیشتری انجام میشود.
استایل گاید یکی از بخشهای مهم در فرآیند طراحی سیستماتیک سایت محسوب میشود و به حفظ هویت بصری برند در طول زمان کمک میکند. این موضوع بهخصوص در پروژههای بزرگ اهمیت بیشتری دارد؛ زیرا با تغییر اعضای تیم یا اضافه شدن قابلیتهای جدید، ساختار طراحی همچنان ثابت و قابل کنترل باقی میماند.
تفاوت استایل گاید و دیزاین سیستم چیست؟
استایل گاید و دیزاین سیستم دو مفهوم نزدیک به هم هستند و هر دو برای ایجاد هماهنگی در طراحی محصولات دیجیتال استفاده میشوند، اما از نظر هدف و محدوده کاربرد تفاوتهایی دارند.
استایل گاید بیشتر روی استانداردهای بصری و نحوه نمایش عناصر طراحی تمرکز دارد. این راهنما مشخص میکند که رنگها، فونتها، آیکونها، تصاویر، دکمهها و سایر عناصر رابط کاربری چگونه باید طراحی و استفاده شوند. به بیان سادهتر، استایل گاید مشخص میکند محصول چه ظاهری داشته باشد و چه زبان بصری را دنبال کند.
در مقابل، دیزاین سیستم (Design System) یک چارچوب گستردهتر است که علاوه بر قوانین بصری، شامل کامپوننتهای قابل استفاده مجدد، الگوهای طراحی، قوانین تعامل، دستورالعملهای توسعه و حتی اصول تجربه کاربری نیز میشود.
بهعنوان مثال، در یک استایل گاید ممکن است مشخص شود که:
- رنگ اصلی برند چیست.
- دکمهها چه رنگ و شکلی داشته باشند.
- از چه فونتهایی استفاده شود.
- آیکونها چه سبکی داشته باشند.
اما در یک دیزاین سیستم، علاوه بر این موارد، مشخص میشود:
- کامپوننت دکمه چگونه ساخته شود و چه حالتهایی داشته باشد.
- فرمها چگونه رفتار کنند.
- پیامهای خطا چگونه نمایش داده شوند.
- چه الگوهایی برای طراحی صفحات مختلف استفاده شود.
- توسعهدهندگان چگونه این عناصر را در کد پیادهسازی کنند.
به همین دلیل میتوان گفت استایل گاید معمولاً یکی از بخشهای اصلی دیزاین سیستم محسوب میشود. بسیاری از تیمها ابتدا با ایجاد یک استایل گاید شروع میکنند و با بزرگتر شدن محصول، آن را به یک دیزاین سیستم کاملتر توسعه میدهند.
برای پروژههای کوچکتر، داشتن یک استایل گاید میتواند نیازهای اصلی تیم را برطرف کند؛ اما در پروژههای بزرگ با تعداد صفحات زیاد، چندین محصول یا تیمهای توسعه متعدد، استفاده از دیزاین سیستم باعث میشود فرآیند طراحی و توسعه سریعتر، هماهنگتر و قابل مدیریتتر باشد.
در نهایت، هر دو ابزار یک هدف مشترک دارند: ایجاد تجربهای یکپارچه برای کاربران و سادهتر کردن همکاری میان اعضای تیم. تفاوت اصلی در میزان گستردگی و جزئیاتی است که هرکدام پوشش میدهند.
مراحل ایجاد استایل گاید طراحی سایت
ایجاد یک استایل گاید طراحی سایت نیازمند شناخت دقیق برند، مخاطبان و اهداف پروژه است. این راهنما باید تمام جزئیاتی را که روی ظاهر و تجربه کاربری سایت تأثیر میگذارند، در یک چارچوب مشخص جمعآوری کند تا طراحان و توسعهدهندگان بتوانند در تمام مراحل پروژه از آن استفاده کنند.
برای ساخت یک استایل گاید حرفهای، ابتدا باید هویت بصری برند و ویژگیهای آن مشخص شود. سپس عناصر مختلف طراحی مانند تایپوگرافی، رنگها، تصاویر، آیکونها، کامپوننتهای رابط کاربری و استانداردهای مربوط به استفاده از آنها تعریف میشوند.
هر بخش از استایل گاید نقش مشخصی در ایجاد هماهنگی میان اجزای سایت دارد. در ادامه، مراحل اصلی ایجاد یک استایل گاید را بررسی میکنیم.
۱. ابتدا برند را بهخوبی بشناسید
اولین مرحله در ایجاد استایل گاید، شناخت دقیق برند و ویژگیهای آن است. قبل از اینکه رنگها، فونتها یا سایر عناصر رابط کاربری را مشخص کنید، باید بدانید برند چه شخصیتی دارد، چه ارزشهایی را دنبال میکند و قرار است چه تصویری در ذهن مخاطبان ایجاد کند.
برای شناخت بهتر برند، بررسی این موارد اهمیت دارد:
- داستان شکلگیری برند
- چشمانداز (Vision)
- مأموریت (Mission)
- ارزشهای سازمانی
- شخصیت برند
- مخاطبان هدف
شناخت درست برند کمک میکند تصمیمهای طراحی بر اساس یک هدف مشخص گرفته شوند. برای مثال، انتخاب رنگها، سبک تصاویر، نوع تایپوگرافی و حتی لحن محتوای سایت باید با شخصیت برند هماهنگ باشد و تجربهای یکپارچه برای کاربران ایجاد کند.
در واقع، استایل گاید فقط مجموعهای از قوانین ظاهری نیست؛ بلکه ابزاری برای انتقال هویت برند در تمام بخشهای وبسایت است. زمانی که کاربران با صفحات مختلف سایت روبهرو میشوند، باید بتوانند ویژگیها و شخصیت برند را در تمام جزئیات طراحی احساس کنند.
پس از مشخص شدن هویت برند، این اصول باید در یک سند مشخص ثبت شوند تا تمام اعضای تیم طراحی و توسعه به یک مرجع مشترک دسترسی داشته باشند. این سند میتواند در ابزارهای طراحی مانند Figma یا به شکل یک مستند آنلاین ایجاد شود و در مراحل بعدی پروژه برای حفظ هماهنگی طراحی مورد استفاده قرار گیرد.
۲. تایپوگرافی را مشخص کنید
تایپوگرافی یکی از عناصر اصلی استایل گاید در روند طراحی وبسایت است و تأثیر مستقیمی روی خوانایی محتوا، ساختار صفحات و هویت بصری برند دارد. انتخاب فونت مناسب و تعریف قوانین استفاده از آن باعث میشود تمام بخشهای سایت از یک الگوی مشخص پیروی کنند و تجربه کاربری یکپارچهای ایجاد شود.
در این بخش از استایل گاید باید مشخص شود که متنها در بخشهای مختلف سایت چگونه نمایش داده شوند. مواردی که معمولاً در استانداردهای تایپوگرافی تعریف میشوند شامل موارد زیر هستند:
- فونت اصلی و فونتهای جایگزین
- اندازه و ساختار تیترها از H1 تا H6
- اندازه متنهای معمولی و توضیحات
- وزنهای مختلف فونت (Font Weight)
- فاصله بین خطوط (Line Height)
- فاصله بین حروف (Letter Spacing)
- رنگ متنها در بخشهای مختلف
- نحوه نمایش لینکها، نقلقولها و متنهای تأکیدی
تعریف این استانداردها باعث میشود طراحان و توسعهدهندگان در تمام صفحات سایت از یک ساختار مشخص استفاده کنند. در نتیجه، کاربران هنگام جابهجایی بین بخشهای مختلف سایت با ظاهر هماهنگ و قابل پیشبینی روبهرو میشوند.
تایپوگرافی منظم علاوه بر بهبود خوانایی محتوا، به انتقال شخصیت برند نیز کمک میکند. برای مثال، انتخاب یک فونت رسمی، مدرن یا دوستانه میتواند احساس متفاوتی در مخاطب ایجاد کند و بخشی از تجربه بصری برند را شکل دهد.
۳. پالت رنگی را مشخص کنید
رنگها یکی از مهمترین عناصر در شکلگیری هویت بصری برند و تجربه کاربری سایت هستند. انتخاب درست رنگها به کاربران کمک میکند ارتباط بهتری با برند برقرار کنند و در بخشهای مختلف وبسایت، یک زبان بصری هماهنگ شکل بگیرد.
در استایل گاید، اولین مرحله در تعریف رنگها، مشخص کردن رنگهای اصلی برند (Primary Colors) است. این رنگها بیشترین استفاده را در بخشهای مختلف سایت دارند و نقش اصلی را در نمایش شخصیت بصری برند ایفا میکنند. بهتر است تعداد رنگهای اصلی محدود باشد تا طراحی سایت ساختاری منظم و قابل کنترل داشته باشد.
در کنار رنگهای اصلی، معمولاً به رنگهای ثانویه و تکمیلی (Secondary & Accent Colors) نیز نیاز است. این رنگها برای ایجاد تنوع بصری و نمایش وضعیتهای مختلف رابط کاربری مانند پیامهای موفقیت، هشدار، خطا، لینکها و عناصر تعاملی استفاده میشوند.
رنگهای خنثی مانند سفید، خاکستری و مشکی نیز بخش مهمی از پالت رنگی هستند. این رنگها به ایجاد تعادل در طراحی کمک میکنند و باعث میشوند رنگهای اصلی برند در بخشهای مهم سایت بهتر دیده شوند.
یک پالت رنگی استاندارد معمولاً شامل موارد زیر است:
- رنگهای اصلی برند (Primary Colors)
- رنگهای ثانویه و تکمیلی (Secondary & Accent Colors)
- رنگهای خنثی مانند سفید، خاکستری و مشکی
- رنگهای مربوط به وضعیتهای رابط کاربری مانند موفقیت، هشدار، خطا و اطلاعرسانی
- کد دقیق رنگها مانند HEX، RGB یا HSL
ثبت دقیق این اطلاعات در استایل گاید باعث میشود تمام اعضای تیم طراحی و توسعه از یک مرجع مشترک استفاده کنند. در نتیجه، رنگها در تمام صفحات سایت به شکل یکسان استفاده میشوند و هویت بصری برند در طول فرآیند طراحی و توسعه حفظ خواهد شد.
۴. لحن و صدای برند را مشخص کنید (Voice & Tone)
استایل گاید فقط به عناصر بصری مانند رنگ، فونت و تصاویر محدود نمیشود؛ بلکه نحوه ارتباط برند با کاربران را نیز مشخص میکند. لحن و صدای برند (Voice & Tone) تعیین میکند متنهای سایت با چه شخصیت و روشی با مخاطبان صحبت کنند.
Voice به شخصیت ثابت برند در ارتباطات اشاره دارد؛ برای مثال یک برند میتواند رسمی، دوستانه، حرفهای یا خلاق باشد. Tone نیز با توجه به شرایط و موقعیت تغییر میکند؛ مانند تفاوت لحن یک پیام خوشآمدگویی با یک پیام خطا یا اطلاعرسانی مهم.
برای مثال، یک برند جوان و صمیمی میتواند در پیام خطای سایت از لحنی دوستانه استفاده کند:
«اوه! به نظر میرسد صفحهای که دنبالش هستی پیدا نشد.»
اما یک سازمان رسمی مانند بانک یا شرکت حقوقی احتمالاً به لحنی دقیقتر و حرفهایتر نیاز دارد:
«صفحه موردنظر یافت نشد. لطفاً آدرس واردشده را بررسی کنید.»
به همین دلیل، در استایل گاید باید قوانین مشخصی برای نحوه نوشتن محتوا تعریف شود. این قوانین میتوانند شامل مواردی مانند میزان رسمی بودن متن، نوع واژههای مورد استفاده، نحوه خطاب قرار دادن کاربران و سبک نوشتن پیامهای رابط کاربری باشند.
تعریف یک لحن مشخص باعث میشود تمام بخشهای سایت، از متن دکمهها و اعلانها گرفته تا صفحات خطا و پیامهای راهنما، شخصیت یکسانی داشته باشند. این هماهنگی در کنار سایر عناصر طراحی، تجربهای منسجمتر و قابل اعتمادتر برای کاربران ایجاد میکند.
۵. آیکونها را استاندارد کنید (Iconography)
آیکونها یکی از عناصر مهم رابط کاربری هستند که به کاربران کمک میکنند عملکرد بخشهای مختلف سایت را سریعتر درک کنند. یک آیکون مناسب میتواند مفهوم یک قابلیت، دستهبندی یا اقدام مشخص را بدون نیاز به توضیح طولانی منتقل کند و باعث بهبود تجربه کاربری شود.
بااینحال، انتخاب آیکونها تنها به ظاهر آنها محدود نمیشود. هر آیکون باید با سبک کلی طراحی سایت، شخصیت برند و نیاز کاربران هماهنگ باشد. استفاده از آیکونهایی با سبکهای متفاوت میتواند باعث ایجاد ناهماهنگی بصری و کاهش کیفیت تجربه کاربر شود.
در استایل گاید طراحی سایت، بهتر است قوانین مشخصی برای استفاده از آیکونها تعریف شود. این استانداردها معمولاً شامل موارد زیر هستند:
- سبک طراحی آیکونها مانند Outline، Filled، Line یا Flat
- اندازههای استاندارد برای استفاده در بخشهای مختلف
- ضخامت خطوط و جزئیات بصری
- رنگ آیکونها و حالتهای مختلف مانند Hover، Active و Disabled
- فاصله مناسب میان آیکون و متن
- نحوه استفاده از آیکونها در کامپوننتهای مختلف رابط کاربری
هنگام انتخاب سبک آیکونها باید ویژگیهای برند و مخاطبان هدف نیز در نظر گرفته شود. برای مثال، یک برند خلاق ممکن است از آیکونهای دستکشیده یا فانتزی استفاده کند، درحالیکه یک وبسایت بانکی یا سازمانی معمولاً به آیکونهایی ساده، دقیق و مینیمال نیاز دارد.
تعریف استانداردهای مشخص برای آیکونها باعث میشود تمام بخشهای سایت از یک زبان بصری مشترک پیروی کنند. این هماهنگی در کنار سایر اجزای استایل گاید، ظاهر حرفهایتر و تجربه کاربری یکپارچهتری ایجاد خواهد کرد.
۶. تصاویر را استاندارد کنید (Imagery)
تصاویر یکی از عناصر مهم در انتقال پیام برند و ایجاد ارتباط احساسی با کاربران هستند. یک تصویر مناسب میتواند در مدت کوتاهی مفهومی را منتقل کند که توضیح آن با متنهای طولانی دشوار باشد. به همین دلیل، انتخاب و استفاده از تصاویر باید بخشی از استانداردهای استایل گاید طراحی سایت باشد.
در این بخش باید مشخص شود چه نوع تصاویری با شخصیت برند هماهنگ هستند و در صفحات مختلف سایت چه سبک بصری باید استفاده شود. این استانداردها کمک میکنند تصاویر انتخابشده توسط افراد مختلف، همچنان ظاهر و حس یکسانی داشته باشند.
مواردی که معمولاً در بخش تصاویر استایل گاید مشخص میشوند شامل موارد زیر هستند:
- سبک تصاویر مانند عکاسی واقعی، مینیمال، ایلوستریشن، سهبعدی یا ترکیبی
- کیفیت، ابعاد و نسبت تصویر استاندارد
- نحوه استفاده از نور، رنگ و ترکیببندی تصاویر
- قوانین مربوط به ویرایش تصاویر و استفاده از فیلترها
- هماهنگی تصاویر با رنگهای برند و سایر عناصر طراحی
هنگام انتخاب تصاویر باید هویت، ارزشها و پیام اصلی برند در نظر گرفته شود. برای مثال، یک سازمان فعال در حوزه تأمین آب آشامیدنی میتواند از تصاویر واقعی و تأثیرگذار استفاده کند تا حس همدلی و اهمیت موضوع را بهتر به مخاطب منتقل کند؛ درحالیکه تصاویر صرفاً تزئینی ممکن است این ارتباط را ایجاد نکنند.
تصاویر باید بخشی از داستان برند را روایت کنند و همان احساسی را منتقل کنند که برند قصد ایجاد آن را دارد. تعریف استانداردهای مشخص برای تصاویر باعث میشود ظاهر سایت منسجمتر شود و کاربران ارتباط عمیقتری با برند برقرار کنند.
۷. فرمها را استاندارد کنید (Forms)
فرمها یکی از مهمترین بخشهای رابط کاربری سایت هستند؛ زیرا کاربران از طریق آنها اطلاعات وارد میکنند و با بخشهای مختلف وبسایت تعامل دارند. فرم ثبتنام، ورود، تماس، خرید یا ارسال درخواست، همگی باید ظاهر هماهنگ و تجربهای ساده و قابلفهم برای کاربران ایجاد کنند.
در استایل گاید طراحی سایت، علاوه بر ظاهر کلی فرمها، استانداردهای مربوط به نمایش حالتهای مختلف آنها نیز مشخص میشود. این کار کمک میکند کاربران هنگام تعامل با فرمها، بازخورد واضحی دریافت کنند و مسیر انجام هر فعالیت برای آنها قابل درک باشد.
مواردی که معمولاً برای فرمها در استایل گاید تعریف میشوند شامل موارد زیر هستند:
- ظاهر فیلدها در حالت عادی (Default)
- نحوه نمایش حالت انتخاب یا تمرکز روی فیلد (Focus)
- تغییرات ظاهری هنگام قرار گرفتن نشانگر ماوس (Hover)
- سبک نمایش پیامهای خطا، هشدار و موفقیت
- نحوه نمایش وضعیت اعتبارسنجی اطلاعات (Validation)
برای مثال، اگر کاربر اطلاعاتی با فرمت اشتباه وارد کند، طراحی پیام خطا باید با زبان بصری برند هماهنگ باشد و اطلاعات لازم را به شکل واضح منتقل کند. همچنین پیامهای موفقیت باید به کاربر اطمینان دهند که عملیات موردنظر با موفقیت انجام شده است.
تعریف این استانداردها باعث میشود فرمهای مختلف سایت از نظر ظاهر و نحوه نمایش پیامها هماهنگ باشند و تجربه کاربری یکپارچهای ایجاد شود.
۸. دکمهها را استاندارد کنید (Buttons)
دکمهها یکی از مهمترین عناصر رابط کاربری در طراحی سایت هستند؛ زیرا کاربران از طریق آنها اقداماتی مانند ثبت فرم، خرید محصول، دانلود فایل، ورود به حساب کاربری یا رفتن به بخشهای مختلف سایت را انجام میدهند. به همین دلیل، ظاهر و نحوه نمایش دکمهها باید از یک استاندارد مشخص پیروی کند.
در این روند، ویژگیهای بصری دکمهها مشخص میشوند تا این عناصر در تمام صفحات سایت ظاهر هماهنگی داشته باشند. رنگ، تایپوگرافی، شکل، فاصلهها و حتی سبک نوشتار متن دکمهها، همگی روی تجربه کاربری و برداشت مخاطب از برند تأثیر میگذارند.
مواردی که معمولاً برای دکمهها در استایل گاید تعریف میشوند شامل موارد زیر هستند:
- رنگ دکمههای اصلی، فرعی و سایر انواع دکمهها
- اندازههای استاندارد دکمهها
- شعاع گوشهها (Border Radius)
- فونت، اندازه و وزن متن دکمه
- آیکونهای قابل استفاده در کنار متن
- حالتهای نمایشی مانند Hover، Active، Focus و Disabled
- فاصله داخلی و خارجی (Padding و Margin)
تعریف استانداردهای مشخص برای دکمهها باعث میشود کاربران در تمام صفحات سایت با الگوهای بصری آشنا روبهرو شوند و سریعتر مفهوم و کاربرد هر بخش را درک کنند. همچنین این هماهنگی به تیم طراحی کمک میکند تا در ادامه پروژه، عناصر جدید را با همان زبان بصری برند ایجاد کنند.
۹. فاصلهگذاری را مشخص کنید (Spacing)
فاصلهگذاری یکی از عناصر مهم در ایجاد نظم بصری و تجربه کاربری مناسب در طراحی سایت است. حتی زمانی که رنگها، فونتها و سایر عناصر رابط کاربری بهدرستی انتخاب شده باشند، فاصلههای نامناسب میتوانند باعث شلوغی صفحه و کاهش خوانایی محتوا شوند.
در استایل گاید طراحی سایت، باید قوانین مشخصی برای فاصله میان عناصر مختلف تعریف شود تا تمام صفحات از یک ساختار بصری یکسان پیروی کنند. این استانداردها به ایجاد ریتم بصری مناسب کمک میکنند و باعث میشوند کاربران راحتتر مسیر خود را در صفحه پیدا کنند.
مواردی که معمولاً در بخش فاصلهگذاری استایل گاید مشخص میشوند شامل موارد زیر هستند:
- ساختار گرید (Grid System) و نحوه چیدمان عناصر
- فاصله بین تیترها، متنها و بخشهای مختلف محتوا
- فاصله میان تصاویر و عناصر متنی
- فاصله دکمهها از سایر المانهای رابط کاربری
- فاصله میان فیلدهای فرم
- حاشیه داخلی و خارجی عناصر (Padding و Margin)
تعریف این استانداردها باعث میشود صفحات سایت ظاهر منظمتر و هماهنگتری داشته باشند. همچنین استفاده درست از فضای خالی، تمرکز کاربران را افزایش میدهد، خوانایی محتوا را بهتر میکند و تجربه کاربری حرفهایتری ایجاد خواهد کرد.
۱۰. بایدها و نبایدها را مشخص کنید (Dos & Don’ts)
بخش بایدها و نبایدها یکی از کاربردیترین قسمتهای استایل سایت است. این بخش مشخص میکند عناصر مختلف طراحی چگونه باید استفاده شوند و چه مواردی ممکن است باعث ایجاد ناهماهنگی در ظاهر یا تجربه کاربری سایت شوند.
وجود این استانداردها باعث میشود اعضای تیم طراحی و توسعه، تصمیمهای مشابهی بگیرند و برای اجرای بخشهای مختلف سایت به برداشت شخصی خود تکیه نکنند. در واقع، این قسمت مانند یک راهنمای سریع عمل میکند و مسیر استفاده درست از عناصر طراحی را مشخص میسازد.
برای مثال، در بخش بایدها میتوان موارد زیر را تعریف کرد:
بایدها (Do)
- از رنگهای تعریفشده در پالت برند استفاده کنید.
- استانداردهای فاصلهگذاری مشخصشده در استایل گاید را رعایت کنید.
- از تایپوگرافی تعیینشده برای بخشهای مختلف استفاده کنید.
- آیکونها و تصاویر را مطابق با هویت بصری برند انتخاب کنید.
نبایدها (Don’t)
- رنگهای خارج از پالت تعریفشده برند را به طراحی اضافه نکنید.
- اندازه یا سبک فونتها را بدون هماهنگی تغییر ندهید.
- از چند سبک متفاوت برای آیکونها استفاده نکنید.
- فاصلهها، اندازه دکمهها یا ساختار کامپوننتها را در صفحات مختلف بهصورت سلیقهای تغییر ندهید.
تعریف بایدها و نبایدها کمک میکند تمام اعضای تیم، از طراحان گرفته تا توسعهدهندگان، درک مشترکی از استانداردهای پروژه داشته باشند. نتیجه این هماهنگی، طراحی منسجمتر، حفظ هویت بصری برند و امکان توسعه سادهتر وبسایت در آینده خواهد بود.
