Mengenal Atomic Design dalam Pengembangan Website

Last Updated on January 8, 2022 by

Salah satu konsep desain yang harus Anda pahami sebagai seorang designer web ataupun aplikasi adalah konsep Atomic Design. Atomic design system mengedepankan teknologi yang terinspirasi sistem kimiawi yang dimulai dari atom, kemudian molekul, hingga akhirnya menjadi organisme yang kompleks.

Atomic Design atau desain atom melibatkan pemecahan situs web menjadi komponen dasarnya dan kemudian bekerja dari sana untuk membuat situs. Di sini kami akan membahas lebih jauh tentang desain atom dan jika Anda tertarik, simak terus artikelnya sampai akhir.

Apa itu Atomic Design?

Sektor seperti arsitektur dan desain industri telah mengembangkan sistem modular cerdas untuk menciptakan objek yang sangat kompleks seperti pesawat terbang, kapal, dan gedung pencakar langit. Terinspirasi oleh ini, desain atom telah diusulkan sebagai sistem yang melibatkan pemisahan situs web dan aplikasi web.

Desain atom ini pun menjadi komponen dasarnya sehingga dapat digunakan kembali di seluruh situs. Karena perangkat baru dengan ukuran layar baru, yang dirilis setiap tahun, membuat desain dengan pixel sempurna menjadi lebih sulit jika tidak ada sistem yang diterapkan.

Komponen Atomic Design

Atomic Design, memperkenalkan metodologi untuk membuat sistem yang dapat diskalakan, komponen yang dapat digunakan kembali, serta sistem desain. Pada hari-hari awal web, kami memiliki ‘halaman’ terbatas yang tidak responsif atau skalabel. Ada lima tingkat berbeda dalam desain atom:

1. Atom – atom berguna mewakili entitas terkecil dalam elemen UI dan tidak dapat dipecah lebih jauh. Bayangkan desain Anda selayaknya sebuah balok Lego. Mereka berfungsi sebagai blok bangunan dasar antarmuka Anda. Beberapa contohnya adalah: animasi, warna, font dan gambar tunggal.
2. Molekul – molekul adalah kelompok atom yang terikat bersama yang memiliki sifat baru yang berbeda. Mereka membentuk elemen UI yang berfungsi bersama sebagai satu unit serta relative sederhana. Beberapa contohnya adalah : input pencarian, label formulir dan tombol.
3. Organisme – organisme dalam desain atom merupakan komponen user interface yang biasanya dibuat secara komples. Organisme ini terdiri dari kelompok molekul dan/atau atom. Sebagian besar organisme tidak bergantung pada elemen lain di halaman dan dapat berfungsi sendiri. Beberapa contohnya adalah: navigasi, side bar, formulir, dan lain sebagainya.
4. Template – template adalah halaman tanpa konten nyata dan mengartikulasikan struktur konten yang mendasari desain. Pada dasarnya, mereka menggabungkan organisme ke dalam tata letak situs web yang tepat. Sebuah template terdiri dari organisme dan molekul, dalam hal desain atom.
5. Halaman – halaman (pages) adalah contoh spesifik dari template yang menunjukkan tampilan akhir UI dan dengan konten representatif yang nyata.

Itulah bagian-bagian dari desain atom. Selanjutnya kita akan membahas tentang manfaat dari menggunakan Atomic Design System.

Manfaat Menggunakan Atomic Design System

Atomic Design System atau sistem desain atom memiliki beberapa manfaat ketika Anda menerapkannya dalam desain Anda. Berikut ini adalah manfaat yang akan Anda peroleh ketika menggunakan Atomic Design System.

1. Anda dapat melakukan mix and match komponen design Anda

Dengan memecah komponen menjadi atom dasar, mudah untuk melihat bagian situs mana yang dapat digunakan kembali, dan bagaimana mereka dapat dicampur dan dicocokkan untuk membentuk molekul lain atau bahkan membentuk organisme.

2. Membuat styling guide menjadi lebih mudah

Jika situs dibuat sesuai dengan prinsip Desain Atom sejak awal, semua atom dan molekul yang dibuat sebelum situs dibuat dapat berfungsi sebagai basic styling guide. Bahkan untuk situs yang belum dibangun secara atom, tidaklah sulit untuk memperkirakan komponen dasar dan menggabungkannya untuk membuat lebih banyak halaman.

Ingatlah, bagaimanapun, selalu yang terbaik untuk membuat situs secara atom dari awal, daripada mencoba memperkenalkan prinsip-prinsip Atomic Design ke situs nanti.

3. Layout yang mudah dipahami

Kode situs web yang dirancang secara atom biasanya lebih mudah dibaca daripada yang dibuat dengan cara yang lebih tradisional. Hal ini berlaku tidak hanya selama waktu pembuatan, tetapi di masa depan ketika sebuah situs sedang dilihat kembali untuk referensi atau tweak kecil.

Karena dokumentasi seputar molekul atom dan organisme apa yang digunakan dan di mana, mudah untuk melihat apa yang diwakili oleh setiap bagian kode. Bonus lain dari ini adalah membuatnya lebih mudah untuk menjelaskan basis kode kepada pengembang baru.

4. Kode lebih konsisten

Dengan Atomic Design, Anda menggunakan atom yang telah ditentukan sebelumnya untuk membuat tata letak situs, mudah untuk melihat komponen mana yang digunakan untuk berbagai bagian situs. Ini mengurangi kemungkinan penulisan kode duplikat.

Misalnya, jika seseorang membuat situs tanpa menggunakan Desain Atom dan mereka memerlukan, suatu tombol merah, mereka harus melihat seluruh situs untuk mencoba dan menemukan situs yang sudah ada.

Jika ini memang ada, mereka perlu menyalin dan menempelkan kode itu ke instance baru. Jika tidak ada tombol merah, mereka harus membuat yang baru. Namun, dengan Desain Atom, mudah untuk kembali ke daftar atom dan menemukan tombol merah yang tepat.

Ini menjadi proses yang jauh lebih mudah ketika library Pattern Lab dilibatkan. Pattern Lab adalah kumpulan alat yang membuat Atomic Design lebih mudah. Dalam contoh kami, ini akan menyediakan bilah pencarian untuk atom, membuatnya mudah untuk mencari dan menemukan tombol merah yang tepat.

5. Tidak fokus pada desain pixel-sempurna

Karena ide di balik Atomic Design adalah menggunakan atom sebagai blok bangunan untuk pembuatan situs, kecil kemungkinannya pengembang web akan membuat banyak atom untuk hal serupa. Sebagai gantinya, mereka dapat dengan mudah melihat daftar atom yang ada, dan mengubahnya untuk membuat atom baru jika diperlukan.

Contoh yang bagus untuk ini adalah untuk judul di situs. Katakanlah pembuat konten memiliki daftar judul yang digunakan untuk situs, semuanya berwarna hitam: header utama, sub-judul, dan judul paragraf. Mereka sudah lama tidak bekerja di situs dan perlu kembali ke situs untuk menambahkan judul biru baru. Mereka bisa melihat judul-judul yang sudah ada dan menyesuaikan salah satunya untuk mendapatkan hasil yang mereka inginkan.

6. Pembuatan prototipe lebih cepat

Memiliki daftar atom sebelum pembuatan situs dimulai berarti Anda dapat membuat tiruan halaman dengan cepat dan mudah. Anda hanya perlu memilih dan menggabungkan elemen yang diperlukan untuk halaman tersebut. Maket kemudian dapat disesuaikan dan disempurnakan untuk situs akhir.

7. Memperbarui dan menghapus bagian situs dengan lebih mudah

Karena hanya satu atom, molekul, atau organisme yang diubah pada satu waktu, mudah untuk memastikan bahwa pembaruan apa pun pada komponen dibawa ke semua instance lain di seluruh situs. Demikian pula, komponen yang tidak diinginkan dapat dengan mudah dihilangkan.

8. Lebih banyak struktur file modular

Meskipun Atomic Design system sangat lazim dalam hal markup (HTML), saya yakin teknik ini juga dapat digunakan untuk CSS, JavaScript, atau bahasa lain apa pun yang digunakan untuk membuat situs agar kode keseluruhan lebih modular dan dapat digunakan kembali.

9. Lebih sedikit komponen yng dibuat secara keseluruhan

Jika pembuat memiliki daftar atom, molekul, dan organisme yang disajikan kepada mereka sebelum pembuatan situs dimulai, mereka cenderung menggunakan apa yang sudah ada daripada membuat komponen baru untuk variasi kecil.

Jika judul dengan ukuran font 4.5em diperlukan untuk desain tetapi sudah ada judul ukuran 4em dari daftar atom, kemungkinan besar pencipta akan memilih yang 4em daripada membuat judul yang sama sekali baru. Ini akan menghasilkan lebih sedikit atom yang digunakan secara keseluruhan, membuat situs web lebih bersih dan lebih ramping.

Itulah penjelasan tentang Atomic Design system. Menggunakan konsep desain atom ini memang sangat memudahkan Anda, namun untuk mempelajarinya agar Anda bisa menerapkannya mungkin akan membutuhkan lebih banyak waktu.

Namun sekalinya Anda paham dan bisa membuatnya sendiri, maka akan mudah bagi Anda membuat desain website. Jika Anda tertarik untuk tahu lebih banyak informasi seputar teknologi dan pengembangan web, kunjungi situs Web App di https://appkey.id/ atau download aplikasinya sekarang juga di Google Play Store.