Atomic Design, Konsep Desain Produk Lewat Unsur Kimia
Ditulis oleh : Khairina F. Hidayati
Ternyata, ada metode desain produk yang melibatkan unsur-unsur kimia, lho. Nama untuk metodenya adalah atomic design.
Ia tidak asal unik saja, lho. Prosedur ini juga bisa memudahkan proses pembuatan produkmu.
Apakah kamu semakin penasaran? Simak penjelasan lengkapnya di bawah ini, yuk!
Isi Artikel
Apa Itu Atomic Design?
© UXdesign.cc / © Brad Frost
Kata Prototypr, atomic design adalah sebuah metode desain. Ia bukan tentang menciptakan sebuah halaman, melainkan membuat gambaran besar dan sistem.
Apakah kamu bingung apa maksudnya? Tenang saja, Glints akan menjelaskannya.
Dengan metode ini, kamu harus mulai mendesain dari komponen terkecil. Komponen itu misalnya label, paragraf, heading, hingga tombol.
Pencetusnya bernama Brad Frost. Semua tertulis di buku karyanya yang berjudul Atomic Design.
Melansir UX Collective, metode ini diciptakan untuk membuat design system. Design system sendiri merupakan kumpulan unsur desain yang bisa menjadi template.
Elemen dalam Atomic Design
Kamu telah memahami arti dari desain atomis. Nah, sekarang, bagaimana teknis penerapannya?
Ingat, dengan metode ini, kamu dituntut mendesain dari komponen terkecil. Uniknya, nama komponennya diambil dari istilah-istilah kimia.
Tak sekadar memakai istilah asing saja, lho. Makna istilah yang digunakan juga selaras dengan makna komponen desain atomis itu sendiri.
Dirangkum dari UX Planet dan Adobe XD Ideas, inilah penjelasan lengkapnya:
1. Atom
© UXdesign.cc / © Brad Frost
Layaknya dunia kimia, komponen terkecil atomic design adalah atom itu sendiri. Bentuknya berupa tombol, input, label, dan lain-lain.
Ciri komponen ini adalah tidak bisa dipecah lagi. Jika diurai, fungsi dan maknanya akan rusak dan berbeda.
Salah satu contohnya adalah tombol pencari. Jika kamu membongkarnya menjadi tombol dan tulisan “search”, tentu makna keduanya akan berbeda.
2. Molekul
© UXdesign.cc / © Brad Frost
Jika beberapa atom dikumpulkan, mereka akan membentuk sebuah molekul. Nah, molekul ini punya fungsi khusus yang lebih lebar dari atom.
Misalnya, kamu menggabung atom tombol pencari dan input pencari. Semua itu akan membentuk fitur pencarian yang utuh.
3. Organisme
© UXdesign.cc / © Brad Frost
Organisme adalah kumpulan dari molekul. Misalnya, molekul fitur pencarian kamu tempel di header.
Selain itu, ada tombol navigasi dan logo di sana. Inilah yang membentuk suatu organisme.
Ia bukanlah hasil desain sempurna. Akan tetapi, kombinasi semuanya bisa digunakan ulang di banyak halaman.
4. Template
© UXdesign.cc / © Brad Frost
Dalam atomic design, template adalah gabungan dari beberapa organisme. Seperti namanya, ia merupakan cetak biru dari sebuah halaman web.
Cetak biru ini tentu bisa dimodifikasi. Ia sangat mirip dengan wireframe, ditampilkan berupa elemen dan belum punya data nyata.
5. Halaman
© UXdesign.cc / © Brad Frost
Halaman merupakan produk akhir dari desain atomis. Ia merupakan template yang diisi dengan data nyata.
Mengapa Atomic Design Penting?
© Freepik.com
Ada sederet alasan mengapa kamu harus menggunakan metode ini. Kata UX Collective, salah satu darinya adalah memudahkan style guideline.
Kamu pun tidak perlu kebingungan saat membuat halaman web. Sebab, semuanya sudah ada di satu dokumen khusus.
Ini jugalah yang mendorong desainmu jadi selaras. Semuanya diciptakan dari komponen terkecil, dilihat detail dari unsur-unsurnya.
Dengan alasan ini, atomic design adalah metode yang layak dipertimbangkan. Selain itu, masih ada alasan-alasan lain.
Tahap prototype pun bisa menjadi lebih cepat dan mudah. Ingat, kamu sudah punya banyak komponen atom, molekul, dan lain-lain.
Ambil saja semuanya, lantas tempelkan di prototipemu. Kamu tak perlu menciptakan semuanya dari nol.
Creative Bloq juga punya alasan tambahan. Desain atomis memudahkan developer menulis program dari produkmu.
Misalnya, kamu ingin membuat tombol merah di halaman A. Ternyata, tombol ini pernah digunakan di halaman B.
Developer tidak perlu membuatnya dari nol. Ia tinggal mencari, di mana halaman B, lantas meng-copy kode tombol merah dari sana.
Ternyata, atomic design adalah metode yang bisa mempermudah desainmu. Bagaimana? Apakah kamu tertarik menggunakannya?
Jika hatimu belum mantap, tenang saja, masih banyak teknik lain yang bisa permudah desainmu. Semuanya bisa kamu pelajari di Glints ExpertClass.
Glints ExpertClass adalah kelas yang membahas beragam industri pekerjaan. Dunia desain produk juga dikupas tuntas di sana, lho.
Pematerinya juga bukan sembarang orang. Mereka adalah para ahli yang sudah punya pengalaman tahunan.
Jadi, tunggu apa lagi? Ikut kelasnya sekarang, yuk!
