Capaian Pembelajaran:

1. Mahasiswa mampu menganalisis konsep-konsep dasar dalam pembuatan sebuah Desain Sistem
2. Mahasiswa mampu menelaah komponen utama sebuah Desain Sistem seperti warna, tipografi dan desain komponen
3. Mahasiswa mampu mengimplementasikan Design System ke dalam produk dengan efektif dan membangun Desain Sistem agar tetap up-to-date

 

-----------------------------------------------------------------------

Halo Explorers, gimana kabarnya? Setelah belajar pengenalan UI/UX semakin tertarik bukan bagaimana membuat user interface atau user experience yang menyenangkan untuk dilihat. Nah, supaya kalian dapat membuatnya maka belajar desain sistem dulu ya

Konsep Desain Sistem

Design system adalah gabungan komponen-komponen yang reusable, bisa dipakai membuat berbagai kombinasi dengan aturan yang jelas. Gampang nya sih, bayangkan design system ini seperti permainan Lego, yang kita bongkar pasang menjadi bentuk apapun. Bagaimanapun bentuk yang kita buat, pasti akan menggunakan komponen dari lego block itu sendiri. Tujuan utama design system adalah bagaimana caranya membuat design yang scallable dengan effort minimum.

 

Apasih keuntungan memakai design system?

Ada beberapa keuntungan yang kita dapat, jika kita menggunakan design system, yaitu :

1.    Membuat Desain yang konsisten

Komponen standar yang digunakan secara konsisten dan berulang membuat aplikasi yang lebih mudah diprediksi dan mudah dipahami. Komponen juga memungkinkan desainer menghabiskan lebih sedikit waktu untuk fokus pada gaya dan lebih banyak waktu mengembangkan pengalaman pengguna yang lebih baik.

2.    Membuat prototipe lebih cepat

Bekerja dengan Design system, memungkinkan kita untuk mendesain aplikasi dengan cepat seperti menyusun mainan lego block karena kita tak perlu mendesain dari awal, karena tinggal drag and drop aja.

3.    Kolaboratif dan juga saling berbagi ilmu

Meningkatkan kolaborasi dengan tim dan membangun mindset kolaborasi yang bagus jika design system ini dibuat bersama sama. sehingga kita akan bekerja sama dengan sesama desainer untuk menentukan dan mengembangkan design system itu sendiri.

 

 

Dengan keuntungan yang dimiliki design system juga mempunyai elemen yang dibutuhkan. Elemen-elemen yang ada dalam design system meliputi :

1.    Typography

2.    Colors

3.    Spacing & layout

4.    Elevation

5.    Image (Icon & illustration)

6.    Motion

7.    Voice tone

8.    Components

 

Kapan Design System diperlukan?

Sebenarnya Design System akan menunjukan taring nya atau akan terasa 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. Berikut beberapa hal yang akan menjadi pondasi dalam membuat UI kit:

1.    Color (Warna)

Warna adalah fondasi yang harus kita tentukan terlebih dahulu karena dengan warna akan berpengaruh terhadap semua tema atau branding aplikasi yang akan kita buat.

 

2.    Tipografi

Pemilihan font yang tepat juga akan membuat aplikasi kita semakin mudah untuk dipakai oleh pengguna kita.

 

 

3.    Design Component

Selain warna dan tipografi kita juga harus menentukan aturan untuk component yang akan kita pakai dari awal. Biasanya dimulai dengan component yang bakal sering kita pakai seperti button, navigasi bar, atau header & footer. Agar kesan pengguna saat menggunakan aplikasi lebih menyenangkan dan mudah dipahami alurnya.

 

 

Hal-hal yang perlu diperhatikan

Sebelum membuat komponen untuk design system, ada beberapa hal yang harus diperhatikan yaitu:

●     Tujuan dan nilai produk

Mengapa kita perlu mengetahui tujuan terlebih dahulu? jawabannya adalah karena sebuah desain dapat menyampaikan pesan atau bisa dikatakan desain yang kamu buat dapat menyampaikan sesuatu dan apa apa yang ingin tawarkan kepada pengguna mu.

●     Gaya desain

Tentu saja, dengan adanya desain sistem kamu dapat membuat desain yang selaras dengan brand dari perusahaan kamu, gaya atau style yang dibuat semuanya konsisten dari awal sampai akhir. Prinsip desain adalah kalimat singkat yang menggambarkan tujuan besar dari suatu produk. Tujuannya agar mudah diingat oleh pengguna.

 

 

 

Proses membuat design system

Berikut ini proses membuat design system :

●     Visual audit

Lakukan audit baik komponen maupun style yang ada produk mu saat ini.

●     Plan timeline

Atur jadwal untuk membuat design system, mana yang harus dikerjakan terlebih dahulu dengan ini semua dapat terlibat dan terupdate.

●     Design

Mendesain style guide dan komponen, kamu bisa menggunakan tools seperti figma dan zeplin.

●     Sync with developer

Diskusi dan implementasi secara bertahap style guide dan komponen yang sudah dibuat.

Susunan komponen design system

●     Atom, meliputi palette warna, typography, icon style, dan input field

●     Molecule, meliputi tabbing, header bar, notification bar, dan action list

●     Organism, meliputi pop up, action sheet, dan notification stack.

Referensi design system:

Berikut ini contoh penerapan desain sistem pada perusahaan yang dapat kalian pelajari :

https://gojek.design/

https://digitalservice.jabarprov.go.id/design-system/

----------------------------------------------------------------

TUGAS

Gimana nih pembahasan desain sistem yang sudah dijelaskan tadi? Supaya kalian lebih memahami maka, disini ada tugas untuk menganalisis platform Youtube dimana kalian perlu menunjukan elemen-elemen yang harus ada dalam pembuatan desain sistem.