UI Design | The Process of Creating Design System
Design System dibuat untuk mempermudah para designer dan menjaga konsistensi dalam perancangan design. Oleh karena itu, pada project ini saya menginisiasi adanya Design System untuk mempermudah designer dalam membuat dan memperbaiki design saat dilakukannya iterasi. Anda bisa mengaksesnya dengan mengklik 🔗tautan ini.
Kenapa harus menggunakan Design System?
Saat bergabung dengan tim UI/UX Design dalam sebuah project, saya melihat adanya kesulitan untuk melakukan perbaikan antara satu design dengan yang lainnya. Apabila terdapat perbaikan design yang diajukan oleh product owner ataupun developer, saya harus mengubahnya satu per satu pada setiap backlog-nya dan juga pada design file yang berkaitan. Akibatnya, proses perbaikan design menjadi kurang efektif dan jika tidak dilakukan dengan cermat, ada kemungkinan design yang terlewat sehingga tidak diperbaiki.
Oleh karena itu, saya menginisiasi adanya Design System untuk memudahkan jika terdapat perbaikan design dan menjaga konsistensi design. Menurut Will Fanguy, Design System merupakan kumpulan component yang dapat digunakan kembali, terdapat panduan yang jelas, dan disusun bersama untuk membangun sejumlah aplikasi.
Bagaimana proses pembuatan Design System?
1 — Rencanakan komponen dan variant yang akan dibuat dalam Design System
Pada kasus ini mengingat adanya design yang telah dibuat sebelumnya, langkah pertama adalah menyusun daftar component beserta variant yang telah ada. Selain itu untuk pengembangan design berikutnya, disusun juga daftar component beserta variant yang akan dibutuhkan. Proses selanjutnya, berdasarkan daftar yang sudah ada dilakukan pembagian tugas pada anggota tim UI/UX Design.
2 — Eksplorasi dari berbagai referensi dan jangan lupa sesuaikan
Ketika merancang setiap component-nya, saya melakukan eksplorasi yang mendukung component tersebut. Biasanya, saya menggunakan https://component.gallery/ untuk mengamati berbagai variasi yang ada dalam setiap component-nya. Namun, dalam tahap eksplorasi ini, penting untuk tidak terlalu terpaku pada referensi yang ditemukan. Tetaplah fokus pada kebutuhan yang mendukung dibangunnya Design System.
3 — Implementasikan, tapi ingat untuk selalu berdiskusi
Dalam mengimplementasikan Design System, mungkin akan ada beberapa perbedaan pendapat mengenai component dan variant yang dibuat, seperti “Kira-kira penempatan button di kiri atau kanan ya?”. 1 designer berpendapat bahwa penempatan button di kiri, namun designer yang lain berpendapat bahwa penempatan button di kanan. Oleh karena itu, perlu untuk selalu berdiskusi dan mengeksplor kembali bagaimana penggunaan setiap component-nya dan disesuaikan dengan kebutuhan, sehingga perbedaan pendapat tersebut dapat diatasi dengan baik.
4 — Terakhir, Rapihkan!
Untuk pendokumentasian hasil Design System, perlu untuk merapikan Design System yang telah dirancang. Tujuannya agar informasi terkait elemen-elemen desain menjadi tersusun dengan jelas dan mudah diakses. Dengan merapikan Design System, tim developer, designer, dan pihak yang berkaitan dapat memahami bagaimana cara mengimplementasikan elemen desain secara konsisten dalam berbagai proyek.
And this is the result..
Dan inilah hasil implementasi Design System pada website. Untuk mengaksesnya, silahkan klik link Figma File.
