Dalam merancang suatu tampilan aplikasi atau website, kita tentunya ingin hasilnya terlihat konsisten meskipun fitur yang dikembangkan terus bertambah. Namun kenyataannya, semakin besar sebuah produk, semakin sulit bagi kita untuk menjaga keseragaman interface dan interaksinya. Misalnya tombol yang awalnya sama atau seragam bisa tampil berbeda di halaman yang lain. Masalah seperti itu muncul karena desain dibuat belum memiliki dasar yang kuat. Dalam membuat tampilan yang konsisten, terdapat beberapa pendekatan yang dapat kita gunakan untuk menyusun elemen interface yang terstruktur salah satunya adalah prinsip Atomic Design. Prinsip ini menjelaskan bahwa UI dapat dibangun mulai dari elemen yang paling kecil terlebih dahulu, lalu berkembang menjadi elemen yang lebih besar dan kompleks. Dengan cara itu, desain UI dalam suatu tampilan website atau aplikasi akan lebih mudah dimaintain dan dikembangkan. 

Prinsip Atomic Design dapat kita implementasikan dengan membuat Design System. Secara sederhana, design system dapat dikatakan sebagai “single source of truth” bagi tim desain dan development dimana kita dapat memetakan dan mendokumentasikan komponen UI yang bisa digunakan kembali sesuai dengan aturan tipografi, palet warna, space antar elemen, dan lainnya. 

Manfaat utama dari design system cukup beragam diantaranya: 

  • Dapat meningkatkan konsistensi dimana seluruh halaman akan menggunakan style dan komponen yang sama sehingga tampilan lebih seragam.  
  • Dapat menghemat waktu dan effort dibandingkan jika kita membuat komponen UI dari awal setiap kali terdapat halaman atau fitur tambahan. Dengan demikian, tim dapat menggunakan komponen yang sudah tersedia sehingga dapat mempercepat proses desain dan development. 
  • Dapat mendukung skalabilitas dalam project dimana jika proyek tersebut berkembang dan terdapat tambahan fitur, tim dapat dengan mudah mengembangkan penambahan fitur dengan visual yang konsisten. 
  • Dapat mempermudah kolaborasi antar tim desain dan developer dikarenakan design system membantu tim untuk menggunakan bahasa dan komponen yang sama. Hal ini dapat meminimalkan adanya miskomunikasi antar tim.  
  • Namun, pada prakteknya, terdapat beberapa kesalahan dalam membangun design system yang perlu diperhatikan, salah satunya adalah menganggap design system hanya sebagai “UI kit” sehingga design system tidak memiliki dokumentasi penggunaan, pedoman interaksi, atau komponen yang lengkap. Maka dari itu, dalam membuat design system yang efektif terdapat beberpa hal yang harus diperhatikan diantaranya: 
  • Menentukan komponen dasar atau style dasar terlebih dahulu seperti warna, tipografi, ukuran spacing, ikon, dan lainnya. 
  • Membuat dokumentasi design system yang jelas seperti cara menggunakan komponen, kapan dipakai, varian dan aturan responsif agar tim dapat mengetahui dan mengembangkan design dengan konsisten. 

Kesimpulannya, design system merupakan salah satu bentuk implementasi dalam atomic design yang dapat digunakan dalam membuat UI aplikasi atau website lebih terstruktur, konsisten dan memiliki skalabilitas. 

References: