DAY 15

DESIGN PATTERN & DESIGN SYSTEM

Kita sudah paham, bahwa UI/UX Designer bertugas untuk membuat tampilan sebuah layar
terlihat lebih menarik dengan warna, komposisi dan layout yang baik dan diharapkan memiliki
tampilan yang cantik dengan kegunaan yang tepat dalam membantu user menyelesaikan
suatu task atau goal.
Dalam melakukan tugasnya mendesain tampilan layar, ada hal yang perlu diketahui oleh
designer dalam proses membangun visual design dan interaction design pada prototype
yaitu Design Patterns dan Design System

DESIGN PATTERN
Design pattern adalah komponen yang dapat digunakan kembali secara berulang oleh desainer
untuk memecahkan masalah umum dalam membuat desain user interface yang dapat diandalkan
untuk menghasilkan solusi lebih cepat.
Contohnya : Breadcrumb. Breadcrumbs memungkinkan user menelusuri langkah-langkah atau
halaman apa saja yang mereka lewati untuk sampai ke halaman yang sedang ia buka. Designer
bisa menggunakan pattern ini untuk kasus atau kondisi lain, meskipun mungkin memerlukan
sedikit penyesuaian tergantung konteks penggunaannya.
Design pattern memiliki akar mula dari arsitektur data dan pemrograman yang pada awalnya
didesain untuk mengoptimalkan proses pembuatan user interface.

Formula Design Pattern
Dari CareerFoundry menyatakan UI design pattern itu selalu bisa menjawab sebuah problem
penggunaan elemen atau komponen UI dalam konteks tertentu dan menjadi solusi yang bisa
digunakan ulang ke keseluruhan tampilan layar. 

 A user’s usability-related problem.
 The context/situation where that problem happens.
 The principle involved—e.g., error management.
 The proven solution for the designer to implement to address the core of the
problem.
 Why—the reason for the pattern’s existence and how it can affect usability.
 Examples—which show the pattern’s successful real-life application (e.g.,
screenshots and descriptions).
 Implementation—some patterns include detailed instructions.
1. Problem: Apa problem terkait usability/kegunaan tampilan yang user rasakan?
2. Context/Situation: Kapan problem itu muncul?
3. Solution: Apa solusi yang terbukti bisa diimplementasikan oleh desainer untuk
menyelesaikan problem?
4. Why: Apa alasan adanya pattern tersebut dan bagaimana pattern tersebut
memberikan impact pada usability
5. Examples: Dimana dan seperti apa contoh pattern yang sudah diimplementasikan
sebelumnya?
6. Implementation: beberapa pattern biasanya memiliki instruksi detail tentang
bagaimana cara mengimplementasikannya kedalam desain.
Contohnya :

1. Problemnya : user ingin memberikan informasi 2 tanggal. 

2. Konteksnya/Situasinya : saat ingin memberikan suatu range tanggal. 
3. Solusinya : ada 2 input datepicker, yang saat memilih tanggal pada kalender, bisa
langsung men-tap tanggal awal dan akhir pada kalender yang sama tanpa perlu
mengulang proses membuka tanggal kedua.
4. Why : membuat proses pemilihan tangggal pada komponen datepicker lebih
realistis dengan menghighlight range tanggal yang dipilih, dan memudahkan
karena tidak perlu mengklik masing-masing datepicker untuk memilih tanggal
awal dan akhir.

Contoh Design Pattern Libraries

Pattern menjadi pembantu yang efektif pada pengerjaan design task rutin. Jika kamu ingin
menemukan yang lainnya, pertimbangkan untuk melihat design pattern libraries yang sudah
memiliki struktur pattern yang terorganisir. Contoh beragam design pattern bisa dilihat di situs-
situs ini : UI Patterns, UI Garage, Pttrns dan Elements of Design.
Untuk pemula, saya rekomendasikan mempelajari dari daftar pattern yang ada di UI Patterns.
Situs lain tidak terlalu banyak mencantumkan dokumentasi untuk memahami maksud atau alasan
di balik adanya pattern tersebut dengan bentuk dan desain tertentu. Dokumentasinya akan
berguna bagi desainer dalam memahami dan mengkomunikasikan alasan dari design
decision  nya.

Melihat semua library ini dan melihat solusi-solusi baru dimana-mana, bisa jadi membuatmu
berpikir bahwa tidak ada lagi ruang untuk melakukan inovasi dalam UI. Namun sebenarnya
masih banyak tempat untuk solusi baru. Jika tidak ada pattern yang sesuai dengan problem yang
ingin kamu pecahkan, atau jika kamu tidak bisa menemukan komponen yang sesuai dengan
struktur tersebut, akan ada kesempatan untuk mendaftarkan diri.

Common Patterns
Menurut artikel Interaction Design Foundation, contoh pattern yang paling umum dan biasa
dikenal oleh orang-orang seperti :
 Breadcrumbs, menggunakan label link untuk menyediakan navigasi kedua yang
memperlihatkan jalur dari halaman depan ke halaman situs yang sedang dibuka
dalam hierarki halaman
 Forgiving format, mengizinkan pengguna memasukkan data dalam berbagai
format (misalnya, Kota/desa atau kode pos).
 Clear/Primary Action, menonjolkan tombol dengan warna sehingga pengguna
tahu apa yang harus dilakukan (misalya, “Kirim”). Kamu mungkin harus
memutuskan tindakan mana yang menjadi prioritas.

 Hover Control, menyembunyikan informasi yang tidak penting pada halaman

yang sifatnya mendetail agar pengguna dapat menemukan informasi yang relevan
dengan lebih mudah.
 Steps Left, desainer biasanya menggabungkan ini dengan pola wizard. Pattern ini
menunjukkan berapa banyak langkah yang harus diambil pengguna untuk
 menyelesaikan suatu tugas. Kamu bisa menggunakan gamification (design pattern
yang memberi insentif atau reward) di sini untuk meningkatkan user engagement .
 Subscription plan, menawarkan kepada pengguna menu opsi (termasuk tombol
“Daftar”) untuk bergabung dengan tarif tertentu.
 Leaderboard, kamu bisa meningkatkan engagement jika menggunakan pola
media sosial ini.
Kategorisasi Design Pattern
Ada beberapa UI yang yang dapat merepresentasikan fungsionalitas pada kebanyakan interface.
Contoh di antaranya :

 Data input/output: pattern ini hanya menangani data input dan feedback  dari

website yang memberikan response atau data terkirim
 Content structuring: design pattern sejalur dengan keseluruhan alur UX dan
memanfaatkan lagi untuk menentukan tingkat aksesibilitas dari semua elemen
halaman supaya user merasa yakin dan percaya diri saat melakukan interaksi
dengan layar.
 Navigation: pattern ini memastikan navigasi tidak memerlukan effort , dan tetap
berada di dalam jangkauan.
 Incentivization: pattern insentif mendorong user untuk melakukan performa
dengan aksi tertentu dan berikan rewards untuk pembantu kesuksesan tampilan. 
 Hierarchy: pattern ini membantu dalam pembuatan hierarki visual supaya user
bisa dengan mudah membedakan elemen satu dan lainnya.
 Social Media: pattern social media, mendorong user untuk melakukan share
content dan berinteraksi satu sama lain

DESIGN SYSTEM 
Design system adalah kumpulan guideline berisi item-item yang dapat digunakan kembali,
dipandu oleh standar yang jelas, yang dapat dirakit bersama untuk membangun sejumlah aplikasi
ataupun desain yang perlu digunakan ke seluruh layanan di luar pembuatan produk (seperti
material marketing dan branding perusahaan secara general). 
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.
Pengembangan design system membutuhkan investasi biaya, waktu dan SDM yang lumayan.
Karena membangun design system yang komprehensif, lengkap dan mencakup keseluruhan
aturan pembuatan desain, adalah hal yang perlu dilakukan secara iteratif, dan memerlukan waktu
panjang, serta analisa dan tes berulang. 

Design System vs Design Pattern Library vs Design

Guidelines vs Style Guides
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-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.
 Semua di-inventarisir ke dalam sebuah design inventory. Pada langkah ini,
biasanya kita bisa sekaligus mereview bagian mana yang memiliki issue pada
usability dan accessibility atau performance nya. 
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! Pembuatan design system tidak berhenti dalam
iterasi pertama. Bahkan selama produk dan perusahaan masih berjalan, design
system harus terus dipelihara (maintain) dan diupdate saat ditemukan issue.
Selesai membuat design system, kamu harus mempresentasikan dan
mendiskusikannya dengan tim, supaya tim tahu bagaimana 

Design System yang dibuat oleh beberapa Perusahaan besar

dan terbukti berhasil
Berikut beberapa contoh design system yang dibuat oleh perusahaan ternama, yang mana mereka
dicap berhasil membuat, memaintain dan mengaplikasikan design system mereka menjadi acuan
desain seluruh lini departemen perusahaan, dan menjadi “percontohan” bagi banyak tim desain.

Atlassian Design System

Atlassian design system adalah tentang menggunakan personality untuk mengkomunikasikan

tools dengan orang-orang. Sifatnya personal, peppy, dan berhubungan tentang membuat brand
statement yang bold.

Bagi Atlassian, accessibility sangat penting. Pada intinya, brand atlassian ber

Membangun design system seperti membangun sebuah produk untuk mengatur bagaimana
produk lainnya harus dibangun. (Tom Butler, Product Manager @ Atlassian)
Jika kamu punya waktu, kamu bisa mendengarkan dan menonton talks dari Atlassian mengenai
design system mereka di video di bawah ini :
https://www.youtube.com/watch?v=vZNxwlIbjCE
Polaris Design System by Shopify
Design system milik Shopify disebut Polaris. Ini adalah sistem yang mencerminkan keberadaan
Shopify secara global. Design system ini bicara tentang skalabilitas dan kemudahan
penggunaannya. Dengan presisi dalam copywriting nya dan desain mereka, Shopify hanya
berfokus pada pengalaman merchant mereka.

STYLE GUIDES
Sebuah style guide adalah “living document” yang komprehensif yang melacak semua elemen
berulang untuk sebuah proyek, dari aturan branding secara visual hingga ke aturan spesifik
seperti jumlah beveling untuk button call-to-action.
Style guide ditujukan untuk orang-orang yang akan membuat konten, bukan kode. Dia
menjelaskan tone dan cara menggunakan elemen visual yang akan digunakan saat berkomunikasi
di media yang berbeda, termasuk tetapi tidak terbatas pada aplikasi dan situs web.

 yang menentukan cara organisasi/perusahaan berkomunikasi. Ini menggabungkan

merek, filosofi perusahaan, dan pemahaman tentang siapa customer dan audiens
lainnya.
  mendeskripsikan gaya visual, tertulis, dan terkadang bahkan lisan yang dapat dan
tidak dapat diterima dalam konten yang dibuat oleh dan untuk perusahaan.
 memiliki elemen preskriptif, seperti warna mana yang secara persis dapat
digunakan. Dan juga elemen deskriptif, seperti standar customer service
perusahaan.
Style guide biasanya berisi bagian tentang filosofi perusahaan, gaya visual,
penggunaan branding element yang benar, pembuatan konten, dan tone atau personality yang
ingin kamu komunikasikan.
Biasanya style guide akan ditulis dengan banyak contoh visual dan tekstual untuk memperjelas
apa yang boleh dan tidak boleh dilakukan. Panduan ini digunakan oleh agency, freelancer, dan
orang-orang di dalam organisasi untuk memastikan mereka membuat tampilan yang sesuai
dengan message dan menggunakan tone yang benar. Tone mungkin berbeda, tergantung di mana
dan kapan digunakan, misalnya dalam sebuah iklan, dibandingkan dengan laporan tahunan akan
memiliki tone yang berbeda. Tapi tetap harus selalu terlihat dan terasa seperti itu bagian
dari brand voice perusahaan yang sama dan dapat dikenali.
Proses memutuskan style apa yang akan digunakan didasarkan pada masukan dari desainer,
branding, marketing, dan content creator. Sangat membantu untuk meningkatkan tingkat adopsi
guides jika kamu bisa menjelaskan mengapa style guide dibuat sebagaimana dia adanya.

What’s in style guide?

The philosophy
 Brand philosophy: 
 Company philosophy

Personality and tone of voice

Visual elements 
 Grid setup : Tata letak yang kompeten memiliki struktur yang kokoh di
belakangnya dengan kisi yang sepenuhnya responsif dan andal, menyelaraskan
konten dengan benar.
Whitespace Rules : Manfaatkan ruang dengan menawarkan bagaimana real use dan jangan
mencoba memampatkan (menumpuk konten berdekatan hingga terlihat sesak) atau
membubarkan (menyimpan konten terlalu berjauhan) konten. Temukan jalan tengahnya;
whitespace memberikan elegant tone  dan calm tone yang merilekskan mata sambil menekankan
pesan utama.
Color Palette : mulai dengan mengekstrak warna, baik warna primer dan sekunder pada
background terang dan gelap. Untuk tampilan yang clean dan hasil yang menginspirasi, pastikan
semua warna terlihat sempurna jika dikombinasikan.
Typography : Tipografi yang dibangun dengan benar menawarkan dasar untuk membuat
panduan gaya yang harmonis. Jika memungkinkan, gunakan satu atau dua tipografi untuk
memberikan teks Anda keterbacaan, kejelasan, dan konsistensi yang tak tertandingi di semua
halaman.
  Imagery: Diperlukan waktu untuk mencari dan memilih gambar yang tepat untuk
website atau app, tetapi jika semuanya sudah benar, hasilnya akan spektakuler.
Investasikan waktu dalam proses pencarian gambar yang membawa emosi relevan
dengan produk dan menghubungkan user pada tingkat visual.

UI components

 Buttons : Praktik terbaik adalah mengelompokkan tombol ke dalam kelas: primer

dan sekunder atau (default), dibalik, diuraikan, dengan latar belakang atau batas
tertentu yang dapat dengan mudah diterjemahkan ke dalam kode.
Saat mendesain button , pastikan kamu memasukkan detail seperti:
 Importance. Menggunakan warna yang kuat pada tombol utama,
memberikan indikator visual yang mengarahkan pengguna untuk
melakukan tindakan yang diinginkan.
 States. Ada beberapa status di sini, tetapi kamu bisa tetap
menggunakan normal dan hover dan seringnya kamu tidak
membutuhkan lebih dari itu. Tekankan detail seperti transisi 2d,
bayangan, ikon, dan sebagainya, untuk yang saya sarankan
menggunakan efek dari library css disini.
 Sizes. Tentukan ukuran tombol melalui kelas seperti btn-lg, btn-md,
btn-xs. Untuk lebih jelasnya baca dokumentasi bootstrap sebagai
contoh.
 Usage. Mendefinisikan tombol dengan jelas dan menampilkan
penggunaan sebenarnya, akan memungkinkan pengembang untuk
menggabungkan detail tersebut lebih jauh ke dalam produksi dengan
mudah, kapan pun diperlukan.
Form Elements: Tidak ada yang mau menghabiskan seumur hidup untuk mengisi formulir,
inilah mengapa kita harus mendesainnya dengan sederhana, menyenangkan dan juga berguna.
Kelompokkan label dengan masukan mereka, jelaskan teks pembantu dasar jika memungkinkan,
gunakan satu kolom dalam formulir , sertakan semua feedback yang mungkin seperti aktif, valid,
warning, error dan sebagainya.