ATOMIC DESIGN:

Hello good people.

Kita pasti pernah duduk di bangku sekolahan. Belajar dan mengenal banyak hal, dari yang terkecil hingga terbesar. Kita tentu pernah belajar fisika, atau kimia, atau lebih umumnya Ilmu Pengetahuan Alam. Mungkin kita ingat dengan salah satu materi di pelajaran kimia atau fisika, bisa dibilang materi tentang ATOM. Ya benar sekali atom, sesuatu yang kita kenal sebagai bagian terkecil dari suatu materi. Lalu, dari atom-atom tadi akan membentuk molekul dan seterusnya.

Illustrati tentang atom di kimia. (sumber: http://atomicdesign.bradfrost.com/images/content/chemical-equation.png)

Tapi kali ini kita tidak akan membahas tentang materi atom di ilmu alam, tapi kita akan sedikit mengusik tentang materi atom di ilmu desain. Dalam ilmu desain atom atau istilah lainnya Atomic Design cetusan dari Brad Frost, seorang desainer web, seniman, pembicara, konsultan, dan musisi yang bertempat tinggal di negri Paman Sam. Ia berkata bahwa dalam desain juga mengenal tentang atom, bagian-bagian terkecil dalam desain. Ia juga berkata bahwa atomic design ini adalah sebuah methodology, atau metode. Metode untuk apa? Metode untuk pembuatan desain sistem. Apalagi itu desain sistem? Mungkin kalian akan bertanya-tanya juga tentang itu. Okelah, singkatnya desain sistem ini adalah sebuah standar dalam pembuatan desain, seperti halnya sebuah aturan baku, root, base, parent, atau apapun yang berkaitan tentang standar dasar sebuah desain yang tentunya tersistem. Kembali lagi pada atomic design, jadi kita mungkin bertanya-tanya seperti apa sih atomic design itu? Mari kita lihat di paragraf selanjutnya.

Illustrasi tentang proses atomic design (sumber : http://atomicdesign.bradfrost.com/images/content/atomic-design-process.png)

Oke, atomic design.Pada illustrasi diatas bisa dilihat bahwa proses yang ada adalah atom, molekul, organisme, layout, dan page. Tapi sekarang mari kita review sedikit tentang ilmu alam bahwa atom adalah bagian terkencil dari suatu materi. Maka jika kita melihat atom dari sisi desain, atom ini adalah bagian terkecil dari suatu desain. Mungkin kita bisa ambil contoh desain website, sebuah UI (User Interface). Lalu, apa bagian terkecilnya?

ATOM

Atom (sumber: http://atomicdesign.bradfrost.com/images/content/atomic-design-atoms.png)

Atom adalah bagian terkecil dari suatu materi. Pada atomic design atom ini berperan dalam perincian dan penyestrukturan dari desain UI tersbut. (Oh iya desain ui ini kita lihat desain UI yang umum. Tidak spesifik pada website atau mobile, namun jika pada illustrasinya seperti menjurus pada 1 bidang, itu hanya sebagai illustrasi saja, karena walau berbeda tetap satu jua). Oke back to the topic, atom pada desain ini berkaitan pada label (teks), shape, button, (mungkin juga hal yang lebih mendasar) warna.

Atom pada desain UI (sumber: http://atomicdesign.bradfrost.com/images/content/atoms-form-elements.png)

MOLEKUL

Molekul (sumber: http://atomicdesign.bradfrost.com/images/content/atomic-design-molecules.png)

Oke sekarang molekul, molekul ini adalah gabungan dari atomic atomic kecil yang menjadi 1 kesatuan fungsi. Contohnya sebuah label dan sebuah input dan juga sebuah tombol. Yang jika digabung dapat menjalankan 1 fungsi.

Molekul pada desain UI (sumber: http://atomicdesign.bradfrost.com/images/content/molecule-search-form.png)

ORGANISME

Organiemse ( sumber: http://atomicdesign.bradfrost.com/images/content/atomic-design-organisms.png)

Organisme disini adalah penggabungan dari atom dan molekul yang berbeda fungsi tapi masih pada petak yang sama. Misalkan pada navbar, disana umumnya ada beberapa label, 1 input, dan beberapa button. Meskipun mereka semua tidak 1 fungsi tapi mereka pada petak yang sama yaitu pada navbar. Jadi organisme ini lebih ke pemetaan dan pengelompokan dari atom-atom dan molekul-molekul yang berada pada 1 bagian.

Salah satu contoh dari organisme (sumber: http://atomicdesign.bradfrost.com/images/content/organisms-product-grid.png)

TEMPLATE

Template (sumber: http://atomicdesign.bradfrost.com/images/content/atomic-design-templates.png)

Susunan-susunan dari organisme-organisme yang berada pada 1 halaman akan membentuk sebuah halaman utuh. Namun sebelum menjadi halaman yang utuh perlu adanya penataan organisme-organisme tadi pada sebuah layout. Pada layout ini kita tidak melihat bagaimana warna dari atom-atom tadi, bentuk rincinya seperti apa, maupun bagaimana ukuran pasti dari atom tadi. Tapi kita lebih ke arah letak dan posisi serta komposisi-komposisi dari atom, molekul, dan organisme tadi supaya membentuk sebuah halaman yang padu.

Template (sumber: http://atomicdesign.bradfrost.com/images/content/template-timeinc-homepage.png)

PAGES

Page atau yang Bahasa Indonesianya adalah halaman, disini memiliki arti dan makna utama adalah apa yang menampung semua organisme-organisme tadi sehingga bisa ditampilkan dan menyajikan konten-konten dari pemilik web tersebut. Halaman disini lebih seperti pemantapan dari template yang sudah ada. Baik dari segi warna, ukuran, font, konten, dan gambar-gambar pendukung.

Contoh dari page (sumber: http://atomicdesign.bradfrost.com/images/content/page-timeinc-homepage.png)

Oke secara sekilas kita sudah sedikit mengetahui dasar-dasar metodoe atomic design dari sisi definitifnya. Seperti apakah itu atom, molekul, hingga apa itu halaman. Lalu apasih kegunaan dan manfaat-manfaat dari penggunaan atomic design ini?

Hal mendasar yang menjadi keuntungan ketika kita menggunakan metode ini diantaranya adalah

  1. Kemudahan untuk memenejemen aplikasi kita. Ketika kita menggunakan metode dan kaidah dari atomic design ini kita mudah untuk berkelana dari komponen abstrak menjadi sesuatu yang lebih terkonsentrasi dan berarti. Dari komponen atom seperti label, button, dan input yang tidak memiliki arti maupun fungsi apapun dapat digabungkan menjadi tingkatan yang lebih tinggi hingga tersusun menjadi sebuah halaman yang lebih terkonsentrasi pada fungsi-fungsi nyata dan memiliki arti.
  2. Memudahkan untuk melihat mana yang menjadi sebuah struktur, mana yang menjadi isi dari konten. Karena bagian bagian dari halaman tersebut sebelumnya adalah bagian yang lebih kecil, yang disusun dan ditata sedemikian rupa tentu kita bisa dengan sangat mudah untuk mengetahui mana yang menjadi struktur atau bahan dasar dan mana yang menjadi konten maupun isi dari halaman.

Intinya, manfaat dari penggunaan atomic design ini adalah kemudahan yang bisa kita dapat ketika sudah dapat membagi sebuah halaman utuh menjadi bagian-bagian terkecil yang dapat diatur sedemikian rupa.

Namun atomic design juga tidak berhenti hanya berperan dalam pembuatan website namun juga bisa digunakan dalam berbagai pembuatan UI, baik mobile, desktop, maupun yang lain.

Sekian pembahasan singkatku dengan atomic design yang bisa aku utarakan. Kalo ada yang salah-salah dan kurang pas terkait artikel diatas aku mohon maaf yaa :D.

Untuk itu aku sertakan sumber utama dari artikel ini, ya walaupun ini artikel lebih dari pemahamanku pribadi tapi aku sertakan aja sumber artikel dan sumber pemahamanku dari artikel yang dituliskan oleh Brad Frost.

Sumber : http://atomicdesign.bradfrost.com/chapter-2/

Terimakasih sudah membaca :D

Keep unch and syalalala.