search
حلقه سفید

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

اشتراک گذاری در :
انتشار : 1401/05/11
چگونه یک راهنمای سبک طراحی وب سایت ایجاد کنیم

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

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

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

Luke Clum سطح استفاده از راهنماهای سبک طراحی وب سایت را به عنوان اولین قدم شما در طراحی وب سایت در سال گذشته لمس کرده است و من می خواهم نگاهی عمیق تر به نحوه ایجاد یک راهنمای سبک طراحی وب سایت قابل استفاده برای پروژه های خود داشته باشم.

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

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

چرا مهم است؟

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

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

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

1. برند طراحی وب سایت را مطالعه کنید

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

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

اگر می توانید کدنویسی کنید، بهتر است یک سند html با دارایی های از پیش کدگذاری شده ایجاد کنید تا به راحتی بتوان از آنها استفاده مجدد کرد.

2. تایپوگرافی طراحی وب سایت را تعریف کنید

به گفته الیور رایششتاین، تایپوگرافی 95 درصد طراحی وب سایت است.

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

سلسله مراتب را تنظیم کنید و آن را شناسایی کنید. انواع تیتر وجود دارد: h1، h2، h3، h4، h5 و h6. سپس تغییرات متنی، پررنگ و مورب را کپی کنید. در مورد کپی سفارشی فکر کنید که برای پیوندهای کوچکتر، متن مقدمه و غیره استفاده می شود. خانواده فونت، وزن و رنگ را ارائه دهید.

3. پالت رنگ طراحی وب سایت

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

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

4. صدا

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

5. شمایل نگاری طراحی وب سایت

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

Iconfinder ابزاری عالی برای یافتن آیکون طراحی وب سایت های عالی برای پروژه های شما است.

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

6. تصویرسازی

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

برخی از طراحی وب سایت های عالی برای تصاویر رایگان: 16 مکان برای یافتن بهترین عکس های استوک رایگان.

7. فرم های طراحی وب سایت

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

مطمئن شوید که یک سلسله مراتب ایجاد کرده اید و بازخوردهای احتمالی از فرم ها را شامل می شود - پیام های فعال، شناور، افزودن خطا، هشدار و پیام های موفقیت شامل مواردی مانند ضعیف بودن رمز عبور، معتبر نبودن ایمیل یا پیام های موفقیت ساده مانند. "ایمیل ارسال شد."

8. دکمه های طراحی وب سایت

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

9. فاصله گذاری طراحی وب سایت

چگونه فاصله گذاری می تواند در راهنمای سبک طراحی وب سایت باشد؟ ذکر فاصله بسیار مهم است. می تواند به شکل شبکه ای باشد که برای طرح بندی استفاده می شود. می تواند فاصله ای بین سرفصل ها، دکمه ها، تصاویر، فرم ها و سایر عناصر طراحی وب سایت تعریف شود.

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

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

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

مثال ها

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

Spotify - دستورالعمل های برند شریک (PDF)

برندسازی و لوگو طراحی وب سایت Dropbox

راهنمای سبک طراحی وب سایت Kickstarter

راهنمای طراحی وب سایت سیاره تنهایی

دستورالعمل‌ها را بیابید – سریع ‌ترین راه برای برندسازی دارایی‌ ها

نتیجه

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