Lion Parcel Color System : When We Try to Define It Clearly in Code and Design
3rd Storie : Bersambung dari tulisan sebelumnya. Belajar Dari Membangun Design Language System — Part 1 & Belajar Dari Membangun Design Language System — Part 2 pada tulisan terakhir kami akan memulai phase 1 dari hal yang menurut kami paling sederhana yaitu color system, type system, dan spacing sytem.
Pada tulisan kali ini saya akan dimulai dari color system sesuatu yang kami kira hal yang sederhana namun tidak sesederhana yang difikirkan.
Color Palette
Menurut Diana Mounter — Design System Manager GitHub utamanya color system yang harus dimiliki pada setiap design system memiliki 3 point berikut:
- Rule: Must pass minimum color contrast ratio of 4.5:1
- Constraint: Number of colors in the palette
- Principle: Color should be used in a meaningful way
Contrast Ratio
Mungkin terkesan berlebihan karna saya merasa cukup dengan mata sendiri kita sudah bisa menentukan warna apa yang nyaman untuk kita lihat di layar. Background terang kita kasih tulisan gelap, background gelap kita kasih tulisan putih. Kenapa harus susah cek contrast ratio..??
Melakukan pengecekan contrast ratio bisa dibilang seperti validasi awal warna apa yang baik untuk kita gunakan. Validasi contrast ratio tidak hanya menentukan warna text atau backgroud saja.
Yang paling utama adalah dengan contrast yang tepat, orang dengan kondisi buta warna pun dapat memahami konteks yang ingin kita sampaikan kepada pengguna.
Referensi tentang contrast ratio yang cukup jelas dan lebih enak dibaca: https://usecontrast.com/guide
Color code with functions
Mengklasifikasikan warna berdasarkan fungsinya merupakan langkah yang kami lakukan setelah kami memiliki turunan warna. Turunan warna sendiri sudah ada lebih dulu di Lion Parcel sehingga tugas kami untuk design system ini tinggal mengatur warna berdasarkan fungsinya.
Sebenarnya ada banyak metode untuk mendapatkan turunan warna yang optimal dan terstuktur, yaitu dengan calculated decision — cara tersebut akan memanipulasa hue, saturation, luminance, dll warna primary atau secondary dasar. Pakai extended palette generator untuk memudahkan perhitungan — colorbox
Baca juga artikel dari Marcin Trader — UX Pin ini untuk detail yg lebih jelas. Dia menjelaskan menjelaskan seluk-beluk pengerjaan color system yang ada pada UX Pin dan itu sangat membantu kami dalam pemilihan keputusan.
Kembali ke turunan warna, di Lion Parcel sendiri kami mengambil keputusan dengan Arbitrary decisions dimana kami memilih turunan warna sendiri warna apa yang paling sesuai dengan kebutuhan kami.
Arbitrary decisions sejujurnya memiliki kelibihan dan kekurangan. Kelebihan yang kami rasakan dengan memilih warna sendiri kami dapat mengatur kombinasi warna yang sesuai dengan yang dibutuhkan, selain itu warna dapat menyesuaikan bukan hanya untuk product digital saja namun untuk ads atau media cetak juga.
Namun kekurangannya dibeberapa kasus warna-warna dengan posisi urutan yang sama memiliki tingkat hue dan saturation yang berbeda sehingga tone warna akan terlihat berbeda-beda.
Ke-dua metode tersebut tidak ada yang salah, yang benar adalah turunan warna yang disesuikan dengan kebutuhan kita.
Color in Meanings Way
Sebenarnya extended pallets yang sudah kita miliki sebelumnya sudah cukup untuk mengcover semua kebutuhan warna. Warna sukses, critical, warning, highlight info, bahkan untuk setiap accent warna product Lion Parcel sudah dapat dicover dari pallets warna yang sudah dibuat sebelumnya.
Namun tiap designer memiliki prespektif yang berbeda-beda. Tanpa aturan yang jelas warna jadi beragam lagi. Misal designer 1 menggunakaan surface error denga red-1 designer 2 menggunakan surfacenya dengan interpack-1.
Jika kami tidak mengaturnya maka keduanya benar dan tidak ada yang salah karna sudah mengikuti color system. Namun sama saja akhirnya konsistensi yang kami inginkan tidak akan tercapai. Bayangkan kalau team yang memiliki banyak squad dengan banyak designer.
Color in Code
Pembuatan color system tidak selesai begitu saya. Tantangan terbesar kami ketika pembuatan color system adalah ketika kami memulai implementasi system menjadi code.
Walaupun design system sudah baik, kalau tidak bisa di implementasi engineer apa gunanya.
Tantangan terbesarnya adalah Lots of inconsistency color name and code values. Perlu kita ketahui sebelumnya produk di Lion Parcel itu ada 2 yaitu; Customer App, dan Driver App.
Customer App menggunakan platform IOS dan Android, sedangkan Driver App hanya Android. Sehingga ada 3 file color yang engineer miliki. Dari ketiga file tersebut terdapat 312 Code Name yang berbeda. Dan warna yang seharusnya dipakai tidak lebih dari 50 warna.
Artinya bukan hanya penggunaan warna yang beda untuk sebuah komponen, atau penamaan yang berbeda antar IOS, android, dan antar produk, namun banyak warna yang sebenarnya sudah tidak dipakai namun tidak di hapus oleh engineer banyak juga kasus miscommunication antar engineer atau engineer dengan designer.
Semakin banyak engineer, semakin banyak designer Masalah tersebut akan terus menggulung seperti snowball effect. Tidak akan ada akhirnya bahkan terus membengkak dan pastinya akan semakin sulit diselesaikan.
Normalisasi Warna
Dari masalah tersebut hal yang pertama kami lakukan adalah mengurangi jumlah variabel yang digunakan, dan menghilangkan duplikasi warna yang tidak diperlukan.
Tugas yang cukup melelahkan untuk kami dan engineer namun seperti pepatah yang sangat terkenal — “Berakit Rakit ke Hulu, Berenang Renang ke Tepian, bersakit-sakit dahulu bersenang-senang kemudian”
Colors Name Management
Langkah terakhir yang kami lakukan adalah penamaan warna. Nama warna yang jelas dan dapat dimengerti bukan hanya oleh designer tapi oleh engineer juga adalah salah satu masalah yang perlu kami selesaikan juga.
Tulisan dari Marcin Trader — UX Pin sangat membantu dalam pembuatan color system ini terutama pada saat penentuan nama. Setidaknya ada 3 solusi yang populer untuk penamaan warna yaitu :
- Natural color names or abstract color names
- Functional names
- Number-based names
Sebelmnya engineer kami menggabungkan metode natural color names dan fungtional names. Walaupun terkadang warna yang engineer pakai adalah defaut yang zeplin berikan, kurang lebih seperti ini list of color — wikipedia atau seperti list ini List of Crayola crayon colors — wikipedia.
Nama-nama tersebut ternyata tidak terlalu bekerja untuk kami terlalu memusingkan walau pun nama warna cukup di copy saja namun untuk designer penggunaan Number-based names jauh lebih mudah. Secara visual kami dapat melihat berurutan dari dari warna gelap ke terang atau sebaliknya.
Metode yang cocok untuk kami
Number-based names adalah penamaan warna yang kami gunakan saat ini . Penamaan yang mudah di mengerti bukan hanya oleh designer namun engineer kami juga dapat memahaminya dengan mudah.
Tapi diluar penamaan dengan number based tersebut kami juga menggunakan fungtional names untuk beberapa warna yang sering digunakan designer khususnya pada product yang memiliki squad dan designer yang banyak.
Penamaan sesuai fungsi masih sangat berguna juga untuk kami sehingga untuk kasus tersebut kami masih tetap menggunakan fungtional names. Engineer mengatur nama tersebut tetap berinduk pada number based names utamanya sehingga kedua warna dapat terus terhubung ketika ada perubahan.
Epilog
Sebelum di akhiri kembali kepenulisan nama di design system, ada tulisan yang keren untuk dibaca menurut saya tentang penamaan token pada design system yang ditulis oleh Nathan Churtis — eightspahes. Disana dia menjelaskan sangat detail bagaimana penamaan setiap token diatur.
Tulisan ini saya akhiri sampai sini. Semoga tulisan diatas dapat membantu. Thanks… Stay safe & healthy 😊
