Metode atomic design adalah metode yang digunakan dalam pembuatan sebuah elemen UI ke dalam beberapa bagian, dari yang terkecil sampai bagian yang terbesar dan kompleks. Pada atomic design menjabarkan elemen UI dari paling abstrak ke elemen yang paling solid atau paling mudah dimengerti. Tujuannya adalah menciptakan kumpulan unsur desain yang berguna sebagai template dalam membangun berbagai halaman.

Dengan demikian, metode ini dapat membantu untuk membangun konsistensi dan efisiensi dalam proses desain. Selain itu, metode ini juga akan mengingatkan bahwa desain tidak hanya tentang tampilan akhir, tetapi juga tentang struktur dan komponen yang membentuk dasar dari sistem desain secara keseluruhan.

5 Tahapan Pembuatan Desain dalam Atomic Design

1. Atom: Pembuatan web elemen-elemen kecil atau disebut atom. Contohnya warna, tipografi, ikon, form dan tombol.
2. Molekul: Terdiri dari beberapa atom yaitu form, ikon dan tipografi. Dengan menyatukan atom ini maka terciptalah form ‘Search’ yang dapat berfungsi. Molekul ‘Search’ memiliki tampilan berbeda ketika aktif dan tidak. Ketika aktif menggunakan atom warna untuk font warna A dan tidak aktif warna B. Tampilan ini juga memudahkan saat tampilan semakin rumit dan banyak molekul yang terkait satu dengan lainnya.
3. Organisme: Gabungan dari molekul yang disatukan dan membentuk bagian yang kompleks dari suatu tampilan. Bagian ini disebut juga segmen. Contohnya ‘Header’, terdiri dari molekul menu, search, tombol dan lainnya.
4. Template: Terdiri dari beberapa organisme yang disatukan bersama dan membuat sebuah halaman/page. Pada tahap ini dapat melihat desain mulai terbentuk dan bagaimana layout bergerak.
5. Pages/Halaman: Seluruh template yang disatukan dengan konten aslinya. Berisikan final aset seperti video, gambar, konten dan dapat mereview dan melakukan Quality Checking apabila dibutuhkan.

Manfaat Metode Atomic Design

1. Kemudahan dalam menyusun dan memanajemen elemen yang dimiliki. Memudahkan untuk membuat sebuah guideline dan memudahkan dalam pengaturan penggunaan elemen UI yang ada.
2. Memudahkan dalam membedakan mana struktur dan mana konten. Proses pembuatan komponen dari hal yang paling kecil dan sederhana membuat paham mana yang menjadi struktur dan konten, yang membuat struktur memiliki makna.
3. Membedakan sebuah elemen UI menjadi beberapa bagian tanpa bingung harus memberi nama apa. Hal ini memudahkan dalam menjelaskan UI kepada klien ataupun rekan kerja.

Mengapa Metode Atomic Design Begitu Penting?

Salah satu manfaat metode ini adalah kemudahan dalam menyusun dan memanajemen elemen yang dimiliki. Tidak membuat bingung saat membuat web. Karena semua informasi terdokumentasi dalam satu dokumen yang telah siap. Selain itu, Langkah pembuatan prototipe juga dapat lebih cepat dan mudah terselesaikan dengan metode ini. Atomic design memudahkan untuk mengimplementasikan desain dalam kode.

Implementasi Atomic Design dalam Website

Pendekatan atomic design melibatkan kemampuan untuk menyusun desain dalam hirarki yang terstruktur. Dengan membagi desain menjadi komponen-komponen yang lebih kecil, dapat mudah dikelola, menyunting dan memanfaatkan kembali elemen desain tersebut.

Tidak hanya itu, atomic design juga mudah menciptakan desain yang responsif dan dapat beradaptasi. Struktur yang tersusun secara sistematis memungkinkan cepat menyesuaikan tampilan mereka untuk berbagai perangkat dan resolusi layar.

Penutup

Atomic design adalah metodologi desain yang bermanfaat, tetapi pada dasarnya hanyalah model untuk membangun UI. Atomic design memungkinkan melihat UI dipecah menjadi elemen-elemen atomnya, dan memungkinkan secara bersamaan menelusuri bagaimana elemen-elemen tersebut bergabung membentuk UI akhir.