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


در این مرحله، راهنمای طراحی وب واقعا می تواند مفید باشد.

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

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

چرا بایستی یک راهنمای سبک ایجاد کنیم؟

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

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

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

با نگاهی به طراحی مواد، ما می توانیم زمینه های زیر را در راهنمای سبک مشاهده کنیم:

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

با نگاهی به طراحی مواد این راهنمای سبک ، میتوانید همچنین زمینه های زیر را در راهنمای این سبک مشاهده کنید: 

  •      سیستم شبکه ای
  •      تایپوگرافی
  •      عناصر فرم
  •      جهت یابی
  •      جداول
  •      لیست ها
  •      اسلایدها
  •      آمار / داده ها
  •      بازخورد
  •      گفتگوها
  •      فردریکون
  •      کلاس های کمک کننده

 گوگل فونت های خود را نسبتا آسان در دسترس همه قرار میدهد ،اگر در تلاش برای ترکیب دو فونت گوگل هستید، می توانید از منابع مانند Font Pair یا fonts.greatsimple.io استفاده کنید.

چه چیزی را در یک راهنمای سبک بایستی قرار داد؟

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

 تایپوگرافی

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

خانواده فونت ها

دو نوع خانواده فونت وجود دارد:

  •  مانند “Times New Roman” و “Courier”
  •   و مانند “serif” و “sans-serif”

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

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

اندازه فونت

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

وزن قلم

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

پالت رنگ

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

آیکن گرافی

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

طرح بندی

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

 انیمیشن ها

فراموش نکنید که انیمیشن ها را در راهنماهای سبک نقش بسیار مهمی دارند. برای ساخت انیمیشن ها تنها نیاز به یک پیاده سازی ساده دارید به این صورت که می توانید از یک کتابخانه انیمیشن CSS مانند Animate.css استفاده کنید و در راهنمای سبک خود مشخص کنید کدام کلاس ها باید مورد استفاده قرار گیرند و در کجا.
 
به طور کلی باید بدانید که قبل از هر طراحی برای وبسایتتان نیاز دارید باید به جنبه های بالا به صورت دقیق و عمده توجه کنید و پشت استفاده از هرکدام آن ها استرایژی داشته باشید.
امیدوارم مفید واقع شده باشه.
موفق باشید.
منبع
عفیفه خدنگی