Ada banyak sekali metode atau teknik desain yang dapat memudahkan seseorang membuat konsep atau sistem desain sesuai keinginannya. Memikirkan metode desain yang harus digunakan dalam memperkenalkan sebuah produk tentu bukan hal sepele yang harus dilewatkan. Jika metode saja sudah berantakan, maka produk yang akan di dikenalkan pada masyarakat pun tidak akan berhasil. 

Salah satu metode desain yang paling populer dan dikenal luas oleh orang-orang adalah atomic design. Atomic design adalah metode desain yang melibatkan unsur-unsur kimia. Mengapa? karena prosedur desain yang diterapkan pada atomic design menggunakan komponen-komponen yang nama-nama pada komponen tersebut menggunakan istilah-istilah kimia. Unik sekali bukan?

Untuk memulai metode ini, tentu kamu harus tahu dulu elemen-elemen apa saja yang ada pada atomic design. Elemen-elemen ini berisi komponen pada atomic design yang harus kamu pahami dalam mengikuti prosedur atomic design. Karena itu, Kinaja akan kasih kamu penjelasan apa saja elemen-elemennya. Simak yuk!

1. Atom

Atom adalah elemen dasar pembentuk seluruh sistem. Layaknya dunia kimia, komponen terkecil atomic design adalah atom itu sendiri. Ciri komponen ini adalah tidak bisa diurai atau dipecah lagi. Jika dipecah, maka fungsi dan maknanya akan rusak dan berbeda. Contoh komponennya adalah label tombol, form, input, dan lain-lain. Atom juga dapat mengandung elemen abstrak lainnya seperti palet warna, font, dan animasi. 

2. Molekul

Seperti halnya dalam pelajaran kimia, molekul adalah komponen yang terdiri dari sekumpulan atom. Dalam atomic design, molekul membentuk sebuah kesatuan fungsi sederhana. Misalnya search bar. Kamu menggabungkan atom tombol pencari dan input pencari maka akan membentuk fitur pencarian yang utuh.

3. Organisme

Molekul yang berbeda dapat kamu kombinasikan membentuk organisme. Misalnya adalah header bar yang terdiri dari daftar menu, search bar, dan tombol menu. Selain itu ada tombol navigasi dan logo yang kamu letakkan disana. Perpaduan inilah yang disebut organisme. Perpaduan ini pula yang membuat system design sudah mulai kelihatan. 

4. Template

Template dibuat dengan merakit dan membentuk organisme. Seperti namanya, template merupakan cetak biru dari sebuah halaman web. Hal ini akan terlihat dari organisme yang dikumpulkan dan disatukan nantinya akan menjadi halaman website. Namun dalam tahapan ini, kamu hanya akan menemukan wireframe atau kerangka HTML karena hanya akan menampilkan elemen dan belum punya data yang nyata.

5. Halaman 

Elemen ini merupakan bentuk nyata dan hasil akhir dari desain yang telah kamu sistem. Halaman merupakan template yang diisi dengan data nyata. Pada akhirnya, seluruh elemen yang telah dibuat dan wireframe atau kerangka yang telah dimiliki, perlahan-lahan akan berubah menjadi page atau halaman yang seutuhnya. Tahapan merancang halaman sangatlah penting demi mengecek apakah setiap elemen mulai dari atom, molekul, hingga organisme berfungsi secara normal. 

Itu dia beberapa elemen atomic design yang harus kamu perhatikan dalam menerapkan metode ini. Jika kamu ingin tahu lebih dalam mengenai atomic design dan bagaimana cara pengaplikasiannya, kamu bisa baca buku yang berjudul “Atomic Design” yang ditulis oleh Brad Frost. Brad Frost sendiri adalah orang pertama yang menciptakan metode ini. Selain itu, Kamu bisa gunakan aplikasi perancangan UI seperti Sketch dan Figma memiliki fitur komponen yang dapat memudahkan kamu menerapkan metodologi atomic design dalam membuat desain produkmu. 

Oh iya, jika kamu kurang mengerti menciptakan desain yang baik untuk produkmu, Kinaja juga bisa bantu loh. Kinaja akan siap bantu kamu menciptakan desain yang sesuai dengan produkmu dan tentunya sesuai dengan keinginanmu. Yuk kunjungi sekarang dan temukan penawaran menarik!

Sumber: vektoria.id , hestanto.web.id dan glints.com