Jadi, di tengah kesibukan membangun sebuah design system, aku sering terjebak dalam pikiran tentang istilah dan struktur yang kita pakai. Sambil ghibah kadang aku mulai mikir bahwa istilah Atomic Design dan hirarki yang disarankan oleh Brad Frost, meskipun sangat inspiratif, mungkin tidak sepenuhnya pas menurutku (sekali lagi ini hanya opini kecil saya 🙊). Bayangkan saja, kita membagi desain menjadi unit-unit kecil seperti atom, tapi di sisi lain, pengalaman pengguna itu jauh lebih kompleks daripada sekadar memisahkan elemen ke dalam kotak-kotak. Ini membuatku berpikir, mungkin sudah saatnya kita mencari pendekatan yang lebih menyeluruh — aku ingin meng-godhog hal baru sebagai pengganti yang lebih pas (lagi lagi, sekali lagi, ini hanya opini terstruktur pribadiku). Design System Architecture, meski ini nama atau istilah yang aku karang sendiri, jelas ngawur, tapi setidaknya sedikit mewakili apa yang akan ku bentuk.

Pengennya menjelaskan semuanya menggunakan bahasa inggris, biar agak sedikit ke-minggris, seperti para designer pro lainnya namun apa daya minum air putih aja aku masuk angin apalagi ngomong pake basa inggris. Jadi ku mulai aja dengan bahasa seadanya 😂

Mari kita lihat sekilas tentang Atomic Design. Konsep ini memang cemerlang, memecah elemen desain menjadi tingkatan yang terstruktur: mulai dari atom, lalu molekul, organisme, dan seterusnya. Masing-masing level ini mencerminkan bagian yang lebih besar dari desain. Misalnya, atom bisa jadi elemen terkecil seperti tombol atau input, sementara molekul adalah kombinasi dari beberapa atom, seperti form dengan label dan input. Namun, ketika kita terlalu terfokus pada level-level kecil ini, kita sering kali melupakan gambaran besarnya.

Desain yang baik bukan hanya tentang menciptakan elemen kecil yang sempurna, tetapi juga tentang bagaimana semua elemen ini berkolaborasi untuk menciptakan pengalaman yang kohesif.

Setelah banyak berpikir (meski mayoritas ngopi dan push rank), aku rasa ada cara yang lebih tepat untuk menggambarkan struktur desain. Mari renungkan (playing: Mengheningkan Cipta oleh Truno Prawit) tentang hirarki yang aku usulkan, yang lebih sesuai dengan cara kita bekerja dan berpikir. Di paling atas, kita punya Page, yang merupakan representasi akhir dari apa yang akan dilihat pengguna. Ini adalah tempat semua elemen berinteraksi, dan setiap keputusan desain di sini harus mempertimbangkan bagaimana pengguna akan mengalami keseluruhan halaman.

Di bawah Page, kita punya Layout. Ini adalah kerangka kerja yang menentukan bagaimana elemen-elemen akan ditempatkan di halaman. Alih-alih hanya menempatkan elemen secara acak, kita berfokus pada penempatan yang logis dan intuitif. Misalnya, kita dapat mempertimbangkan cara pengguna berinteraksi dengan halaman dan bagaimana aliran informasi akan memengaruhi pengalaman mereka. Layout menciptakan struktur yang mendukung elemen-elemen di dalamnya, dan kita bisa memanfaatkan grid atau sistem kolom untuk menjaga konsistensi.

Selanjutnya, ada Pattern, yang menggantikan istilah Template dari Atomic Design. Dalam konteks ini, pattern mencakup pengulangan solusi desain yang berhasil di berbagai bagian sistem. Ini bukan hanya sekadar template statis; ini adalah pendekatan yang bisa kita terapkan di berbagai situasi. Misalnya, jika kita memiliki pattern untuk card component, kita bisa menggunakan desain tersebut di berbagai tempat, seperti di homepage atau dalam dashboard, sambil tetap menjaga identitas dan tujuan yang konsisten.

Kemudian kita punya Component, yang menjadi pengganti dari istilah Organism. Di sini, kita mulai berbicara tentang elemen-elemen fungsional yang lebih kompleks, seperti tombol dengan berbagai state, input fields, atau dropdown menus. Komponen adalah bagian yang lebih besar dari sekadar elemen kecil; mereka bisa berfungsi secara mandiri atau dalam kombinasi dengan komponen lain untuk menciptakan fungsionalitas yang lebih mendalam. Ini adalah tempat di mana kita bisa mengoptimalkan reusabilitas tanpa kehilangan konteks.

Selanjutnya, kita masuk ke Element, yang berfungsi sebagai pengganti istilah Molecule. Elemen adalah bagian terkecil yang terlihat dari UI — seperti ikon, teks, dan elemen visual lainnya. Dengan menekankan elemen di bawah level komponen, kita bisa memastikan bahwa setiap detail memiliki tempatnya dan memberi kontribusi terhadap keseluruhan desain. Misalnya, memikirkan tentang ukuran ikon atau tipografi dapat mengubah cara kita merasakan keseluruhan komponen di dalam sistem.

Di bagian paling dasar, kita memiliki Foundation. Ini adalah landasan di mana semua elemen dan komponen dibangun. Foundation mencakup nilai-nilai inti dari desain kita, seperti palet warna, tipografi, grid, dan prinsip-prinsip desain lainnya. Dengan memiliki foundation yang kuat, kita dapat menjamin konsistensi dalam semua yang kita buat, memastikan bahwa setiap elemen saling melengkapi. Ini adalah pondasi yang tidak terlihat, tetapi sangat penting dalam menciptakan desain yang harmonis.

Sebenarnya untuk Foundation sendiri masih dapat dipecah lagi karena menurutku foundation bisa berdiri sendiri. Aku masih kepikiran dengan variable, namun balik lagi, variable dapat disetarakan dengan palet warna dan tipografi. Sehingga masih masuk akal kalau aku lebih memilih memasukkan foundation ke dalam hirarki daripada harus memecah mereka menjadi bagian tersendiri.

Conclusion

Sebagai kesimpulan, saat kita membangun design system, penting untuk memiliki kerangka kerja yang mencerminkan bagaimana kita berinteraksi dengan desain secara nyata. Dengan beralih dari pendekatan Atomic Design ke Design System Architecture, kita bisa menciptakan sistem yang lebih inklusif dan responsif. Pendekatan ini memungkinkan kita untuk tetap terhubung dengan filosofi yang diajarkan oleh Brad Frost, namun dengan cara yang lebih sesuai dengan kompleksitas dan keindahan desain yang kita ciptakan.

Mari kita terus eksplorasi dan menemukan cara terbaik untuk merancang produk yang tidak hanya memuaskan kebutuhan saat ini, tetapi juga dapat berkembang seiring waktu.