FAUZIDLEWARE - Dunia arsitektur atau desain industri telah mengembangkan sistem modular cerdas untuk memproduksi objek yang sangat kompleks seperti pesawat terbang, kapal laut, dan gedung pencakar langit.
Terinspirasi dari hal tersebut, atomic deisgn diusulkan sebagai sistem yang melibatkan untuk penguraian bagian website atau aplikasi web menjad komponen dasarnya sehingga bisa digunakan kembali pada seluruh situs. Karena device yang dirilis setiap tahun memiliki ukuran layar yang berbeda-beda, maka desain sulit menyesuaikan jika tidak ada sistem yang diterapkan.
Brad Frost menciptakan istilah dan metodologi atomic design untuk mengatasi masalah tersebut. Penulis buku atomic design ini mengatakan bahwa:
"Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time."
"Desain atom bukanlah proses linier, melainkan model mental yang membantu kita memikirkan antarmuka pengguna sebagai keseluruhan yang kohesif dan kumpulan bagian-bagian pada saat yang bersamaan."
 |
| Gambar: Brad Frost |
Dari beberapa hal di atas, kita simpulkan 4 hal dari atomic design sehingga sebagai desainer bisa mengambil manfaat dari metode tersebut:
- Definition of Atomic Design
- Atomic Design and Interface Inventory
- Atomic Design and Design Systems
- Benefits of Atomic Design
Definition of Atomic Design
Atomic design memperkenalkan metodologi untuk membuat sistem yang bisa diskalakan dan komponennya bisa digunakan kembali. Ada 5 tingkatan berbeda dalam atomic design:
 |
| Gambar: 5 tingkatan atomic design |
Atom mewakili entitas terkecil dan tidak bisa dipecah lagi. Contohnya warna, font, animasi, dan gambar.
 |
| Gambar: komponen label, form input, tombol yang merupakan contoh elemen atom dalam atomic design |
Baca juga: Bagaimana Cara Memulai Untuk Menjadi Seorang Web Developer ?
Molecules merupakan kelompok atom yang terikan bersama dan mempunyai sifat baru yang berbeda. Mereka membentuk elemen UI yang relatif sederhana dan berfungsi bersama sebagai satu kesatuan. Contohnya label, pencarian, dan tombol yang dijadikan satu fungsi.
 |
| Gambar: komponen yang membentuk molekul dalam bagian atomic design |
Organisms adalah komponen UI yang relatif kompleks, terdiri dari kelompok molekul atau atom. Sebagian besar organisms dapat berfungsi sendiri tanpa bergantung pada elemen lain di halaman tersebut. Contohnya navigasi, sidebar, formulir, dan pop up.
 |
| Gambar: navigasi adalah contoh organisms karena terdiri dari kumpulan molecules dan atom |
Templates metupakan halaman tanpa konten nyata dan merupakan struktur dasar desain. Pada dasarnya mereka membentuk organisms dalam tata letak halaman web.
 |
| Gambar: contoh bentuk templates |
Pages bagian akhir dari urutan atomic design yang berisi tata letak dari templates dengan beberapa konten di dalamnya.
 |
| Gambar: pages yang merupakan templates dengan beberapa konten |
Atomic Design and Interface Inventory
Bagaimana atomic design dan interface inventory bisa saling bekerja ?. Mari kita bahas salah satu masalah terbesar dari product development, yaitu kurangnya konsistensi desain. Kita bisa memanfaaatkan atomic design untuk mencegah ketidak konsistenan. Bahasa umum ini disebut interface inventory. Kita bisa membayangkan sebagai kotak yang tertata rapi dan berisi semua bagian produk kita.
Brad Frost mendefinisikan interface inventory sebagai
"a comprehensive collection of the bits and pieces that make up your interface."
"kumpulan lengkap potongan-potongan yang membentuk antarmuka Anda."
Hal ini bisa membuat semua orang dapat berpartisipasi dalam proyek sambil menjaga elemen tetap konsisten dan berkualitas.
Atomic Design and Design Systems
Apa bedanya design system dan interface inventory ?.
Definisi dari Audrey Hacq mengatakan
"A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product."
"Deisgn system adalah satu-satunya sumber yang mengelompokkan semua elemen yang memungkinkan tim merancang, merealisasikan, dan mengembangkan suatu produk."
Jadi apa bedanya dengan interface inventory?. Interface inventory menampilkan status kehidupan suatu produk. Sebagai perbandingan, design system terus berkembang dan bertindak sebagai satu-satunya sumber bagi setiap anggota tim produk. Tujuan mendasarnya adalah untuk memfasilitasi pekerjaan semua tim yang terlibat mulai dari tim desain hingga tim pengembangan.
Namun, interface inventory yang terdefinisi dengan baik dan terdokumentasi dapat menjadi titik awal yang baik untuk membuat sistem desain.
Baca juga: Kenapa Masih Menggunakan Bahasa PHP Untuk Web Development ?
Benefits of Atomic Design
Building a component-based system : Saat kita memecah komponen menjadi bagian atom dalam atomic design, akan lebih mudah untuk melihat komponen apa yang dapat digabungkan atau dicampur dan dicocokkan untuk membentuk molecules atau organismns lain. Ini membantu kita menavigasi antara bagian atom dan keseluruhan UI kita.
Style guide creation becomes simple : Dengan menerapkan prinsip atomic design sejak awal, yang berarti bahwa semua atom dan molecules dibuat sebelum website atau aplikasi dibangun, Kita dapat menggabungkan semua atom dan molecules ke dalam panduan style kita. Ini menjaga desain tetap konsisten di seluruh platform.
Easy-to-read code that is more consistent : Kode website yang dirancang secara 'atom' biasanya lebih mudah dibaca dibandingkan kode yang dibuat dengan cara yang lebih tradisional. Konsistensi diberikan saat menggunakan atom yang telah ditentukan sebelumnya untuk membuat tata letak website. Ini memudahkan untuk melihat komponen mana yang digunakan untuk berbagai bagian website. Hal ini mengurangi kecenderungan duplikat kode.
Faster Prototyping and updating : Dengan memiliki daftar atom yang ditentukan sebelum proses pembuatan dimulai berarti dapat membuat halaman tiruan dengan cepat dan mudah. Kita cukup memilih dan menggabungkan elemen yang diperlukan untuk website tersebut. Jika pembaruan diperlukan, hanya satu atom, molekul, atau organisme yang diubah dalam satu waktu. Hal ini menyederhanakan pembaruan apa pun pada komponen yang dilakukan di semua instans lainnya.
Atomic design mungkin memakan waktu, namun seluruh tim dapat memperoleh manfaat dari kelebihannya.
Sumber:
0 Comments