Untuk waktu yang lama, menggunakan gradien adalah yang terbesar tidak-tidak dalam desain. Desainer cenderung menghindari gradien karena mereka menciptakan kesan desain yang kuat sejak tahun 90-an.

Gradien dibuat di WordArt

Tapi itu tidak lagi terjadi. Jika Anda membuka Dribbble atau Behance sekarang, ada kemungkinan besar Anda akan melihat lusinan desain yang menggunakan gradien. Desainer gradien yang digunakan keras dan penuh warna.

Pada artikel ini, saya ingin berbagi beberapa tips tentang cara menggunakan gradien dalam desain.

Mengapa kita sebenarnya cenderung menggunakan gradien dalam desain?

Untuk menemukan jawaban atas pertanyaan ini, kita harus kembali ke 2014. Itu adalah tahun ketika desain datar menjadi populer – Google merilis Material Design dan Apple memperbarui macOS mereka dengan desain UI datar. Saat itu desain datar itu segar dan menarik, terutama dibandingkan dengan desain skeuomorfik.

Tetapi desain datar memiliki keterbatasannya sendiri, dan salah satu batasan yang signifikan adalah dalam konteks warna dan gaya yang dapat digunakan desainer. Sulit menyebutkan lebih dari 10–15 warna yang dapat Anda gunakan untuk desain datar.

Dengan menggunakan desainer gradien:

• Dapatkan lebih banyak kebebasan kreatif . Sementara warna datar menghambat potensi desain, gradien membuka pintu untuk kemungkinan tak terbatas. Dengan memadukan warna, desainer dapat membuat desain visual yang menarik dan mengesankan.
• Dapat memperkenalkan kedalaman dan dimensi pada desain. Gradien menyelesaikan masalah desain ultra datar (desain yang terlihat ‘terlalu datar ‘)

Gradien adalah alat yang sangat serbaguna

Menggunakan gradien, desainer dapat:

Buat pernyataan berani

Gradien membantu menciptakan sesuatu yang baru dan tidak terduga. Bahkan elemen kecil seperti logo dapat menarik jika Anda menerapkan gradien padanya.

Logo Instagram: gradient memberi ikon lebih dalam dan dimensi.

Berempati elemen tertentu

Pengalaman pengguna yang hebat secara intuitif mengarahkan pengguna melalui produk. Gradien yang dirancang dengan baik secara tidak sadar mengarahkan pengguna ke titik fokus.

Dengan membuat beberapa bagian halaman lebih intens, Anda menambah bobot visual padanya dan membuatnya lebih terlihat.

Lihatlah beranda Mixpanel. Ilustrasi memainkan peran penting dalam tata letak ini, dan latar belakang gradien secara visual memprioritaskannya.

Gradien sempurna ketika Anda perlu menarik perhatian orang ke area tertentu. Mixpanel menggunakan gradien untuk menyoroti ilustrasi

Enam Tips untuk membuat gradien yang mengesankan

1. Pelajari tipe dasar gradien

Ada beberapa jenis gradien. Semua melibatkan titik awal pusat di mana warna mulai dan semakin menyatu dengan warna lain. Untuk artikel ini, saya ingin membahas tiga jenis gradien yang umum:

Linier

Gradien linier menciptakan pita warna yang berkembang dalam garis lurus. Transisi gradien dengan lancar dari satu warna ke warna berikutnya.

Gradien linier. Untuk membuat gradien linier, Anda perlu menentukan dua warna (atau dua warna dari satu warna).

Radial

Gradien radial mirip dengan gradien linier, kecuali bahwa mereka memancar keluar dari titik pusat. Sebagai seorang desainer, Anda dapat menentukan di mana titik pusat seharusnya dan menentukan ukuran gradien.

Gradien radial

Logo Instagram yang Anda lihat di atas dibuat menggunakan gradien Radial.

Berbentuk kerucut

Gradien kerucut mirip dengan gradien radial – keduanya melingkar dan menggunakan pusat elemen sebagai titik sumber untuk penghentian warna. Namun, untuk gradien radial, warna berhenti muncul dari pusat lingkaran, sementara gradien kerucut menempatkan warna berhenti di sekitar lingkaran.

Membuat gradien kerucut di Adobe Illustrator. Gambar: stackexchange

2. Jangan memilih warna secara acak!

Tidak semua warna bekerja dengan baik satu sama lain. Misalnya, dengan memasangkan warna komplementer, Anda mungkin mendapatkan transisi warna yang tampak buruk.

Gradien merah ke hijau pada contoh berikut terlihat kotor:

Cobalah untuk menghindari penggunaan warna komplementer saat membuat gradien

Lebih baik menggunakan warna analog (warna yang bersebelahan di roda warna):

atau corak dengan warna yang sama (mis. corak biru)

Menggunakan nuansa biru untuk gradien

3. Buat transisi yang mulus

Transisi antar warna harus benar-benar mulus. Idealnya, pengguna tidak harus memperhatikan tempat di mana satu warna mengalir ke warna lain.

Lihatlah contoh berikut. Anda dapat melihat garis yang memisahkan dua warna. Baris ini menciptakan kesan transisi yang tiba-tiba.

Jangan: Buat transisi yang tiba-tiba

“Mata pengguna harus rileks saat memindai halaman.”

Untuk membuat transisi yang mulus, Anda harus menghabiskan lebih banyak waktu bermain dengan penghentian warna.

Lakukan: Buat transisi yang mulus

4. Sampaikan emosi atau suasana hati

Warna membangkitkan respons emosional. Kita dapat menggunakan properti warna ini untuk terhubung dengan audiens pada level yang lebih dalam.

“Pikirkan tentang apa yang Anda ingin pengguna Anda rasakan ketika mereka berinteraksi dengan produk Anda.”

Misalnya, jika Anda ingin menciptakan suasana yang sangat energik, Anda dapat menggunakan gradien merah ke oranye.

Warna-warna cerah dan berani membangkitkan perasaan positif

Tetapi jika Anda ingin menciptakan suasana santai, Anda mungkin ingin menggunakan gradien biru ke biru.

Nada dalam menghadirkan ketenangan

5. Jangan lupa tentang kontras warna

Tidak peduli seberapa cantik desain Anda, jangan lupa aksesibilitas. Selalu periksa rasio kontras warna.

Jangan: Kurang kontras warna menyebabkan keterbacaan yang buruk.

WCAG 2 level AA membutuhkan rasio kontras minimal 4,5: 1 untuk teks normal dan 3: 1 untuk teks besar, dan rasio kontras minimal 3: 1 untuk grafis dan komponen antarmuka pengguna

6. Gunakan alat khusus

Sangat mudah untuk membuat gradien menggunakan Adobe Illustrator . Tetapi ada juga banyak alat khusus untuk membuat gradien :

Warna | UXPRO
Kumpulan alat baru yang akan membantu Anda memilih warna yang tepat untuk proyek Anda berikutnya! uxpro.cc

sumber:blog.marvelapp.com