Pentingnya Implementasi Semantic Color Pada Figma — DS Series
Terkadang kita lupa ada developer yang akan memakai design kita
Apa yang dilakukan setelah kita selesai mendesain adalah hal yang sering kali kita lupakan atau abaikan, ya tentunya desain kita akan dipakai oleh developer untuk membuat product / program yang dimana mereka akan membaca design kita dan berusaha mengimplementasikan.
Warna adalah salah satu hal yang kerap kali membuat kita pusing, mulai dari menentukan warna primary secondary, warna untuk success, danger lainya termasuk menentukan shading yang tepat untuk color pallete kita. Perbedaan warna bisa memberikan efek yang berbeda terutama jika bicara mengenai contrast checker ataupun accessbility.
Nah kembali ke semantic dan kenapa penting, bayangkan anda membuat aplikasi dengan screen ratusan kemudian anda sudah memberikan warna kepada masing masing screen, tiba tiba seorang UI designer baru datang dan diminta untuk membuat modul lain. Tentunya mereka akan berinteraksi dan menyesuaikan dengan color yang ada. Coba tebak kira kira bagaimana mereka akan melakukan ?
Mereka akan melihat screen lain kemudian akan mencocokan warnanya, namun masalahnya jika kalian memiliki warna basic ( primary, secondary, success, danger, warning, info, dark, dan light ) dimana masing masing tersebut memiliki shading sendiri sendiri. Berapa banyak kriteria yang harus dihapalkan oleh UI designer tersebut ? Bagaimana jika tiba tiba mereka salah menggunakan shading untuk background ataupun salah menggunakan warna untuk placeholder ? ya jawabanya adalah memperbaiki dan pastinya butuh waktu. Lebih mengerikan lagi jika ternyata dia sudah membuat puluhan screen baru lagi.
Cara untuk memperbaiki yang mungkin terpikir adalah block semua screen cek pada color dan ganti, tapi ini tidak akan berhasil jika anda punya component yang menggunakan warna yang sama, sekalinya anda mengganti warna tersebut maka anda mengganti component yang lain juga.
Masalah tidak berhenti disitu, setelah anda melakukan design dan melakukan handover kepada developer dan setelah beberapa bulan menunggu akhirnya design anda dipakai. *Drum Roll* Banyak warna yang tidak sesuai, sehingga menimbulkan masalah pada end user. Anda diminta memperbaiki dan anda harus mengarahkan developer memperbaiki setiap screen dan selamat datang di stress part 2.
Semantic Color adalah jawabanya…
Saya tidak akan menjabarkan secara teori namun pada intinya semantic color adalah memberikan nama pada color anda untuk memudahkan pengguna lain membaca color anda.
Semantic color memudahkan designer baru untuk menentukan warna apa yang harus dia pakai untuk sebuah component atau element. Termasuk juga ketika harus memperbaiki masalah apabila ada kesalahan pada satu element, anda bisa mengganti secara spesifik warna berdasarkan kegunaanya.
Misalnya anda ingin mengganti placeholder yang sebelumnya berwarna abu abu, setelah anda menerapkan semantic maka setiap part penting akan memiliki value sendiri sehingga anda cukup mencari placeholder color dan mengganti warnanya, hal ini tidak akan merusak warna lain karena telah dipilah.
Developer pun bersuka cita, karena mereka sudah tahu warna apa yang harus mereka pakai untuk sebuah component tanpa harus banyak bertanya kepada designer. Nah masalahnya bagaimana menggunakan semantic color di Figma ? Follow dan Nantikan seri berikutnya :)
Tertarik ngobrolin design system, bisa approach saya di linkedin dan yuk kita ngobrol sana sini.
