DESIGN

SYSTEM
 MENGENAL DESIGN SYSTEM

Apa Itu Design System ?

Mengapa Design System Itu Penting ?

Dimana Konsep Design System Dapat Diterapkan ?

Kapan Design System Dibutuhkan ?

Bagaimana Langkah-Langkah Penerapan Design Sytem ?

2
Apa Itu Design
System?

3
 “
Design System adalah sebuah
kumpulan komponen design
yang dapat digunakan
kembali, dan mempunyai
aturan yang jelas sehingga
dapat ‘dirangkai’ menjadi
sebuah produk.

4
 “
Design System seperti seperti
permainan Lego, yang kita
bongkar pasang menjadi
bentuk apapun. Bagaimanapun
bentuk yang kita buat, pasti
akan menggunakan komponen
dari lego block itu sendiri.

5
Mengapa Design System Itu Penting ?

6
Design system memudahkan poduct
designer, ux designer, ui designer
dalam mendesain product, design
system juga membantu desain antar
page menjadi lebih konsisten karena
setiap komponen memiliki aturan
tertentu

7
 Adapun Keuntungan Memakai Design System ialah

⬗ Proses design dan development dapat dibuat dan direplikasi dengan

cepat dan dalam skala besar
⬗ Menciptakan konsistensi visual di seluruh produk maupun chanel
⬗ Pekerjaan menjadi lebih efisien dan efektif karena mengeliminasi
pekerjaan yang repetitive dalam membuat komponen yang sama
⬗ Membuat desain cepat beradaptasi jika terjadinya perubahan pada
kebutuhan product
⬗ Kolaboratif dan juga saling berbagi ilmu
⬗ Dapat digunakan untuk mentraining dan sebagai referensi untuk
desainer junior dan kuntributor di proyek tertentu

8
Dimana Konsep Design System Dapat
Diterapkan ?

9
 Konsep design system
dapat diterapkan Pada
perusahaan/start up yang
dimana membutuhkan
banyak orang
berkolaborasi untuk
mengembangkan
produknya.
Kapan Design System Dibutuhkan ?

11
 Ketika product yang dikembangkan bertambah banyak fiturnya serta sangat berguna
jika kita menggunakan nya dalam sebuah tim yang melibatkan desainer lain untuk
berkolaborasi. Kenapa? Karena output yang paling mudah dalam design system ini
sendiri adalah biasanya adalah UI kit atau design library untuk digunakan oleh para
desainernya.
UI kit ini sendiri terdiri dari beberapa component desain yang akan kita pakai nantinya
dalam membuat sebuah aplikasi.

12
Bagaimana Langkah-Langkah Penerapan
Design Sytem ?

13
 Beberapa Design System Yang Diterapkan Pada Perusahaan/Startup

Brand & identity

Brand & identity dapat digambarkan bagaimana dan
seperti apa kita ingin produk kita terlihat mulai dari
layout, format design hingga bahasa yang digunakan

14
 Color
Untuk mendesain product perlu adanya pencocokan warna agar menarik untuk dilihat
dan bias menjadi identitas suatu perusahaan. Biasanya warna dapat dikategorikan
sebagai primary color, secondary color, complementary color, text color.

15
 Typography
Penetuan font yang akan digunakan untuk seluruh
produk digital. Umumnya setiap produk memiliki 2
font, penentuan ini juga menentukan ukuran, tipe
jarak, untuk setiap kategori font dan kegunaan dari
font tersebut

16
 Button
Button bertujuan untuk memungkinkan pengguna
untuk melakukan suatu tindakan atau menavigasi ke
halaman lain. Button biasanya dibuat mewakili
ukuran, kegunaan da state (default, hover, atau
disabled)

17
 Iconography
Pilih icon yang dapat digunakan untuk keseluruhan
produk dan sesuai dengan brang identity perusahaan.
Kemudian pastikan untuk menggunakan ikon yang
sama secara konsisten saat mewakili tindakan atau
persyaratan yang serupa

18
Contoh Design System Tokopedia

19
Thank You