Spektrum Kemungkinan: Panduan Warna UI Masuk

Diterbitkan: 2022-03-11

Tidak ada jalan lain: Warna adalah elemen kreatif paling berpengaruh dalam desain visual. Dari latar belakang pemandangan yang mempesona dari desain set hingga komposisi seni piksel yang rumit, pemahaman warna yang kuat adalah kunci utama untuk komunikasi yang menarik. Butuh bukti?

Ketika peserta dalam studi yang berfokus pada merek baru-baru ini ditantang untuk menggambar logo 10 perusahaan ikonik, hanya 16% yang mampu mengingat bentuk dan fitur desain yang akurat. Namun, ketika diminta untuk mengidentifikasi palet warna merek, jumlah balasan yang benar melonjak hingga 80%.

Warna juga memainkan peran berpengaruh dalam dunia desain antarmuka pengguna. Produk digital yang berinteraksi dengan kita setiap hari bergantung pada penggunaan warna yang strategis untuk menyampaikan informasi penting, jadi sangat penting bagi desainer UX dan UI untuk memahami cara menggunakan warna dengan bijak.

Dalam panduan ini, kami akan:

Demystify dasar-dasar teori warna,
Memberikan prinsip yang kokoh untuk bekerja dengan warna dalam antarmuka digital,
Bagikan sumber daya bermanfaat untuk membangun kesadaran warna, dan
Berdayakan desainer UI untuk membuat skema warna mereka sendiri yang luar biasa.

Tujuan dari panduan ini adalah kompetensi warna, diikuti dengan kepercayaan warna, semua demi eksekusi warna yang menakjubkan di antarmuka pengguna yang kita temui setiap hari.

Palet warna UI bisa menjadi pelangi warna.

Kursus Singkat: Teori Warna untuk Desainer UI

Teori warna adalah bidang studi yang luas dengan terminologi, metodologi, dan dasar ilmiahnya sendiri. Ini bisa rumit, tapi bukan itu yang kami inginkan. Yang kami inginkan adalah pemahaman tentang warna yang dapat diterapkan dengan presisi secepat kilat. Kami ingin menggunakan warna seperti kami menggunakan bentuk—dengan mudah, berani, dan efektif.

Untuk menggunakan warna dengan cara ini, desainer UI harus memiliki pemahaman yang kuat tentang konsep teori warna inti ini:

Warna itu relatif.
Saturasi yang berlebihan membunuh semangat warna.
Kontras simultan memiliki pro dan kontra.
Skema warna dasar adalah yang terbaik.
Hue selalu mempengaruhi nilai.

Mari kita menggali.

Warna Itu Relatif

Warna tidak pernah berdiri sendiri. Saat mata dan otak manusia bekerja sama untuk melihat warna, mereka selalu dipengaruhi oleh:

Cahaya bersinar pada warna
Warna lain yang mengelilingi warna

Lihat contoh ini dari alam:

Relativitas warna dalam desain UI dan alam — Mengamati bayangan dan sorotan di alam adalah cara mudah untuk melihat relativitas warna di tempat kerja.

J: Otak dan mata bekerja sama untuk membantu kita memahami bahwa bunga secara keseluruhan sebenarnya berwarna merah cerah.

B & C: Warna coklat tua pada bayangan bunga (B) membuat sorotan pada punggung kelopak (C) tampak jauh lebih terang daripada warna merah marun yang sebenarnya. Pada dasarnya, cahaya yang bersinar di punggung kelopak dan warna bayangan bekerja bersama-sama untuk menipu mata dan mengintensifkan sorotan.

Berikut contoh lain yang menunjukkan betapa menipunya warna:

Relativitas warna dan desain antarmuka pengguna — Kedua kotak interior memiliki rona, saturasi, dan kecerahan yang sama. Namun, kotak interior di sebelah kiri tampak lebih gelap daripada yang di sebelah kanan karena warna sekelilingnya lebih terang.

Dalam desain UI, relativitas warna tidak selalu begitu jelas, sehingga warna dalam skema harus diuji satu sama lain. Mengapa? Karena pemilihan warna yang diatur dengan indah dalam panduan gaya Anda mungkin menjadi masalah saat diterapkan pada sebuah antarmuka.

Kesalahan warna desain antarmuka aplikasi — Warna yang terlihat bagus sebagai contoh terisolasi tidak selalu bekerja sama dalam antarmuka pengguna. Menguji warna satu sama lain, terutama untuk kontras, adalah langkah sederhana namun penting dalam proses desain UI.

Takeaway besar? Jangan memanjakan konsep warna Anda. Jika contoh aksen kuning terlihat subur saat dikelilingi oleh spasi putih di Sketch tetapi berbenturan dengan skema warna dominan UI, temukan solusi lain.

Saturasi Overload Membunuh Vibrancy Warna

Saturasi warna merupakan bagian integral dari semangat warna. Namun, skema yang disusun di sekitar warna yang sangat jenuh menguasai mata, dan semangat berkurang. Dengan warna, lebih sedikit lebih banyak. Warna yang sangat jenuh menjadi cerah saat digunakan bersama dengan warna yang kurang jenuh.

Saturasi dan kecerahan palet warna yang indah — **Kiri: Warna-warna dalam pengelompokan ini berada pada saturasi dan kecerahan 100%, tetapi tidak ada satu warna pun yang lebih hidup daripada yang lain, dan skema keseluruhannya mencolok.** **Kanan: Oranye kiri atas dan ungu kanan atas tidak berubah tetapi keduanya tampak lebih hidup, dan skemanya lebih harmonis karena warna di sekitarnya kurang jenuh.**

Kontras Simultan Memiliki Pro dan Kontra

Kontras simultan terjadi ketika komplemen warna dengan nilai yang sama persis ditempatkan berdekatan satu sama lain. Efeknya begitu kuat sehingga menyebabkan titik di mana dua warna bertemu bergetar atau berdenyut.

Kombinasi warna UI kontras simultan — Perhatikan ketegangan visual di mana biru dan oranye bertemu. Ini adalah kontras simultan, efek warna dinamis yang dapat digunakan desainer UI untuk keuntungan besar.

Untuk desainer UI, kontras simultan dapat memiliki hasil positif dan negatif, jadi penting untuk memahami bagaimana mengontrol potensi fenomena visual ini.

Misalnya, dalam antarmuka yang dirancang di sekitar berbagai warna biru, menggunakan oranye pelengkap dengan nilai yang sama dengan warna jangkar biru akan menjadi cara yang bagus untuk menarik perhatian ke ikon pemberitahuan.

Namun, kombo oranye dan biru yang sama akan memicu migrain jika digunakan untuk teks dan latar belakang menu drop-down.

Kontras simultan dalam desain UI modern: palet warna UI buruk — Kontras simultan tidak sesuai untuk setiap keputusan desain UI, terutama jika melibatkan teks.

Skema Warna Dasar Adalah Yang Terbaik

Pelangi itu indah—di alam. Dalam desain UI, warna harus digunakan secara lebih selektif atau akan membebani pengalaman. Bahkan ketika merek memiliki palet berdampak tinggi dengan beragam pilihan, yang terbaik adalah menunjukkan pengekangan dan membangun antarmuka pengguna di sekitar skema warna sederhana.

Berikut adalah dua rencana yang sangat mudah untuk membangun skema warna UI dasar:

1. Skema Warna UI Analog

Skema yang menyenangkan mata ini terdiri dari warna-warna yang dikelompokkan secara dekat pada roda warna.
Skema warna analog mudah ditemukan dalam foto lingkungan alami, terutama kehidupan tanaman, dan cenderung menenangkan secara visual.
Variasi dalam skema analog berasal dari pergeseran saturasi dan kecerahan, bukan perubahan rona besar.
Saat menggunakan skema analog, coba tambahkan satu warna yang sangat jenuh dari langsung melintasi roda warna untuk membuat penekanan di dalam antarmuka.

Warna desain UI analog — Sangat mudah untuk menciptakan "suasana visual" dalam skema analog dengan memilih antara warna hangat dan dingin dan bereksperimen dengan saturasi.

2. Skema Warna UI Pelengkap

Skema warna komplementer didasarkan pada interaksi melengkapi warna dingin dan hangat yang ada di seberang satu sama lain pada roda warna.
Variasi warna dicapai dengan mengubah saturasi dan kecerahan antara ekstrem yang saling melengkapi.
Menggunakan terlalu banyak warna cerah dan sangat jenuh merusak dampak skema pelengkap.

Warna desain UI saling melengkapi — Merah dan hijau adalah warna pelengkap, dan pilihan varian yang kurang jenuh mengikat skema bersama.

Hue Selalu Mempengaruhi Nilai

Ini mungkin terdengar aneh, tetapi warna memiliki nilai abu-abu yang sesuai. Berikut buktinya:

Pada gambar di atas, kami memiliki rentang warna pada kecerahan dan saturasi 100%, tetapi lihat apa yang terjadi ketika warna-warna ini diubah menjadi skala abu-abu:

Warna dikonversi ke desain UI skala abu-abu — Meskipun warna pada baris atas berada pada kecerahan dan saturasi 100%, nilai skala abu-abu yang sesuai bervariasi secara dramatis.

Ledakan! Seluruh rentang nilai abu-abu terungkap. Mengapa ini penting bagi desainer UI? Satu kata: Kontras .

Alihkan pikiran Anda ke skala abu-abu sejenak. Jika Anda ingin membuat kontras, apakah Anda pernah menggunakan nilai abu-abu 40% di atas 50%? Tentu saja tidak, tetapi inilah yang dipertaruhkan ketika rona ditinggalkan dari persamaan kontras warna.

Ingat, rona selalu memengaruhi nilai.

Dicari desainer UI lepas penuh waktu yang berbasis di AS

4 Prinsip Warna Penting untuk Antarmuka Digital

Sekarang kita telah menyederhanakan teori warna dan mengaitkan konsep intinya dengan desain UI, saatnya untuk melihat lebih fokus pada peran warna dalam antarmuka digital. Inilah empat prinsip warna yang harus diperhatikan sejak awal setiap proyek desain UI.

Hubungan antara teks dan warna sangat penting.
Aksesibilitas warna tidak dapat diabaikan.
Kontras sangat penting, tetapi ini bukan obat untuk semua desain.
Warna bekerja paling baik bila diterapkan secara proporsional.

Hubungan Antara Teks dan Warna Sangat Penting

Warna mempengaruhi keterbacaan. Sebagian besar desainer UI memahami hal ini pada prinsipnya, itulah sebabnya kami tidak melihat banyak antarmuka dengan teks isi hijau di latar belakang merah. Sebaliknya, ketegangan antara teks dan warna muncul secara halus, merayap melalui komponen UI umum seperti formulir, tombol, header, dan ikon.

Pertahankan hubungan teks/warna yang sehat dengan mengikuti panduan sederhana ini:

Selalu hindari kontras rendah antara teks dan latar belakang.
Jangan gunakan warna pelengkap untuk teks dan latar belakang, terutama bila warna memiliki kecerahan dan saturasi yang sama (misalnya, teks kuning dengan latar belakang ungu).
Bahkan pada latar belakang putih, jangan atur teks isi dalam warna-warna cerah. Hitam dan abu-abu gelap adalah yang paling mudah dibaca.

UI yang indah dengan kontras warna yang buruk — Skema warna catatan status ini mungkin menarik secara visual, tetapi pengalaman pengguna terancam oleh kontras yang tidak memadai antara latar belakang dan teks.

Aksesibilitas Warna Tidak Dapat Diabaikan

Warna bersifat komunikatif, tetapi tidak bisa menjadi satu-satunya elemen desain yang digunakan untuk menyampaikan informasi dalam UI. Kenapa tidak? Karena beberapa pengguna web mempersepsikan warna secara berbeda (atau tidak sama sekali) dari mayoritas populasi.

Misalnya, seseorang yang mengalami buta warna mungkin tidak dapat mengetahui saat ikon produk dalam keadaan "ditekan" jika satu-satunya perbedaan pada ikon tersebut adalah perubahan warna.

Contoh desain aksesibilitas warna — Saat menyampaikan informasi kepada pengguna, desainer UI harus mengupayakan aksesibilitas web dengan memasangkan perubahan warna dengan isyarat visual tambahan seperti bentuk dan isian.

Selain itu, beberapa orang mengalami kesulitan melihat komponen UI penting yang kontras warnanya rendah dengan latar belakang antarmuka. Situs seperti Colorable dan Contrast Ratio memungkinkan desainer untuk dengan cepat menguji berbagai pasangan warna untuk aksesibilitas kontras.

Kontras Itu Penting, tapi Ini Bukan Penyembuhan Desain-semuanya

Ya, kontras warna dalam desain UI itu penting. Rencanakan, terapkan, manfaatkan. Tapi jangan berharap untuk mengayunkannya seperti tongkat ajaib dan memperbaiki desain yang buruk.

Bentuk, ruang, ukuran, dan elemen desain lainnya tidak boleh diabaikan. Kontras warna dapat membuat UI yang buruk terlihat menarik, tetapi itu tidak akan memperbaiki pengalaman pengguna yang buruk.

Warna Berfungsi Terbaik Saat Diterapkan Secara Proporsional

Bayangkan sebuah aplikasi berita di mana setiap contoh teks diatur dalam kasus judul atau situs web eCommerce yang dirancang pada petak gambar 9x9. Keduanya akan mengerikan!

Contoh hierarki desain yang buruk — Karena judul, tanggal, penulis, dan teks isi semuanya memiliki ukuran font yang sama, pengalaman membaca terhambat dan tidak ada satu informasi pun yang menonjol. Masalah serupa terjadi ketika desainer UI membebani antarmuka dengan warna.

Desainer UI yang cerdas menggunakan elemen desain seperti tipografi dan pengulangan secara proporsional untuk meningkatkan hierarki desain. Warna layak mendapatkan pertimbangan yang sama. Dalam desain UI, menggunakan terlalu banyak warna akan membingungkan cara persepsi informasi.

Sumber Daya Warna untuk Kemajuan Berkelanjutan

Inilah kebenaran yang tidak menyenangkan: Mendesain dengan warna adalah keterampilan, dan keterampilan harus dikembangkan. Sebagian besar desainer UI memiliki perasaan bawaan tentang warna apa yang terlihat bagus bersama-sama (alias rasa warna), tetapi ini tidak selalu diterjemahkan ke dalam aplikasi.

Untuk benar-benar menguasai warna dan melihat dampak penuhnya pada desain UI, desainer harus berlatih. Untungnya, ada banyak sumber daya untuk membantu pembelajaran warna dan pengembangan keterampilan yang berkelanjutan.

Ctrl + Cat

Jika Anda seorang desainer UI yang ingin mendapatkan kepercayaan warna langsung, mulailah dengan ctrlpaint.com, situs web yang didedikasikan untuk instruksi lukisan digital. Lukisan digital? Betulkah?

Sangat. Seniman konsep profesional Matt Kohr mengajarkan penggunaan warna digital melalui video tutorial singkat dan latihan langsung. Kurikulumnya sangat sederhana dan berpusat pada "lukisan apa yang Anda lihat," baik di dunia fisik maupun imajinasi.

Mulailah dengan perpustakaan video gratis (Bagian 11) sebelum beralih ke latihan yang lebih intensif di Color Starter Kit .

Tutorial teori warna digital — Lukisan konsep digital Matt Kohr menunjukkan penguasaan teori warna, dan video instruksionalnya menyenangkan dan mudah diikuti.

Josef Albers dan Interaksi Aplikasi Warna

Pemahaman kontemporer tentang relativitas warna banyak dieksplorasi dan dikembangkan oleh pendekatan praktik- sebelum -teori dari seniman/pendidik Josef Albers.

Albers mengusulkan bahwa satu warna dapat memiliki "banyak wajah" dan mendorong permainan dan eksperimen ekstensif di antara murid-muridnya dengan harapan bahwa "mata akan terbuka" untuk melihat warna sebagaimana warna itu benar-benar berperilaku di dunia nyata (berlawanan dengan warna simbolis yang kita bayangkan dalam pikiran kita).

Pada tahun 1963 Albers menulis Interaksi Warna , sebuah buku teks yang terus menjadi sangat berpengaruh dalam pendidikan seni dan desain dunia. Untuk merayakan 50 tahun penerbitan buku tersebut, Universitas Yale merilis aplikasi iPad interaktif yang berisi teks lengkap tetapi juga memungkinkan pengguna untuk bermain dan bereksperimen dengan pelat warna Albers.

Aplikasi skema warna desain UI — Salah satu cara terbaik untuk menjadi lebih baik dalam bekerja dengan warna adalah eksperimen. Aplikasi Interaksi Warna adalah cara yang mudah dan intuitif bagi desainer UI untuk membuat palet khusus dan melihat bagaimana warna berhubungan satu sama lain.

Untuk desainer UI, aplikasi Interaksi Warna memberikan kesempatan untuk mengalami latihan warna analog di lingkungan digital dan melihat langsung bagaimana relativitas warna memengaruhi antarmuka pengguna.

Andrew Loomis

Selama paruh pertama abad ke-20, Andrew Loomis adalah seorang ilustrator dan instruktur terkemuka di American Academy of Art di Chicago, tetapi warisan abadinya adalah penulis. Loomis menulis enam buku tentang seni dan desain komersial dan membahas berbagai topik mulai dari menggambar figur hingga penempatan produk.

Warna desain UI dari lukisan tradisional — Meskipun awalnya ditulis untuk pelukis dan ilustrator, buku *Creative Illustration* karya Andrew Loomis menawarkan wawasan warna praktis yang dapat diandalkan oleh desainer UI saat mendesain antarmuka.

Dalam bukunya Creative Illustrasi dan Eye of the Painter (keduanya tersedia di archive.org), Loomis menjatuhkan sejumlah baris abadi yang tetap relevan dengan bidang desain UI modern:

Kesalahan terbesar dalam warna, dan yang menyebabkan kurangnya kesatuan dan harmoni, adalah memiliki terlalu banyak warna pada palet.

Setiap dua warna akan menjadi harmonis ketika salah satu atau keduanya mengandung beberapa warna lainnya.

Warna cocok untuk bereksperimen lebih dari elemen keindahan lainnya.

Antarmuka Desainer Lain

Setelah tingkat dasar kompetensi warna tercapai, penciptaan skema warna berkembang menjadi pengejaran yang menarik. Setiap antarmuka yang ditemui menjadi kesempatan untuk belajar dan kritik, dan pengamatan berlimpah.

Ini adalah tahap pengembangan seorang desainer UI ketika mereferensikan karya desainer lain menjadi memberdayakan. Bagaimana? Karena referensi bergerak dari tujuan ke perjalanan, dari titik akhir ke inspirasi.

Contoh skema warna UI — Mencari inspirasi warna antarmuka? Coba situs web Webby Awards. Ini penuh dengan contoh luar biasa yang diatur ke dalam kategori khusus industri.

Desainer UI dari semua tingkat keahlian akan mendapat manfaat dari menyimpan catatan skema warna UI yang ditemukan secara berkelanjutan. Ambil tangkapan layar, simpan jurnal warna fisik, mulai papan suasana hati—apa pun yang diperlukan untuk mencetak momen iluminasi warna untuk implementasi di masa mendatang.

Warna Terlalu Penting untuk Diabaikan

Dalam hal desain antarmuka digital, warna bukanlah pertimbangan opsional. Bahkan di UI yang menggunakan warna minimal (atau yang seluruhnya hitam putih), desainer UI harus memahami mengapa warna digunakan atau tidak dan bagaimana hal ini memengaruhi pengalaman pengguna.

Juga penting bahwa desainer UI memiliki kemampuan untuk menghasilkan dan mengimplementasikan skema warna asli. Mereferensikan karya desainer dan produk digital lainnya adalah praktik yang bermanfaat, tetapi ini menjadi terbatas ketika itu adalah satu-satunya metode eksplorasi warna yang dilakukan selama proses desain. Ada nilai luar biasa untuk dapat menangkap pasangan warna yang terlihat di dunia nyata atau mata pikiran.

Jika Anda seorang desainer yang berjuang untuk menggunakan warna dengan terampil atau Anda pernah berpikir, "Saya tidak benar-benar memiliki bakat untuk warna," jangan berkecil hati. Mendesain dengan warna bukanlah semacam keajaiban kreatif atau pemberian khusus; itu adalah disiplin praktis yang didasarkan pada teknik sederhana yang dapat diulang dan ditingkatkan.

Ingat, warna adalah kunci utama untuk komunikasi desain yang jelas dan menarik. Baik diterapkan dengan hati-hati atau diabaikan secara sembrono, hal itu memengaruhi konversi, kesadaran merek, dan pengalaman pengguna. Untuk desainer UI, warna adalah alat yang ampuh yang tidak bisa diabaikan begitu saja.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

Peran Warna dalam UX
Membuat Panduan Gaya UI untuk UX yang Lebih Baik
UX dan Pentingnya Aksesibilitas Web
Seni vs. Desain – Debat Abadi
Mendesain untuk Lingkungan Interaktif dan Ruang Cerdas