ATOMIC DESIGN METHODOLOGY : Pada pembuatan User Interface
Haloo ketemu lagi!! Kai ini kita akan membahas apa itu atomic design. Pernah dengar? Ayo kita bahas. hehehe
Atomic design methodology merupakan sebuah metode yang digunakan dalam pembuatan sebuah elemen UI ke dalam beberapa bagian, dari yang paling terkecil hingga menjadi bagian yang lebih besar dan kompleks. Atomic design menerapkan konsep atom dalam kehidupan kita “atomic elements combine together to form molecules. These molecules can combine further to form relatively complex organisms”. Dalam pernyataan itu menjelaskan bahwa elemen UI sendiri terbentuk dari bagian yang paling kecil yaitu atom, lalu molekul yang merupakan gabungan dari beberapa atom, dan yang terakhir organisme yang merupakan gabungan dari beberapa molekul yang tujuannya untuk menyelesaikan tugas tertentu. Pada atomic design, level tertinggi bukanlah organisme tapi terdapat template yang merupakan gabungan tiap organisme, lalu terakhir merupakan level tertinggi yang merupakan gabungan dari beberapa template yang membentuk pages. Pada atomic design juga menjabarkan elemen UI dari paling abstak ke elemen yang paling solid atau paling dapat dimengerti.
Mari kita bedah atomic design dari level yang paling kecil atau yang paling dasar.
ATOM.
Atom merupakan elemen yang paling dasar dan menjadi bagian yang paling kecil dalam UI. Elemen terkecil dalam UI dapat berupa HTML Tags dasar seperti Button, Label dan inputs. Elemen dasar dalam UI terdapat juga elemen yang abstrak seperti warna, font dan aspek yang bahkan tidak terlihat seperti animasi atau transisi.
MOLEKUL
Molekul merupakan gabungan dari beberapa atom dan gabungan terkecil yang memiliki tujuan yang sama. Molekul ini memiliki tujuan dan dapat mengerjakan pekerjaan yang sederhana. Contohnya ketika form label, input dan tombol berdiri sendiri maka mereka tidak akan dapat berguna, namun jika kita menggabungkan komponen tersebut mereka dapat melakukan pekerjaan sederhana untuk menuju sebuah tujuan tertentu.
ORGANISME.
Organisme merupakan kumpulan dari beberapa molekul/atom/maupun organime lain yang membentuk sebuah komponen UI yang lebih kompleks dan memiliki tugas yang lebih banyak daripada Molekul.
Kita lihat dalam contoh dibawah ini yaitu pada google search, dimana form search yang diletakkan bersamaan dengan logo dan elemen UI yang lain. Dalam sebuah organisme, tiap elemen dapat memiliki fungsi untuk bersama sama melakukan pekerjaan yang sama dan tiap atom juga dapat memiliki pekerjaannya sendiri atau tidak terikat namun tetap berada di organisme yang sama. Header merupakan salah satu organisme yang memiliki pola yang sama pada tiap web maupun aplikasi yang sering kita temui.
Selain pada header yang memiliki organisme yang berbeda, penggunaan organisme juga dapat dilakukan secara berulang kali. Hal itu sering kita temui di dalam sebuah web atau aplikasi marketplace dalam menampilkan barang atau item yang dijual atau dalam sebuah web atau aplikasi yang menggunakan gambar yang jumlahnya banyak.
Membangun UI dari atom, molekul hingga menjadi organisme membuat perancang dan desainer dapat memahami kompleksitas dari sebuah kasus. Organisme menunjukkan komponen yang paling kecil dan paling sederhana dalam melakukan sebuah aksi atau pekerjaan dan juga berfungsi sebagai pola yang dapat digunakan secara berulang kali jika diperlukan.
Setelah kita berhasil menyusun elemen UI dari atom hingga organisme mari kita gabungkan sehingga dapat menjadi sebuah satu kesatuan yang utuh.
TEMPLATE.
Template merupakan objek pada “page-level object” yang berfokus kepada tata letak, layout dan menjabarkan maksud atau makna yang mendasari desain pada konteks tertentu. Pada template dilakukan penggabungan atom, molekul dan organisme yang dapat memiliki maksud yang lebih jelas dan memiliki makna yang dapat dimengerti. Maksud dan pengertian dalam sebuah konten dapat dijelaskan dengan lebih jelas dengan dibantu ukuran gambar, ukuran text, penempatan text dan besarnya sebuah karakter. Pada proses template biasanya menghasilkan wireframe atau skeleton yang sudah dapat dimengerti secara jelas tujuan dan konteks yang ingin dituju setiap komponen.
PAGE.
Pada tahap page template yang dibuat sebelumnya diterapkan dengan penambahan gambar, warna dll sehingga dapat menghasilkan tampilan UI. Pada level tertinggi ini kita dapat melihat UI secara lebih jelas dan dapat dimengerti makna yang terdapat di dalamnya. Biasanya pada tahap terakhir ini sebuah UI dapat dilakukan proses demonstrasi dan testing untuk menilai User Experience di dalamnya.
Kita sudah mempelajari dari atom, molekul, organisme hingga level paling tertinggi yaitu Page. Mari kita perdalami mengapa kita perlu melakukan penjabaran atau membagi sebuah UI menjadi beberapa elemen. Apa manfaatnya? Dan apa keuntungannya kita membagi hal tersebut?
Ada beberapa manfaat yang dapat kita rasakan jika melakukan metode atomic design, yaitu :
- Kemudahan dalam menyusun dan memanajemen elemen yang kita miliki. Kita dapat membagi sebuah elemen menjadi elemen abstak hingga elemen yang lebih komplit dan jelas. Hal ini memudahkan kita dalam membuat sebuah guideline dan memudahkan dalam pengaturan penggunaan elemen UI yang ada. Hal ini juga dapat melatih kita untuk membangun sesuatu dari hal yang paling detail atau kecil terlebih dahulu, setelah itu lalu dapat berlanjut ke tingkat yang lebih kompleks dan lebih besar. Sehingga hal yang dihasilkan dapat maksimal dan memiliki kualitas yang baik.
- Memudahkan kita dalam membedakan mana struktur dan mana konten. Proses pembuatan komponen dari hal yang paling kecil dan sederhana membuat kita memahami mana yang menjadi struktur (komponen pembangun) dan konten (isi dalam sebuah komponen) yang membuat struktur memiliki makna. Dengan kemudahan dalam membedakan hal tersebut dapat meningkatkan kualitas akhir kita agar mudah dipahami dan memudahkan kita dalam menggunakan elemen UI yang sama pada projek yang berbeda.
- Yang terakhir salah satu keunggulan menggunakan atomic design yaitu kita dapat membedakan sebuah elemen UI menjadi beberapa bagian tanpa bingung harus memberi nama apa. Hal ini akan memudahkan dalam menjelaskan UI kepada clien maupun rekan kerja.
Kita sudah sampai kepada penghujung acara!!
Intinya pembagian elemen yang ada dari yang paling kecil hingga paling besar dan kompleks memudahkan kita dalam kegiatan manajemen elemen UI dan kegiatan yang lainnya.
Mohon kritik dan sarannya dalam tulisan saya kali ini.
Bertemu lagi di tulisan yang lain dan topic yang lebih menarik lagi!!
Source :
Atomic Design Methodology : http://atomicdesign.bradfrost.com/chapter-2/
