Diadaptasi dari buku kami yang akan datang, Refactoring UI

Pernahkah Anda melihat generator palet warna yang trendi ini? Saat Anda memilih warna, sesuaikan beberapa parameter dengan frasa musik seperti "triad" atau "mayor keempat" - dan dapatkan lima warna sempurna untuk situs web Anda?



Pendekatan komputasi dan ilmiah seperti itu untuk memilih skema warna yang sempurna sangat menggoda, tetapi tidak terlalu berguna.

Nah, jika Anda tidak ingin situsnya terlihat seperti ini:

Apa yang benar-benar Anda butuhkan

Anda tidak akan melakukan apa pun dengan lima kode hex. Untuk membangun sesuatu yang nyata, dibutuhkan palet yang jauh lebih lengkap.



Palet warna yang baik dapat dibagi menjadi tiga kategori.

Abu-abu

Teks, latar belakang, panel, elemen bentuk - hampir semua ini ada di antarmuka abu-abu.



Dan Anda akan membutuhkan lebih banyak warna abu-abu daripada yang Anda pikirkan. Tampaknya tiga atau empat warna banyak, tetapi segera Anda akan menginginkan sesuatu yang sedikit lebih gelap daripada warna No. 2, tetapi sedikit lebih ringan daripada warna No. 3.

Dalam praktiknya, disarankan untuk memilih 8-10 warna (lebih lanjut tentang ini nanti). Ini bukan untuk mencari perbedaan antara corak No. 77 dan No. 78, tetapi jumlahnya cukup memadai.



Hitam sejati, sebagai suatu peraturan, terlihat tidak alami, jadi mulailah dengan abu-abu yang sangat gelap dan secara bertahap beralih ke putih.

Warna primer

Sebagian besar situs memerlukan satu atau dua warna untuk tindakan dasar, elemen navigasi, dll. Warna-warna ini menentukan tampilan keseluruhan situs: warna yang membuat Anda menganggap Facebook sebagai "biru," meskipun sebenarnya sebagian besar berwarna abu-abu.

Seperti halnya palet abu-abu, Anda harus memilih palet (5-10) dari corak yang lebih terang dan lebih gelap.



Nuansa paling terang dapat berguna sebagai latar belakang berwarna untuk hal-hal seperti peringatan, sedangkan yang lebih gelap bagus untuk teks.

Warna aksen

Selain yang utama, setiap situs memerlukan beberapa warna aksen untuk berkomunikasi dengan pengguna.

Jadi, untuk menyorot fungsi baru, Anda dapat memilih warna yang menarik, misalnya, kuning, merah muda atau biru-hijau:



Warna juga mungkin diperlukan untuk menekankan keadaan semantik yang berbeda, misalnya, merah untuk mengkonfirmasi tindakan yang merusak:



... kuning untuk peringatan:



... atau hijau untuk menekankan tren positif:



Dan beberapa corak warna ini, meskipun mereka harus digunakan sangat hemat di UI.

Jika Anda membuat desain yang warna membantu membedakan atau mengklasifikasikan elemen yang sama (misalnya, garis pada grafik, acara kalender atau tag dalam suatu proyek), maka lebih banyak warna aksen mungkin diperlukan.

Secara umum, UI yang kompleks sering membutuhkan hingga sepuluh warna berbeda dengan masing-masing 5-10 warna.

Tetapkan nuansa sebelumnya

Ketika warna yang sedikit lebih terang atau lebih gelap diperlukan, Anda tidak perlu menggunakan fungsi preprosesor CSS seperti terang atau gelap. Jadi Anda berakhir dengan 35 warna biru yang sedikit berbeda yang semuanya terlihat sama.

Alih-alih, tentukan serangkaian warna yang tetap untuk dipilih.



Bagaimana cara membuat palet seperti itu?

Pertama pilih warna dasar

Mulai dengan warna dasar yang menjadi dasar nuansa terang dan gelap.

Tidak ada cara ilmiah yang nyata, tetapi untuk warna dasar dan aksen, aturan praktis yang baik adalah memilih warna yang cocok dengan latar belakang tombol.



Penting untuk dicatat bahwa tidak ada aturan nyata di sini, seperti "mulai pada kecerahan 50%" atau sejenisnya. Setiap warna berperilaku sedikit berbeda, jadi Anda harus bergantung hanya pada selera Anda.

Tetapkan batas

Kemudian pilih warna yang paling gelap dan paling terang. Ini juga bukan pendekatan ilmiah, tetapi membantu membayangkan di mana warna akan digunakan, dan memilihnya sesuai dengan konteks ini.

Warna paling gelap biasanya tersisa untuk teks, dan paling terang - untuk latar belakang elemen. Peringatan sederhana adalah contoh yang baik di mana nuansa ini digabungkan.



Mulai dengan warna yang cocok dengan nada warna primer, lalu ubah saturasi dan kecerahannya hingga Anda puas.

Isi bagian yang kosong

Jika Anda telah memutuskan warna dasar, gelap dan terang, maka hanya tinggal mengisi celah di antara keduanya.

Untuk sebagian besar proyek, Anda memerlukan setidaknya lima warna per warna, dan lebih disukai mendekati sepuluh, agar tidak merasa malu.

Sembilan adalah angka yang bagus karena membelah dengan baik, yang membuat mengisi bagian yang kosong sedikit lebih mudah. Mari kita sebut naungan paling gelap 900 , basis 500 , dan 100 paling terang.

Mulailah dengan memilih nuansa 700 dan 300 , yang tepat di tengah-tengah dua interval: mereka akan menjadi kompromi yang sempurna antara nuansa di kedua sisi.



Ini menciptakan empat interval lagi pada skala ( 800 , 600 , 400 dan 200 ), yang diisi dengan cara yang sama.



Pada akhirnya, Anda mendapatkan seperangkat warna yang cukup seimbang, cukup cukup untuk mewujudkan ide desain Anda.

Bagaimana dengan abu-abu?

Dengan corak abu-abu, warna dasarnya tidak begitu penting, tetapi sebaliknya prosesnya sama. Mulai dari tepi dan isi bagian yang kosong sampai Anda mendapatkan palet yang tepat.



Pilih warna paling gelap berdasarkan warna teks paling gelap dalam proyek, dan warna paling terang - warna yang berfungsi dengan baik sebagai latar belakang yang hampir putih.

Ini bukan ilmu.

Apa pun keinginan Anda, Anda tidak boleh hanya mengandalkan matematika untuk memilih palet warna yang sempurna.

Pendekatan sistematis seperti di atas bagus untuk memulai, tetapi jangan takut untuk mengubahnya jika perlu.

Segera setelah Anda benar-benar mulai menggunakan warna Anda dalam proyek, hampir pasti Anda akan ingin sedikit mengubah saturasi warna tertentu atau membuat beberapa warna lebih terang atau lebih gelap. Percayalah pada mata Anda, bukan angka.

Cobalah untuk tidak menambahkan terlalu banyak nuansa baru ketika itu opsional. Jika Anda tidak membatasi palet, Anda biasanya dapat dibiarkan tanpa sistem warna.