fbpx

Mengenal Atomic Design dan Penerapannya

Atomic Design | Featured
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

Secara teori, design system merupakan sekumpulan komponen berupa tipografi, layout, bentuk, serta warna yang bekerja sama membentuk suatu sistem. Sistem inilah yang menjadi identitas sebuah brand atau produk. Sebuah design system yang baik dapat memberikan pengalaman yang baik bagi penggunanya.

Contoh paling mudah yang bisa kamu temukan adalah design system milik Google. Mungkin kamu tidak menyadarinya, tapi pernahkah terpikirkan oleh kamu setiap kali menggunakan produk Google baik itu Maps, Search, hingga YouTube, semua produk tersebut terasa familier?

Setiap kali Google meluncurkan produk baru, mungkin yang pertama kali muncul di benakmu adalah, “produk ini Google banget deh!” Semua proses dan elemen yang ada di produk tersebut mulai dari login, navigasi, warna, dan layout yang digunakan tidak terasa asing seakan-akan kamu telah menggunakannya sedari dulu. Mengapa bisa demikian?

Itulah kekuatan sebuah design system. Sebuah konsep yang mengatur bagaimana setiap komponen bekerja membentuk pengalaman yang kohesif bagi setiap pengguna. Tidak hanya berhenti pada elemen yang terlihat saja, design system mencakup elemen abstrak seperti alur pengguna, konten, tone of voice, serta padanan kata juga berperan besar dalam sistem tersebut.

Berawal dari sebuah “atom”

Atomic Design Illustration

Salah satu pendekatan design system yang baik menurut saya dimiliki oleh Brad Forst yang menulis sebuah buku berjudul Atomic Design. Frost mengatakan bahwa dalam merancang sebuah design system, seorang desainer UI perlu melihat segala sesuatu dari perspektif berbeda.

Atomic Design merupakan metodologi perancangan yang mengambil inspirasi dari bagaimana sebuah elemen atom membentuk molekul yang lebih kompleks hingga membentuk suatu organisme. Setiap antarmuka halaman situs, tutur Frost, sejatinya terbentuk dari berbagai komponen dasar, sebagaimana atom membentuk makhluk kompleks seperti manusia. Jadi, dalam penerapan Atomic Design, seorang desainer UI harus membangun komponen dasarnya terlebih dahulu.

Atomic Design Atom

Atomic Design terdiri dari lima tingkatan. Level pertama diwakili dengan kelompok Atom, yaitu elemen dasar pembentuk seluruh sistem. Atom terdiri dari tag HTML yang biasa digunakan, seperti label, tombol, dan form. Bisa juga berupa elemen abstrak seperti palet warna dan font yang digunakan.

Konsep atom yang cukup abstrak tiba-tiba berubah di level kedua. Molecule, seperti halnya dalam pelajaran kimia, merupakan badan yang terdiri dari sekumpulan atom. Dalam design system, molekul membentuk sebuah kesatuan fungsi sederhana, misalnya sebuah search bar.

Atomic Design Molecule
Atomic Design Organism

Dalam level selanjutnya, Kumpulan Molecule yang berkaitan akan membentuk Organism, dan kelompok ini mulai tampak seperti sebuah design system yang seutuhnya. Contoh dari Organism adalah header bar yang terdiri dari daftar menu, search bar, dan tombol login.

Dari tahap ini, Atomic Design mulai keluar dari istilah kimia. Template merupakan kumpulan Organism yang disatukan nantinya menjadi sebuah halaman website. Namun dalam tahapan Template, kamu hanya akan menemukan wireframe HTML.

Pada akhirnya, wireframe yang dimiliki perlahan-lahan berubah menjadi Page yang seutuhnya ketika semua komponen telah selesai dikerjakan. Inilah antarmuka final yang akan dilihat oleh pengguna nantinya. Tahapan merancang elemen Page sangatlah penting demi mengecek apakah setiap komponen mulai dari Atom, Molecule, hingga Organism berfungsi secara normal.

Atomic Design Template

Aplikasi perancangan UI seperti Sketch dan Figma memiliki fitur Components yang dapat memudahkan kamu menerapkan metodologi Atomic Design dalam proyekmu. Di lain kesempatan, saya akan membahas cara menggunakan fitur ini demi mempercepat proses kerjamu.

Pengen jago gambar ilustrasi flat design? Yuk belajar bareng Vektoria!

Belajar pemahaman dasar aplikasi desain grafis, sampe mulai menggambar ilustrasi pertama kamu, semua diajarin di kelas online Vektoria.

BELAJARKUY

Gunakan voucher di atas pada saat checkout dan dapatkan diskon tambahan Rp100 ribu untuk pembelian kelas pertamamu di Vektoria.