ماها بعنوان توسعه دهنده وب (وب دولوپر) قاعدتا باید با کدها سروکله بزنیم، اونها رو بنویسیم و عیب یابی کنیم و طراحی کردن ویژگی های گرافیکی کار ما نیست. (قبلا توی یه مقاله دیگه نوشته بودم که چطور طراح وب بشیم)
اما شخصا برای من زیاد پیش اومده که توی موقعیت هایی قرار گرفتم که احتیاج بوده بخشی از شکل ظاهری و UI یک سایت رو طراحی کنم یا تغییر بدم و احتمالا این موقعیت های ناخوشایند (دونقطه دی!) برای شما هم پیش اومده.
منطق میگه که طراح UI، طرح رو ایجاد میکنه و شما اون رو پیاده سازی میکنید، اما واقعیت اینه که توی ایران، توی خیلی از موقعیت ها، این وظیفه روی دوش شما قرار میگیره، به دلایل زیادی مثل:
- شرکتتون یه طراح تمام وقت نداره
- شرکتتون اصلا طراح نداره! (عجیب ولی واقعی)
- میخواین یه سری تغییرات و اصلاحات توی طرح ایجاد کنید که بهترش کنه (از لحاظ زمانی به صرفه نیست که به طراح بسپاریدش)
- کار طراح رو قبول ندارید!
- شما خودتون رو علاوه بر توسعه دهنده، طراح هم معرفی کردید (لطفا از این کارا نکنید :/)
- و…
در هر صورت، وقتی که بهتون میگن: فلان قسمت از UI سایت رو درست کن، ممکنه با خودتون بگید: بیخیال! من که یه هنرمند نیستم!
اما خبر خوب اینه که با چند تا ترفند طراحی سایت ، میتونید از این موقعیت ها سربلند و موفق عبور کنید!
۱. از رنگ و وزن فونت ها برای نشون دادن سلسله مراتب متون استفاده کنید
یکی از اشتباهات رایج توی طراحی رابط کاربری، استفاده بیش از حد از سایز فونت ها توی نشون دادن سلسله مراتبه. مثلا میایم سایز تیتر ها رو بزرگ میکنیم و سایز زیر عنوان رو کوچیکتر درنظر میگیریم.
به جای اینکار، بهتره از رنگ و font-weight استفاده کنیم. مثلا تیتر ها، بولدتر باشن و زیر تیترها، لایت تر و سبک تر!
استفاده از font weight در ترکیب با رنگ، نتیجه فوق العاده ای میده:
- برای تیترها، از یه رنگ تیره (مشکی نه!) استفاده کنید
- رنگ خاکستری رو برای متون فرعی (مثل پاراگراف ها) استفاده کنید
- رنگ خاکستری روشن رو برای متونی با اهمیت کمتر به کار ببرید (مثل کپی رایت، توضیحات نویسنده و …)
در طراحی UI، این دو نوع font weight کاربرد زیادی داره:
- برای بیشتر متون در صفحه، از وزن ۴۰۰ یا ۵۰۰ استفاده میشه
- برای بخش هایی که مهمن و روشون تاکید دارید، وزن ۶۰۰ یا ۷۰۰ به کار میره.
نکته مهم اینجاست که از font weight کمتر از ۴۰۰ استفاده نکنید. نازک و سبک بودن فونت هایی با وزن کمتر از ۴۰۰، باعث میشه که متون خیلی کوچیک باشن و خوندنشون سخت بشه و رابط کاربری سایتتون آسیب ببینه.
۲. از متن خاکستری روی پس زمینه های رنگی استفاده نکنید!
استفاده از رنگ خاکستری روشن برای نشون دادن اهمیت کمتر یه متن، یه راه خیلی خوبه، البته فقط روی پس زمینه سفید! این ایده روی پس زمینه های رنگی، چندان قشنگ از آب درنمیاد.
دلیل این قضیه، اینه که وقتی متن با رنگ خاکستری روشن رو روی پس زمینه سفید استفاده میکنیم، در حقیقت contrast و تضاد بین رنگ متن و پس زمینه رو کم کردیم، و اینه که باعث میشه تاکید روی اون متن کمتر بشه.
با این توضیح، مشخص میشه که رنگ خاکستری روشن، نباید روی پس زمینه های رنگی برای نشون دادن اهمیت کمتر به کار بره. در عوض، باید رنگی رو انتخاب کنیم که به پس زمینه نزدیک باشه.
برای استفاده از این ترفند طراحی سایت ، دوتا راه وجود داره:
- opacity رنگ سفید متن رو کمتر کنید
وقتی که رنگ متن تون سفیده و میخواین کم اهمیت تر بودنش رو نشون بدید، میتونید opacity رنگ سفید رو کم کنید. به این ترتیب، یه مقدار از رنگ پس زمینه توی متن دیده میشه و شما رو به هدفتون میرسونه! (این راه خیلی راحته)
- به صورت دستی، یه رنگ نزدیک به پس زمینه رو انتخاب کنید
این روش وقتایی بدرد میخوره که پس زمینه، یه عکس یا طرح خاصه و کم کردن opacity رنگ سفید، باعث زشت شدن سایتتون میشه. توی این مواقع، با استفاده از فتوشاپ یا هر ابزار دیگه ای که باهاش راحتید، یه رنگ نزدیک به پس زمینه رو انتخاب و استفاده کنید.
۳. سایه ها رو تنظیم کنید
به جای اینکه یه سایه کلی به تمام قسمت های فیلد بدید، اون رو طبیعی تر کنید و برای نور جهت در نظر بگیرید. (به عکس توجه کنید)
اینطوری، طرحتون طبیعی تر به نظر میاد، چون توی دنیای واقعی هم همینطوره و نور معمولا از بالا به پایین به اشیا میتابه.
این موضوع رو برای سایه های داخلی هم در نظر بگیرید (مثل داخل جعبه ها و فرم ها)
۴. از خطوط و Border کمتر استفاده کنید
چهارمین ترفند طراحی سایت ، اینه که وقتی قراره دو بخش رو از هم جدا کنید، جلوی خودتون رو بگیرید و سریع سراغ Border نرید. Border با اینکه یه راه ابتدایی و ساده برای جدا کردن المان های مختلف توی صفحه ست، ولی تنها راه نیست و استفاده زیاد از اونها باعث میشه که صفحه وب بسیار شلوغ و درهم و برهم به نظر بیاد.
در عوض، میتونید از این ایده ها استفاده کنید:
- استفاده از سایه ها
- استفاده از دو پس زمینه متفاوت
- اضافه کردن فاصله بیشتر
۵. آیکن هایی که قراره کوچیک باشن رو زیاد از حد بزرگ نکنید!
اگه بخواین توی صفحه وبی که میسازید، چندتا آیکون استفاده کنید، احتمالا اولین انتخابتون، استفاده از مجموعه رایگانی مثل Font Awesome هست. آیکون مورد نظرتون رو انتخاب میکنید و سایزش رو افزایش میدید تا به اندازه دلخواهتون برسه.
میدونیم که این آیکون ها، از جنس تصاویر برداری (وکتور) هستن و هرچقدر هم که سایزشون رو افزایش بدیم، کیفیتشون کم نمیشه. اما در دیزی بازه، حیای گربه کجا رفته؟!
درسته که تصاویر وکتور کاهش کیفیت ندارن، ولی خیلی غیرحرفیه اگه ما یه آیکون که توی اندازه ۱۶ تا ۲۴ پیکسل هست رو ۳ یا ۴ برابر بزرگ کنیم و بعد اونو توی صفحه وب قرار بدیم. این آیکون ها جزئیات کمتری دارن و بزرگ کردنشون، طرح ما رو مبتدی و زشت نشون میده.
اما یه راه خوب برای استفاده از همون آیکون ها کوچیک وجود داره. به این شکل که اون آیکون رو توی یه شکل رنگی (مثلا دایره) قرار بدید:
این ترفند طراحی سایت کمک میکنه که شما سایز ایکون رو تغییر ندید و در عین حال، اونو بزرگتر نشون بدید!
۶. از خطوط رنگی برای جلوه دادن به طراحی تون استفاده کنید
اگه بخشی از صفحه وب بی روح و ساده به نظر میاد، میتونید با یه حقه خیلی کوچیک، اونو قشنگ تر کنید: بهش یه Border رنگی اضافه کنید!
مثلا توی یه آلارم:
یا برای نشون دادن یه گزینه فعال:
یا حتی برای کل صفحه:
این ترفند طراحی سایت هیچ استعداد یا مهارت طراحی احتیاج نداره، اما میتونه این حس رو القا کنه که وب پیج شما، خیلی حرفه ای طراحی شده (البته اگه به موقع و به جا ازش استفاده کنید)
۷. همه دکمه ها به رنگ پس زمینه احتیاج ندارن
وقتی که دکمه های زیادی توی صفحه وجود داره، ممکنه ما به عنوان یه طراح یا توسعه دهنده، توی تله بیفیتم، یعنی سعی کنیم برای هر دکمه ای که کاربر ممکنه روش کلیک کنه، یه رنگ تعیین کنیم.
حتی فریم ورکی مثل بوت استرپ Bootstrap هم یه سری رنگ پیش فرض هم برامون تهیه کرده که موقع تعیین رنگ، دچار مکث و تردید نشیم و همین قضیه، وسوسه استفاده از رنگ برای همه دکمه ها رو تقویت میکنه.
استفاده از رنگ ها برای انتقال معنا، توی طراحی وب خیلی مهمه، اما مساله مهم دیگه ای که معمولا بهش توجه نمیشه، سلسله مراتب اهمیت هست!
هر صفحه وبی، یه هرم اهمیت داره و هر دکمه ای که کاربر روش کلیک میکنه، توی این هرم یه جای خاص داره.
توی یه صفحه، معمولا یه دکمه خیلی مهم وجود داره که در نوک هرم قرار میگیره (مثلا دکمه پرداخت) یه سری از دکمه های دیگه هستن که در رتبه دوم اهمیت قرار دارن و در نهایت، توی کف و قاعده هرم، کم اهمیت ترین دکمه ها قرار میگیرن که به ندرت هم روشون کلیک میشه.
موقع طراحی این دکمه ها، خیلی مهمه که جایگاه اونها توی هرم اهمیت رو در نظر بگیرید.
- مهمترین فعالیت ها و دکمه ها، باید یه رنگ کاملا واضح و مشخص داشته باشن و رنگشون با پس زمینه تضاد و contrast بالایی داشته باشه.
- دکمه هایی با درجه اهمیت پایین تر، باید مشخص باشن ولی نباید خیلی برجسته باشن. مثلا استفاده از Border نازک و یا رنگی با contrast پایین نسبت به پس زمینه میتونه خیلی مناسب باشه.
- کم اهمیت ترین دکمه ها، باید قابل تشخیص باشن، اما به هیچ وجه نباید جلب توجه کننده باشن. برای مثال، میتونید طراحی اونا رو مثل یه لینک عادی در نظر بگیرید.
در مجموع، با استفاده از این ترفندهای طراحی سایت ، درسته که تبدیل به یه طراح و متخصص UI نمیشید، اما میتونید وبسایت هاتون رو زیباتر کنید. علاوه بر این، درسته که کار توسعه دهنده وب و برنامه نویس، بیشتر به کدها مرتبطه، اما کمی دونستن از هر چیزی که به پروژه تون مرتبطه، مخصوصا طراحی، میتونه شما رو حرفه ای تر نشون بده و باعث پیشرفت پروژه بشه.
آخرین دیدگاهها