Design System

Apa itu Design System?

Design System merupakan dokumentasi dari sebuah desain yang terdiri dari komponen/ elemen yang bisa digunakan berulang kali, berstandar jelas, dan bisa di kombinasikan.

Design System berisikan identitas dari produk atau brand, principle dan best practice. Kemudian diturunkan dalam komponen-komponen interface yang biasa digunakan oleh desainer dalam merancang produk atau feature yang nantinya akan digunakan oleh user.

Design System penting untuk keperluan perancangan & pengembangan produk baik dari sisi desain maupun code programming. Selain itu, sesuai tujuannya design system menjadi begitu penting karena beberapa hal di bawah ini:

1. Menghilangkan inkonsistensi

Desain memerlukan konsistensi agar pengguna mengerti maksud desain yang kita buat dengan baik dan cepat. Nah, design system memberikan standar tertentu pada elemen-elemen dalam produk yang sedang dibuat. Sehingga, inkonsistensi dapat dihindari.

2. Mempercepat proses desain

Membuat sistem desain yang terpadu akan mempercepat proses desain sekaligus membantu membangun jembatan antara tim. Desain yang baik adalah sebuah bahasa, dan ketika semua orang berbicara dalam bahasa yang sama, saat itulah segala sesuatunya dilakukan dengan baik.

3. Mengurangi beban kognitif

Dengan menciptakan pengalaman yang konsisten bagi pengguna, kita dapat mengurangi beban kognitif mereka saat beralih dari pengalaman aplikasi seluler ke browser desktop.

Kapan kita harus menggunakan Design System?

1. Kompleksitas Projek

Apakah projek nya bersifat long term atau hanya sekedar explorasi belaka, harus ditentukan dari awal.

2. Berdasarkan Masalah

Apakah ketika mendesain menemukan masalah seperti di awal atau tidak?Jangan menggunakan design system hanya karena ingin terlihat “fancy” saja.

ATOMIC DESIGN

Atomic Design pertama kali diperkenalkan oleh Brad Frost, dia adalah seorang desainer web, seniman, pembicara, konsultan, dan musisi.

Atomic Design berasal dari dua kata yaitu Atom dan Design. Atom berarti suatu elemen terkecil dari suatu materi. Dan Design yang berarti sebuah architecture, atau juga disebut dengan seni kreatif.

Dalam konteks kali ini Atomic Design yaitu suatu metodologi/ metode cara membuat sebuah component yang mampu reusable dan independen yang dibagi berbagai modular-modular.

Kelebihan menggunakan Atomic Design

1. Design jadi lebih konsisten
2. Implementasi Design Guideline jadi lebih mudah
3. Proses perbaikan komponen jadi lebih mudah, karena langsung spesifik di komponen tersebut.
4. Komponen mampu digunakan beberapa kali (reusable)
5. Clean code

Konsep atomic design ini tidak hanya berlaku/ bisa digunakan oleh UI/UX dan Front End Engineer saja, tapi bisa diimplementasikan oleh siapapun. Karena Atomic Design ini hanya sebuah konsep/ metodologi saja. Misal seorang Mobile Engineer, Android Engineer, Database Engineer, dll.

Get Alfathya gya’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Secara garis besar, Atomic Design dibagi menjadi 5 bagian, yaitu: atom, molecule, organism, template,dan page.

1. Atom

Atom yang dimaksud adalah, elemen terkecil dalam desain dan tidak bisa dipecah lagi menjadi elemen lain. Sebagai contoh jika kita membuat komponen seperti; Input, Text, Button, Image, Icon, dll.

Intinya di level atom ini komponen nya adalah yang paling dasar dan common (sering digunakan) dan juga tidak memerlukan custom banyak dalam pembuatan komponen nya.

2. Molecule

Molecule adalah kumpulan dari berbagai komponen atom, dan biasanya ada fungsi/ action yang timbul dalam penggunaannya. Ada beberapa contoh komponen yang termasuk dalam kategori molecule, misal: Search Input, Login Input, Checkbox, dll.

contoh:

Berdasarkan gambar tersebut terdapat beberapa elemen atom, yaitu Button sebagai komponen utamanya, dan terdapat juga Icon dan Text yang berasal dari komponen Atom juga.

3. Organism

Organisme yaitu kumpulan dari beberapa komponen molecule, tapi tidak menutup kemungkinan campuran dari komponen atom dan molecule. Pada modul ini komponen sudah mulai kompleks. Komponen yang termasuk dalam kategori organisme yaitu Header, Product Card, Footer, Bottom Navigation, dll.

4. Template

Template memiliki arti yaitu pola atau tatanan yang dibuat untuk mempermudahkan pembuatan selanjutnya, tanpa mengulang lagi. Dan template merupakan komponen utama yang membangun sebuah halaman. Dalam Atomic Design Template sebagai wadah sebuah konten halaman.

5. Page

Pengertian secara singkat:

1. Atom adalah elemen UI yang tidak dapat dipecah lebih jauh dan berfungsi sebagai blok pembangun elemen antarmuka.
2. Molekul adalah kumpulan atom yang membentuk komponen UI yang relatif sederhana.
3. Organisme adalah komponen yang relatif kompleks yang membentuk bagian-bagian terpisah dari sebuah antarmuka.
4. Template menempatkan komponen dalam tata letak dan mendemonstrasikan struktur konten yang mendasari desain.
5. Pages menerapkan konten nya ke template dan mengartikulasikan variasi untuk mendemonstrasikan UI akhir dan menguji ketahanan sistem desain.