فواد مقدسی
فواد مقدسی
خواندن ۲ دقیقه·۳ سال پیش

Style Guide چیست ؟

داکیومنت style guide یه چیزی مثل کاتالوگ محصول شما میمونه و تمام استاندارد های طراحی برای برند یا محصول شما رو مشخص میکنه. کاتالوگی که تمام جزئیات طراحی شمارو در خودش داره، از نحوه نمایش ارور ها گرفته تا اندازه و فونت هر هدینگ یا پاراگراف یا پالت های رنگی به کار رفته و …

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

داکیومنت style guide در اصل ویژگی ها و هویت برند رو مشخص میکنه و کمک میکنه تا بقیه کسانی که توی بیزینس همراه ما هستن از این ویژگی ها مطلع بشن و در چهارچوب این استایل گاید فعالیت کنن، به عبارتی باعث انسجام بین تیم های مختلف میشه و نتیجش میشه تجربه کاربری بهتر و محبوبیت بیشتر برند.استایل گاید در ادامه کار تبدیل میشه به دفترچه راهنمای هویت بصری برند و ابزاری برای دیزاینر ها و دولوپر ها !

اما در یک داکیونت style guide چه چیز هایی وجود داره ؟

در یک Style guide، حداقل وجود این عناصر الزامیست :

  • Typography Scheme
  • Responsive Layouts
  • Color Palette
  • Buttons

اما برای کامل شدن این داکیومنت میتونید عناصر زیر هم بهش اضافه کنید:

  • Iconography
  • Tooltips and popovers
  • Modals
  • Form elements
  • Data Tables
  • Navigation menus
  • Charts and data visualizations
  • Tabs
  • On-off switches
  • Dialogs
  • Content grid lists
  • Vertical lists
  • Toolbars
  • Date and time pickers
  • Loading indicators
  • Checkboxes
  • Alerts
  • Dropdown menus
  • Sliders
  • Steppers
  • Paginationv

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

مثل فهرست مطالب، مشخص کردن کانتکس و هدف محصول، دستور العمل فاصله گذاری یا موقعیت متریال های مختلف محصول، قوانین و باید ها و نباید ها در استفاده از هر متریال در موقعیت های مختلف ( مثل رنگ لوگو در پس زمینه های مختلف ) و …

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

  • www.figma.com
  • www.phase.com
  • www.invisionapp.com
  • www.material‪.io

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


امیدوارم از خوندن این مطلب خوشتون اومده باشه :)

طراحی محصولتجربه کاربریطراحیuxui
در جست و جوی پروداکت دیزاینر شدن ...
شاید از این پست‌ها خوشتان بیاید