Colors
Warna adalah bagian penting dari setiap sistem desain, tetapi bisa dengan mudah menjadi sulit untuk dikendalikan. Dengan sejumlah tak terbatas warna dan nuansa, variasi dan berbagai ruang warna, dan berbagai metode pemilihan dan sampling warna, mudah bagi tim untuk memiliki puluhan nilai warna yang digunakan secara inkonesisten.
Dengan menentukan sistem warna, Anda dapat memastikan bahwa Anda memiliki palet warna yang terkenali (dan terkonsolidasi) yang terdiri dari warna-wanra yang dapat diterima, penggunaan yang konsisten dan tepat, serta meningkatkan kemudahan pemeliharaan. Sebagai titik awal yang sederhana, perhatikan warna-warna merek Anda. Palet tersebut mungkin akan sangat mempengaruhi swatch yang Anda gunakan dalam sistem Anda. Menggabungkan warna merek akan memastikan Anda mempertahankan kepribadian merek Anda dalam seluruh UI Anda. Anda juga akan ingin memastikan bahwa Anda memiliki variasi warna dari warna-warna ini yang dapat digunakan saat tidak cocok atau ideal untuk menggunakan warna dalam intensitas penuh. Jika sistem perlu mendukung pemasaran dan produk, Anda mungkin juga ingin menyertakan pedoman penggunaan tentang bagaimana warna digunakan dalam masing-masingnya.
Anda juga perlu memikirkan sejauh mana aksesibilitas warna Anda. Mungkin tidak setiap swatch dalam palet warna Anda perlu memenuhi persyaratan ini, tetapi Anda ingin memastikan bahwa Anda telah menyertakan sekumpulan warna yang dapat diakses yang dapat diterapkan pada teks dan kontrol UI utama, serta latar belakang yang diperlukan untuk kontras. Tergantung pada kebutuhan Anda, Anda mungkin perlu memenuhi standar aksesibilitas AA atau AAA, jadi pastikan pasangan warna Anda telah didefinisikan dengan baik.
Pertimbangkan untuk menambahkan warna yang dapat mengkomunikasikan makna dan nada dari fungsi-fungsi tertentu. Sebagai contoh, dalam kasus menampilkan pesan kepada pengguna, warna-warna tertentu. Sebagai contoh, dalam kasus menampilkan pesan kepada pengguna, warna-warna tertentu membantu menyampaikan isi pesan: merah (red) untuk kesalahan (error), biru (blue) untuk informasi (information), dan hijau (green) untuk konfirmasi (confirmation). Dengan menentukan makna dari beberapa warna, Anda menciptakan pola yang dapat diulangi untuk cara penggunaannya di masa depan.
Selain memilih warna, pertimbangkan juga peluang untuk menjelaskan penggunaannya. Banyak tim telah memperkenalkan sistem variabel atau token untuk menambahkan lapisan semantik pada penamaan warna mereka. Menamai sebuah warna "merah", dan merujuk pada "merah" jauh lebih mudah daripada mengingat nilai Hex/RGBA/HSLA yang tepat, tetapi itu sedikit menjelaskan penggunaannya. Beberapa tim akan menambahkan kata pengubah lain ke nama warna untuk menjelaskan penggunaannya yang dimaksud dan memastikan bahwa warna tersebut diimplementasikan dengan benar. Ini juga membuat pemeliharaan palet menjadi lebih mudah jika warna-warna perlu berubah pada berbagai platform.
Berikut adalah beberapa panduan mendalam tentang warna yang dapat membantu Anda memulai:
-
Lyft Design on Re-approaching Color: Di sini, Lyft membahas bagaimana mereka membangun sistem warna untuk UI yang dapat diakses dan dapat berkembang, serta memberikan panduan tentang cara Anda dapat membangun sistem warna Anda sendiri dengan ColorBox.
-
Color in Design Systems: Nathan Curtis berbicara tentang 16 hal yang telah ia pelajari saat bekerja dengan warna dalam sistem desain, termasuk menstabilkan palet utama, pilihan gradasi dan bayangan, palet sekunder, dan solusi untuk kontras yang dapat diakses.
Anda dapat menjelajahi sumber daya ini untuk mendapatkan wawasan lebih lanjut tentang penggunaan dan implementasi warna dalam sistem desain.