آبان ۸, ۱۳۹۹

۸ دلیل برای استفاده از گرادیان در طراحی سایت

به کار گیری گرادیان رنگ در طراحی سایت

از ۳ سال پیش طراحی فلت (Flat Design)، متریال دیزاین گوگل و به کار گیری فضای خالی به رایج ترین سبکای طراحی سایت تبدیل شدن. ولی در طراحی خیلی از سایتای جدید به کار گیری سایه و گرادیان رنگ رو می بینیم که واسه خلق جلوه های چشمی چشم نواز و هم اینکه جلب توجه کاربران استفاده کرده شدن. ً این فوت وفن که گرادیان (Gradient) نام داشته و مدتا از مد افتاده بود دوباره توجه طراحان رو به خود جلب کرده.

اگه از طرفداران به کار گیری گرادیان نیستین بهتره این مقاله رو بخونین. در ادامه ۸ دلیل راضی کننده واسه به کار گیری گرادیان در طراحی سایت آورده می شن که می تونین از اونا واسه طراحی سایت خود در سال جاری استفاده کنین.

۱٫ چشم نواز شدن بک گراند صفحه

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

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

طراحی بک گراند سایت با به کار گیری گرادیان

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

۲٫ گرادیان شانس خونده شدن متن رو افزایش می ده

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

واسه این کار کنتراست رنگا رو زیاد کنین تا متنا خوانا شن. در سایت زیر از این فوت وفن استفاده شده:

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

۳٫ عکسای معمولی رو جذاب می کنه

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

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

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

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

۴٫ گرادیان راه حرکت چشم کاربر رو مشخص میکنه

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

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

یک مطلب دیگر:   بررسی سئو سایت سلام زبان

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

نمایش مراحل کار با به کار گیری گرادیان رنگ در طراحی سایت

۵٫ بر برندینگ شما تاکید بیشتری می شه

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

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

به کار گیری گرادیان رنگ واسه بهبود برندینگ در سایت

۶٫ به کار گیری گرادیان در طراحی سایت راحته

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

دست شما در انتخاب نوع گرادیان بازه؛ مثلاً می تونین به صورت جهت دار (Directional) یا دایره ای (Radial) اونا رو بسازین. هم اینکه می تونین با ترکیب کردن این دو نوع گرادیان طرحایی قشنگتر و خلاقانه بسازین.

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

وسایل رایگان ایجاد Gradient

اگه به هر دلیلی نمی خواین از فتوشاپ استفاده کنین می تونین از سایتای زیر که به طور رایگان گرادیان تولید می کنن استفاده کنین:

WebGradients 

کتابخونه ای از ۱۵۰ گرادیان رنگی قشنگتر و موثر در فرمتای CSS و عکس

قالبای آماده گرادیان رنگی

Gradient Buttons

ابزاری واسه ساختن گرادیان رنگی روی دکمه های سایت و انیمیشن قشنگتر واسه حالت hover

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

Gradient Wave Generator

ابزاری واسه تولید گرادیان موجی در رنگای جور واجور

۷٫ گرادیان رنگی الهام گرفته شده از طبیعته

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

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

گرادیان رنگ از طبیعت الهام گرفته شده

۸٫ به کار گیری گرادیان در طراحی سایت ترن شده

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

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

به نظر شما به کار گیری گرادیان در طراحی سایت خوبه یا اینکه اینجور تکنیکی رو مناسب طراحی سایت نمی دونین؟ نظرات و سؤالات خود رو در بخش کامنتای این مقاله با ما در میان بذارین.

پاسخ دهید

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