Warna tidak menambah kualitas desain agar terlihat lebih nyaman, namun itu memperkuatnya — Pierre Bonnard

Dalam pembuatan UI, warna adalah salah satu tahap dimana desainer selalu memakan berjam-jam dalam memilih palet warna yang cocok. Disini kita akan membahas beberapa cara untuk membantu desainer  dapat memilih warna yang kuat untuk UI dan mempercepat proses agar lebih produktif.

Gunakan aturan 60 – 30 – 10

Teknik ini berasal dari interior desain, seringkali diterapkan dalam mendekorasi isi rumah, teknik ini sangatlah sederhana dalam menempatkan skema warna. Ide ini dimaksudkan untuk memberi keseimbangan dan menciptakan rasa nyaman ketika mata bergerak melihat dari satu titik fokus ke titik berikutnya. Cara ini sangat mudah dengan mengkombinasikan dalam proporsi 60% – 30% – 10%.

Wall paints, furnitures, accesories.

60% adalah warna dominan, 30% adalah warna sekunder dan 10% untuk warna aksen.

Skema proporsi warna seperti itu dianggap menyenangkan bagi mata manusia karena dapat mempersepsikan elemen visual secara bertahap. Dengan mengetahui proporsi warna yang tepat dapat membantu desainer dalam menggabungkan warna tanpa terlihat berantakan dalam penggabungan warnanya.

Pertahankan Kontras

Dalam mengkombinasikan warna kontras warna adalah bagian yang sangat penting dari komposisi visual. Ini membawa setiap komponen UI dapat terlihat, desainer menggunakan tingkat kontras tergantung tujuan yang ingin dicapai. Semisal, jika anda ingin memberikan perhatian khusus pada elemen UI tertentu, sebaiknya terapkan dua warna yang kontras seperti biru dan merah, kontras tinggi seperti ini sering digunakan untuk mendesain tombol CTA.

Contoh warna kontras pada aplikasi Absensee

Namun, berbicara tentang komponen-komponen UI secara keseluruhan, terlalu banyak warna kontras mungkin tidak terlalu berfungsi dengan baik. Jika konten dan latarbelakang terlalu kontras satu sama lain, maka akan sulit untuk membaca atau memindai teks. Karena itu desainer disarankan untuk membuat tingkat kontras dan menerapkan warna kontras hanya untuk elemen yang ingin disorot.

Memaknai Warna

Warna dapat menciptakan emosi, arti warna dapat bervariasi tergantung pada budaya dan keadaan. Setiap warna pula memiliki pengaruh tersendiri pada setiap fungsinya dan reaksi pengguna. Dapat membantu desainer untuk mentransfer pesan yang tepat dan membuat pengguna untuk melakukan tindakan yang diharapkan . Berikut daftar pendek arti dari warna.

Merah. Ini melambangkan perasaan baik dan buruk termasuk cinta, keyakinan, gairah, dan kemarahan.

Orange. Warna yang energik dan hangat membawa perasaan senang.

Kuning. Ini adalah warna kebahagiaan, sinar matahari, kegembiraan, dan kehangatan.

Hijau. Warna alam yang membawa perasaan tenang dan memperbarui.

Biru. Ini sering mewakili beberapa gambar perusahaan. Bisa dikaitkan dengan jarak dan kesedihan.

Ungu. Lama dikaitkan dengan royalti dan kekayaan. Itu juga warna misteri dan sihir.

Hitam. Itu berhubungan dengan tragedi dan kematian dan menandakan sebuah misteri. Pada saat yang sama, itu bisa menjadi tradisional dan modern.

Putih. Warna berarti kemurnian dan kepolosan, serta keutuhan dan kejelasan.

Jauhi Warna Abu – Abu Murni dan Hitam Pekat

Salah satu trik warna paling penting yang pernah saya pelajari adalah menghindari warna abu-abu tanpa saturasi dan warna hitam pekat.

Contoh penggunaan warna tanpa saturasi

Ingat untuk selalu menambahkan sedikit saturasi ke warna Anda. Secara sadar akan terlihat lebih alami dan akrab bagi pengguna.

Inspirasi

Ketika berbicara tentang referansi UI maka ada beberapa tempat seperti pinterest, behance, ui8, dll. Namun dribble adalah tempat terbaik, karena di sana ada alat untuk mencari warna sehingga ketika anda ingin melakukan penelitian visual tentang bagaimana warna tertentu digunakan oleh desainer lain, bisa dibuka di sini dribble.com/colors

Alat

Untuk mempermudah, saya mengumpulkan beberapa alat untuk memilih palet warna. Ini akan menghemat banyak waktu.

Ini adalah website favorit saya untuk mecari warna. Anda cukup mengunci warna yang dipilih dan tekan spasi pada keyboard untuk menghasilkan palet-palet. Coolors juga memberi anda kemampuan untuk mencari warna dari gambar yang anda unggah. Bisa dibuka di sini coolors.co

Coolors.co

Kuler

Website Adobe kuler ini telah bersama kami untuk waktu yang lama. Ini tersedia di browser, dan di versi desktop. Jika Anda menggunakan versi desktop, Anda dapat mengekspor skema warna ke Photoshop. Bisa dibuka di sini color.adobe.com

Keberhasilan produk digital sangat tergantung pada warna yang dipilih untuk UI-nya. Warna yang tepat membantu pengguna merasa nyaman dengan suatu produk. Konsultasikan dengan tim konsultan kami di Konsultasi Sekarang