Atomic Design
Helloow teman, jadi pada tulisan kali ini aku ingin sharing apa sih hubungan Atomic Design dengan UI KIT
Kita harus tau dulu pengertian dari Atomic Design,
Apa itu Atomic Desain?
Atomic Desain yang dibuat oleh Brad Frost adalah salah satu metodelogi yang dapat digunakan untuk mempercepat proses pembuatan modular desain. Konsep ini pertama kali dirilis 5 tahun lalu. Brad Frost dan Dave Olsen menyatakan untuk membuat system, tidak hanya sekedar laman.
Apa itu membuat Sistem, tak hanya halaman web?
Membangun sistem diartikan kita sebagai Desainer tak hanya memberikan tampilan desain final halaman kepada front end. Namun sejatinya dalam satu laman terdiri dari Button, ada juga komponen kecil seperi label, kotak, tabel, form dan halaman final tersebut adalah kombinasi dari unit-unit kecil tersebut.
Dalam atomic desain, metode ini membagi pembuatan tampilan desain sistem dalam lima tahapan, yaitu:
- Atom
- Molekul
- Organisme
- Template
- Pages/ Laman
Berikut penjelasannya :
- Atom
Dalam pembangunan web elemen-elemen kecil, atau modulnya disebut atom. Contoh kategori atom antara lain Warna, Typografi, Iconografi, Form, dan Button.
2. Molekul
Molekul memberikan fungsi dari atom. Molekul juga menjadikan kelompok atom tersebut diatas bersati menjadi unit dasar. Seperti misalnyamembuat molekul search. Molekul ini sebenarnya terdiri dari beberapa atom/modul dasar yaitu: form, icon dan typografi. Dengan menyatukan tiap atom ini, makan terciptalah form “search” yang dapat berfungsi.
Get Khairiyyahasna’s stories in your inbox
Join Medium for free to get updates from this writer.
Molekul “Search” pun memiliki tampilan berbeda saat aktif dan tidak aktif, saat aktif menggunakan atom color untuk font warna A dan tidak aktif warna B. Sistem ini saat disatukan akan memudahkan user untuk mengetahui mereka berada di tahapan mana dan berapa tahapan lagi yang mereka perlukan untuk mencapai informasi yang diinginkan. Tampilan ini juga memudahkan saat tampilan semakin rumit dan banyak molekul yg terkait satu dengan lainnya.
3. Organisme
Organisme adalah gabungan dari molekul yang disatukan dan membentuk bagian yang cukup kompleks dari suatu tampilan. Bagian organisme ini disebut juga segmen. Contohnya adalah “Header”, organisme header ini terdari dari molekul menu, search, button dan lainnya. Organisme mendemonstrasikan sebuah komponen yang kecil, mudah dan dapat diaplikasikan keberbagai halaman secara berulang. Dalam sudut pandang Front End, pembuatan organisme ini memudahkan mereka dalam membagi bagian pada HTML.
4. Template.
Template terdiri dari beberapa organisme yang disatukan bersama dan membuat sebuah Halaman. Pada tahap ini kita dapat melihat desain mulai terbentuk dan bagaimana layout bergerak. Misalnya saat di klik template ini alurnya kemana, saat kembali lagi bagaimana.
Kita juga membuat aturan desain dan membagi desain kedalam beberapa bagian. Perlu juga mendokumentasikan modul-modul yang telah dibuat atau membuat guideline yang mencakup Brand Color/Font Family.
5. Pages/Laman
Tahapan terakhir dari atomic desain adalah Laman/Pages. Seluruh template yang disatukan dengan konten aslinya disebut Halaman/Pages dari Website. Laman ini adalah berada pada level High Fidelity. Pages adalah template yang berisikan final aset seperti video, image, konten dan dengan terisinya konten, kita dapat mereview dan melakukan Quality Checking apabila dibutuhkan. Selain itu dengan mengetes dan mereview Halaman yang telah dibuat akan membuat kita mengetahui apakah desain sistem yang kita buat sudah efektif atau belum.
