Design System

Design system adalah kumpulan guideline berisi item-item yang dapat digunakan kembali.

Design system yang dibuat oleh desainer akan sangat berguna bagi developer untuk bisa selalu membuat desain sesuai instruksi desainer. Namun membangun design system itu sendiri adalah pekerjaan yang cukup besar workload nya bagi desainer, dan tidak bisa dilakukan oleh satu orang designer, bahkan tim mu tidak cukup berisi desainer saja, perlu frontend developer, manager, copywriter, dan role lain yang dibutuhkan dalam proyek pengembangan design system.

Ada 3 istilah yang bisa membingungkan pemula yang baru mendengar istilahnya tentang sekumpulan item desain, yaitu: design system, design pattern library, UI guideline, style guide

• Design System : Satu set lengkap berisi UI untuk brand dan dokumentasinya, prinsip desain bersama dengan UI patterns dan code (bisa berupa html, css, js) yang digunakan untuk membuat masing-masing komponen.
• Design Pattern Library : Sebuah subclass dalam design system, berisi kumpulan design pattern untuk digunakan ulang dalam sebuah produk.
• Design Guidelines : berisi satu set rules prinsip desain yang menjadi dasar dari setiap komponen tampilan.
• Style Guide : Sebuah subclass lain dalam design system yang mengatur , yang menggambarkan bagaimana look and feel dari suatu tampilan, ukuran tipografi yang benar, warna yang digunakan di dalamnya, dll.

Langkah Membuat Design System

Secara singkat dan sederhana, cara membangun sebuah design system adalah sebagai berikut:

1. Pertama-tama, kita perlu melakukan UX Audit. Ini merupakan kegiatan menginventarisir komponen secara visual, copywriting nya, atau bahkan codenya.
2. Menetapkan design principle : objective apa dan personality apa yang ingin dibawa oleh desain?
3. Membuat visual design language : visual design language adalah inti utama design system. Berisi komponen visual dalam 4 kategori : Warna, Typography, Sizing & Spacing, Imagery.
   • Color Palette, umumnya design system memiliki 1-3 warna utama yang merepresentasikan warna brand. Tambahkan beberapa warna tints dan shades untuk memberikan opsi penggunaan warna.
   • Typography, hampir semua design system hanya menggunakan 2 font: 1 font heading dan copy, 1 font monospace untuk menulis code.
   • Sizing & Spacing: sistem yang menggunakan aturan spacing dan sizing terlihat baik jika memiliki ritme seimbang. Skala berbasis 4 adalah skala yang sering digunakan oleh desainer, karena kompatibel dan sesuai standar iOS dan Android, dan bahkan standar ukuran font website.
   • Icon, Images, Illustration: Kunci utama imagery terletak pada rencana dan guideline. Buat sebuah set guideline untuk menambahkan icon, ilustrasi, dan gambar yang cocok untuk setiap situasi dan masih korespons dengan warna yang dipilih sebagai visual language nya.
4. Membuat pattern library, langkah ini memintamu untuk mengumpulkan setiap bagian dan potongan komponen UI yang baru atau mendesain ulang komponen lama. Artinya, semua button, form, modal, gambar dan komponen UI lainnya, dikumpulkan. Kemudian yang tidak dibutuhkan bisa dibuang.Di bagian ini, jika masing-masing komponen sudah dibangun oleh frontend developer, kamu bisa masukkan kode-kode yang bisa membantu pengembangan yang dilakuka oleh frontend developer untuk proyek lain yang menggunakan design system yang sama.
5. Mendokumentasikan design guideline untuk komponen, dan prinsip desain, langkah ini paling penting. Tanpa guideline yang mendokumentasikan rules, heuristik dan batasan lainnya, apalah bedanya pattern library dan style guide dengan design system yang sesungguhnya?
6. Share, Get Feedback, Iterate!

Contoh Design System yang dibuat oleh beberapa Perusahaan besar dan berhasil

Atlasian Design System

Polaris Design System by Shopify