Media Pengembangan Web & App | by APPKEY

DesainDesign WebMengenal Atomic Design dalam Pengembangan Website

Mengenal Atomic Design dalam Pengembangan Website

-

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?

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.

Artikel Terkait  11 Tren Web Design dan UI Teratas yang Wajib diikuti di Tahun ini

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.

  1. 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.

Artikel Terkait  Interface Adalah? Simak Pengertian dan Contoh Lengkapnya

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.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Rekomendasi 10 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

7 Aplikasi Membuat Aplikasi Android Secara Offline

Aplikasi membuat aplikasi android saat ini banyak dicari penekun IT untuk membuat aplikasi Android secara offline tanpa harus menggunakan...

Domain Google? Apa Bedanya Dengan Domain Biasa?

Saat memutuskan untuk membuat website menjadi salah satu bentuk media digital marketing Anda dalam bersaing di zaman digital ini,...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya