Overview
Pernahkah kamu menaiki anak tangga tanpa melihat anak tangga? Kebanyakan orang melangkah naik tanpa sadar, karena tangga memang didesain sesuai dengan langkah manusia.
Namun, bagaimana jika anak tangga didesain dengan ketinggian lebih rendah dari standarnya? Tentu orang yang melewatinya akan merasa aneh dan kecendurungan untuk tersandung akan lebih besar.
Bagaimana jika anak tangga didesain lebih tinggi dari standar umumnya?
Orang yang melewatinya akan cenderung merasakan capek dan risiko untuk jatuh akan lebih besar.
Google Material Design
Apa itu Design System?
Design System adalah sebuah standar yang digunakan untuk membantu para desainer agar dapat menghasilkan desain yang konsisten. Sama halnya dengan anak tangga, desain yang terstandarisasi dan konsisten akan menciptakan kenyamanan bagi pengguna. Design System memudahkan desainer untuk berkolaborasi secara efektif dan efisien karena semua elemen desain telah terstandarisasi.
Mengapa Design System itu penting?
- Bayangkan apabila kita bekerja dalam tim desain besar. Apabila setiap orang punya standar warna, tombol, atau ikon sendiri, hasil akhirnya pasti berantakan dan cenderung menyebabkan crash antar designer, bukan? Untuk itu, diperlukan sebuah standarisasi yang bernama Design System.
- Konsistensi UI/UX → Elemen-elemen penting yang dibutuhkan seperti tipografi, warna, tombol, icon telah terstandarisasi sehingga desain pada cross-platform (Laptop, Handphone, Tablet) seragam.
- Efisiensi Pengembangan → Pengembang tidak perlu membuat elemen-elemen dari awal (kecuali elemen baru) karena semua elemen telah distandarisasi sejak awal.
- Kolaborasi Efektif → Tim terkait akan memiliki refensi yang sama sehingga menghindari perbedaan pendapat.
- Meningkatkan Skalabilitas → Memudahkan pengembangan fitur baur tanpa mengorbankan desain yang sudah ada.
Komponen dalam Design System
Style Guide → Sebuah panduan terkait style desain (tipografi, ikon, spacing, warna, dan lainnya).
Tipografi distandarisasikan dimulai dari font yang digunakan, ukuran font, ketebalan, hingga letter-spacingnya.
Warna Brand distandarisasikan dimulai dari warna brand (primary, secondary), warna netral, warna sukses, warna error, maupun warna warning.
Dengan adanya Style Guide, panduan secara jelas dan terperinci tentang bagaimana elemen-elemen desain digunakan pada komponen atau ruang memberikan peluang yang minim terjadinya crash antar desainer karena perbedaan pendapat.
Component Library → Sebuah panduan terkait elemen komponen yang sedikit kompleks seperti button, card, modal, form input, dan lainnya.
Komponen dalam Design System beragam tergantung kondisi real time yang dialami oleh pengguna. Oleh karena itu, komponen juga wajib untuk distandarisasikan agar semua sama.
Design Token → sebuah variabel yang digunakan untuk membuat keputusan untuk mengubah gaya visual desain.
Komponen dalam Design System beragam tergantung kondisi real time yang dialami oleh pengguna. Komponen desain tidak cukup hanya dengan permainan warna atau font saja, namun juga memerlukan dimensi seperti shadow, ukuran, dan style yang lain.
Analoginya seperti ini, bayangkan komponen UI seperti button, card, form adalah sebuah handphone. Lalu shadow, ukuran, tata letak adalah sebuah casing handphone.
Apabila kita mengganti casing handphone, handphone kita tetap sama, hanya tampilannya yang berubah. Sama seperti Design Tokens, yang memungkinkan perubahan warna, ukuran, atau style tanpa mengubah struktur utama komponen UI.
Jadi, apabila suatu hari brand berganti warna utama dari biru ke pink, cukup dengan melakukan update pada Design Tokens, dan semua UI yang memakai warna itu akan otomatis berubah tanpa harus menyunting satu per satu.
Dalam dunia desain digital, konsistensi bukan sekadar pilihan, melainkan kebutuhan. Design System hadir sebagai solusi untuk menciptakan pengalaman pengguna yang lebih terstruktur, efisien, dan mudah dikelola. Dengan adanya standarisasi dalam style, komponen, dan design tokens, tim desain dan pengembang dapat bekerja lebih efektif tanpa harus khawatir akan inkonsistensi.
Seperti anak tangga yang nyaman digunakan karena mengikuti standar tertentu, UI yang dirancang dengan Design System akan memberikan pengalaman yang lebih intuitif dan seamless bagi pengguna. Jadi, jika ingin membangun produk digital yang skalabel dan mudah beradaptasi dengan perubahan, menerapkan Design System adalah langkah yang tidak bisa diabaikan. 🚀