Konsep Desain Web Atomic Design


Konsep Desain Web Atomic Design

Atomic Design adalah pendekatan desain web yang dikembangkan oleh Brad Frost. Ini didasarkan pada gagasan bahwa sistem desain mirip dengan unsur-unsur kimia. Keuntungan dari metode desain ini adalah bahwa elemen yang berbeda dapat digunakan beberapa kali dan desain web dapat dengan mudah dimodifikasi.

Latar Belakang Atomic Design

Nama dan konsep “Atomic Design” disajikan oleh Brad Frost. Dia mempresentasikan konsep desain pada 2013 dengan tujuan memberikan desain web pendekatan metodis.

     

Frost mendapat inspirasinya dari kimia. Atom adalah unit terkecil yang membentuk dunia kita. Beberapa atom membentuk molekul, yang pada gilirannya dapat digabungkan menjadi unit dan organisme yang lebih besar. Frost mengadopsi struktur ini untuk pendekatannya pada Atomic Design.

Struktur Atomic Design

Atomic Design terdiri dari lima elemen yang saling membangun: atom, molekul, organisme, templat dan halaman.

Atom: Atom adalah elemen dasar yang penting dalam konsep desain ini. Berkenaan dengan aplikasi web, atom adalah tag HTML, misalnya. Atom juga dapat mengandung elemen abstrak lainnya seperti palet warna, font atau animasi. Atomic Design dicirikan oleh fakta bahwa mereka masih cukup abstrak, dan mereka sendiri tidak memiliki kegunaan nyata. Seperti “atom” dalam desain web bisa menjadi tombol atau bidang input.

Molekul: Molekul terdiri dari kombinasi berbagai atom. Molekul dalam arti Atomic Design adalah unit dasar terkecil yang mungkin dari kombinasi atom yang berbeda. Sebagai contoh, beberapa atom dapat menjadi bentuk pencarian untuk situs web hestanto.web.id. Molekul bisa sangat kompleks. Namun, pembagian ke dalam atom membuat kompleksitas lebih mudah ditangani.

Organisme: Molekul yang berbeda dapat dikombinasikan dengan “organisme” dalam Atomic Design. Dengan cara ini, fungsi dan tampilan situs web dapat ditentukan. Karena pengaturan molekul yang berbeda, rancangan desain dapat dengan cepat disesuaikan dengan kebutuhan pengguna atau pelanggan terlepas dari semua kerumitannya. Organisme dapat terdiri dari logo, navigasi utama, bidang pencarian, dan daftar. Sebagai contoh, suatu organisme dapat dikembangkan sebagai dasar untuk banyak subhalaman yang berbeda. Dengan hanya mengubah molekul individu, organisme baru dapat dibentuk, yang kemudian dapat digunakan, misalnya untuk halaman produk.

Template: Template dibuat dengan merakit dan membentuk organisme. Pada titik ini Brad Frost juga meninggalkan analogi dengan kimia. Baginya, istilah “template” pada akhirnya lebih masuk akal, karena lebih mudah dipahami oleh pelanggan. Template adalah hasil konkret pertama dari proses desain web untuk Frost. Ini menyediakan hubungan antara unsur-unsur yang semula masih abstrak (atom, molekul).

Halaman: “Halaman” digunakan untuk mengisi kerangka dasar situs web dengan konten tertentu. Tempat penampung yang mungkin diganti oleh konten individu. Untuk Brad Frost, tahap terakhir menentukan seberapa efektif rancangan atau sistem desain. Akibatnya, pengembang web dapat kembali satu langkah untuk menyesuaikan molekul, organisme, atau template, misalnya untuk meningkatkan kenyamanan pengguna situs web.

Keuntungan Atomic Design

Atomic Design memiliki banyak kelebihan. Ini termasuk:

Reusability: Jika sebuah atom dibuat, ia dapat dengan mudah digunakan kembali nanti untuk desain lain. Definisi baru tidak diperlukan. Ini berarti pengembang web dapat menghemat waktu yang dapat mengurangi biaya untuk klien. Selain itu, rancangan desain baru mungkin lebih cepat karena struktur modular.
Keseragaman: Melalui pengembangan draf desain yang berurutan, keseragaman yang lebih tinggi dapat dicapai. Semakin tinggi level dalam konsep desain, semakin sedikit upaya yang diperlukan untuk mencapai perubahan.
Extensibility: Keuntungan terbesar adalah perpanjangan sederhana dari sistem yang ada. Dengan cara ini, atom atau molekul baru dapat disisipkan tanpa harus memprogram ulang atau mengembangkan struktur yang lengkap. Juga dimungkinkan untuk menggabungkan kembali molekul atau organisme yang ada.
Penanganan: Bahkan sistem yang kompleks dapat ditelusuri lebih mudah berkat struktur desain metodis. Kode sumber biasanya lebih logis, membuatnya lebih mudah untuk melakukan perubahan. Pengembang dapat mengidentifikasi segmen kode lebih cepat.

Catatan

Ada kritik yang melihat Atomic Design hanya sebagai sistem lama dengan tampilan baru, karena desain web secara alami telah dibagi menjadi template, blok fungsi atau tata letak. Selain itu, Desain Web Responsif modern atau Peningkatan Progresif mengikuti aturan serupa, sehingga pengembang dan desainer web saat ini tidak mendesain situs web secara acak tetapi dengan cara yang terstruktur.

Postingan Terkait :

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

91 − 85 =