Design System : Sebuah Design Guideline, Namun Lebih Luas Lagi
Selama ini ketika saya (dan tim saya) membuat suatu desain UI/UX untuk sebuah aplikasi atau web saya hanya memikirkan Design Guideline-nya saja, yakni bagaimana style dan tampilan dari suatu app yang dibuat.
Namun saat berada mengerjakan proyek PPL, saya dan tim diminta untuk membuat Design System dari proyek yang ingin kita buat. Namun saat itu saya sendiri belum mengerti apa itu design system, dan belum memahami apa bedanya dengan design guidelines yang selama ini saya buat. Setelah beberapa minggu mempelajari dan membuat design system yang diperlukan proyek, inilah yang saya pelajari :
Apa itu Design System ?
Design System pada dasarnya merupakan satu set komplit desain UI yang akan dipakai bagi developer untuk membuat aplikasi. Suatu design system akan berisi keseluruhan aturan UI yang akan dipakai pada saat pembuatan app dimulai dari Building Blocks yang akan digunakan oleh developer seperti warna, tipografi, icon lalu kemudian selanjutnya terdapat UI pattern yang akan dipakai seperti komponen dan elemen dari suatu app hingga terakhir rules yang harus diikuti dalam pembuatan app tersebut.
Hal ini tentu berbeda dengan suatu design guideline yang hanya berisi style guide saja seperti penggunaan warna, tipografi, icon. Design system lebih luas dan merupakan generalisasi dari design guideline.
Mengapa kita perlu Design System ?
Dalam mengerjakan suatu proyek app yang berskala besar, kita tentu memerlukan suatu bentuk UI yang tidak hanya konsisten dan kohesif dari sudut pandang user namun juga dapat dipakai dengan mudah, efektif, dan efisien dari sudut pandang developer.
Hal ini disebabkan oleh proyek yang besar membuat developer akan membutuhkan waktu untuk mendesain keseluruhan UI yang diperlukan pada proyek tersebut. Dengan membuat suatu design system, tidak hanya membuat developer mudah dalam mengikuti dan membuat UI yang konsisten, namun juga developer mempunyai set komponen UI yang dapat digunakan kembali, sehingga memudahkan pekerjaan mendesain UI.
Isi dari Sebuah Design System
Terdapat tiga kategori utama dalam pembuatan suatu design system yakni Building Blocks, UI Pattern Library, dan Rules. Masing-masing membentuk suatu sistem yang akan mencerminkan keseluruhan tampilan dan penggunaan UI dari suatu app atau proyek. Berikut adalah penjelasan dari kategori-kategori tersebut:
Building Blocks
Building Blocks merupakan bagian paling mendasar dari UI yang ingin dibuat pada suatu app. Hal ini berkaitan dengan palet warna, bentuk tipografi, serta icon dan image yang akan dipakai.
Building Blocks ini diperlukan supaya terdapat konsistensi terhadap tampilan dasar dari suatu app yang akan dibuat. Building Blocks akan digunakan sebagai dasar dari pembuatan komponen UI.
UI Pattern Library
Setelah membuat Building Blocks, selanjutnya akan dibuat UI Pattern Library yang berisi komponen, elemen, dan template UI yang akan dipakai. Komponen-komponen tersebut dapat berupa tampilan dan fungsionalitas dari Button, Checkbox, Searchbar, dan lain-lain.
Tujuan dibuatnya komponen-komponen UI tersebut adalah supaya developer memiliki template untuk menggunakannya secara terus-menerus (reusability) saat membuat page atau tampilan UI yang diperlukan sehingga tidak hanya mudah digunakan namun juga tetap konsisten sesuai dengan style UI pada proyek atau app tersebut.
Rules
Lalu yang terakhir, Rules yang berisi bagaimana aturan pemakaian UI yang ada. Aturan-aturan tersebut dapat berupa bagaimana cara pemakaian komponen UI yang ada, misalkan seperti menggunakan Button dengan primary color untuk emphasis pengguna bahwa button ini penting, bisa juga berupa aturan bagaimana cara penulisan teks dari suatu app yang dipakai, misal tone gaya bicara yang digunakan pada suatu app. Hal ini secara keseluruhan membantuk suatu guidelines dalam pemakaian UI sehingga fungsionalitas UI tetap tercapai dan konsisten juga.
Design System AISVIS
Pada Mata Kuliah PPL 2021, kami mengembangkan aplikasi visualisasi dan prediksi kapal laut dengan menggunakan data satelit dengan AIS. Supaya tampilan UI aplikasi kami tetap rapih dan konsisten, kami merancang suatu Design System yang akan dipakai sebagai Guideline dalam pembuatan aplikasi kami.
Pertama kami memerlukan Suatu Design Guideline yang berisi warna dan tipografi, salah satu bagian mendasar dari tampilan aplikasi. Sehingga kami pun langsung merancang design guideline tersebut.
Selanjutnya kami pun mulai membuat komponen yang diperlukan oleh aplikasi kami sesuai dengan design guideline yang ada seperti button, navbar, sidebar, dan lain-lain. Untuk melihat semua komponennya, anda bisa lihat disini.
Kesimpulan
Kesimpulannya, Design System merupakan suatu sistem UI yang dipakai dalam suatu proyek berskala besar untuk mempertahankan konsistensi tampilan dan fungsionalitas UI dengan membuat suatu guidelines dan komponen UI sehingga juga dapat memudahkan developer dalam pembuatan UI tersebut.
Dalam Design Sistem, terdapat tiga kategori yang saling berhubungan yakni Building Blocks, UI Pattern, dan Rules. Ketiga kategori tersebut mendeskripsikan serta memberikan template bagaimana suatu tampilan dan fungsionalitas dari suatu app yang akan dibuat.
Demikian paparan saya mengenai Design System yang bisa saya bagikan pada artikel ini. Sampai jumpa lagi pada artikel lainnya 👋.
