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

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

 

راهنمای سبک (Style Guide) چیست؟

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

راهنمای سبک airbnb

راهنمای سبک Airbnb

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

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

هنگام توسعه، با تعریف عناصر وب سایت، توسعه دهندگان بک‌اند (Back-end Developers) برای استفاده مجدد از این عناصر آسان هستند. همچنین دقیقا می‌فهمند که چه عناصری را باید در کد استفاده کنند و دقیقا چیزی را که می‌خواهند می‌بینند.

برای این که توسعه‌دهندگان زندگی راحت‌تری داشته باشند (یا به عبارتی بیشتر زندگی کنند:) )، وظیفه‌ی طراح این است که تمام تعاملات احتمالی مانند hover، کلیک، visit و دیگر حالت‌ها را برای دکمه‌ها، لینک‌ها و … قرار دهد.

ایجاد راهنمای سبک طراحی وب

۱- مطالعه‌ی نام تجاری (Brand)

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

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

اگر شما کدنویسی می‌کنید، بهتر است که یک صفحه HTML با کدهای با قابلیت استفاده مجدد بسازید

۲- تایپوگرافی تعریف کنید

به قول اولیور رایخنشتاین ۹۵ درصد از طراحی وب، تایپوگرافی (فونت‌نگاری) است.

شما باید تایپوگرافی درست کنید، زیرا یکی از مهمترین ابزار ارتباطی بین بازدیدکنندگان و وب سایت شماست.

انواع سرفصل‌ها وجود دارد: h1, h2, h3, h4, h5, h6. بعد از آن متن اصلی یا زمینه، متن‌های bold و italic قرار می گیرند. درباره‌ی متن‌های سفارشی که برای لینک‌های کوچکتر، متن‌های معرفی و غیره استفاده می‌شوند فکر کنید. سپس خانواده‌ی فونت (Font Family)، وزن‌ها و رنگ‌ها را تدارک ببینید.

راهنمای سبک فونت

راهنمای سبک فونت

۳- پالت رنگ

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

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

پالت رنگ راهنمای سبک

پالت رنگ راهنمای سبک

۴- صدا

بالاتر اشاره شد که قبل از شروع کار، باید به مطالعه برند بپردازید. با توجه به این مطالعات برای برند یک شخصیت بسازید و برای این شخصیت، یک صدا در نظر بگیرید. برای مثال شما در مطالعات خود متوجه می‌شوید که این یک برند جوان‌پسند و عامیانه است. با توجه به این موضوع، صدای برند شما باید در عین حرفه‌ای بودن، بامزه و گیرا باشد. مثلا به جای پیام “شما پیام ۴۰۴ دریافت کردید.” می توانید بگویید: “اوه پسر! تو با این ارور ۴۰۴ سایت رو له کردی.” اما اگر صدای برند رسمی‌تر باشد، شما اجازه‌ی چنین کاری ندارید.

به یاد داشته باشید که عالی بودن در چیزهای کوچک نهفته است.

۵- آیکون‌گرافی (آیکون‌نگاری)

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

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

و یک نکته‎ی دیگر؛ در مورد برند و ارزش‌های آن فکر کنید. این مسئله موجب می‌شود که در وبسایت یک بانک بزرگ، از آیکون‌های دست کشیده استفاده نکنید.

آیکون یاب

iconfinder ابزاری قوی برای پیدا کردن آیکون‌های فوق‌العاده

Noun Project

NounProject در حال ساخت یک زبان بصری از آیکون‌هاست که هر کسی می تواند آن را درک کند

 

ادامه دارد …