Warna penting. Warna adalah salah satu blok bangunan terpenting dari antarmuka apa pun (bersama dengan tipografi dan ruang). Mereka memiliki efek luar biasa pada persepsi keseluruhan produk digital.
WARNA ADALAH BAGIAN PENTING DARI BAHASA DESAIN VISUAL YANG ANDA GUNAKAN UNTUK BERKOMUNIKASI DENGAN PEMAKAI
Sangat penting untuk menyusun warna. Jika Anda tidak menyusun warna, Anda dapat merasa kewalahan dengan berapa banyak warna yang Anda gunakan pada saat Anda mencapai akhir proyek desain.
Membangun sistem warna yang konsisten – mengurangi jumlah warna yang digunakan, dan menghilangkan duplikat yang tidak perlu sepertinya adalah hal yang tepat untuk dilakukan. Tetapi bagaimana cara mencapai tujuan ini?
Berikut adalah tujuh tips praktis untuk penataan warna dalam proyek desain baru:
1. Melakukan inventaris antarmuka
Menggunakan terlalu banyak warna di UI adalah salah satu masalah paling umum bagi banyak desainer UI. Dan akar penyebab masalah ini adalah cara warna diatur. Bagi banyak tim, organisasi warna kacau-balau. Dan untuk memperkenalkan pendekatan yang lebih baik untuk bekerja dengan warna, direkomendasikan untuk memulai dengan inventaris antarmuka. Inventaris antarmuka adalah prosedur mengategorikan komponen yang menyusun aplikasi atau situs web Anda. Inventaris antarmuka akan menunjukkan berapa banyak warna yang Anda gunakan dalam produk Anda.
Jika Anda bekerja di situs web, gunakan alat seperti Statistik CSS untuk melihat berapa banyak warna unik yang Anda miliki di lembar gaya Anda.
Jika Anda membuat inventaris di Sketch, gunakan plugin Sketch-Style-Inventory untuk menggabungkan semua warna. Anda akan dapat menggabungkan gaya serupa.
Untuk produk yang sudah ada, disarankan juga untuk memeriksa berapa kali setiap warna benar-benar digunakan dalam kode. Dengan melakukan itu, Anda akan melihat bahwa beberapa warna digunakan di banyak tempat berbeda, sementara yang lain hanya digunakan sekali. Wawasan yang Anda dapatkan akan membantu Anda mengatur palet Anda.
2. Biarkan warna merek menjadi dasar skema warna Anda
Jika Anda bekerja untuk merek mapan, kemungkinan besar merek tersebut memiliki palet warna yang mapan. Merupakan ide bagus untuk mengintegrasikan warna merek dalam UI produk Anda.
Cobalah untuk menggunakan warna merek utama untuk sebagian besar “chrome” pada aplikasi
Coba gunakan warna merek untuk elemen UI yang membuat struktur desain Anda – header, footer, menu, dll.
Jika warna merek Anda berfungsi baik untuk latar belakang terang maupun gelap, Anda dapat menggunakannya sebagai warna tata letak untuk desain Anda.
3. Tentukan warna dasar
Bangun kulit putih dan hitam Anda
Ketika datang untuk memilih putih dan hitam, selalu lebih baik untuk tidak memilih versi warna ekstrim. Putih tidak harus putih absolut (#FFFFFF). Mirip dengan itu, hitam tidak harus hitam mutlak.
Tergantung pada seberapa ketat Anda ingin dengan palet warna Anda, Anda mungkin ingin memasukkan serangkaian warna (warna dicampur dengan putih) dan nuansa (warna dicampur dengan hitam). Tetapi berhati-hatilah! Memiliki terlalu banyak warna dan nuansa dapat membuat prosedur pemilihan warna lebih sulit bagi para desainer.
Temukan warna netral kontras rendah
Warna netral kontras rendah buruk untuk elemen yang membutuhkan pembacaan tetapi sangat baik untuk elemen seperti bidang input. Hal utama yang perlu diingat ketika mendesain elemen-elemen tersebut adalah membuatnya dapat dibedakan dari UI lainnya. Bidang input tidak perlu terlalu menonjol sehingga warna netral kontras rendah dapat membantu Anda membuat wadah UI yang sempurna.
Batasi jumlah warna primer
Warna primer adalah warna yang paling sering ditampilkan di layar dan komponen aplikasi Anda. Skema warna tidak dapat memiliki banyak warna primer. Idealnya, Anda harus memiliki sejumlah kecil warna primer yang disetujui (1-3 primer yang mewakili merek Anda) dan warna aksen yang cukup.
4. Tentukan warna interaktif
Warna interaktif adalah warna yang kami gunakan untuk elemen interaktif – tombol, tautan, dan kontrol UI lainnya yang dapat diklik atau disentuh pengguna.
Batasi jumlah total warna interaktif
Jika memungkinkan, coba gunakan hanya satu warna sebagai warna interaktif utama Anda. Dengan melakukan itu, Anda akan membantu pengguna Anda menghafal warna ini.
Anda dapat membuat versi interaktif warna yang lebih terang dan gelap. Nuansa warna dapat membantu Anda menyampaikan status berbeda untuk elemen UI Anda – misalnya, keadaan ditekan / hover.
Berusaha keras untuk konsistensi
Mirip dengan tipografi dan spasi putih, warna dapat menjadi alat penolong yang bermanfaat bagi pengguna Anda. Pengguna akan tahu peran elemen UI hanya dengan melihatnya. Sebaiknya gunakan warna yang sama untuk tautan dan tombol. Dengan melakukan itu, Anda membantu pengguna Anda mengenali elemen-elemen interaktif.
5. Tentukan warna-warna denotif
Warna denotif adalah warna yang berarti sesuatu. Anda harus memiliki warna untuk negara seperti kesalahan, peringatan, dan kesuksesan.
Warna status kesalahan
Merah biasanya digunakan untuk menunjukkan status kesalahan. Jika salah satu warna merek Anda berwarna merah, lebih baik untuk menghindari penggunaan warna yang sama persis untuk pesan kesalahan. Mengapa? Karena dengan melakukan itu, Anda membuat pengguna mengaitkan warna merek Anda dengan masalah.
Warna keadaan sukses
Kami biasanya menggunakan warna hijau untuk menunjukkan status keberhasilan. Jika salah satu warna merek Anda berwarna hijau, tidak apa-apa menggunakannya untuk keadaan sukses. Pengguna akan mengaitkan warna merek Anda dengan hasil positif.
Batasi jumlah warna denotif
Mode gelap dengan cepat menjadi bagian penting dari UI modern. Desainer sering membuat dua versi UI — terang dan gelap.
Dan ketika Anda memilih warna untuk kesalahan dan untuk kesuksesan, pastikan bahwa warna yang Anda pilih berfungsi baik untuk latar belakang kontras rendah dan tinggi. Dengan melakukan itu, Anda akan terhindar dari situasi ketika Anda perlu memilih dua warna berbeda – satu untuk mode biasa dan satu lagi untuk mode gelap.
Warna status dinonaktifkan
Keadaan cacat secara tradisional berwarna abu-abu. Biasanya, desainer menggunakan warna opacity rendah untuk itu. Satu momen penting yang harus Anda ingat ketika memilih warna negara yang dinonaktifkan – pastikan warnanya memiliki cukup kontras, sehingga dapat dibaca oleh pengguna Anda.
WCAG MEMBUTUHKAN KONTRAS “SETIDAKNYA 4,5: 1” UNTUK PRESENTASI VISUAL TEKS DAN GAMBAR TEKS
6. Hapus konvensi penamaan
Jika Anda menyimpan warna dalam sistem desain, pastikan untuk memberi nama yang jelas untuk setiap warna yang Anda gunakan. Nama warna harus mudah dipahami dan diingat. Baik perancang maupun pengembang harus dapat dengan mudah merujuk ke warna tertentu yang ditentukan dalam sistem.
Cobalah untuk menghindari penggunaan gradasi kata sifat (lightBlue, darkBlue); gunakan nama fungsional sebagai gantinya – nama yang menggambarkan warna berdasarkan tempat di UI.
6. Aksesibilitas
Buat palet warna yang dapat diakses sehingga orang yang buta warna dapat menggunakan produk Anda.
AKSESIBILITAS ADALAH BAGIAN PENTING DARI DESAIN PRODUK
Memeriksa kontras warna
Ada berbagai jenis kontras warna yang dapat Anda gunakan untuk memastikan palet warna Anda berfungsi untuk semua orang yang akan menggunakan produk Anda.
7. Uji palet Anda
Sangat mudah untuk memilih skema warna saat Anda mengerjakan produk baru. Tetapi jauh lebih sulit untuk memperkenalkan perubahan dalam skema warna produk yang ada. Dalam beberapa kasus, mengubah warna yang ada tidak akan menimbulkan masalah, dalam kasus lain, Anda dapat merusak seluruh UI. Itu sebabnya palet warna yang Anda buat dan terapkan untuk UI harus diuji dengan cermat.
Yakinkan bahwa warna-warna yang Anda pilih akan bekerja secara harmonis bersama.
Meskipun dimungkinkan untuk menggunakan alat regresi visual untuk tujuan itu, Anda dapat mencapai hasil yang lebih baik dengan melakukan pengujian manual.
sumber:uxplanet.org
