Dalam mendesign interface aplikasi ataupun website, penyusunan elemen desain secara acak tanpa sistem dapat membuat proyek lebih sulit untuk dikembangkan dan dipertahankan ditahap selanjutnya. Dalam menyusun dan mendesign tampilan UI, Atomic Principle merupakan suatu konsep metodologis yang memungkinkan desainer dan developer untuk membangun interface dengan struktur yang konsisten. Prinsip atomic deisgn dapat membantu kita dalam menyusun rancangan UI dimulai dari element terkecil yang apabila digabungkan secara benar akan menciptakan sistem besar yang stabil dan mudah dikembangkan. 

Atomic Design diperkenalkan oleh seorang desainer bernama Brad Frost yang terinspirasi dari ilmu kimia di mana atom merupakan unit paling kecil dan dapat digabungkan hingga membentuk molekul. Molekul tersebut nantinya dapat bergabung menjadi organisme, dan akhirnya membentuk struktur yang kompleks. Brad Frost mengadaptasi analogi ini dalam design UI yang menciptakan konsistensi dan maintenance yang lebih mudah. 

 Source: https://atomicdesign.bradfrost.com/chapter-2/ 

Atomic Design mendefinisikan lima kategori komponen dalam hierarki berikut: atoms, molecules, organisms, templates dan pages. Dalam atomic principle, atoms adalah elemen paling dasar dan tidak bisadibagi lagi, misalnya warna, tipografi, ikon, tombol sederhana, input field, dan lain-lain.  

 

Sementara itu, molecules dapat terbentuk ketika beberapa atoms digabung menjadi satu misalnya sepasang label dan input field atau tombol dengan ikon.  

 

Organisms adalah kombinasi dari molecules dan/atau atoms yang dapat membentuk suatu tampilan UI yang lebih besar misalnya header, card, footer, atau form. 

Templates merupakan bagian dari design yang menyatukan organisms dan molecules dalam layout tertentu  atau dapat dikatakan sebagai “kerangka halaman” tanpa konten actual. Dalam template biasanyaterdiri dari struktur ruang, proporsi, dan tata letak yang lebih jelas. Terakhir adalah pages dimana template UI telah diisi konten aktual seperti teks, gambar, dan data dinamis. Dalam tahap pages, tampilan aplikasi atauwebsite siap untuk di-render sebagai halaman final.  

Dengan Atomic Design, kita dapat membangun tampilan UI dari unit terkecil, kemudian dikombinasikan dengan unit yang lebih kompleks, dan pada akhirnya menciptakan halaman yang lengkap. Jika dalampembuatan UI aplikasi atau website terdapat perubahan pada bagian atom, efeknya dapat merambat ke molecules, organisms, hingga halaman lainnya. Hal ini tentunya dapat memudahkan update yang konsisten di seluruh interface. Dengan pendekatan ini, tim desain & development punya “bahasa yang sama” dimana jika terdapat peruabahan dalam design UI, kita hanya perlu memperbarui bagian kecil tanpa merombak seluruhhalaman. Hal ini dapat membantu designer dan developer terutama jika proyek yang dibuat berkembang dan melibatkan banyak tim.  

Sebagai kesimpulan, Atomic Design merupakan salah satu pendekatan design UI yang memungkinkan pembuatan tampilan atau halaman aplikasi dan website lebih sistematis dan scalable. Prinsip ini juga dapat memudahkan kolaborasi tim, maintenance kode/desain, serta fleksibilitas jika UI perlu diubah.   

Referensi: