Komponen Serta Manfaat Penggunaan Atomic Design System

Di artikel kali ini kita akan membahas lebih jauh tentang desain atom atau Atomic Design termasuk komponen dan manfaat penggunaannya.

Pengertian Atomic Design

Salah satu konsep desain yang harus dipahami sebagai seorang designer web atau aplikasi yakni konsep Atomic Design yang mengedepankan teknologi yang terinspirasi sistem kimiawi dimulai dari atom kemudian molekul hingga akhirnya menjadi organisme kompleks.Atomic Design atau desain atom melibatkan pemecahan situs web menjadi komponen dasarnya dan kemudian bekerja dari sana untuk membuat situs.

Sektor seperti arsitektur dan desain industri sudah mengembangkan sistem modular cerdas untuk menciptakan objek yang sangat kompleks seperti pesawat terbang,kapal dan gedung pencakar langit.Terinspirasi oleh ini,desain atom sudah 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 5 tingkat berbeda dalam desain atom :

1. Atom berguna mewakili entitas terkecil dalam elemen UI dan tidak dapat dipecah lebih jauh.Misalnya desain kalian layaknya sebuah balok Lego.Mereka berfungsi sebagai blok bangunan dasar antarmuka kalian.Beberapa contohnya adalah : animasi,warna,font dan gambar tunggal.
2. Molekul adalah kelompok atom yang terikat bersama memiliki sifat baru yang berbeda.Mereka membentuk elemen UI yang berfungsi bersama sebagai satu unit serta relative sederhana.Beberapa contohnya : input pencarian,label formulir dan tombol.
3. 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 : navigasi,side bar,formulir dan lainnya.
4. 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 adalah contoh spesifik dari template yang menunjukkan tampilan akhir UI dan dengan konten representatif yang nyata.

Jadi,itulah bagian-bagian dari desain atom.

Manfaat Penggunaan Atomic Design System

Atomic Design System atau sistem desain atom memiliki beberapa manfaat ketika kalian menerapkannya dalam desain kalian.Berikut ini manfaat yang diperoleh ketika menggunakan Atomic Design System.

1.Dapat melakukan mix and match komponen design

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.Ladyout 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,kalian 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.Misal,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 sesuai.

Ini menjadi proses yang jauh lebih mudah ketika library Pattern Lab dilibatkan.Pattern Lab adalah kumpulan alat yang membuat Atomic Design lebih mudah.Pada contoh 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 yakni menggunakan atom sebagai blok bangunan untuk pembuatan situs,kecil kemungkinannya pengembang web 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 untuk ini yakni Judul di situs.Jadi 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 dapat 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 kalian dapat membuat tiruan halaman dengan cepat dan mudah.Kalian 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 apapun pada komponen dibawa ke semua instance lain di seluruh situs,Begitu juga,komponen yang tidak diinginkan dapat mudah untuk dihilangkan.

8.Lebih banyak struktur file modular

Atomic Design system memang sangat lazim dalam hal markup (HTML).Jadi,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.Sedikit komponen 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 dan 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 ramping dan bersih.

Demikian artikel pembahasan tentang Atomic Design System.Menggunakan konsep desain atom ini memang sangat memudahkan kalian,namun untuk mempelajarinya agar kalian bisa menerapkannya mungkin akan membutuhkan lebih banyak waktu.Jika kalian sudah paham dan bisa membuatnya sendiri,maka mudah untuk membuat desain website.