سبک طراحی سایت – چگونگی ایجاد راهنمای طراحی وب سایت

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

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

راهنمای سبک طراحی سایت چیست؟

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

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

ایجاد دستورالعمل سبک طراحی سایت

١. نام تجاری در طراحی سایت

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

٢. تعریف تایپوگرافی در طراحی سایت

به گفته «اولیور ریک‌اشتاینشتاین»، تایپوگرافی ٩۵ درصد طراحی سایت را تشکیل می‌دهد. 
شما باید تایپوگرافی صحیحی را انتخاب کنید زیرا این مسئله یکی از مهم‌ترین ابزارهای برقراری ارتباط بین بازدیدکننده و وب‌سایت شماست. 
سلسه مراتب را مشخص و آن را تعیین کنید. عنوان‌های مختلفی از جمله h١، h٢، h٣، h۴، h۵ و h۶ وجود دارند. سپس متن اصلی را کپی کنید و تغییراتی چون برجسته‌سازی متن و تغییر متن به حروف ایتالیک را اعمال کنید. درباره نسخه‌های سفارشی که برای لینک‌های کوچک‌تر مورد استفاده قرار می‌گیرند، مقدمه متن و غیره هم فکر کرده و گروهی از فونت‌‌ها، رنگ و وزن را تهیه کنید.

٣. پالت رنگ در طراحی سایت

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

۴. صدا در طراحی سایت

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

۵. آیکون شناسی در طراحی سایت

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

سایت آیکون یاب Icon Finder ابزار خوبی برای یافتن آیکون های برتر برای پروژه شماست.

۶.    تصاویر در طراحی سایت

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

به عنوان مثال، یک مؤسسه خیریه در طراحی سایت خود از تصاویری سرشار از احساسات استفاده می‌کند که احساسات قوی در آن جریان دارد و احساسات انسانی را برمی‌انگیزد تا به این واسطه بتواند امکان دسترسی به امکانات ضروری زندگی مانند آب، غذا، برق و آموزش را برای نیازمندان تأمین کند.

٧. شکل و فرم در طراحی سایت

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

٨. دکمه ها در طراحی سایت

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

٩.    فاصله گذاری در طراحی سایت

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

١۰.    بایدها و نبایدها در طراحی سایت

و اما آخرین مورد: بخش بایدها و نبایدها بیشتر شبیه سؤالات متداولی است که معمول‌ترین خطاها را نشان می‌دهد و نمونه‌هایی از نحوه انجام کارها و کارهایی را نشان می‌دهد که باید انجام شوند.

نمونه ها

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

لوگوها و نام‌های تجاری دراپ‌باکس

دستورالعمل سبک طراحی سایت کیک‌استارترتجاری

تنها دستورالعمل طراحی سیاره

دستورالعمل‌ها را به عنوان سریع‌ترین روش دسترسی به درآمدهای نام تجاری بیابید.

نتیجه

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