Teori Warna dan Palet Warna
Pernahkah Anda melihat warna yang langsung mengingatkan Anda pada merek tertentu? Mungkin Anda kesulitan untuk merasa rileks di ruangan yang memiliki skema warna yang bentrok, atau mengembalikan pakaian yang Anda dapatkan sebagai hadiah karena warnanya kurang tepat.
Warna memiliki kekuatan tak terukur untuk menginformasikan suasana hati, emosi, dan pikiran kita. Penelitian yang dilakukan oleh Institute for Color Research mengungkapkan bahwa orang membuat penilaian bawah sadar tentang suatu produk dalam waktu 90 detik setelah melihatnya, dan antara 62% dan 90% dari penilaian tersebut didasarkan pada warna saja.
 |
| Teori Warna dan Palet Warna |
User Interface (UI) memiliki tugas yang menantang untuk memasukkan warna ke antarmuka mereka dengan cara yang secara tajam mengomunikasikan identitas visual merek. Meskipun tampaknya palet warna situs web adalah masalah selera pribadi klien, pada kenyataannya, desainer UI mengandalkan kerangka kerja yang disebut teori warna: seperangkat pedoman berlapis yang menginformasikan penggunaan warna dalam desain.
Apa itu teori warna?
Mari kita mulai dari dasar: apa sebenarnya teori warna itu?
Teori
warna adalah kerangka kerja yang menginformasikan penggunaan warna
dalam seni dan desain, memandu kurasi palet warna, dan memfasilitasi
komunikasi yang efektif dari pesan desain pada tingkat estetika dan
psikologis.
Teori warna modern sebagian besar didasarkan pada
roda warna Isaac Newton, yang ia ciptakan jauh-jauh hari pada tahun
1666. Roda warna dasar menampilkan tiga kategori warna; warna primer,
warna sekunder, dan warna tersier. Jika Anda ingat mempelajari hal ini
di kelas seni, bagus sekali—Anda telah memahami dasar-dasar teori warna!
 |
| Warna Isaac Newton |
Mari kita menyegarkan kembali apa yang termasuk dalam kategori warna ini:
- Warna primer adalah warna yang tidak dapat Anda buat dengan menggabungkan dua atau lebih warna lain. Warna primer adalah merah, biru, dan kuning.
- Warna sekunder adalah jingga, ungu, dan hijau—dengan kata lain, warna yang dapat dibuat dengan menggabungkan dua dari tiga warna primer.
- Warna tersier dibuat dengan mencampurkan
warna primer dengan warna sekunder. Warna tersier adalah magenta,
vermillion, violet, teal, amber, dan chartreuse.
 |
| Color Primary, Secondary and Tersier |
Pengantar roda warna
Anda mungkin berpikir, “ada lebih dari 12 warna di luar sana.” Anda benar—dan semuanya dapat ditemukan di versi roda warna yang lebih canggih.
 |
| 12 Warna Atau Lebih? |
Hue (Warna Dasar)
Hue mengacu pada pigmen murni dari suatu warna, tanpa warna atau bayangan. Dalam hal itu, hue dapat diartikan sebagai asal usul suatu warna. Salah satu dari enam warna primer dan sekunder adalah rona.
Shade (Bayangan)
Shade mengacu pada seberapa banyak warna hitam ditambahkan ke dalam Warna Dasar (Hue), Dengan demikian, shade menggelapkan warna.
Tint (Mencerahkan)
Kebalikan dari shade, tint mengacu pada seberapa banyak putih ditambahkan ke warna. Dengan demikian, tint mencerahkan warna.
Tone ()
Tone adalah hasil dari warna yang ditambahkan putih dan hitam. Dengan kata lain, tone mengacu pada hue apa pun yang telah dimodifikasi dengan penambahan abu-abu—selama abu-abu itu murni netral (hanya berisi putih dan hitam).
Temperatur warna
Bahkan jika Anda seorang pemula desain, Anda mungkin pernah mendengar istilah "hangat, sejuk, dan netral" yang dilontarkan dalam kaitannya dengan warna. Ini disebut sebagai suhu warna, dan ini merupakan pertimbangan penting dalam hal teori warna.
Warna-warna hangat mengandung nuansa kuning dan merah; warna dingin memiliki semburat biru, hijau, atau ungu; dan warna netral antara lain coklat, abu-abu, hitam, dan putih. Temperatur suatu warna berdampak signifikan pada respons emosional kita terhadapnya. Dalam psikologi warna, misalnya warna hangat menunjukkan kegairahan, optimisme, dan kreativitas, sedangkan warna dingin melambangkan kedamaian, ketenangan, dan keharmonisan. Tapi kita akan berbicara lebih banyak tentang psikologi warna nanti!
Pentingnya harmoni warna
Bisa dibilang aspek yang paling penting dari teori warna, harmoni warna mengacu pada penggunaan kombinasi warna yang menyenangkan secara visual untuk mata manusia. Palet warna dapat mempromosikan kontras atau harmoni, tetapi selama keduanya masuk akal bersama, mereka masih dapat menghasilkan efek yang memuaskan secara visual.
Dalam hal desain UI, harmoni warna adalah hal yang ingin dicapai oleh semua desainer. Berdasarkan kebutuhan psikologis akan keseimbangan, keharmonisan warna melibatkan pemirsa dan membangun rasa keteraturan. Kurangnya harmoni dalam palet warna dapat mengakibatkan antarmuka menjadi kurang merangsang (membosankan) atau terlalu merangsang (kacau dan berantakan).
Model warna aditif dan subtraktif
Sekarang setelah kita menguasai varian warna, kita dapat beralih ke penambahan dan pengurangan warna. Warna memiliki dua sifat yang berbeda: warna nyata yang dapat dilihat pada permukaan benda, dan warna yang dihasilkan oleh cahaya. Kedua jenis warna ini dikenal sebagai model warna aditif dan subtraktif. Mari kita lihat lebih dekat apa artinya.
Model warna aditif (RGB)
RGB adalah singkatan dari merah, hijau, dan biru, dan didasarkan pada model warna tambahan dari gelombang cahaya yang menentukan bahwa semakin banyak warna yang Anda tambahkan, semakin dekat warnanya menjadi putih. Model warna RGB membentuk dasar dari semua layar elektronik, dan sebagai hasilnya, model ini paling sering digunakan oleh desainer UI.
 |
| RGB |
Model warna subtraktif (CMYK)
Di sisi lain, CMYK dikenal sebagai model warna subtraktif, yang memperoleh warna dengan pengurangan cahaya. CMYK adalah singkatan dari cyan, magenta, kuning, dan hitam, dan sebagian besar digunakan dalam pencetakan fisik.
 |
| CMYK |
Pengantar color palette (palet warna)
Sejauh ini, kita telah menjelajahi berbagai bentuk warna, dan mengenal model warna yang akan Anda gunakan sebagai desainer UI. Sekarang, mari selami bagian yang menyenangkan: palet warna!
Palet warna adalah kombinasi warna yang digunakan oleh desainer UI saat mendesain antarmuka. Ketika digunakan dengan benar, palet warna membentuk fondasi visual merek Anda, membantu menjaga konsistensi, dan membuat antarmuka pengguna Anda secara estetis dan menyenangkan untuk digunakan.
Sementara palet warna sudah ada sejak ribuan tahun yang lalu, palet warna biasanya digunakan dalam desain digital, disajikan sebagai kombinasi kode HEX. Kode HEX mengkomunikasikan ke komputer warna apa yang ingin Anda tampilkan menggunakan nilai heksadesimal. Di tahun 90-an, sebagian besar palet warna digital hanya menyertakan delapan warna. Sekarang, desainer memiliki segudang corak dan rona dari roda warna untuk dipilih.
 |
| Contoh HEX Warna |
Selama beberapa bagian berikutnya, kita akan mempelajari cara memilih dan menginterpretasikan palet warna untuk memastikan Anda membuat antarmuka sebaik mungkin bagi pengguna Anda.
Apa saja jenis palet warna yang berbeda?
Warna dapat digabungkan untuk membentuk salah satu dari lima palet warna yang biasa digunakan oleh desainer UI. Mari kita lalui bersama.
Monochromatic
Pilihan populer di kalangan desainer, skema warna monokromatik dibentuk menggunakan berbagai corak dan corak dari satu warna tunggal.
Analogous
Skema warna analog terbentuk dari tiga warna yang terletak bersebelahan pada roda warna. Palet warna analog biasanya digunakan saat tidak diperlukan kontras—misalnya, pada latar belakang halaman web atau spanduk.
Complementary
Palet
warna pelengkap terdiri dari warna-warna yang ditempatkan di depan satu
sama lain pada roda warna. Meskipun namanya mungkin menyarankan
sebaliknya, palet warna komplementer sebenarnya kebalikan dari palet
warna analog dan monokromatik, karena bertujuan untuk menghasilkan
kontras. Misalnya, tombol merah dengan latar belakang biru akan menonjol
di antarmuka mana pun.
Split-complementary
Palet
warna komplementer terpisah berbeda dari palet warna komplementer hanya
karena menggunakan jumlah warna yang lebih banyak. Misalnya, jika Anda
memilih warna biru, Anda harus mengambil dua warna yang bersebelahan
dengan warna yang berlawanan, yang dalam hal ini adalah kuning dan
merah.
Triadic
Skema warna triadik didasarkan pada tiga warna terpisah yang berjarak sama pada roda warna. Kebanyakan desainer menggunakan skema warna triadik dengan memilih satu warna dominan, dan menggunakan dua warna lainnya sebagai aksen.
Tetradic
Umumnya
digunakan oleh perancang yang lebih berpengalaman, skema warna tetradik
menggunakan dua set pasangan komplementer—empat warna dari roda warna
secara total yang akan membentuk persegi panjang saat dihubungkan.
Meskipun sedikit lebih sulit untuk diseimbangkan, itu membuat efek akhir
yang menakjubkan secara visual!
Bagaimana memilih palet warna
Sekarang setelah kita menguasai dasar-dasar teori warna, mari kita lihat
bagaimana Anda dapat menggunakan pengetahuan yang baru ditemukan ini
untuk memilih palet warna yang menceritakan kisah merek Anda dan
beresonansi dengan audiens Anda.
Saat memilih palet warna untuk antarmuka pengguna Anda, berikut adalah beberapa hal yang perlu dipertimbangkan:
Teliti audiens Anda
Respons emosional terhadap warna dapat bergantung pada berbagai faktor
pribadi, termasuk jenis kelamin, pengalaman budaya, dan usia. Sebelum
Anda mulai memilih palet warna, pastikan untuk menentukan siapa audiens
Anda. Apa sifat umum mereka, dan apa harapan mereka? Merek apa yang
terkait dengan Anda yang populer di kalangan audiens target Anda—dan
bagaimana Anda bisa mengungguli desain mereka?
Melakukan
penelitian yang terstruktur dan menyeluruh pada audiens target Anda
tidak hanya akan membantu Anda menyempurnakan cerita yang ingin Anda
komunikasikan, tetapi juga akan membantu Anda mencegah kegagalan desain
yang berpotensi menimbulkan bencana.
Pertimbangkan psikologi warna
Dengan kejelasan pada audiens target Anda, saatnya untuk melihat psikologi di balik warna merek potensial Anda. Psikologi warna adalah cabang psikologi seputar pengaruh warna pada suasana hati dan perilaku manusia. Menurut psikologi warna, pikiran manusia secara tidak sadar bereaksi dan menafsirkan warna dengan cara yang memengaruhi tindakan kita.
Jika Anda ingin membuat palet warna yang menarik audiens target Anda dan menceritakan kisah merek Anda secara akurat, penting untuk memiliki pemahaman dasar tentang psikologi warna. Untuk mempercepat Anda, mari kita lihat beberapa asosiasi warna yang paling umum di bawah ini:
- Oranye energik dan hangat. Beberapa asosiasi umum dengan oranye termasuk kreativitas, antusiasme, keceriaan, dan keterjangkauan.
- Merah adalah warna darah, jadi sering diasosiasikan dengan energi, perang, bahaya, dan kekuatan, tetapi juga gairah, keinginan, dan cinta. Beberapa asosiasi umum dengan warna merah termasuk aksi, petualangan, agresi, dan kegembiraan.
- Kuning membangkitkan kepositifan, kemudaan, kegembiraan, kesenangan, sinar matahari, dan kehangatan.
- Merah muda membangkitkan perasaan tidak bersalah dan halus, syukur, romansa, kelembutan, dan penghargaan.
- Biru dianggap berwibawa, dapat diandalkan, dan dapat dipercaya. Asosiasi umum dengan warna biru termasuk ketenangan, ketenangan, kepercayaan diri, martabat, dan keamanan.
- Hijau adalah warna alam. Itu melambangkan pertumbuhan, kesegaran, ketenangan, uang, kesehatan, dan penyembuhan.
- Hitam
mewakili kekuatan, keanggunan, dan otoritas. Asosiasi umum dengan warna
hitam juga termasuk kelas, perbedaan, formalitas, misteri, kerahasiaan,
dan keseriusan.
Pilih warna Anda dengan bijak
Umumnya, palet warna terdiri dari enam warna. Warna ini harus mencakup
satu warna dominan, empat warna aksen, dan satu warna standar untuk teks
Anda (biasanya hitam atau abu-abu). Warna dominan Anda adalah apa yang
akan selalu diasosiasikan oleh pelanggan Anda dengan merek tersebut,
jadi berhati-hatilah saat memikirkan seperti apa seharusnya warna ini.
Luangkan waktu Anda untuk mendapatkan inspirasi, ingatlah asosiasi
warna, dan lakukan beberapa pengujian pengguna jika perlu.
Catatan:
Anda bebas menambahkan lebih banyak atau lebih sedikit warna tergantung
pada kepribadian merek Anda, dan estetika yang Anda tuju. Memilih warna
monokromatik, analog, atau komplementer akan membantu Anda mencapai
palet warna yang ramping. Ingat: harmoni warna adalah tujuannya di sini!
Jangan berhemat pada kontras
Kontras warna adalah inti dari antarmuka apa pun, karena membuat setiap
elemen UI terlihat dan berbeda. Antarmuka pengguna yang hanya berisi
corak dari kelompok warna yang sama tidak mungkin menarik perhatian
pengguna—dan, terlebih lagi, berisiko membuat pusing kepala untuk
bernavigasi. Di sisi lain, jika warna salinan dan latar belakang terlalu
kontras, teks bisa menjadi tidak terbaca.
Desainer mengontrol
tingkat kontras tergantung pada apa yang ingin dicapai antarmuka.
Desainer berpengalaman berusaha untuk menciptakan tingkat kontras yang
lembut dan menerapkan warna kontras tinggi hanya untuk elemen yang
seharusnya menonjol—seperti ajakan bertindak. Ini terkait dengan poin
saya berikutnya…
Tetap berpegang pada konvensi UI
Saat bekerja dengan warna, mudah terbawa oleh estetika daripada kepraktisan. Tentu saja, antarmuka Anda harus menyenangkan secara visual—tetapi juga harus dapat diakses, mudah dinavigasi, dan menyenangkan untuk digunakan. Tentu saja, sangat bagus untuk menjadi eksperimental—namun konvensi desain yang menantang dengan desain "edgy" dapat membingungkan pengguna Anda, dan membuat mereka bekerja lebih keras dari yang seharusnya.
Beberapa konvensi warna desain UI umum meliputi:
- Menggunakan warna gelap untuk teks untuk memastikan keterbacaan
- Menjaga warna terang untuk latar belakang
- Menggunakan warna kontras untuk aksen (seperti yang disebutkan di atas)
- Berpegang pada warna ajakan bertindak klasik—seperti merah untuk tanda peringatan
Berpegang teguh pada konvensi ini akan mengurangi beban kognitif bagi pengguna Anda, dan memungkinkan mereka menavigasi antarmuka secara intuitif.
Dapatkan umpan balik (feedback)
Ingin tahu apakah Anda menyukai palet warna pemenang? Lakukan beberapa
pengujian pengguna! Palet warna tidak boleh menjadi masalah preferensi
pribadi, tidak peduli seberapa besar Anda menyukai warna yang Anda
pilih. Seperti yang kita lihat saat membahas asosiasi warna, respons
emosional bahwa warna bisa terlarang tidak bisa dianggap enteng; itu
bisa membuat atau menghancurkan hubungan yang dimiliki merek dengan
basis pelanggannya.
Mendapatkan umpan balik pengguna sedini
mungkin akan memastikan Anda membuat antarmuka menggunakan warna yang
akan disukai pengguna Anda.
Alat online (tools) terbaik untuk memilih palet warna
Ketika datang ke tugas sebenarnya memilih palet warna untuk antarmuka
Anda, mudah untuk merasa seperti Anda tidak tahu harus mulai dari mana.
Untungnya, ada segudang alat bermanfaat dan generator palet warna online
yang saat ini tersedia untuk memberi Anda inspirasi dan membantu Anda
memilih palet warna untuk desain Anda.
Di bawah ini, kami telah mengumpulkan tiga alat terbaik untuk membuat palet warna online. Ambil pilihanmu!
Adobe Color
Siap sebagai sumber daya "roti dan mentega" untuk semua materi iklan digital, Adobe Color memiliki hampir semua palet warna di luar sana. Dibandingkan dengan generator skema warna lainnya, Adobe Color jauh lebih lengkap—jadi jangan jadikan pilihan Anda jika Anda menginginkan sesuatu yang cepat dan sederhana. Di antara fitur utama Adobe Colours adalah generator palet warna yang menarik warna dari gambar yang Anda unggah.
Coolors
Coolors adalah generator palet warna yang berguna dan ramah bagi pemula, cocok untuk memahami kode HEX. Anda dapat mengeklik melalui palet warna premade acak, bermain-main dengan corak dan rona, dan menyimpan warna favorit Anda untuk membuat palet khusus Anda sendiri. Tetapi bahkan lebih menyenangkan bermain-main dengan generator mereka. Setelah Anda menemukan warna yang Anda sukai, cukup salin-tempel ke aplikasi eksternal mana pun dan mulailah mendesain!
Adobe Illustrator color guide
Adobe Illustrator color guide membedakan dirinya dengan fitur 'panduan warna' yang populer. Setelah Anda memilih warna, panduan warna akan menghasilkan palet lima warna untuk Anda. Ini juga akan memberi Anda berbagai corak dan corak untuk setiap warna dalam palet. Jika Anda mengganti warna utama, panduan warna akan memperbarui warna yang sesuai secara otomatis untuk memastikan warna aksen Anda saling melengkapi.
Kesimpulan
Jika Anda merasa ini adalah banyak informasi yang harus diambil, jangan khawatir! Anda tidak perlu menjadi ahli dalam teori warna untuk menjadi desainer UI yang sukses. Teori warna adalah ilmu yang sangat kompleks sehingga banyak orang mendedikasikan seluruh hidup mereka untuk belajar. Memahami dasar-dasarnya akan membantu Anda memahami psikologi di balik pemilihan palet warna yang sempurna untuk situs web atau aplikasi Anda.
Referensi :
Posting Komentar