Loading...سال‌ها، سبک طراحی‌ها یکنواخت و حداقلی بودند؛ اما مجدداً gradient مورد استقبال قرارگرفته‌اند. هر طرف نگاه کنید، طراحان با fading رنگ‌ها زیبایی‌های بصری ایجاد می‌کنند و مخاطبان را به سمت خود جذب و طرحی ایجاد می‌کنند که ارزش نگاه کردن دارد.
اگر شما از طرفداران گرادینت یا تدارج رنگی یا لایه‌بندی کردن رنگ‌ها نیستید، بهتر است در این زمینه تجدیدنظر کنید. برای متقاعد کردن شما، ۱۰ دلیل برای استفاده gradient ذکر می‌کنیم تا علاقهٔ استفاده از آن برای طراحی در سایت‌ها در شما ایجاد شود.
۱. پس‌زمینه‌ها باعث جذابیت می‌شوند
گرادینت باعث ایجاد زیبایی‌های بصری و جلب‌توجه کاربر می‌شوند. چشم بر روی یک ناحیه از رنگ خیره می‌شود سپس تغییرات رنگ‌مایه‌ها (hue) و تاریکی و روشنی نواحی باعث می‌شود تا در کل صفحه نظری بیندازد.
تدارج رنگی می‌تواند ابزاری کاربردی و جذاب باشد و به انواع پروژه‌های طراحی، زیبایی و طراوت خاصی ببخشد. راه‌های گوناگونی برای استفاده از گرادینت وجود دارد؛ یکی از مشهورترین آن‌ها استفاده به‌عنوان پس‌زمینه است؛ که تصاویر، نوشته‌ها و سایر عناصر در لایهٔ بالاتر قرار می‌گیرند.
در مثال زیر از این ترفند به‌خوبی استفاده‌شده است. در این مثال با استفاده از گرادینت رنگ‌های ملایم، فرصت استراحت برای چشم فراهم‌شده است که سبب می‌شود جلب‌توجه بیشتری از بالای صفحه تا گوشهٔ پایینی صفحه –کلمهٔ Discover– می‌شود.
گرادینت رنگ ها با اسکرول کردن تا پایان صفحه نیز ادامه دارد. بنابراین کاربر همیشه مکانش در صفحه را می‌داند. ضمن اینکه ناحیه‌ای هاله مانند قسمت ناوبری را مشخص می‌کند.
۲.نوشته‌ها می‌توانند کانون توجه باشند
gradient می‌تواند به‌عنوان پس‌زمینه قرار بگیرد، به‌عنوان بالاترین لایه نیز می‌تواند قرار بگیرد. تکنیک گرادینت در موارد زیادی استفاده می‌شود که شاید به خاطر محبوبیت آن‌ها باشد.
برای توجه بیشتر و تأکید بر روی نوشته‌ها می‌توانید نحوهٔ استفاده و گرادینت رنگ را تغییر دهید. می‌توانید از یک پس‌زمینه ساده و بدون طرح استفاده کنید؛ سپس بر روی حروف و کلماتی که بر روی پس‌زمینه قرار دارند از گرادینت رنگی استفاده کنید.
مقاله مرتبط: نمونه هایی از استفاده تایپوگرافی در طراحی سایت
رنگ‌ها جادو می‌کنند. باید در انتخاب رنگ‌ها آگاهانه عمل کنید، طوری که همیشه تمایز و خوانایی مطالب و طرح وجود داشته باشد.
۳.پوشاندن تصاویر معمولی با استفاده از رنگ‌ها
برای افزودن جذابیت تصویری که زیبایی کافی ندارد، می‌توان از پوشش نازکی از رنگ بر روی آن استفاده کرد. استفاده از گرادینت پوششی به معنای تعمیر تصویر به خاطر وضوح (resolution) کم یا کیفیت پایین تصویر نیست. بلکه با استفاده از یک نمای ساده، تصویر خارق‌العاده‌ای خلق می‌کند.
مقاله مرتبط: جادوی رنگ‌ها
گرادینت پوششی نیز همانند صدا، لحن و شخصیت سایت در برندسازی بسیار کمک‌کننده است. مثلاً رنگ‌های براق مفهوم متفاوتی از رنگ‌های ملایم را انتقال می‌دهند.
این تکنیک ظاهراً ساده و بدون پیچیدگی خاصی است، اما ممکن است کمی باعث سردرگمی شود. برای استفاده از این روش کمی متفاوت عمل کنید و طرح شما تصویری باشد که گرادینت پوششی دارد. به‌عنوان نمونه در تصویر زیر به‌خوبی از تکنیک گرادینت پوششی استفاده کرده است. در این طرح، تصویر کم‌کم محو (fading) می‌شود به‌طوری‌که انتهای گرادینت رنگ یکدستی در پایین صفحه منتهی می‌شود.
۴.کمک به حرکت چشم کاربر
یک گرادینت عالی سعی می‌کند سبب چرخیدن چشم‌ها در سرتاسر طرح شود؛ به‌طوری‌که کاربران را ترغیب به تماشا کند. مشاهده و خواندن مطالب بسیاری از کاربران، الگویی شبیه شکل F است. یعنی از سمت چپ بالای طرح شروع می‌کنند و به سمت پایین و دیگر قسمت‌های تصویر حرکت می‌کنند.
مقاله مرتبط: راهنمای سبک (style guide) برای طراحی سایت
از زمینه های تیره و روشن گرادینت استفاده کنید تا باعث آغاز حرکت چشم کاربر از نقطه شروع شوید. نقطهٔ شروع می‌تواند لوگو، پیامی خاص یا هر عامل دیگری باشد. چشم در ابتدا جلب نقاط روشن‌تر می‌شود سپس به نقاط تاریک‌تر می‌رود. گرادینت رنگ‌ها را طوری طراحی و اجرا کنید که چشم‌ها را مجبور به حرکت کنید.
۵.طراحی به یادماندنی
ترفند gradient هرروز محبوب‌تر می‌شود. اگر از ترکیب رنگ متفاوتی استفاده کنید، طرح شما علاوه بر محبوبیت، در ذهن‌ها نیز باقی خواهد ماند. استفاده از یک ترکیب رنگ جادویی باعث ماندگاری برند و پیام شما در ذهن مخاطب خواهد شد.
طراحی گرادینت را با این هدف انجام دهید که سبب ارتباط بصری کاربران شوید. یک گرادینت عالی در اغلب موارد فقط بر روی یک رنگ انجام می‌شود. اگر در حال کار بر روی تدارج رنگی هستید، برای رنگ‌بندی آن سخت نگیرید. فرض کنید می‌خواهید رنگی متناسب با برند خود انتخاب و یک ارتباط بصری خلق کنید. (یا از چند نوع گرادینت به‌عنوان رنگ‌بندی استفاده کنید.)
۶.استفاده از رنگ سازمانی
اگر برند شما دارای رنگ خاصی است، از همان رنگ‌ها برای لایه‌بندی استفاده کنید. برای برندها و سایت‌های جدید که قصد معرفی خود دارند نیز استفاده از این شیوه برای برندسازی و ارتباط با کاربران بسیار مؤثر است.
مقاله مرتبط: ۹ گرایش پرطرفدار طراحی گرافیک در سال ۲۰۱۷
به این فکر کنید که چگونه می‌توان یک سبک از گرادینت را در موارد مختلف به کار برد. مثلاً با استفاده از یک سبک گرادینت رنگ، وب‌سایت و شبکه‌های اجتماعی، تبلیغات چاپی و کمپین‌های تبلیغاتی را طراحی کنید. استفاده از یک دسته رنگ مشخص و یک نوع تدارج رنگی باعث می‌شود تا این سبک در ذهن کاربر نقش ببندد و برای او همیشه تداعی‌کنندهٔ شما و برند شما خواهد بود.
مثال زیر از Community Sector Banking دقیقاً همین کار را انجام داده است. رنگ‌های انتخاب‌شده جذاب هستند و لایه‌بندی تصویر و نوار ناوبری پایین، باعث می‌شود تا مجموعه‌ای از رنگ‌ها و ترکیبشان به برند مرتبط شوند.
۷.طراحی آسان گرادینت
اضافه کردن gradient به یک عکس یا ساخت آن از ابتدا ساده است. می‌توان ۲ یا ۳ انتخاب نمود، شکلی برای لایه‌بندی در ذهن در نظر گرفت و نقاطی برای شروع و پایان رنگ‌آمیزی و همچنین هم‌پوشانی کردن رنگ‌ها مشخص کرد.
تدارج رنگی به‌صورت شکلی جهت‌دار هستند، یعنی از چپ به راست یا از بالا به پایین لایه‌بندی می‌شوند. ممکن است به‌صورت قطری نیز ساخته شوند، یعنی تغییرات رنگ از یک نقطهٔ مرکزی آغاز می‌شود و دایره‌ای شکل گسترش می‌یابد.
شاید انتخاب رنگِ گرادینت سخت‌ترین مرحلهٔ کار باشد. انتخاب رنگ‌های مجاور در چرخهٔ رنگ‌ها متقارن‌ترین و طبیعی‌ترین گرادینت ها را تشکیل می‌دهند. در هر طرح می‌توان از یک یا چند نوع لایه‌بندی استفاده کرد. البته این همیشه چیزی نیست که شما مجبور به آن باشید. در چنین موردی، نیاز است طوری بارنگ‌ها بازی کنید تا رنگ‌مایهٔ نامناسبی در محدودهٔ رنگ‌های اولیه به وجود نیاید.
آیا قصد ساخت گرادینت دارید، می‌توانید از یکی از ابزارهای زیر استفاده کنید.
- WebGradients: مجموعه‌ای با بیش از ۱۸۰ تدارج رنگی آماده به‌صورت CSS، PNG، نرم‌افزار Sketch و فتوشاپ وجود دارند.
- Gradient Buttons: لایه‌بندی CSS مخصوص کلیدها باقابلیت تغییر حالت آن‌ها با حرکت ماوس بر روی کلیدها
- Gradient Wave Generator: ابزاری برای گرادینت موج‌دار باقابلیت انتخاب رنگ و نقاط شروع و پایان توسط شما
۸.محو کردن رنگ‌ها طبیعی به نظر می‌رسند
شاید در نگاه اول این حرف اشتباه باشد، اما رنگ‌ها و ترکیب‌هایی در لایه‌بندی وجود دارند که طبیعی به نظر می‌رسند. اگر کمی دقت کنید متوجه خواهید شد که در طبیعت همه‌چیز یکنواخت و یکدست سبز نیست.
معمولاً گرادینت طبیعی به نظر می‌رسند؛ مخصوصاً وقتی‌که رنگ‌ها را ترکیب می‌کنید، همان‌طور که در دنیای واقعی نیز رنگی کم‌کم محو می‌شود و به رنگی دیگر تبدیل می‌شود.
نمونهٔ خوبی از این توضیح در مثال بالا قابل‌مشاهده است؛ که آسمان از روز (نارنجی) به شب (آبی) تبدیل می‌شود.
۹.در هر شرایطی اثر هنری خلق کنید
زمانی که فرصت و حوصلهٔ کار دقیق ندارید، یک Gradient خوب می‌تواند جذابیت و نمایش بصری ایجاد کند. استفاده از رنگ روشن یا استفاده از رنگ‌های برند باعث گیرایی بهتر سایت می‌شود.
تغییر دادن رنگ ها به‌اندازهٔ کافی جذاب هستند تا بتوان از آن‌ها برای طراحی استفاده کرد. به این فکر کنید که چگونه می‌توان رنگ‌ها را انتخاب و استفاده کرد تا سبب جذب احساس کاربران شود و به او کمک کند تا با محتوای موجود احساس خوبی تجربه کند.
۱۰.استفاده از گرادینت پرطرفدار است
گرادینت یک ابزار بسیار کاربردی با استفادهٔ آسان است تا بتوان یک پدیدهٔ مرسوم به طرح اضافه کرد و هیچ‌گونه زیاده‌روی نیز مشاهده نشود. باوجود شیوه‌های مختلف برای استفاده از گرادینت، احتمال یافتن یک راه‌حل مناسب برای شما زیاد است.
در زمان‌های مختلف، میزان علاقه و گرایش به gradient متفاوت بوده است، اما در حال حاضر، به خاطر جاذبه‌های فراوانش به‌سرعت در حال فراگیر شدن است.
سلام و درود بر شما و تیم قدرتمند تون
مقاله آموزشی خیلی خوبی بود برایتان آرزوی موفقیت و پیروزی دارم.