این روزها طراحی وب سایت پیچیده و سخت‌تر شده است و درواقع نمی‌توان این کار را به‌تنهایی انجام داد. چرا که باید این طراحی برای رسیدن به هدف مورد نظر سازمان، به‌اندازه‌ی کافی یکپارچه و بهینه باشد و تجربه‌ای لذت‌بخش را برای کاربران رقم زند.
برای اینکه طراحی یکپارچه‌ای داشته باشیم لازم هست که تمام اعضای تیم به‌طور هماهنگ بر روی یک صفحه از وبسایت کار کنند. برای آگاهی از این موضوع در زمانی که تیم طراحی در حال کار بر روی چندین صفحه‌ی مجزا از سایت هستند و یا برای ذخیره کردن موارد طراحی شده توسط طراحان می‌توان مستندات طراحی یا راهنمای سبک طراحی سایت ایجاد کرد.
برای ایجاد تجربه‌ای یکپارچه میان چندین صفحه، داشتن یک راهنمای سبک بسیار کمک کننده هست. این امر به ما اطمینان می‌دهد که توسعه‌های وب آینده یا تولیدات شرکت‌های طرفِ قرارداد از خط مشی برند پیروی می‌کنند و بخشی از برند هستند.
راهنمای سبک چیست؟
به مجموعه‌ای از عناصر، گرافیک و قانون‌هایی که پیش از اعمال طراحی، طراحان و توسعه‌دهندگان باید از آن‌ها پیروی کنند تا از این موضوع اطمینان حاصل شود که در نهایت بخش‌های مجزای سایت به‌صورت یکپارچه ایجاد خواهند شد و تجربه‌ای منسجم خواهیم داشت.
چرا ایجاد راهنمای سبک مهم هست؟
زمانی که چندین طراح در حال کار بر روی پروژه‌ای بزرگ هستند برای اطمینان حاصل کردن از اینکه همه موارد طبق انتظارات پیش می‌رود و هر طراح صرفاً سلیقه‌ی خود را بر روی پروژه اعمال نکند و یا حتی عناصری را طبق سلیقه تغییر ندهند ایجاد یک راهنمای سبک، ضروری است.
در امر توسعه، اگر تمام عناصر مورد نظر، تعیین شده باشند توسعه‌دهندگان برای استفاده‌ی مجدد از آن‌ها با مشکل مواجه نخواهند شد. همچنین برای توسعه‌دهندگان نقطه‌ی شروع و مسیری مشخص خواهد شد که در طول پروژه از چه کدهایی باید استفاده کنند.
برای کمک بیشتر به توسعه‌دهندگان لازم هست که طراحان تمام موارد از جمله hover»، click»، visit» و حالت‌های دیگر را برای دکمه‌ها، عنوان‌ها و لینک‌ها مشخص کنند.
در ادامه به شما کمک می‌کنیم تا با مراحل ایجاد راهنمای سبک طراحی بیشتر آشنا شوید.
ایجاد راهنمای سبک طراحی وب سایت
۱- شناخت برند
در ابتدا لازم هست که برندتان را به‌خوبی بشناسید و بدانید که نام آن بیانگر چه موضوعی است. داستان پشت برند را بدانید، تیم و دیدگاه‌های آن‌ها را بررسی کنید و مأموریت و ارزش‌های شرکت را بشناسید. این امر مهمی است که برند را بسیار عمیق بررسی کنید و بدین ترتیب راهنمای سبک شما به طریقی خواهد بود که چه از لحاظ دیداری و چه از لحاظ احساسی، مجموعه را توصیف خواهد کرد.
اگر طراحی هستید که با کد آشنایی چندانی ندارد می‌توانید فتوشاپ را باز کنید و به فایل خود یک عنوان مرتبط دهید و با توضیحی کوتاه در مورد طرح خود و موارد استفاده‌ی آن، موضوع را برای کدنویسان روشن کنید.
اما اگر از دانش کدنویسی برخوردارید بهتر هست که یک فایل HTML با کدهای از پیش تعیین شده ایجاد کنید و بدین طریق به‌راحتی این فایل برای چندمین بار نیز قابل استفاده خواهند بود.
۲- ایجاد تایپوگرافی (Typography)
طبق تحقیقات، ۹۵ درصد از طراحی سایت به تایپوگرافی تعلق دارد. تایپوگرافی در واقع ویژگی بصری متون را مشخص می‌کند.
باید تایپوگرافی مناسبی را برای وبسایت خود تعیین کنید چرا که این امر یکی از مهم‌ترین ابزارهای ارتباط بین بازدیدکنندگان و وبسایت هست.
یک سری قوانین به‌عنوان تایپوگرافی برای خود در نظر بگیرید و آن را مشخص کنید. مثلاً اینکه برای سرتیترها می‌توان از h1، h2، h3، h4، h5 و h6 استفاده کرد. بر روی متن اصلی می‌توان ویژگی‌های bold» و italic» را نیز اعمال کرد. برای لینک‌ها، بخش معرفی و دیگر بخش‌های متون نیز تایپوگرافی خاصی را تعریف کنید. برای کل سایت نیز یک font family»، وزن کلمات و رنگی منحصربه‌فرد درنظر بگیرید.
۳- انتخاب ترکیب رنگ (Color Palette) مناسب
این موضوع خیلی جالب هست که انسان‌ها رنگ‌های مرتبط با هر برند را به خاطر می‌سپارند و در واقع هر رنگ را نماد یک برند می‌دانند. به‌عنوان مثال با شنیدن نام کوکاکولا خیلی سریع رنگ قرمز در ذهن ما نقش خواهد بست.
شما نیز رنگ‌هایی را به‌عنوان رنگ اصلی سایت انتخاب کنید که البته نباید بیش از ۳ طیف رنگی باشند. گاهی اوقات ممکن هست در طراحی رابط کاربری (UI) سایتتون به یک یا دو رنگ فرعی نیاز داشته باشید پس آن‌ها را نیز از پیش تعیین کنید. همچنین برای خوب جلوه کردن رنگ‌های اصلی، رنگ‌های سفید، خاکستری و مشکی را نیز در کنار آن‌ها تعریف کنید.
۴- انتخاب لحن گفتار (Voice) مناسب
نوع لحن گفتار مناسب را می‌توان با بررسی سایت‌های دیگر با توجه به موضوع فعالیتشان تشخیص داد و از آن‌ها الهام گرفت. با توجه به این موضوع و شناختی که در طی بررسی‌های لازم، از برند خود پیدا کرده‌اید متوجه خواهید شد که چه نوع لحنی متناسب با فعالیت سایت شماست. اگر با بررسی سایت‌های دیگر، هیچ مورد مشابهی را برای الهام گرفتن نیافتید باید خودتان دست بکار شوید و نوع جدید و مناسبی را اختراع کنید.
۵- تعیین آی‌های مناسب با متن (Iconography)
آی‌ها سال‌هاست که به وجود آمده‌اند و حتی قدیمی‌تر از متون و کلمات هستند. از آن‌ها در پروژه‌ی خود استفاده کنید چرا که در لحظه به بازدیدکننده این ایده را می‌دهد که چه اتفاقی در حال رخ دادن هست و مورد بعدی قصد تعریف چه چیزی را دارد. انتخاب آیی مناسب، بیش از انتخاب رنگ، لحن گفتار یا گرافیک‌ها به محتوا مفهوم می‌بخشد. قبل از استفاده از هرگونه آی، مطمئن شوید که مخاطبان هدف خود، اعتقادات و تاریخچه‌ی آن‌ها را به‌خوبی می‌شناسید، آی را طبق این موارد انتخاب کنید تا از تصورات اشتباه و سوء تفاهم‌ها جلوگیری کنید. از همه مهم‌تر اینکه ارزش‌های برند خود را بشناسید و از آی‌های درخور آن استفاده کنید.
سایت Iconfinder یکی از سراچه‌هایی است که موارد متنوعی را به شما پیشنهاد می‌دهد.
همچنین NounProject تنوع زیادی از آی‌ها را وبسایت خود ارائه می‌دهد.
۶- استفاده از تصاویر مناسب
عناصر بصری ۱۰۰۰ برابر بیشتر از کلمات سخن می‌گویند. از تصاویری استفاده کنید که قوانین استفاده از تصاویر در وبسایت را مشخص کند. همچنین در این مرحله نیز باید به برند و مأموریت آن فکر کنید و تصاویر را متناسب با آن انتخاب کنید. به‌عنوان مثال یک سایت خیریه باید از تصاویری استفاده کند که احساسات کاربران را برانگیزد و در واقع با ابزار احساسات می‌تواند آن‌ها را به خود جذب کند.
۷- ایجاد فرم
فرم‌ها باعث می‌شوند که وبسایت یا اپلیکیشن شما پویایی خاصی داشته باشد و کاربران را تشویق به برقراری ارتباط با خود کند. کاربر اطلاعات درخواستی شما را در این فرم‌ها وارد می‌کند و به این طریق با شما تعاملات بیشتری خواهد داشت.
مطمئن شوید که سلسله مراتب مورد نیاز در فرم‌ها را رعایت کرده‌اید و بازخوردهای مناسب از جمله hover»، پیام اخطار و یا پذیرش اطلاعات در این فرم‌ها فعال هست. به‌عنوان مثال، پیام ضعیف بودن رمز عبور، نامعتبر بوردن ایمیل یا ارسال موفق پیام‌ها مثل ایمیل با موفقیت ارسال شد» در فرم‌ها باید ایجاد شده باشند.
۸- بکار بردن دکمه
موارد ترکیب رنگ، فرم و لحن گفتار مناسب همگی باید در ایجاد دکمه‌ها رعایت شوند. با در نظر گرفتن این موارد، ظاهری یکپارچه و دکمه‌هایی کاربردی و البته کاربر پسند ایجاد خواهید کرد.
۹- رعایت فاصله‌گذاری
اما نقش فاصله‌گذاری در راهنمای سبک چیست؟ باید بدانید که این امر یکی از مهم‌ترین مواردی است که باید در راهنمای سبک به آن توجه شود. فاصله‌گذاری می‌تواند به‌صورت رعایت فاصله‌ها با توجه به خطوط شطرنجی در یک صفحه باشد یا فاصله‌ی بین سرفصل‌ها، دکمه‌ها، تصاویر، فرم‌ها و عناصر دیگر.
استفاده صحیح و بجا از فاصله، بسیار اهمیت دارد و موجب میشود که عناصر سایت مرتب و یکپارچه به نظر برسند. همچنین موجب حرفه‌ای شدن پروژه میشود.
۱۰- تذکر بایدها و نبایدهای طراحی
بخشی را به بیان بایدها و نبایدها اختصاص دهید. اشتباهات رایج را همانند بخش سؤالات رایج (FAQ) سازمان‌دهی کنید تا نیازی به توضیح یک‌سری موارد برای چندمین بار نباشد. همچنین برای هر کدام از این اشتباهات مثالی را ذکر کنید تا بیشتر قابل درک باشد.
در ادامه چندین مثال از راهنمای سبک طراحی را مشاهده می‌کنید:
نمونه‌های زیر از بهترین راهنماهای سبک هستند که می‌توانند الهام‌بخش شما در ایجاد راهنمای سبکتان باشند. به این موضوع توجه داشته باشید که هر کدام از این نمونه‌ها نسبت به وضعیت یک سازمان، دیدگاه، مأموریت و ارزش‌های خود طراحی شده است. تقلید و کپی از این نمونه‌ها ممکن هست با نوع فعالیت شما کاملاً نامرتبط باشد و موجب پیشرفتتان نشود.
راهنمای سبک طراحی لوگوی Spotify
راهنمای سبک انتخاب رنگ‌های اصلی برای سایت و لوگوی Dropbox
راهنمای سبک Kickstarter
راهنمای سبک طراحی Lonely Planet
با بررسی مطالب گفته شده و البته نمونه‌هایی که در این مقاله مشاهده کردید لازم هست مسیر درستی را برای ایجاد راهنمای مناسبی برای طراحی سایت خود ایجاد کنید. مسیری که با شناخت کامل برند و ارزش‌های آن می‌تواند به موفقیت بیشتر کمک کند.
درباره این سایت