صد و یک نکته در زمینه طراحی وب

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

این متن در واقع توسط نیکولاس تارت نوشته شده از طراحان شرکت awsomeweb که بواسطه کارشون با هزاران طراح و برنامه نویس در سراسر دنیا در ارتباط هستند. ایشون ادعا کرده اگر این نکات رو در طراحی تون رعایت کنید به احتمال زیاد یکی بهترین وب سایتهای حیطه کاری خودتون رو طراحی کرده اید.

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

نکات مربوط به برندینگ

  • برای وب سایت یک لوگوی حرفه ای تهیه کنید ، وبسایتهای کمی را میتوان یافت که طراحی لوگوی ساده و حرفه ای دارند. یک لوگوی زیبا همیشه در ذهن بیننده نقش خواهد بست.
  • برای وب سایت یک favicon طراحی کنید. « آیکون کوچکی که در تب مرورگر قرار میگیرد » و آنرا به صورت ۱۶ در ۱۶ پیکسل قرار دهید ، البته این سایز برای مانیتورهای رتینا یه مقدار تار نشان داده میشه میتونید از نرم افزار x-editor استفاده کنید و برای مانیتورهای رتینا favicon طراحی کنید.
  • همیشه برای وب سایت خود از عکس های باکیفیت به اصطلاح retina-Ready استفاده کنید سپس اندازه آنرا کوچک کنید و در وب سایت قرار دهید.
  • نهایتا برای طراحی وب سایتتون از دو یا سه رنگ غالب استفاده کنید یک رنگ برای بک گراند ،‌ یک رنگ برای نشان دادن عملیات call to action یا hover یا click و یک رنگ هم برای تاکید روی قسمت های مختلف مثل نشان دادن قیمت.
  • هنگام استفاده از رنگها همیشه از رنگ های مکمل و ترکیبی شروع کنید و با آنها رنگها را تنظیم کنید. یک ترکیب رنگ خوب هنری هست که خیلی از طراحان از آن بی خبرند.
  • هیچگاه از رنگ مشکی مطلق استفاده نکنید. در واقع در هنر طراحی وب اصلا رنگ مشکی مطلق وجود ندارد و رنگ مشکی در واقع تلفیقی از مشکی با رنگ دیگری مثل سفید ، زرد و یا آبی و.. است.
  • هیچگاه از رنگ خاکستری خنثی استفاده نکنید. بعنوان مثال رنگ « #CCCCCC » استفاده نکنید. برای مثال اگر میخاهید طراحیتون خاص شود کمی تن زرد به آن اضافه کنید ، اگر قصد دارید طراحیتون زنده تر باشد به آن قرمز اضافه کنید و اگر دوست دارید طراحیتون آرامش بخش باشد به آن آبی اضافه کنید.

نکات مربوط به تایپوگرافی

  • از فونت های پریمیوم استفاده کنید (این مورد در وب فارسی یک مقدار غیرممکن است چون فونت پریمیوم زیادی در وب فارسی موجود نیست در حال حاضر پیشنهاد میکنم از فونت ایران سنس که برای طراحی وب بسیار خوب است تهیه و استفاده کنید ) اما اگر قصد طراحی قالب لاتین دارید میتونید از وب سایت تایپ کیت  فونت فیس دلخواه خود را خریداری کنید و در طراحی وب ازش استفاده کنید. استفاده از یک فونت فیس خوب یک راه حل ساده برای بالا بردن زیبایی وب سایت است.
  • نهایتا از دو یا سه فونت در طراحی وب سایت استفاده کنید استفاده بیش از حد از فونتهای مختلف باعث کند شدن لود صفحه میشود. یک فونت برای نوشتار ، یک فونت برای تیتر صفحات و نهایتا یک فونت هم برای استفاده خاص میتواند مناسب باشد.
  • سعی کنید اندازه فونت شما خوانا باشد استفاده از اندازه فونت ریز خوانایی متن را کم میکند. سعی کنید از ۱۶ پیکسل برای نمایش فونت در کامپیوتر و ۱۲ پیکسل برای نمایش در موبایل استفاده کنید.
  • سعی کنید مقیاس های چاپی را در طراحی وب خود بکار ببرید. فاصله بین خطوط ، فاصله بین کلمات ، هدینگ ها و …
  • برای عناصر تایپوگرافی طراحی های خاص انجام دهید. برای مثال برای نمایش blockquotes (نقل قول) یا لیست ها ، کپشن ها و … طراحی خاص انجام دهید.
  • از پکیج های فونت آیکون مانند fontawsome استفاده کنید و در طراحی وب سایتتون از آن استفاده کنید ،‌ البته میتوانید مجموعه از آیکون های svg را در کار تون به کار ببرید. استفاده از فونت آیکون ها سرعت لود صفحه را بالا میبرد. تغییر اندازه آن براحتی امکان پذیر است و دست شما را برای تغییر رنگ باز میگذارد.

نکات مربوط به چیدمان صفحه

  • از قانون سه بخشی برای طراحی خود استفاده کنید. قالب خود را به سه قسمت عمودی و سه قسمت افقی جدا کنید و سپس تمرکز طراحی با توجه به این بخش ها قرار دهید.
  • از گرید های عمودی برای طراحی وب خود استفاده کنید  و قالب خود را به ۸ یا ۱۲ یا ۱۶ گرید مجزا کنید و بر اساس آن طراحی وب خود را انجام دهید.
  • همیشه به ریتم عمودی المانهای موجود در صفحه و گرید صفحه دقت کنید. فاصله بین پاراگراف های ، لینک ها ، عکسها و … باید داری یک ریتم با گرید اصلی باشد.
  • استفاده از فضای سفید: استفاده از فضای سفید باعث زیبایی و چشم نوازی هرچه بیشتر طرح شما میشود سعی کنید در وب سایت خود از آن استفاده کنید.
  • المانهای گرافیکی خود را متناسب طراحی کنید برای مثال بین دکمه ها ، لینک ها و textbox ها از لحاظ رنگ ، و اندازه و … باید تناسب وجود داشته باشد.

ادامه دارد….

نویسندهحامد میاحیان

من حامد میاحیان هستم :) در حال حاضر طراح و توسعه دهنده رابط کاربری در دیجیکالا. در این وبلاگ آموزشهای ویدئویی در همین رابطه ( طراحی وب ) قرار میدم.

2 دیدگاه مرتبط با “صد و یک نکته در زمینه طراحی وب

  1. مطلب مفیدی بود ممنون بابت به اشتراک گذاشتن این پست خوب

  2. سلام حامد جان من از سال ۸۹ تو رو دنبال میکنم. جات خالی بود ولی مرتب به اینجا سر میزدم شاید دوباره کارت رو شروع کنی. وردپرس رو با آموزشهای تو در سال ۹۰ شروع کردم و با سایتت از طریق لینکهای آموزشی که در همون سال در سایت wordpress.ir گذاشته بودی(در لینک نظرات) آشنا شدم چون دوست داشتم تجارت الکترونیک رو یاد بگیرم و هنوزم دنبال میکنم و قطعا نحوه طراحی وب در پیشرفت کار تجارت الکترونیک تاثیر مستقیم داره. بعد از کم کار شدنت(احتمالا رفتی خدمت، اینو بعدا از یکی از نزدیکترین همکارات شنیدم ولی نپرس کی، حتی میدونم ماهشهر هم مشغول هستی و منزل رو تازگیها بردید کرج و دوست داری در شعبه تهران شرکتتون فعال باشی، بگذریم..) با سایت سون لرن کار رو دنبال کردم که وااااقعا در این زمینه ترکونده ولی آموزشهای خوبت و نحوه صحیح تدریست در اون سالها خیلی علاقه مند و مشتاق به ادامه کارم کرد(چون خودم هم معلم بودم و آشنایی با نحوه صحیح تدریس دارم). خوبه که هستی و امیدوارم حضورت پررنگتر از قبل بشه. موفق باشی

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *