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

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

Atomic Design Atom

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

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.

Atomic Design Organism

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.

Atomic Design Template

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.

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.

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

Kelas Online Ilustrasi Flat Design dengan Figma

Kelas Figma Batch #1 akan diadakan secara online pada hari Sabtu, 13 Juni 2020 secara virtual dengan Google Meet. Kelas terbatas untuk 20 orang saja

Baca juga yang lainnya

One thought on “Mengenal Design System dan Penerapan Atomic Design dalam Mendesain Produk”

Leave a Reply

Your email address will not be published. Required fields are marked *

© 2020 vektoria.id - All Rights Reserved.