Atomic Design, Konsep Desain Produk Lewat Unsur Kimia

Diperbarui 06 Jan 2021 - Dibaca 9 mnt

Isi Artikel

    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!

    Apa Itu Atomic Design?

    atomic design uxdesign cc brad frost

    © 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.

    Baca Juga: 9 Pertanyaan Wawancara Khusu UX Designer dan Strategi Menjawabnya

    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

    atom di atomic design uxdesign cc brad frost

    © 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

    molekul di atomic design uxdesign cc brad frost

    © 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

    organisme di atomic design uxdesign cc brad frost

    © 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

    template di atomic design uxdesign cc brad frost

    © 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.

    Baca Juga: Ingin Membuat Mockup Desain? Ketahui 10 Aplikasi Ini!

    5. Halaman

    halaman di atomic design uxdesign cc brad frost

    © UXdesign.cc / © Brad Frost

    Halaman merupakan produk akhir dari desain atomis. Ia merupakan template yang diisi dengan data nyata.

    Mengapa Atomic Design Penting?

    menabung vs investasi

    © 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.

    Baca Juga: Tips Belajar UI UX Design yang Harus Diketahui oleh Pemula

    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!

    Seberapa bermanfaat artikel ini?

    Klik salah satu bintang untuk menilai.

    Nilai rata-rata 5 / 5. Jumlah vote: 1

    Belum ada penilaian, jadi yang pertama menilai artikel ini.

    We are sorry that this post was not useful for you!

    Let us improve this post!

    Tell us how we can improve this post?


    Comments are closed.

    Artikel Terkait