7 ترفند طراحی سایت که تمام توسعه دهنده های وب باید بلد باشن!

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

اما شخصا برای من زیاد پیش اومده که توی موقعیت هایی قرار گرفتم که احتیاج بوده بخشی از شکل ظاهری و UI یک سایت رو طراحی کنم یا تغییر بدم و احتمالا این موقعیت های ناخوشایند (دونقطه دی!) برای شما هم پیش اومده.

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

شرکتتون یه طراح تمام وقت نداره
شرکتتون اصلا طراح نداره! (عجیب ولی واقعی)
میخواین یه سری تغییرات و اصلاحات توی طرح ایجاد کنید که بهترش کنه (از لحاظ زمانی به صرفه نیست که به طراح بسپاریدش)
کار طراح رو قبول ندارید!
شما خودتون رو علاوه بر توسعه دهنده، طراح هم معرفی کردید (لطفا از این کارا نکنید :/)
و...

در هر صورت، وقتی که بهتون میگن: فلان قسمت از UI سایت رو درست کن، ممکنه با خودتون بگید: بیخیال! من که یه هنرمند نیستم!

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

1. از رنگ و وزن فونت ها برای نشون دادن سلسله مراتب متون استفاده کنید

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

به جای اینکار، بهتره از رنگ و font-weight استفاده کنیم. مثلا تیتر ها، بولدتر باشن و زیر تیترها، لایت تر و سبک تر!

استفاده از font weight در ترکیب با رنگ، نتیجه فوق العاده ای میده:

برای تیترها، از یه رنگ تیره (مشکی نه!) استفاده کنید
رنگ خاکستری رو برای متون فرعی (مثل پاراگراف ها) استفاده کنید
رنگ خاکستری روشن رو برای متونی با اهمیت کمتر به کار ببرید (مثل کپی رایت، توضیحات نویسنده و ...)

در طراحی UI، این دو نوع font weight کاربرد زیادی داره:

برای بیشتر متون در صفحه، از وزن 400 یا 500 استفاده میشه
برای بخش هایی که مهمن و روشون تاکید دارید، وزن 600 یا 700 به کار میره.

نکته مهم اینجاست که از font weight کمتر از 400 استفاده نکنید. نازک و سبک بودن فونت هایی با وزن کمتر از 400، باعث میشه که متون خیلی کوچیک باشن و خوندنشون سخت بشه و رابط کاربری سایتتون آسیب ببینه.

2. از متن خاکستری روی پس زمینه های رنگی استفاده نکنید!

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

دلیل این قضیه، اینه که وقتی متن با رنگ خاکستری روشن رو روی پس زمینه سفید استفاده میکنیم، در حقیقت contrast و تضاد بین رنگ متن و پس زمینه رو کم کردیم، و اینه که باعث میشه تاکید روی اون متن کمتر بشه.

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

برای استفاده از این ترفند طراحی سایت ، دوتا راه وجود داره:

opacity رنگ سفید متن رو کمتر کنید

وقتی که رنگ متن تون سفیده و میخواین کم اهمیت تر بودنش رو نشون بدید، میتونید opacity رنگ سفید رو کم کنید. به این ترتیب، یه مقدار از رنگ پس زمینه توی متن دیده میشه و شما رو به هدفتون میرسونه! (این راه خیلی راحته)

به صورت دستی، یه رنگ نزدیک به پس زمینه رو انتخاب کنید

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