گرادینت جان، دوستت داریم!!!

برای مدت زمان طولانی طراحان از استفاده کردن از گرادینت اجتناب می کردند. دلیل اینکار استفاده نا به جا و اشتباه از گرادینت و باورهای ایجاد شده از مبنی بر جذاب نبودن آن در دهه 90 میلادی بود.

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

در این نوشتار، من میخواهم نکاتی جهت بهتر استفاده کردن از گرادینت را برای شما به اشتراک بگذارم.

واقعا ما چرا دوست داریم که از گرادینت استفاده کنیم؟

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

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

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

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

طراحان با استفاده از گرادینت می توانند؛

عنواین رو برجسته کنند

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

بر یک عنصر خاص تاکید کنند

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

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

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

پنج نکته برای ایجاد یک گرادینت چشمگیر و جذاب

• انواع گرادینت را یاد بگیرید

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

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

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

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

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

• رنگها را به صورت اتفاقی انتخاب نکنید

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

همانطور که در مثال زیر مشاهده میکنید، گرادینت قرمز به سبز اصلا چشم انداز خوبی ندارد.

بهترین رنگها برای ساخت یک گرادینت جذاب، استفاده از رنگهای مشابه و هم خانواده است.( رنگهایی که در چرخه رنگی زیر، درکنار هم قرار دارن، بهترین انتخاب است)

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

• تغییر بین رنگها را به نرمی ایجاد کنید

تغییر از یک رنگ به رنگ دیگر باید به نرمی و آهستگی اعمال شود. توجه کاربر به جایی که تغییر رنگ اتفاق می افتد نباید جلب شود.

به مثال زیر توجه کنید. شما یک خط را مشاهده میکنید که دو رنگ را از هم جدا میکند. این خط یک تغییر رنگ ناگهانی ایجا میکند که باعث جلب توجه و تمرکز کاربر می شود.

تغییر رنگ را به آهستگی و نرمی ایجاد کنید. اینکار مانند این است که نقطه های توقف و نقاط تغییر رنگ بیشتری را ایجاد کرده اید.

• احساسات و حالتها را به کاربر منتقل کنید

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

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

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

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

• از ابزارهای مخصوص استفاده کنید

ساختن گرادینت در نرم افزار ایلاستریتور بسیار ساده است. اما ابزارهای دیگری هم برای خلق یک گرادینت وجود دارد. از سایتهای زیر برای ساختن گرادیت می توانید استفاده کنید.

color grab for dribbble

PALX

dribbble colors

coloors.co

web gradients

paletton

social colors

Experimental Gradient Editor

adobe color cc

brand colors

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