Pada hari-hari awal web, produk dan aplikasi dilihat hanya sebagai kumpulan halaman individual, masing-masing dengan tujuan dan serangkaian komponennya sendiri yang sesuai. Hampir setiap layar akan memiliki elemen unik yang berakhir dengan desainnya yang tidak konsisten dan tidak intuitif.
Inilah sebabnya mengapa sistem desain diperkenalkan.
Singkatnya, sistem desain adalah kumpulan komponen yang dapat digunakan kembali yang dapat dibangun bersama untuk membuat produk digital apa pun.
Ada banyak cara berbeda untuk mendekati penciptaan sistem desain. Desain atom adalah salah satu metodologi untuk mengatur sistem desain yang membantu membuat kehidupan desainer dan pengembang lebih mudah dan alur kerja mereka jauh lebih efisien.
Pengertian Sistem Desain Atom
Brad Frost memperkenalkan metodologi modular ini untuk membangun pustaka pola yang sederhana dan dapat dipelihara dengan membangun komponen yang lebih besar dan lebih kompleks dari yang lebih kecil, dan lebih sederhana.
Metodologi desain atom memiliki lima tahap, yang masing-masing penting dalam hierarki sistem desain apa pun:
Atom
Molekul
Organisme
Template
Halaman
Tahapan Sistem Desain Atom
Atom
Atom mewakili elemen antarmuka yang paling dasar. Mereka adalah fondasi dan struktur pendukung antarmuka. Beberapa contoh: Tombol, ikon, gaya teks, palet warna, dll. Anggap saja mereka seperti potongan lego, tidak ada cara untuk memecah atom lebih jauh.
Molekul
Molekul adalah kelompok atom yang terikat bersama yang memiliki fitur uniknya masing-masing. Mereka membuat fungsi yang relatif sederhana bersama-sama sebagai satu. Contoh adalah sekelompok atom label formulir, bidang input pencarian, dan tombol.
Organisme
Organisme adalah komponen yang relatif lebih rumit, terdiri dari kelompok molekul dan atom. Organisme ini dapat berfungsi sendiri, membentuk bagian yang berbeda dari antarmuka. Beberapa contoh adalah navigasi, footer, sidebar, formulir, dll.
Template
Template adalah tingkat desain atom berikutnya; kita dapat menganggapnya sebagai halaman kosong yang mengekspresikan struktur konten desain. Mereka adalah wireframe.
Tujuannya adalah untuk membangun hubungan antara organisme dan komponen lain dengan mengaturnya di halaman dalam urutan tertentu, tetapi tanpa menggunakan gaya atau data apa pun.
Kita sekarang dapat menambahkan navigasi (organisme) dari contoh sebelumnya ke template beranda kita.
Halaman
Inilah saatnya mengambil wireframe tersebut dan membangunnya. Saatnya menambahkan semua detail akhir. Template secara bertahap dihapus untuk memberi jalan bagi halaman aktual yang mungkin berinteraksi dengan orang lain.
Faktor yang perlu dipertimbangkan:
Semua elemen placeholder harus diberi jalan ke konten nyata, teks nyata, dan citra.
Halaman juga merupakan tempat sebagian besar klien dan pemangku kepentingan internal akan melakukan peninjauan desain karena dapat melihat semuanya di satu tempat.
Setelah semuanya ada, tim desain harus melakukan pengujian pengguna untuk melihat apakah organisme dan molekul terkaitnya bekerja seperti yang diharapkan.
Manfaat Desain Atom
Atomic Design memberi kami wawasan berharga dan membantu dalam menciptakan sistem desain yang lebih efektif. Jadi, apa keuntungan utamanya?
Konsistensi dalam desain. Saat menerapkan prinsip-prinsip desain atom, semua atom dan molekul harus dibuat sebelum situs dibangun. Hal ini akan memungkinkan konsistensi di seluruh situs web atau produk.
Lebih sedikit komponen dalam sistem desain, dalam hal blok bangunan, desain atom sangat terukur dan dihitung. Akibatnya, akan memiliki lebih sedikit komponen di akhir proyek.
Bagian halaman web lebih mudah dihapus atau diubah. Setiap modifikasi pada komponen akan secara otomatis diperbarui di seluruh situs.
Bagus untuk pengembang, karena membuat pengkodean lebih mudah, menghindari kebingungan saat membangun produk.
Pada akhirnya
Konsep ini mungkin terdengar membingungkan pada awalnya dan bahkan mungkin mengingatkan pada kelas kimia di sekolah menengah. Namun, setelah memahami dasar-dasarnya, akan menemukan bahwa metode ini sangat bermanfaat, tidak hanya untuk tim tetapi juga untuk klien.
Baik sedang merancang situs web baru atau mendesain ulang yang sudah ada, bekerja dengan mempertimbangkan metodologi ini akan membuat produk mudah beradaptasi dan mudah dikelola.