Program Studi Bisnis Digital • FEB UNDIP

Desain UI & UX

Pertemuan 8 — Prinsip Desain Visual UI Bagian 1: Gestalt, Psikologi Warna, dan Hirarki Tipografi

Dari wireframe kotak-kotak kosong menuju tampilan yang benar-benar "berbicara" kepada pengguna — mengapa mata kita membaca susunan visual sebelum membaca kata-katanya.

RPS minggu 9 · 2x50 menit

Selamat pagi/siang, Anda semua. Setelah beberapa pertemuan lalu Anda berkutat dengan wireframe yang isinya kotak-kotak abu-abu dan garis putus-putus, hari ini kita mulai masuk ke paruh kedua mata kuliah ini: eksekusi visual yang sesungguhnya. Bayangkan Anda membuka aplikasi Gojek atau BCA mobile — dalam sepersekian detik, mata Anda sudah tahu tombol mana yang paling penting, informasi mana yang harus dibaca duluan, tanpa Anda sadar sedang "membaca" apa pun. Itu bukan kebetulan, itu hasil dari prinsip desain visual yang akan kita bedah hari ini: Gestalt, psikologi warna, dan hirarki tipografi. Materi ini adalah fondasi wajib sebelum Anda menyentuh Design System dan mockup high-fidelity di pertemuan-pertemuan berikutnya, jadi pastikan Anda benar-benar memahami "kenapa"-nya, bukan hanya menghafal istilahnya.

Bagian 1 dari 3

Prinsip Gestalt: Bagaimana Mata Mengelompokkan Elemen

Sebelum bicara warna atau font, kita perlu paham bagaimana otak manusia menyusun elemen-elemen terpisah menjadi satu kesatuan yang bermakna.

Tujuan Pembelajaran Hari Ini

Setelah pertemuan ini, Anda diharapkan mampu menerapkan prinsip desain visual dasar (Gestalt, warna, tipografi) pada rancangan antarmuka (Sub-CPMK minggu ini). Secara rinci:

Konsep

Menjelaskan lima prinsip Gestalt dan bagaimana otak mengelompokkan elemen visual.

Warna

Menjelaskan psikologi warna, kontras, dan alasan aksesibilitas warna wajib dijaga.

Tipografi

Menghitung dan menyusun skala hirarki tipografi (heading hingga caption) yang konsisten.

Penerapan

Mengevaluasi sebuah antarmuka menggunakan checklist Gestalt + warna + tipografi.

Kenapa Desain Visual Bukan Sekadar "Mempercantik"

Desain visual yang baik mengurangi beban kognitif pengguna — mata tahu ke mana harus melihat tanpa harus berpikir keras.

Fakta yang sering diabaikan

Pengguna memindai (scan) layar dalam hitungan detik sebelum memutuskan membaca detail.
Wireframe menentukan struktur; desain visual menentukan urutan perhatian pengguna.
UI yang berantakan secara visual membuat pengguna berhenti (bounce) walau fiturnya sebenarnya lengkap.

Contoh nyata: aplikasi BCA mobile menempatkan saldo dan tombol transfer dengan ukuran & warna paling menonjol di layar utama — bukan kebetulan, itu hasil keputusan hirarki visual yang disengaja agar tugas paling sering pengguna langsung terlihat.

Anda mungkin berpikir desain visual hanyalah tahap "mempercantik" setelah wireframe selesai. Anggapan ini keliru dan berbahaya. Ketika pengguna membuka sebuah aplikasi, mereka tidak membaca layar seperti membaca buku dari kiri ke kanan secara sistematis — mereka memindai dengan cepat, dalam hitungan detik, mencari petunjuk visual tentang apa yang penting. Wireframe yang sudah Anda pelajari sebelumnya menentukan struktur dan letak elemen, tapi desain visual yang menentukan mana yang dilihat pengguna lebih dulu. Coba perhatikan aplikasi BCA mobile: saldo rekening dan tombol transfer sengaja dibuat paling menonjol secara ukuran dan warna, karena itulah dua hal yang paling sering dicari nasabah. Kalau desain visualnya berantakan, sekalipun fiturnya lengkap, pengguna bisa frustrasi dan berhenti memakai aplikasi — inilah kenapa materi hari ini krusial, bukan sekadar pemanis.

Gestalt #1–2: Proximity dan Similarity

Dua prinsip paling dasar dan paling sering dipakai dalam layout UI.

Proximity (Kedekatan)

Elemen yang berdekatan jaraknya dianggap satu kelompok, meski tidak diberi garis pemisah.

Contoh: label "Nama" yang jaraknya dekat dengan kolom input dianggap satu pasangan, bukan dengan kolom di baris lain.

Similarity (Kemiripan)

Elemen dengan bentuk, warna, atau ukuran serupa dianggap satu kategori/fungsi yang sama.

Contoh: semua ikon menu bawah di Tokopedia dibuat seragam ukuran & gaya agar terbaca sebagai satu grup navigasi.

Kesalahan pemula tersering: jarak antar-elemen yang tidak konsisten membuat pengguna salah mengelompokkan mana label milik input mana — ini murni soal proximity, bukan warna atau font.

Mari kita mulai dari dua prinsip Gestalt paling fundamental. Prinsip proximity mengatakan bahwa elemen yang jaraknya berdekatan otomatis dianggap otak kita sebagai satu kelompok, bahkan tanpa ada garis kotak yang memisahkannya secara eksplisit. Coba bayangkan formulir pendaftaran: kalau jarak antara label "Nama" dengan kolom inputnya lebih dekat dibanding jarak ke label berikutnya, pengguna otomatis tahu label itu milik kolom yang mana — ini sepenuhnya soal jarak, bukan garis atau kotak. Prinsip similarity, atau kemiripan, mengatakan bahwa elemen dengan bentuk, warna, atau ukuran yang sama dianggap punya fungsi yang sama. Perhatikan menu navigasi bawah di Tokopedia — semua ikonnya dibuat seragam gaya dan ukurannya, sehingga pengguna langsung tahu itu adalah satu grup navigasi utama, berbeda dari tombol-tombol lain di layar. Dua prinsip ini adalah alasan kenapa spasi dan konsistensi visual bukan detail sepele dalam desain UI.

Gestalt #3–4: Closure dan Continuity

Otak kita cenderung "melengkapi" pola yang belum utuh dan mengikuti garis/alur secara alami.

Ikon "keranjang belanja" hanya berupa garis putus-putus sederhana, tapi otak kita tetap membacanya sebagai keranjang utuh — itulah closure bekerja di balik ikon-ikon minimalis yang biasa Anda lihat.

Dua prinsip berikutnya sedikit lebih halus, tapi sama pentingnya. Closure adalah kecenderungan otak untuk "menutup" atau melengkapi bentuk yang sebenarnya belum sempurna. Perhatikan ikon-ikon minimalis di banyak aplikasi — ikon keranjang belanja atau ikon rumah seringkali hanya berupa garis-garis sederhana yang tidak benar-benar tertutup rapat, tapi otak kita tetap mengenalinya sebagai bentuk utuh. Prinsip continuity mengatakan bahwa mata kita secara alami mengikuti garis atau alur yang berkelanjutan, dan lebih menyukai pola yang mengalir dibanding titik-titik acak yang melompat-lompat. Ini sebabnya carousel produk atau daftar berita disusun dalam satu baris atau kolom yang rapi — mata Anda otomatis mengikuti alurnya dari satu item ke item berikutnya tanpa kebingungan. Kedua prinsip ini menjelaskan kenapa ikon sederhana tetap bisa dipahami dan kenapa layout berbaris rapi terasa lebih nyaman dibaca.

Gestalt #5: Figure-Ground

Mata kita otomatis memisahkan mana objek utama (figure) dan mana latar belakang (ground) — kunci dari kontras dan keterbacaan.

Cara kerja

Objek dengan kontras tinggi terhadap latar otomatis dianggap "figure" (fokus utama).
Latar yang terlalu ramai/berwarna bisa membuat objek utama tenggelam.
Tombol CTA (Call-to-Action) sengaja dibuat kontras tinggi agar jelas menjadi figure.

Jebakan umum: tombol dengan warna terlalu dekat dengan warna latar (misalnya abu-abu muda di atas putih) membuat figure-ground gagal — pengguna tidak sadar itu tombol yang bisa diklik.

Prinsip Gestalt terakhir yang akan kita bahas adalah figure-ground. Setiap kali Anda melihat sebuah tampilan, otak Anda otomatis memisahkan mana yang menjadi objek utama, disebut figure, dan mana yang menjadi latar belakang, disebut ground. Objek dengan kontras tinggi terhadap sekitarnya akan otomatis dianggap sebagai figure yang penting. Inilah alasan tombol Call-to-Action, misalnya tombol "Beli Sekarang" di Shopee, sengaja dibuat dengan warna yang sangat kontras terhadap latar putih di sekitarnya — supaya otak Anda langsung menganggapnya sebagai objek utama yang perlu diperhatikan dan diklik. Jebakan yang sering dilakukan desainer pemula adalah membuat tombol dengan warna terlalu mirip dengan latar, misalnya abu-abu muda di atas putih — akibatnya prinsip figure-ground gagal bekerja, dan pengguna bahkan tidak sadar bahwa elemen itu sebenarnya adalah tombol yang bisa diklik. Dengan lima prinsip Gestalt ini di tangan Anda, mari kita lanjut ke latihan menerapkannya langsung.

Coba Sendiri: Kenali Prinsip Gestalt pada Layout

Ubah jarak, warna, dan bentuk elemen pada panel di bawah, lalu amati prinsip Gestalt mana yang sedang "aktif" bekerja.

Bagian 2 dari 3

Psikologi Warna dan Kontras dalam UI

Warna bukan sekadar selera estetika — ia membawa makna emosional, menentukan hirarki, dan punya syarat aksesibilitas yang wajib dipenuhi.

Psikologi Warna: Asosiasi Emosional (Konteks Indonesia)

Asosiasi warna bersifat konvensi budaya, bukan hukum universal — tapi cukup konsisten untuk dipakai sebagai alat komunikasi visual.

Biru

Kepercayaan, keamanan, profesional.

Dipakai BCA, BRI, LinkedIn — umum di sektor finansial & korporat.

Hijau

Pertumbuhan, positif, "aman untuk dilanjutkan".

Dipakai Gojek, tombol "berhasil"/konfirmasi di banyak aplikasi.

Merah & Oranye

Urgensi, peringatan, energi, promo.

Dipakai Shopee (oranye, semangat belanja), notifikasi error (merah).

Hati-hati generalisasi berlebihan: makna warna bisa berbeda antar budaya dan bisa berubah tergantung konteks (merah = bahaya di satu layar, tapi = identitas brand di layar lain).

Warna membawa muatan emosional yang sudah kita pelajari sejak kecil lewat pengalaman budaya, meskipun ini bukan hukum ilmiah yang kaku, melainkan konvensi yang cukup konsisten untuk dipakai sebagai alat komunikasi. Warna biru secara konsisten diasosiasikan dengan kepercayaan dan profesionalisme, itulah kenapa hampir semua bank besar di Indonesia seperti BCA dan BRI memakainya. Warna hijau membawa kesan pertumbuhan dan hal positif, sering dipakai Gojek sebagai identitas brand, dan hampir universal dipakai untuk tombol konfirmasi atau tanda "berhasil". Warna merah dan oranye membawa kesan urgensi dan energi — Shopee memakai oranye untuk membangkitkan semangat belanja, sementara merah hampir selalu dipakai untuk pesan error atau peringatan. Tapi saya ingatkan, jangan menggeneralisasi berlebihan: makna warna bisa bergeser tergantung konteks budaya dan situasi, jadi selalu uji dengan pengguna nyata, jangan hanya mengandalkan asumsi dari slide ini.

Kontras Warna: Bukan Estetika, tapi Aksesibilitas

Standar WCAG (Web Content Accessibility Guidelines) mensyaratkan rasio kontras minimum agar teks tetap terbaca oleh semua pengguna.

Ambang rasio kontras WCAG AA

Teks normal: rasio kontras minimum 4,5:1 terhadap latar.
Teks besar (≥18pt/bold ≥14pt): minimum 3:1.
Elemen UI non-teks (ikon, border tombol): minimum 3:1.

Sekitar ~8% pria mengalami buta warna (paling umum merah-hijau) — kontras yang cukup memastikan aplikasi tetap bisa dipakai tanpa harus mengandalkan warna saja untuk menyampaikan makna.

Kontras warna sering dianggap murni soal selera, padahal ini adalah persoalan aksesibilitas yang serius. Ada standar internasional bernama WCAG, singkatan dari Web Content Accessibility Guidelines, yang menetapkan rasio kontras minimum antara teks dan latar belakangnya. Untuk teks berukuran normal, rasio minimalnya empat koma lima berbanding satu; untuk teks besar atau tebal, cukup tiga berbanding satu; dan untuk elemen non-teks seperti ikon atau garis tombol, juga tiga berbanding satu. Angka-angka ini bukan sekadar formalitas — sekitar delapan persen populasi pria mengalami buta warna, paling umum kesulitan membedakan merah dan hijau. Kalau desain Anda hanya mengandalkan perbedaan warna tanpa kontras yang cukup atau tanpa penanda tambahan seperti ikon atau teks, sebagian pengguna Anda benar-benar tidak akan bisa memakai produk Anda dengan nyaman. Sekarang mari kita coba menghitung rasio kontras secara langsung.

Hitung dari Nol #1: Mengecek Rasio Kontras Tombol

Kasus: tombol "Beli Sekarang" berwarna oranye (luminansi relatif 0,32) di atas latar putih (luminansi relatif 1,0).

Langkah	Perhitungan	Nilai
1. Luminansi relatif latar (L1, lebih terang)	Latar putih	1,00
2. Luminansi relatif tombol (L2, lebih gelap)	Oranye tombol	0,32
3. Rumus rasio kontras	(L1 + 0,05) ÷ (L2 + 0,05)	(1,05) ÷ (0,37)
4. Rasio kontras	1,05 ÷ 0,37	≈ 2,8:1

Hasil

2,8:1

di bawah ambang 4,5:1 — teks tombol perlu diperbaiki (warna digelapkan atau teks diperbesar/ditebalkan)

Mari kita hitung bersama, langkah demi langkah, dengan angka yang bisa Anda verifikasi sendiri dengan tool kontras daring. Rumus rasio kontras WCAG menggunakan luminansi relatif, yaitu ukuran seberapa terang sebuah warna secara matematis, dengan nilai antara nol untuk hitam pekat hingga satu untuk putih murni. Anggap latar tombol kita berwarna putih dengan luminansi satu, dan warna oranye tombolnya punya luminansi nol koma tiga dua. Langkah pertama dan kedua, kita catat kedua nilai luminansi ini, dengan L1 selalu yang lebih terang. Langkah ketiga, kita masukkan ke rumus: L1 ditambah nol koma nol lima, dibagi L2 ditambah nol koma nol lima — hasilnya satu koma nol lima dibagi nol koma tiga tujuh. Langkah keempat, hasil pembagian itu memberi kita rasio kontras sekitar dua koma delapan berbanding satu — di bawah ambang minimum empat koma lima untuk teks normal. Artinya, jika teks putih diletakkan di atas tombol oranye ini, kombinasi warnanya perlu diperbaiki, misalnya dengan menggelapkan oranyenya atau menambah bobot font.

Coba Sendiri: Uji Rasio Kontras WCAG

Geser warna teks dan latar, lalu amati rasio kontras berubah real-time dan apakah lolos ambang AA 4,5:1.

Struktur Palet: Primer, Sekunder, dan Netral

Palet UI yang sehat bukan "banyak warna", tapi sedikit warna dengan peran jelas.

Aturan praktis: sekitar 60–70% tampilan didominasi warna netral (putih/abu), sisanya baru warna aksen — ini yang membuat 1–2 tombol penting benar-benar "menonjol" berkat figure-ground.

Kesalahan umum pemula adalah memakai terlalu banyak warna berbeda dalam satu tampilan, sehingga semuanya terlihat sama-sama penting dan akhirnya tidak ada yang benar-benar menonjol. Palet warna yang sehat justru dibangun dari empat peran yang jelas. Warna primer, biasanya hanya satu warna aksen utama, dipakai konsisten untuk tombol atau elemen paling penting seperti Call-to-Action. Warna sekunder mendukung, dipakai untuk label atau ikon. Warna netral — putih, abu-abu, hitam — justru harus mendominasi sekitar enam puluh sampai tujuh puluh persen tampilan, sebagai latar dan teks pendukung. Terakhir, warna semantik khusus dipakai konsisten untuk makna tertentu, misalnya hijau untuk sukses dan merah untuk error, terpisah dari warna primer brand. Semakin banyak area netral, semakin kuat efek figure-ground yang sudah kita pelajari tadi — satu atau dua tombol aksen akan langsung menonjol karena kontras terhadap lautan netral di sekitarnya.

Bagian 3 dari 3

Hirarki Tipografi: Menyusun Skala yang Konsisten

Ukuran, bobot, dan jarak antar-teks bukan pilihan bebas — ada logika matematis di baliknya yang membentuk urutan baca.

Hirarki Tipografi: Mengarahkan Urutan Baca

Pengguna harus tahu apa yang dibaca duluan hanya dari ukuran dan bobot teks, tanpa instruksi eksplisit.

Elemen pembentuk hirarki

Ukuran (size): elemen lebih besar = lebih penting/dibaca duluan.
Bobot (weight): bold menarik perhatian lebih dari regular.
Warna & kontras: teks gelap pekat > teks abu muda dalam urutan perhatian.
Jarak (spacing): judul dengan margin lebih besar terasa "berdiri sendiri".

Contoh: pada kartu produk Tokopedia, nama produk (sedang, tebal), harga (besar, tebal, warna aksen), dan rating (kecil, abu-abu) — urutan baca ini murni hasil hirarki tipografi, bukan kebetulan.

Hirarki tipografi adalah cara kita mengarahkan urutan baca pengguna hanya lewat perbedaan visual teks, tanpa perlu memberi instruksi eksplisit seperti "baca ini duluan". Ada empat elemen yang membentuknya: ukuran font, di mana teks yang lebih besar otomatis dianggap lebih penting; bobot font, di mana teks tebal menarik perhatian lebih besar dibanding teks reguler; warna dan kontras, di mana teks berwarna gelap pekat terasa lebih penting dibanding teks abu-abu muda; dan jarak, di mana judul dengan ruang kosong lebih besar di sekitarnya terasa lebih "berdiri sendiri" dan penting. Coba perhatikan kartu produk di Tokopedia: nama produk ditulis ukuran sedang dan tebal, harga ditulis lebih besar dan tebal dengan warna aksen, sementara rating bintang ditulis kecil dengan warna abu-abu. Urutan mata Anda membaca ketiganya — harga, lalu nama, lalu rating — adalah hasil rekayasa hirarki tipografi yang disengaja, bukan kebetulan.

Type Scale: Sistem Matematis di Balik Ukuran Font

Type scale — deret ukuran font yang dihasilkan dari perkalian rasio tetap, agar hirarki terasa konsisten & proporsional (bukan angka acak).

Ukuran(n) = Ukuran Dasar × Rasioⁿ

Rasio umum dipakai

1,125 (Major Second) — kontras halus, cocok teks padat.
1,25 (Major Third) — kontras sedang, umum dipakai UI.
1,333 (Perfect Fourth) — kontras tegas, cocok landing page.

Ukuran dasar (base) untuk teks isi (body) pada UI mobile umumnya ~14–16px — semua ukuran lain (caption, heading) diturunkan dari angka ini via rasio.

Sekarang kita masuk ke bagian yang sering dianggap paling teknis, tapi sebenarnya sangat sistematis: type scale, atau skala tipografi. Alih-alih menebak-nebak ukuran font secara acak — misalnya empat belas untuk ini, tujuh belas untuk itu — desainer profesional menggunakan sebuah rumus: ukuran dasar dikalikan dengan rasio tetap, dipangkatkan sesuai tingkatannya. Ada beberapa rasio umum yang dipakai: rasio satu koma satu dua lima memberi kontras yang halus, cocok untuk aplikasi dengan banyak teks padat seperti aplikasi berita; rasio satu koma dua lima memberi kontras sedang dan paling umum dipakai untuk UI aplikasi; sementara rasio satu koma tiga tiga tiga memberi kontras yang lebih tegas, cocok untuk halaman promosi atau landing page. Ukuran dasar untuk teks isi pada aplikasi mobile umumnya sekitar empat belas sampai enam belas piksel, dan semua ukuran lain — mulai dari caption terkecil hingga judul terbesar — diturunkan secara matematis dari angka dasar ini. Mari kita coba hitung skalanya secara langsung.

Hitung dari Nol #2: Menyusun Type Scale Aplikasi

Kasus: ukuran dasar (body text) 16px, rasio Major Third 1,25, dihitung untuk 3 tingkat di atasnya.

Langkah	Perhitungan	Nilai
1. Body (dasar, n=0)	16 × 1,25⁰	16px
2. Subheading (n=1)	16 × 1,25¹	20px
3. Heading (n=2)	16 × 1,25²	25px
4. Judul Layar (n=3)	16 × 1,25³	≈ 31,25px

Skala Lengkap

16 → 20 → 25 → 31px

empat tingkat, proporsional & konsisten di seluruh aplikasi

Mari kita hitung bersama skala tipografi sungguhan yang bisa langsung Anda pakai di tugas mockup nanti. Kita mulai dari ukuran dasar teks isi, enam belas piksel, yang kita anggap sebagai tingkat nol, sehingga rasio dipangkatkan nol yang hasilnya satu, jadi tetap enam belas piksel. Langkah kedua, untuk subheading, kita naikkan ke tingkat satu: enam belas dikali satu koma dua lima pangkat satu, hasilnya dua puluh piksel. Langkah ketiga, untuk heading, tingkat dua: enam belas dikali satu koma dua lima pangkat dua, yaitu satu koma dua lima kali satu koma dua lima sama dengan satu koma lima enam dua lima, dikali enam belas, hasilnya dua puluh lima piksel. Langkah terakhir, untuk judul layar utama, tingkat tiga: enam belas dikali satu koma dua lima pangkat tiga, hasilnya kira-kira tiga puluh satu koma dua lima piksel, biasanya dibulatkan jadi tiga puluh dua. Perhatikan bagaimana keempat angka ini — enam belas, dua puluh, dua puluh lima, tiga puluh satu — terasa proporsional dan tidak sembarangan, itulah kekuatan type scale dibanding menebak angka secara acak.

Menggabungkan Gestalt, Warna, dan Tipografi

Ketiga prinsip bekerja bersamaan, bukan terpisah — sebuah tombol CTA yang baik adalah hasil dari ketiganya sekaligus.

Gestalt

Tombol berjarak cukup dari elemen lain (proximity) & berbentuk konsisten dengan tombol lain (similarity).

Warna

Warna aksen kontras tinggi terhadap latar netral (figure-ground) & memenuhi rasio kontras WCAG.

Tipografi

Label tombol memakai bobot tebal & ukuran dari tingkat type scale yang sesuai kepentingannya.

Ketika ketiganya selaras, pengguna "tahu" tombol itu penting dan bisa diklik — dalam waktu kurang dari satu detik, tanpa perlu membaca teksnya sama sekali.

Sekarang saatnya kita satukan tiga topik yang sudah kita bahas hari ini, karena dalam praktik nyata, ketiganya tidak pernah bekerja sendiri-sendiri. Ambil contoh sebuah tombol Call-to-Action yang baik, misalnya tombol "Bayar Sekarang" di aplikasi e-commerce. Dari sisi Gestalt, tombol itu punya jarak yang cukup dari elemen lain di sekitarnya sehingga jelas terlihat sebagai satu kesatuan, dan bentuknya konsisten dengan tombol-tombol lain di aplikasi yang sama. Dari sisi warna, tombol itu memakai warna aksen dengan kontras tinggi terhadap latar netral di sekelilingnya, sekaligus memenuhi rasio kontras WCAG yang sudah kita hitung tadi. Dari sisi tipografi, label di dalam tombol memakai bobot tebal dan ukuran yang sesuai dengan tingkat kepentingannya dalam skala tipografi. Ketika ketiga hal ini selaras dengan baik, pengguna langsung "tahu" bahwa itu adalah tombol penting yang bisa diklik, dalam waktu kurang dari satu detik, bahkan sebelum mereka sempat membaca teksnya secara sadar.

Latihan Kelas: Audit Visual Aplikasi

Kerjakan berpasangan (10 menit), lalu diskusikan hasilnya di kelas.

Tugas

Buka salah satu aplikasi di ponsel Anda (Gojek, BCA mobile, Tokopedia, atau lainnya) pada layar utamanya, lalu jawab:

(a) Sebutkan minimal 2 prinsip Gestalt yang terlihat pada layar tersebut, beri contoh konkret.
(b) Identifikasi warna primer, sekunder, dan netral pada layar — apakah proporsinya sudah "60–70% netral"?
(c) Urutkan 3 elemen teks pada layar dari yang paling menonjol hingga paling kecil — jelaskan kenapa urutannya demikian.

Petunjuk: gunakan checklist Gestalt (5 prinsip), struktur palet (4 peran warna), dan konsep hirarki tipografi yang sudah kita bahas hari ini sebagai panduan audit.

Sekarang giliran Anda mempraktikkan langsung apa yang sudah kita pelajari hari ini. Silakan berpasangan dengan teman sebangku, ambil ponsel Anda, dan buka salah satu aplikasi yang sering Anda pakai — boleh Gojek, BCA mobile, Tokopedia, atau aplikasi lain — lalu amati layar utamanya selama sepuluh menit. Untuk bagian a, cari minimal dua prinsip Gestalt yang bisa Anda kenali secara konkret pada layar itu, misalnya proximity pada pengelompokan menu atau figure-ground pada tombol utama. Untuk bagian b, coba identifikasi mana warna primer, sekunder, dan netral pada layar tersebut, dan perkirakan apakah proporsi netralnya sudah mendekati enam puluh sampai tujuh puluh persen seperti yang kita bahas tadi. Untuk bagian c, urutkan tiga elemen teks dari yang paling menonjol sampai paling kecil, dan jelaskan mengapa urutan itu masuk akal berdasarkan hirarki tipografi. Setelah waktu habis, saya akan meminta beberapa pasangan membagikan temuan mereka di depan kelas.

Rangkuman & Persiapan Minggu Depan

Konsep	Inti
Gestalt	Proximity, similarity, closure, continuity, figure-ground
Warna	Asosiasi emosional + kontras WCAG (min. 4,5:1 teks normal)
Struktur palet	Primer, sekunder, netral (60–70%), semantik
Type scale	Ukuran = Basis × Rasioⁿ (mis. 1,25 — Major Third)

Tugas sebelum pertemuan depan

Selesaikan audit visual aplikasi dari latihan kelas hari ini secara tertulis (1 halaman), siapkan untuk didiskusikan.

Minggu depan: Desain Komponen & Design System — bagaimana prinsip hari ini dikemas menjadi komponen UI yang dapat dipakai ulang secara konsisten.

Mari kita rangkum perjalanan kita hari ini. Kita mulai dari lima prinsip Gestalt — proximity, similarity, closure, continuity, dan figure-ground — yang menjelaskan bagaimana otak kita otomatis mengelompokkan elemen visual. Kita lanjut ke psikologi warna, memahami asosiasi emosionalnya sekaligus pentingnya rasio kontras WCAG demi aksesibilitas, dan bagaimana menyusun palet dengan proporsi netral yang sehat. Kita tutup dengan hirarki tipografi dan type scale, sistem matematis untuk menyusun ukuran font secara konsisten. Sebagai tugas sebelum pertemuan berikutnya, selesaikan audit visual aplikasi dari latihan kelas tadi secara tertulis satu halaman, karena kita akan mendiskusikannya di awal pertemuan depan. Minggu depan kita akan melihat bagaimana ketiga prinsip yang Anda kuasai hari ini dikemas menjadi komponen UI yang dapat dipakai berulang kali secara konsisten lewat sebuah Design System — fondasi yang akan mempercepat pekerjaan desain Anda seumur hidup karier Anda nanti. Sampai jumpa di pertemuan berikutnya.