این روزها طراحی وب سایت پیچیده و سخت‌تر شده است و درواقع نمی‌توان این کار را به‌تنهایی انجام داد. چرا که باید این طراحی برای رسیدن به هدف مورد نظر سازمان، به‌اندازه‌ی کافی یکپارچه و بهینه باشد و تجربه‌ای لذت‌بخش را برای کاربران رقم زند.
برای اینکه طراحی یکپارچه‌ای داشته باشیم لازم هست که تمام اعضای تیم به‌طور هماهنگ بر روی یک سایت کار کنند. برای آگاهی از این موضوع در زمانی که تیم طراحی در حال کار بر روی چندین صفحه‌ی مجزا از سایت هستند و یا برای ذخیره کردن موارد طراحی شده توسط طراحان می‌توان مستندات طراحی یا راهنمای سبک طراحی سایت ایجاد کرد.
برای ایجاد تجربه‌ای یکپارچه میان چندین صفحه، داشتن یک راهنمای سبک بسیار کمک کننده هست. این امر به ما اطمینان می‌دهد که توسعه‌های وب آینده یا تولیدات شرکت‌های طرفِ قرارداد از خط مشی برند پیروی می‌کنند و بخشی از برند هستند.
راهنمای سبک چیست؟
به مجموعه‌ای از عناصر، گرافیک و قانون‌هایی که پیش از اعمال طراحی، طراحان و توسعه‌دهندگان باید از آن‌ها پیروی کنند تا از این موضوع اطمینان حاصل شود که در نهایت بخش‌های مجزای سایت به‌صورت یکپارچه ایجاد خواهند شد و تجربه‌ای منسجم خواهیم داشت.
چرا ایجاد یک راهنمای سبک مهم است؟
زمانی که چندین طراح در حال کار بر روی پروژه‌ای بزرگ هستند برای اطمینان حاصل کردن از اینکه همه موارد طبق انتظارات پیش می‌رود و هر طراح صرفاً سلیقه‌ی خود را بر روی پروژه اعمال نکند و یا حتی عناصری را طبق سلیقه تغییر ندهند ایجاد یک راهنمای سبک، ضروری است.
در امر توسعه، اگر تمام عناصر مورد نظر، تعیین شده باشند توسعه‌دهندگان برای استفاده‌ی مجدد از آن‌ها با مشکل مواجه نخواهند شد. همچنین برای توسعه‌دهندگان نقطه‌ی شروع و مسیری مشخص خواهد شد که در طول پروژه از چه کدهایی باید استفاده کنند.
برای کمک بیشتر به توسعه‌دهندگان لازم هست که طراحان تمام موارد از جمله «hover»، «click»، «visit» و حالت‌های دیگر را برای دکمه‌ها، عنوان‌ها و لینک‌ها مشخص کنند.
در ادامه ما کمک می‌کنیم تا با مراحل ایجاد راهنمای سبک طراحی آشنا شوید.
ایجاد راهنمای سبک طراحی سایت
- شناخت برند
ابتدا لازم است که برند خودتان را بخوبی بشناسید و باید بدانید که نام برند بیانگر چه موضوعی است. داستان پشت برندتان را بدانید، تیم و دیدگاه‌های آن‌ها را بررسی کنید و مأموریت و ارزش‌های شرکت را بشناسید. این امر مهمی است که باید برند را با دقت ویژه کاملاً عمیق بررسی کنید ینابراین راهنمای سبک شما به این طریق خواهد شد که چه از لحاظ احساسی و چه از لحاظ دیداری مجموعه ای را توصیف خواهد کرد.
(اگر طراحی هستید که با کد آشنایی چندانی ندارد می‌توانید با استفاده از فتوشاپ به فایل مورد نظر خودتان یک عنوان مرتبط دهید و در آخر توضیحی کوتاه در مورد طرح خود و موارد استفاده‌ی از آن، موضوع را برای کدنویسان روشن کنید.)
اما اگر از دانش کدنویسی برخوردارید بهتر هست که یک فایل HTML با کدهای از پیش تعیین شده ایجاد کنید و بدین طریق به‌راحتی این فایل برای چندمین بار نیز قابل استفاده خواهد بود.
2.ایجاد تایپو گرافی (Typography)
طبق تحقیقات، ۹۵ درصد از طراحی سایت به تایپوگرافی تعلق دارد. تایپوگرافی در واقع ویژگی بصری متون را مشخص می‌کند.
باید تایپوگرافی مناسبی را برای وب‌سایت خود تعیین کنید چرا که این امر یکی از مهم‌ترین ابزارهای ارتباط بین بازدیدکنندگان و وب‌سایت هست.
یک سری قوانین به‌عنوان تایپوگرافی برای خود در نظر بگیرید و آن را مشخص کنید. مثلاً اینکه برای سرتیترها می‌توان از h1، h2، h3، h4، h5 و h6 استفاده کرد. بر روی متن اصلی می‌توان ویژگی‌های «bold» و «italic» را نیز اعمال کرد. برای لینک‌ها، بخش معرفی و دیگر بخش‌های متون نیز تایپوگرافی خاصی را تعریف کنید. برای کل سایت نیز یک «font family»، وزن کلمات و رنگی منحصربه‌فرد درنظر بگیرید.
ایجاد تایپوگرافی (Typography)
3-ایجاد انتخاب ترکیب رنگ (color palette)مناسب
این موضوع خیلی جالب هست که انسان‌ها رنگ‌های مرتبط با هر برند را به خاطر می‌سپارند و در واقع هر رنگ را نماد یک برند می‌دانند. به‌عنوان مثال با شنیدن نام کوکاکولا خیلی سریع رنگ قرمز در ذهن ما نقش خواهد بست.
شما نیز رنگ‌هایی را به‌عنوان رنگ اصلی سایت انتخاب کنید که البته نباید بیش از ۳ طیف رنگی باشند. گاهی اوقات ممکن هست در طراحی رابط کاربری (UI) سایتتون به یک یا دو رنگ فرعی نیاز داشته باشید پس آن‌ها را نیز از پیش تعیین کنید. همچنین برای خوب جلوه کردن رنگ‌های اصلی، رنگ‌های سفید، خاکستری و مشکی را نیز در کنار آن‌ها تعریف کنید.
انتخاب ترکیب رنگ (Color Palette) مناسب
4-انتخاب لحن گفتار (voice)مناسب
نوع لحن گفتار را بارها در بررسی های خودتان از سایت‌های دیگر و با توجه به موضوع فعالیتشان مشاهده کرده اید و شما می‌توانید با بررسی سایت های مختلف از آن‌ها الهام بگیری، البته با توجه به این موضوع و شناختی که در طی بررسی‌های لازم، از برند خود پیدا کرده‌اید متوجه خواهید شد که چه نوع لحنی متناسب با فعالیت در سایت شما خواهد بود اگر با بررسی سایت های مختلف هیچ مورد مشابهی را برای الهام گرفتن از آن پیدا نکردید باید خودتان نوعی جدید و مناسب که به معیارهای شما همخوانی دارد را بوجود آورید.
14-تعین آیکون های مناسب با متن (Iconography)
آیکون ها از قدیمی‌ترین متون و کلمات هستند که سالهاست بوجود آمده است. از آن‌ها سعی کنید در پروژه‌ی خودتان استفاده کنید چرا که در لحظه به بازدیدکننده این ایده را می‌دهد که چه اتفاقی در حال رخ دادن هست و مورد بعدی قصد تعریف چه چیزی را دارد. انتخاب آیکونی مناسب، بیش از انتخاب رنگ، لحن گفتار یا گرافیک‌ها به محتوا مفهوم می‌بخشد. آیکون را طبق هدف خود انتخاب کنید تا از تصورات اشتباه و از سوء تفاهم‌ها جلوگیری کنید. از همه مهم‌تر اینکه ارزش‌های برند خود را بشناسید و از آیکون‌های درخور آن استفاده کنید.
تعیین آیکون‌های مناسب
سایت Iconfinder یکی از سراچه‌هایی است که موارد متنوعی را به شما پیشنهاد می‌دهد.
تعیین آیکون‌های مناسب
همچنین NounProject تنوع زیادی از آیکون‌ها را وب‌سایت خود ارائه می‌دهد.
6-استفاده از تصاویر
عناصر بصری ۱۰۰۰ برابر بیشتر از کلمات سخن می‌گویند. از تصاویری استفاده کنید که قوانین استفاده از تصاویر در وب‌سایت را مشخص کند. همچنین در این مرحله نیز باید به برند و مأموریت آن فکر کنید و تصاویر را متناسب با آن انتخاب کنید. به‌عنوان مثال یک سایت خیریه باید از تصاویری استفاده کند که احساسات کاربران را برانگیزد و در واقع با ابزار احساسات می‌تواند آن‌ها را به خود جذب کند.
7-ایجاد فرم
فرم‌ها باعث می‌شوند که وب‌سایت یا اپلیکیشن شما پویایی خاصی داشته باشد و کاربران را تشویق به برقراری ارتباط با خود کند. کاربر اطلاعات درخواستی شما را در این فرم‌ها وارد می‌کند و به این طریق با شما تعاملات بیشتری خواهد داشت.
مطمئن شوید که سلسله مراتب مورد نیاز در فرم‌ها را رعایت کرده‌اید و بازخوردهای مناسب از جمله «hover»، پیام اخطار و یا پذیرش اطلاعات در این فرم‌ها فعال هست. به‌عنوان مثال، پیام ضعیف بودن رمز عبور، نامعتبر بوردن ایمیل یا ارسال موفق پیام‌ها مثل «ایمیل با موفقیت ارسال شد» در فرم‌ها باید ایجاد شده باشند.
8-بکار بردن دکمه
موارد ترکیب رنگ، فرم و لحن گفتار مناسب همگی باید در ایجاد دکمه‌ها رعایت شوند. با در نظر گرفتن این موارد، ظاهری یکپارچه و دکمه‌هایی کاربردی و البته کاربر پسند ایجاد خواهید کرد.
9-رعایت فاصله گذاری
اما نقش فاصله‌گذاری در راهنمای سبک چیست؟ باید بدانید که این امر یکی از مهم‌ترین مواردی است که باید در راهنمای سبک به آن توجه شود. فاصله‌گذاری می‌تواند به‌صورت رعایت فاصله‌ها با توجه به خطوط شطرنجی در یک صفحه باشد یا فاصله‌ی بین سرفصل‌ها، دکمه‌ها، تصاویر، فرم‌ها و عناصر دیگر.
استفاده صحیح و بجا از فاصله، بسیار اهمیت دارد و موجب می‌شود که عناصر سایت مرتب و یکپارچه به نظر برسند. همچنین موجب حرفه‌ای شدن پروژه می‌شود.
10-تذکر بایدها و نبایدها طراحی
و آخرین بخش را به بیان بایدها و نبایدها اختصاص داده ایم، اشتباهات رایج را همانند بخش سؤالات رایج (FAQ) سازمان‌دهی کنید تا نیازی به توضیح یک‌سری موارد برای چندمین بار نباشد. همچنین برای هر کدام از این اشتباهات مثالی را ذکر کنید تا بیشتر قابل درک باشد.