KELAS.

COM x

SESI 2
FUNDAMENTAL
UI/UX DESIGN
 KELAS.COM x
COMMIT SESSION!

COMMIT SESSION!
Mentor dan asisten mentor melakukan sharing session mentor terkait terkait fundamental
of UI/UX Design.
Mentor menyampaikan ground rules sesi
1. Mute mic jika lingkungan tidak kondusif
2. Nyalakan kamera
3. Silakan interrupt jika memang ada pertanyaan
 KELAS.COM x
SESI 2

TEORI DESAIN:
WARNA, TIPOGRAFI DAN FILOSOFI DESAIN.
 KELAS.COM x

TEORI
DESAIN
 KELAS.COM x
TEORI DESAIN

MENGAPA PENTING
BAGI UI UX DESIGNER
1. Penerapan dasar yang baik akan membantu membentuk rancangan produk yang nyaman dilihat dan
digunakan
2. Membantu untuk kita berpikir kritis atas segala keputusan desain yang sudah dan akan dibuat agar
membuat keputusan desain yang lebih baik
3. Meningkatkan profesionalisme kita sebagai designer dan memudahkan berkomunikasi antar divisi,
atau bahkan sesama designer
 KELAS.COM x

WARNA
 KELAS.COM x
WARNA

DEFINISI WARNA
Warna adalah salah satu aspek visual yang bisa kita
lihat. Dan dengan warna, kita dapat mengaosiasikan
sifat dengan warna yang ada. Misalnya, bayangkan
warna merah pada informasi berikut.
Menggambarkan kesan urgensi yang tinggi, jika kita
bandingkan dengan warna abu-abu
 KELAS.COM x
WARNA

TEORI WARNA
Warna adalah sesuatu yang bisa kita lihat dan terdiri dari
banyak warna yang berbeda.
Ada tiga warna dasar: merah, kuning, dan biru.
Warna-warna ini bisa digunakan untuk membuat semua
warna lainnya.
Ada juga warna-warna netral, seperti hitam, putih, dan
abu-abu.

Bagaimana warna digunakan?

Warna yang berbeda dapat digunakan untuk
membedakan bagian-bagian yang berbeda dari desain.
Warna dapat digunakan untuk menggugah emosi dari
orang lain agar pesan yang ada bisa tersampaikan. Hal ini
terkait dengan psikologi warna
 KELAS.COM x
WARNA

RODA WARNA
Roda warna tersusun dari 12 warna alami, yang dapat
kita kombinasikan untuk membentuk nuansa dari produk
yang kita rancang. Kombinasikan warna juga dengan
Psikologi Warna untuk mendapatkan hasil yang sesuai.
WARNA KELAS.COM x

Mengapa Roda Warna penting pada UI/UX? mengingat

produk yang kita rancang juga akan mengejar
konsistensi, kemudahan penerapan, dan kemudahan
penggunaan, warna yang terbatas akan membantu
meraih hal tersebut.

Biasanya, kita hanya memerlukan 3 jenis kelompok

warna: Primer, Sekunder, dan Tersier. Kita bisa
kombinasikan dengan proporsi warna 60:30:10 untuk
warna Primer, Sekunder, dan Tersier.

Semakin besar dan komples suatu produk, tidak menutup

kemungkinan semakin banyak kelompok warna yang
dipilih. Contoh: IBM
WARNA KELAS.COM x

HARMONI WARNA
Merupakan titik mulai kita untuk memperoleh kombinasi
warna yang tepat. Tidak ada satu solusi yang pakem
untuk memilih mana harmoni yang paling benar.
Sesuaikan dengan beberapa pertimbangan seperti
kemudahan pengelolaan, kesesuaian dengan brand
produk, dan apakah sudah memenui kebutuhan sistem

Harmoni yang bisa kita coba eksplorasi:

- Analog
- Komplementer
- Triad
 WARNA KELAS.COM x

WARNA PADA
UI UX DESIGN
Warna juga berperan penting dalam
memudahkan penggunaan.
Ada standar khusus agar warna dapat
diterapkan di suatu produk digital.
Hal ini dengan memandang:

1. kebutuhan pengguna yang memiliki

kondisi spesial dalam mengenali
warna
2. kontras warna pada sebuah
antarmuka

Akan dibahas lanjut pada bagian Accessible pada UX Design...

 KELAS.COM x

TIPOGRAFI
 KELAS.COM x
TIPOGRAFI

DEFINISI TIPOGRAFI PADA PRODUK DIGITAL

Bagaimana kita bisa menyusun konten teks pada media digital/elektronik agar produk mudah
dipahami, dibaca, dan pesan bisa tersampaikan dengan bantuan visual.

Bantuan visual ini seperti tebal tipis, besar kecil, dan warna teks tersebut. Jenis dari tipe visualisasi
teks juga berpengaruh dan memberikan efek pada kepribadian produk yang kita pakai
 KELAS.COM x
TIPOGRAFI

JENIS-JENIS HURUF
Terdapat beberapa jenis tipografi yang sering
dipertimbangkan untuk digunakan pada produk digital.
1. Sans-serif (huruf tanpa ekor)
2. Serif (huruf dengan ekor)
3. Display (huruf untuk headline dan konten berukuran
besar)
4. Monospace (huruf dengan jarak seragam, memudahkan
pembacaan huruf, angka, kode program)
 KELAS.COM x
TIPOGRAFI

PRINSIP-PRINSIP TIPOGRAFI PADA UI/UX

DESIGN
Konsistensi: Penggunaan jenis huruf, ukuran, dan jarak antar huruf yang konsisten di seluruh
desain.
Kontras: Memastikan ada kontras yang cukup antara teks dan latar belakang untuk memudahkan
pembacaan.
Hierarki: Menggunakan ukuran, jenis huruf, dan warna yang berbeda untuk membedakan antara
elemen teks yang berbeda, seperti judul dan teks tubuh.
Skala: Memastikan ukuran huruf yang sesuai dengan ukuran layar, perangkat, dan jarak pandang
pengguna.
 KELAS.COM x

PRINSIP VISUAL
DESAIN
Penting untuk memahami dasar visual desain untuk dapat
menyusun tampilan antarmuka grafis yang seimbang dan
tepat guna secara visual. Mulai dari skala elemen, hirarki
visual, keseimbangan elemen halaman, kontras, dan yang
terakhir: Gestalt
PRINSIP KELAS.COM x
VISUAL DESAIN

SCALE
Penerapan proporsi skala elemen pada antarmuka,
membantu kita untuk menyampaikan pesan tersirat
bagian elemen mana yang dijadikan poin utama.

Sebagai contoh: Aplikasi Medium

PRINSIP KELAS.COM x
VISUAL DESAIN

VISUAL HIERARCHY
Visual hierarchy pada UI/UX design merujuk pada
penggunaan elemen visual seperti ukuran, warna,
dan posisi untuk menentukan pentingnya dan
hubungan antara elemen desain yang berbeda untuk
tujuan tertentu.

Seperti contoh berikut: Aplikasi Uber

 PRINSIP KELAS.COM x
VISUAL DESAIN

BALANCE
Merupakan keseimbangan halaman secara
keseluruhan dari kumpulan elemen yang disusun.
Prinsip ini digunakan untuk membentuk alir baca
pengguna, atau bahkan menerapkan kepribadian
brand atau produk, menjadi yang kaku, atau luwes.

Sebagai contoh bandingkan gambar berikut

PRINSIP KELAS.COM x
VISUAL DESAIN

CONTRAST
Kontras adalah prinsip elemen visual yang
menitikberatkan suatu elemen dengan adanya
perbedaan. Penerapan kontras ini dapat digunakan
untuk menarik perhatian pengguna, atau sebagai
salah satu cara penerapan persona brand produk.
Baik itu warna, bentuk, ukuran.

Sebagai contoh gambar berikut.

 PRINSIP KELAS.COM x
VISUAL DESAIN

BALANCE
Gestalt merupakan suatu prinsip desain yang
mengambil psikologis manusia bahwa kita mencerna
suatu objek baru, dari objek pembentuk di sekitarnya.

Sebagai contoh, halaman e-commerce Bukalapak

berikut.
PRINSIP KELAS.COM x
UX DESIGN

PRINSIP
UX DESIGN
7 klasifikasi dasar agar suatu produk digital dapat
dikatakan memiliki pengalaman pengguna yang baik.
Ditemukan pada tahun 2004 oleh Peter Morville.
Jika kita lihat dengan seksama, tidak hanya kemudahan
dan kemenarikan suatu desain yang membuat produk
digital memiliki pengalaman pengguna yang baik.

Ada beberapa hal lainnya:

PRINSIP KELAS.COM x
UX DESIGN

VALUABLE
Memiliki nilai di mata customer dan pengguna.
Apakah dengan menggunakan produk digital kita,
masalah mereka dapat terselesaikan dan membuat
mereka mau untuk menghabiskan sumber daya
mereka (uang, waktu) pada produk tersebut
PRINSIP KELAS.COM x
UX DESIGN

USEFUL
Apakah produk digital yang kita rancang, memiliki
tujuan yang nyata dan jelas di kehidupan target
pengguna kita
PRINSIP KELAS.COM x
UX DESIGN

DESIRABLE
Sebelum merancang produk, perlu dicari tahu juga
apakah solusi yang dibawa produk ini memang
diinginkan oleh masyarakat, atau tidak. Percuma jika
kita menyelesaikan masalah yang dibuat-buat
PRINSIP KELAS.COM x
UX DESIGN

ACCESSIBLE
Perlu diketahui bahwa manusia bermacam-macam.
Mulai dari strata ekonomi, literasi ilmu, teknologi
serta bahasa, maupun keterbatasan fisik. Pastikan
bahwa solusi yang kita tawarkan di produk digital
dapat digunakan oleh bermacam-macam manusia
pada target pengguna kita
PRINSIP KELAS.COM x
UX DESIGN

CREDIBLE
Apakah hasil dari solusi kita bisa dipercaya oleh
target pengguna untuk meringankan kehidupan
mereka sehari-hari
PRINSIP KELAS.COM x
UX DESIGN

FINDABLE
Ketika kita membuat solusi, bagaimana solusi tersebut
dapat dengan mudah ditemukan oleh target pengguna
agar dapat menyelesaikan masalah mereka.
PRINSIP KELAS.COM x
UX DESIGN

USABLE
Apakah memang produk digital ini intuitif, mudah
digunakan untuk menyelesaikan permasalahan mereka
 KELAS.COM x
PSIKOLOGI DIGITAL

PSIKOLOGI DIGITAL:
"LAWS" OF UX & HUMAN DECISION MAKING.
Laws of UX & KELAS.COM x
Human Decision Making

LAWS OF UX & HUMAN

DECISION MAKING
"Laws" of UX bukanlah sebuah aturan, melainkan dasar
teori keilmuan yang diperoleh dari cabang ilmu
Psycologist vs Designer psikologi. Terlihat dari bagaimana kedua profesi ini
berbagi hal yang mirip, mulai dari riset, mengenal
pengguna/manusia dari sisi emosi dan motif, serta
mencerna data
Laws of UX & KELAS.COM x
Human Decision Making

BAGAIMANA ILMU INI

MEMPENGARUHI PENGAMBILAN
KEPUTUSAN MANUSIA
Contoh: Decoy Effect.
Sebuah teori psikologi dimana untuk mendorong
penjualan dengan harga tertinggi, diciptakanlah porsi
tengah, dengan harga yang nanggung. Tujuannya,
supaya calon pembeli merasa lebih untung dengan
membeli paket tertinggi, daripada paket tengah, dan
terrendah.
Laws of UX & KELAS.COM x
Human Decision Making

SYSTEM 1 & SYSTEM 2

Mengapa ini ada?
Karena manusia kadang mengambil keputusan yang
tidak rasional. Kita, memiliki 2 macam cara untuk
mengambil keputusan. Model pertama dengan intuisi
cepat, dan model kedua yang memerlukan pemikiran
lebih dalam untuk mengambil keputusan
Laws of UX & KELAS.COM x
Human Decision Making

KEBUTUHAN MANUSIA,
EMOSIONAL
Bagaimana kita sebagai manusia, mengambil keputusan
dengan mempertimbangkan banyak faktor. Jangan
lupakan juga terkait kebutuhan manusia secara emosional
di piramida kebutuhan pada pertemuan kemarin ini.
Laws of UX & KELAS.COM x
Human Decision Making

BAGAIMANA KEPUTUSAN
MANUSIA BISA DIPENGARUHI
Jika kita membuat keputusan secara lebih lama, dengan
proses berpikir untuk memilih popcorn yang tepat, kita
pasti akan memperhitungkan juga budget yang kita
punya, apakah kita perlu sebanyak itu untuk sebuah
popcorn, ataukah sebenarnya tidak membeli adalah
keputusan yang tepat?
Laws of UX & KELAS.COM x
Human Decision Making

HUBUNGANNYA DENGAN
UI/UX DESIGNER
Hal hal seperti inilah yang kita perlu terapkan pada produk
digital yang kita buat sebagai seorang UI/UX Designer
agar produk yang kita rancang, memenuhi semua aspek.
Tidak hanya cantik dilihat, mudah digunakan, tapi juga
tepat sasaran dengan tujuan bisnis
Laws of UX & KELAS.COM x
Human Decision Making

LEBIH JAUH
Rekomendasi bacaan "Laws" lebih jauh
 KELAS.COM x
PRODUCT DESIGN

PRODUCT DESIGN:
EMPATHISING, DEFINING, IDEATING,
PROTOTYPING, TESTING, SERTA AGILE/SCRUM
 KELAS.COM x
PRODUCT DESIGN

PRODUCT DESIGN
Lebih tepatnya untuk fokus saat ini, Digital Product Design. Bagaimana kita bisa
membuat desain produk digital mulai dari nol, hingga dirilis ke pengguna asli.
 KELAS.COM x
PRODUCT DESIGN

PROSES DESAIN
Mengapa proses desain penting? hal ini membantu kita
untuk menavigasikan apa yang akan kita buat, dengan
sadar mengambil keputusan desain, dan dengan
percaya diri membawa desain ini ke rekan kerja yang
lain untuk diekssekusi. Dengan ini, semakin dekat jarak
antara desain yang kita buat dengan kenyataan
penggunaan produk di pasar.
 KELAS.COM x
Proses Desain

Sebelum bahas lebih dalam, perlu digarisbawahi bahwa pada

kenyataannya, proses yang ada di suatu perusahaan akanlah
"messy". Yang dimaksud di sini adalah, banyak tahap yang bisa
loncat dari tahap satu ke tahap berikutnya, diulangi kembali hinga
sesuai menjadi suatu desain produk digital yang siap diluncurkan
ke publik. Proses ini tidak linear.

Empathize
Define
Ideate
Prototype
Test

Meskipun banyak ketidakaturan dalam pengembangan

produk nantinya, kelima tahap ini harus ada pada proses kerja
kita sebagai UI/UX Designer
 KELAS.COM x
PRODUCT DESIGN

EMPATHIZE
Empathize
Proses mengenal tujuan bisnis, pengguna, dan sejauh
apa batasan dari penerapan produk digital nantinya. Di
sini perlunya untuk kerjasama dengan Product
Manager/Business Analyst, Customer Service, hingga
Lead Engineer. Ini diperlukan agar kita bisa tahu dari
berbagai macam sisi, hal seperti apa yang kita perlu
secara detail perhatikan dalam perancangan desain
produk agar tepat sasaran
 KELAS.COM x
PRODUCT DESIGN

DEFINE
Define
Tahap ini sudah merupakan tahap penentuan masalah
apa yang ingin diselesaikan. Biasanya diprioritaskan
berdasarkan seberapa besar efek yang akan dihasilkan
jika masalah tersebut selesai, atau tidak dihiraukan
sama sekali
 KELAS.COM x
PRODUCT DESIGN

IDEATE
Ideate
Di tahap ini, biasanya kita sudah mulai eksplorasi untuk
solusi apa yang cocok untuk masalah yang dipilih.
Eksplorasi ini bermacam-macam bentuk. Mulai dari
konsep, low-fidelity (coretan tangan, wireframe), atau
sudah hi-fidelity. Bergantung seberapa besar masalah
dan seberapa abstrak solusi yang akan dibentuk
 KELAS.COM x
PRODUCT DESIGN

PROTOTYPE
Prototype
Merupakan tahapan dimana ide sudah dibuat dalam
bentuk yang menyerupai produk jadi, dengan usaha
seminimum mungkin. Tujuannya, agar kita dapat
mengkomunikasikan, dan menguji apakah ide tersebut
dapat diterima oleh perwakilan dari calon pengguna kita
 KELAS.COM x
PRODUCT DESIGN

TEST
Test
Di sini merupakan tahap pengujian. Bisa menguji
prototype, atau produk yang sudah jadi di pasaran.
Biasanya model pengujian ini juga bergantung pada
tujuan yang ingin dicapai. Apakah menguji keberhasilan
penuntasan aktivitas (task success rate) ataukah hanya
melakukan pengujian mana produk yang lebih
menghasilkan keuntungan lebih (ab testing)
 KELAS.COM x
PRODUCT DESIGN

ITERATE
Terakhir, jangan lupa untuk iterasi!
 KELAS.COM x

AGILE/SCRUM
Apa itu Agile?
Merupakan model kerja, yang memiliki konsep
pengembangan hal-hal kecil, terstruktur, dan berulang
untuk menyelesaikan produk yang lebih besar.

Anggap sebagai pengerjaan lego. Kita buat balok

kecil-kecil, kita tunjukkan ke orang lain. Jika mereka
suka, kita bisa terus membuat balok-balok kecl yang
lain. Hingga semua balok kecil tersusun menjadi
struktur yang lebih besar.
 KELAS.COM x
PRODUCT DESIGN

BAGAIMANA INI PENTING BAGI

UI/UX DESIGNER
Jika dilihat konsep Agile, kita sebagai desainer harus
bisa membuat desain yang terstruktur, fleksibel,
namun rasional untuk dikerjakan dalam proses
pengembangan produk yang cepat.
Framework: Fogg Behavior Model dan KELAS.COM x
Decision-Making Models.

FRAMEWORK :
Fogg Behavior Model dan Decision-Making
Models.
 KELAS.COM x
Framework: Fogg Behavior Model

FRAMEWORK:
FOGG BEHAVIOR MODEL
Fogg?
BJ Fogg, PhD, adalah peneliti perilaku manusia. Di teori ini,
dia menemukan sebuah konsep bahwa sebuah perilaku
dilandaskan pada seberapa dekat kita terhadap elemen
pendukung aksi yang kita inginkan. Sebagai contoh, kita
ingin untuk menyikat gigi. Jika sikat gigi, pasta gigi berada
dalam jangkauan kita, akan semakin ringan bagi kita untuk
menyikat gigi. Begitu pula sebaliknya. Jika kita ingin
menghapus kebiasaan buruk seperti nonton netflix hingga
larut pagi, kita akan menjauhkan ponsel kita, mematikan
data kita, bahkan menghapus aplikasi netflix seutuhnya
dari perangkat digital kita.
 KELAS.COM x
Framework: Fogg Behavior Model

MOTIVASI
Aspek Fisik
Aspek Emosi
Aspek Sosial
 KELAS.COM x
Framework: Fogg Behavior Model

ABILITY
Batasan-batasan melakukan suatu aksi.
Seperti dari faktor waktu, ekonomi, keterbatasan
fisik, ketidakteraturan rutin
 KELAS.COM x
Framework: Fogg Behavior Model

1. Spark: pemicu yang datang dengan motivasi

tambahan)

TRIGGER 2. Facilitator: Motivasinya ada, tetapi tidak memiliki

kemampuan untuk mencapai perilaku yang
diinginkan
3. Signal: siap untuk berubah
 KELAS.COM x
Framework: Fogg Behavior Model

FRAMEWORK:
FOGG BEHAVIOR MODEL
Ambil contoh Instagram Reels. Penerapan model Fogg's
pada Instagram Reels ada pada elemen berikut:

Permudah akses: memiliki tab "Reels" tersendiri yang menampilkan video

singkat dari akun yang diikuti pengguna, sehingga mudah bagi pengguna
untuk menemukan konten baru dan menggunakan fitur Reels. Tidak hanya itu,
reels juga terintegrasi dengan halaman "Explore" yang memudahkan
pengguna untuk secara tidak sadar juga berinteraksi dengan konten Reels

Social Proof: dengan adanya "Featured" yang menampilkan Reels populer dan
trending, yang dapat memotivasi pengguna untuk membuat konten yang
mungkin akan ditampilkan pada bagian ini. Instagram juga mendorong
pengguna untuk menggunakan tagar dan berinteraksi dengan Reels pengguna
lain, yang dapat membantu meningkatkan visibilitas dan interaksi mereka.

Notifikasi: menggunakan pengingat untuk mendorong pengguna untuk

berinteraksi dengan fitur Reels. Aplikasi ini mengirimkan notifikasi kepada
pengguna ketika seseorang yang mereka ikuti memposting Reel baru atau
ketika Reel mereka sendiri mencapai jumlah tayangan tertentu.
 KELAS.COM x
Framework: Fogg Behavior Model

MORE TO READ
Rekomendasi bacaan untuk motivasi dan perilaku manusia
 KELAS.COM x

PANDUAN
MOBILE & WEB:
iOS Human Interface Guideline, Google
Material Design, GoodUI. org
 KELAS.COM x
Panduan Mobile & Web

PANDUAN MOBILE & WEB

Memilih Platform yang Tepat

Mobile, atau Web. Kapan tepatnya kita bisa memilih platform yang sesuai.

1. Target pengguna: misal dari dari segi kemampuan literasi teknologi, kemampuan ekonomi. Ini berpengaruh dari
platform yang digunakan untuk mengakses produk dan keterbatasannya.
2. Fungsi utama fitur dari suatu produk: jika suatu produk memerlukan akses ke sensor suatu perangkat, mobile
native dapat dipertimbangkan
3. Frekuensi penggunaan produk: jika secara alamiah produk ini sering digunakan, dan memerlukan pemberitahuan
yang dapat diandalkan secara real-time, mobile native lebih diuntungkan
4. Seberapa besar budget yang dialokasikan untuk pengembangan. Native, secara kasar jauh lebih mahal daripada
mobile web/web app karena harus mengelola lebih banyak sistem operasi, dan lebih banyak aturan desain yang
dipertimbangkan. Untuk perangkat Apple harus mengikuti iOS guidelines, sedangkan Android harus mengikuti
Google Material Design
 KELAS.COM x
Panduan Mobile & Web

IOS HUMAN INTERFACE

GUIDELINES
Membantu kita sebagai desainer untuk membuat
pengalaman penggunaan produk yang selaras dengan
perilaku perilaku unik dari perangkat Apple.

Contoh: kemampuan untuk kembali ke halaman

sebelumnya dengan swipe. Semua Apple product
memilikinya. Namun tidak dengan Android
 KELAS.COM x
Panduan Mobile & Web

GOOGLE MATERIAL DESIGN

Sama dengan iOS guideline, untuk Android kita bisa mengacu ke Material Design.
 KELAS.COM x
Framework: Fogg Behavior Model

MENGAPA
1. Consistency
2. Predictability

PENTING? 3. Proven Usability

4. Feasibility
 KELAS.COM x
Panduan Mobile & Web

BAGAIMANA DENGAN WEB?

W3school: Mengetahui berbagai macam jenis input dan interaksi yang dapat dijumpai
secara umum dari interface website https://goodui.org/: Kumpulan insight dari berbagai
macam jenis pola interface pada web
 KELAS.COM x
Panduan Mobile & Web

QUIZ
1. Dari 1-10, seberapa tahu kalian mengenai topik hari
ini?
2. Apa hal khusus yang ingin kalian pelajari mengenai
topik hari ini?
 KELAS.COM x
Panduan Mobile & Web

BONUS
 KELAS.COM x

LET'S DISCUSS!
QnA Session
 KELAS.COM x

LET'S PRACTICE!
60 Menit

Berdiskusi terkait penggunaan design theory, digital

psychology, dan product design.
 KELAS.COM x

INSTRUKSI TUGAS
PRAKTIK MANDIRI
 KELAS.COM x

TERIMA KASIH
TELAH HADIR!