Program Studi Bisnis Digital • FEB UNDIP

Desain UI & UX

Pertemuan 10 — Desain High-Fidelity (Mockup): Menerjemahkan Wireframe ke Mockup dengan Figma

Dari kotak-kotak abu-abu wireframe menuju tampilan yang terlihat “siap pakai” — warna, tipografi, grid, dan komponen digabung jadi satu mockup utuh di Figma.

RPS MINGGU 11 • 2×50 MENIT

Selamat datang kembali, Anda baru saja melewati Ujian Tengah Semester dan sekarang kita masuk ke paruh kedua mata kuliah yang lebih fokus pada eksekusi visual. Minggu lalu Anda sudah belajar membuat wireframe — kerangka kotak-kotak abu-abu yang menunjukkan tata letak sebuah aplikasi atau website. Hari ini kita naik satu tingkat: bagaimana kerangka kasar itu diubah menjadi tampilan yang mendekati produk jadi, lengkap dengan warna, jenis huruf, dan gambar, menggunakan Figma. Anda perlu paham bahwa mockup bukan sekadar "mempercantik" — ada aturan sistematis di baliknya, mulai dari grid, tipografi, sampai kontras warna yang bisa dibaca semua orang termasuk yang punya keterbatasan penglihatan. Siapkan laptop Anda, karena kita akan banyak membahas fitur konkret di Figma yang akan langsung Anda praktikkan.

Bagian 1 dari 3

Dari Wireframe ke Fidelitas Tinggi

Memahami apa itu mockup high-fidelity, di mana posisinya dalam proses desain, dan alat-alat dasar Figma yang menjadi bahan bakunya.

Tujuan Pembelajaran Hari Ini

Sesuai Sub-CPMK minggu ini, setelah pertemuan ini Anda diharapkan mampu menerjemahkan wireframe menjadi mockup high-fidelity yang siap diprototipekan. Secara rinci:

CAPAIAN 1

DEFINISI

Membedakan wireframe (lo-fi) dan mockup (hi-fi), serta menjelaskan fungsi masing-masing dalam proses desain.

CAPAIAN 2

ALAT FIGMA

Menggunakan Frame, Component, dan Auto Layout di Figma untuk menyusun tampilan.

CAPAIAN 3

PRINSIP VISUAL

Menerapkan warna, tipografi, dan grid/spacing 8pt secara konsisten memakai Design System.

CAPAIAN 4

AKSESIBILITAS

Menghitung rasio kontras warna (WCAG) agar teks tetap terbaca bagi semua pengguna.

Di Mana Posisi Kita dalam Alur Desain?

Proses desain produk digital berjalan dari abstrak ke konkret. Hari ini kita berada tepat di tengah — mengubah kerangka menjadi tampilan visual utuh.

Mockup bukan langkah pertama. Ia dibangun di atas wireframe yang sudah divalidasi tata letaknya — supaya kita tidak menghabiskan waktu mewarnai tata letak yang mungkin masih berubah.

Wireframe vs Mockup: Apa Bedanya?

WIREFRAME (LO-FI)

KERANGKA

Kotak abu-abu, teks placeholder ("Lorem ipsum"), tanpa warna asli maupun foto. Fokus: tata letak & alur, bukan tampilan akhir.

MOCKUP (HI-FI)

TAMPILAN AKHIR

Warna brand asli, tipografi final, foto/ikon sungguhan. Terlihat seperti tangkapan layar aplikasi jadi — meski belum bisa diklik.

Analogi: wireframe adalah sketsa pensil arsitek untuk denah rumah; mockup adalah gambar render 3D rumah itu dengan cat, keramik, dan furnitur asli — tapi Anda belum bisa benar-benar membuka pintunya (itu baru terjadi di tahap prototipe).

Tiga Alat Inti Figma untuk Mockup

Sebelum menyentuh warna, kuasai dulu tiga bahan bangunan Figma ini — semuanya akan terus Anda pakai sampai akhir semester.

Design System: Bahan Baku Mockup Anda

Mockup yang konsisten tidak dibuat dari nol setiap kali — ia dirakit dari Design System (kumpulan aturan & komponen baku) yang sudah Anda kenal di pertemuan sebelumnya.

COLOR STYLES

WARNA BAKU

Palet tersimpan (mis. Primary, Success) — sekali diubah, semua elemen ikut berubah.

TEXT STYLES

TIPOGRAFI BAKU

Kombinasi jenis huruf, ukuran, ketebalan tersimpan (mis. Heading/L, Body/M).

COMPONENT LIBRARY

ELEMEN BAKU

Tombol, ikon, kartu produk siap pakai — tinggal tarik & letakkan ke frame.

Bayangkan Design System sebagai lemari bahan masakan yang sudah tertakar — Anda tidak menakar garam dan gula ulang setiap masak, tinggal ambil dari toples yang sudah standar.

Design System bukan materi baru — Anda sudah menyentuhnya saat membahas komponen desain di pertemuan sebelum UTS. Hari ini kita memakainya secara langsung: color styles adalah palet warna yang sudah ditakar dan diberi nama, seperti "Primary" untuk warna utama brand dan "Success" untuk notifikasi berhasil, mirip warna hijau yang sering Anda lihat di aplikasi Tokopedia saat transaksi sukses. Text styles adalah kombinasi jenis huruf dan ukuran yang sudah dipatenkan, misalnya judul besar selalu pakai gaya "Heading Large" sehingga semua judul di aplikasi terlihat seragam. Component library berisi tombol, ikon, dan kartu yang tinggal ditarik ke kanvas. Kalau Anda membangun mockup dari Design System yang rapi, seluruh tampilan aplikasi Anda akan terasa konsisten — inilah yang membedakan mockup mahasiswa amatir dengan mockup yang terlihat profesional.

Bagian 2 dari 3

Menerapkan Prinsip Visual

Warna, tipografi, grid/spacing, dan aksesibilitas — empat pilar yang mengubah kerangka kosong menjadi tampilan yang enak dipandang dan mudah dibaca.

Menerapkan Warna di Mockup

Warna bukan hiasan — ia membawa makna psikologis dan menuntun mata pengguna ke elemen terpenting (tombol utama, notifikasi, peringatan).

HIJAU

AMAN / GO

Tokopedia, Gojek: transaksi berhasil, tombol "pesan".

MERAH

PERINGATAN

BCA mobile: saldo tidak cukup, hapus akun, kesalahan input.

BIRU

DIPERCAYA

Bank & fintech (BRI, OVO): kesan aman, formal, profesional.

Batasi 1 warna primer + 1 aksen sekunder untuk aksi utama, sisanya netral (abu-abu/putih). Mockup yang penuh warna justru membingungkan mata pengguna — bukan menariknya.

Pemilihan warna di mockup harus disengaja, bukan asal suka. Perhatikan aplikasi yang Anda pakai sehari-hari: Tokopedia dan Gojek konsisten memakai hijau untuk menandakan sesuatu berjalan lancar, sementara BCA mobile memakai merah ketika ada peringatan seperti saldo tidak cukup. Ini bukan kebetulan, melainkan psikologi warna yang sudah kita bahas di pertemuan sebelumnya, sekarang diterapkan nyata. Aturan praktis yang saya pegang saat mengajar: batasi mockup Anda pada satu warna utama untuk tombol dan aksi penting, ditambah satu warna aksen untuk hal-hal sekunder seperti label atau badge, sisanya cukup abu-abu dan putih. Mahasiswa pemula sering tergoda memakai lima sampai enam warna berbeda karena "ingin terlihat colorful", padahal itu justru membuat pengguna bingung ke mana harus melihat pertama kali.

Hierarki Tipografi: Bukan Sekadar Ganti Ukuran

Tipografi menuntun urutan baca pengguna. Figma menyediakan type scale (skala ukuran huruf berjenjang) yang konsisten lewat Text Styles.

Contoh Type Scale Mockup Kartu Produk UMKM

Keripik Singkong Bu Sari

Heading/M · 20px · Bold

Rp 15.000

Body/L · 16px · Semibold

Terjual 128 • ★ 4.8

Caption · 13px · Regular

Aturan aman untuk pemula: maksimal 2 keluarga huruf (1 untuk judul, 1 untuk isi) dan 3–4 tingkat ukuran saja per layar.

Tipografi sering dianggap remeh oleh mahasiswa pemula, padahal dialah yang menentukan urutan mana yang dibaca pengguna terlebih dahulu. Lihat contoh kartu produk UMKM ini: nama produk "Keripik Singkong Bu Sari" dibuat paling besar dan tebal karena itu informasi utama, harga dibuat sedikit lebih kecil tapi tetap tegas karena penting untuk keputusan beli, sedangkan informasi terjual dan rating dibuat paling kecil karena sifatnya pendukung. Di Figma, kombinasi jenis huruf, ukuran, dan ketebalan ini disimpan sebagai Text Style bernama seperti "Heading/M" atau "Caption" supaya konsisten dipakai di seluruh halaman. Aturan yang saya sarankan untuk pemula: jangan memakai lebih dari dua keluarga huruf berbeda dalam satu mockup, dan batasi diri pada tiga sampai empat tingkat ukuran saja — lebih dari itu, mata pengguna akan kesulitan menangkap mana yang penting.

Grid & Spacing System: Kerapian yang Presisi

Jarak antar-elemen yang "kelihatan rapi" saja tidak cukup — desainer profesional memakai sistem grid 8pt (8-point grid): semua jarak/ukuran adalah kelipatan 8 piksel.

Manfaat grid 8pt: ukuran elemen selalu habis dibagi 8 (8, 16, 24, 32, 40…) — memudahkan developer meng-coding ulang tanpa menebak-nebak angka desimal ganjil seperti 13px atau 21px.

Sistem grid delapan piksel ini terdengar teknis, tapi konsepnya sederhana: bayangkan semua jarak dan ukuran di mockup Anda — jarak antar tombol, tinggi kartu, padding di dalam kotak — selalu dibulatkan ke angka kelipatan delapan, seperti delapan, enam belas, dua puluh empat, tiga puluh dua, dan seterusnya. Kenapa harus delapan dan bukan angka bebas? Karena kebanyakan layar HP dan resolusi desain modern habis dibagi dengan angka ini, sehingga hasilnya terlihat presisi secara matematis, bukan sekadar "kelihatan pas" secara kasat mata. Manfaat praktisnya besar sekali untuk kerja sama dengan tim developer: kalau Anda memberi angka jarak 13 piksel atau 21 piksel, programmer akan bingung menebak apakah itu disengaja atau salah ukur. Dengan grid 8pt, semua orang di tim tahu angka itu pasti disengaja. Nanti kita akan berlatih membulatkan angka ke sistem ini.

Hitung dari Nol #1 — Membulatkan Spacing ke Grid 8pt

Saat memindahkan sketsa wireframe ke Figma, Anda mengukur jarak kasar antar-elemen. Bulatkan ke kelipatan 8 terdekat agar sesuai sistem grid.

Langkah	Perhitungan	Nilai
Jarak kasar terukur di sketsa	21 px (hasil ukur manual)	21 px
Bagi dengan 8	21 ÷ 8	2,625
Bulatkan ke bilangan bulat terdekat	2,625 → dibulatkan	3
Kalikan kembali dengan 8	3 × 8	24 px (spacing baku)

HASIL AKHIR DI FIGMA

24 px

Bukan 21px — dibulatkan ke kelipatan 8 terdekat

Aksesibilitas Warna: Semua Orang Harus Bisa Membaca

Warna yang terlihat indah di mata Anda belum tentu terbaca oleh pengguna dengan gangguan penglihatan (rendah kontras, buta warna sebagian). Standar internasional WCAG (Web Content Accessibility Guidelines) mengatur ini lewat rasio kontras.

TEKS NORMAL

4,5 : 1

Kontras minimum antara warna teks dan latar untuk paragraf/label biasa (level AA).

TEKS BESAR

3 : 1

Untuk judul besar (≥24px atau ≥18,5px tebal) — toleransi lebih longgar.

Kasus nyata: label harga abu-abu muda di atas latar putih pada banyak mockup mahasiswa sering gagal standar ini — terlihat "estetik" di layar laptop terang, tapi tak terbaca di layar HP siang hari.

Sekarang kita masuk topik yang sering terlewat oleh desainer pemula: aksesibilitas warna. WCAG adalah pedoman aksesibilitas web yang diakui secara internasional, dan salah satu aturannya adalah rasio kontras minimum antara warna teks dan warna latar belakangnya. Untuk teks berukuran normal seperti paragraf dan label harga, rasio minimalnya empat koma lima berbanding satu; untuk judul besar, syaratnya sedikit lebih longgar yaitu tiga berbanding satu. Ini bukan aturan sembarangan — bayangkan Anda membuka aplikasi e-commerce di HP saat siang hari terik, teks abu-abu muda yang terlihat elegan di laptop kantor Anda bisa jadi sama sekali tak terbaca di bawah sinar matahari. Sebentar lagi kita akan menghitung sendiri rasio kontras ini dengan rumus sederhana, supaya Anda tidak hanya menebak-nebak "kelihatannya sih kebaca".

Hitung dari Nol #2 — Rasio Kontras WCAG

Rumus rasio kontras: (L1 + 0,05) ÷ (L2 + 0,05), dengan L1 = luminansi warna lebih terang, L2 = luminansi warna lebih gelap (skala 0–1). Kasus: teks hitam pekat (L=0) di atas latar putih murni (L=1).

Langkah	Perhitungan	Nilai
Luminansi latar putih (L1) & teks hitam (L2)	L1 = 1 ; L2 = 0	—
Tambahkan 0,05 ke L1	1 + 0,05	1,05
Tambahkan 0,05 ke L2	0 + 0,05	0,05
Bagi hasil L1 dengan L2	1,05 ÷ 0,05	21 : 1

KESIMPULAN

21:1 > 4,5:1

Kontras maksimal teoretis — jauh di atas syarat minimum AA, lolos aman

Sekarang kita hitung sendiri kasus paling ekstrem, yaitu teks hitam pekat di atas latar putih murni — ini kombinasi kontras tertinggi yang mungkin ada. Rumusnya sederhana: luminansi warna yang lebih terang ditambah nol koma nol lima, dibagi luminansi warna yang lebih gelap ditambah nol koma nol lima juga. Untuk kasus kita, luminansi putih adalah satu dan luminansi hitam adalah nol pada skala nol sampai satu. Langkah pertama, satu ditambah nol koma nol lima sama dengan satu koma nol lima. Langkah kedua, nol ditambah nol koma nol lima sama dengan nol koma nol lima. Langkah ketiga, kita bagi satu koma nol lima dengan nol koma nol lima, hasilnya dua puluh satu berbanding satu — inilah rasio kontras maksimum yang mungkin dicapai di layar digital. Karena dua puluh satu jauh di atas syarat minimum empat koma lima, kombinasi hitam-putih ini lolos dengan sangat aman. Di praktik nanti, Anda akan memakai fitur "Contrast Checker" di plugin Figma supaya tidak perlu menghitung manual setiap saat — tapi memahami rumusnya penting agar Anda tahu ANGKA APA yang sedang dibaca alat itu.

Bagian 3 dari 3

Praktik & Alur Kerja

Menyatukan semua prinsip lewat studi kasus langkah demi langkah, mengenali kesalahan umum, lalu berlatih sendiri di kelas.

Studi Kasus: Kartu Produk UMKM dari Wireframe ke Mockup

Seorang mahasiswa mendesain aplikasi marketplace UMKM lokal. Berikut alur mengubah wireframe kartu produk menjadi mockup, langkah demi langkah.

Alur Kerja di Figma

1. Buka wireframe lo-fi — kotak abu-abu untuk foto, teks placeholder "Nama Produk".
2. Buat Frame ukuran kartu asli (mis. 343×180 px, kelipatan 8pt).
3. Ganti placeholder foto dengan foto produk asli (keripik singkong, bukan kotak abu-abu).
4. Terapkan Text Style Design System: nama produk = Heading/S, harga = Body/L Bold.
5. Terapkan Color Style Primary (hijau brand) pada tombol "Beli".
6. Tarik Component tombol dari library, bukan menggambar tombol baru dari nol.
7. Cek kontras teks harga terhadap latar — pastikan ≥4,5:1.

Mari kita telusuri contoh nyata supaya Anda punya bayangan konkret sebelum praktik sendiri. Seorang mahasiswa sedang merancang aplikasi marketplace untuk UMKM lokal, dan kita fokus pada satu elemen kecil saja: kartu produk. Langkahnya dimulai dari membuka wireframe lo-fi yang sudah ada — masih berupa kotak abu-abu dan tulisan "Nama Produk" sebagai placeholder. Lalu ia membuat Frame dengan ukuran pasti mengikuti grid delapan piksel, mengganti kotak placeholder dengan foto asli produk seperti keripik singkong, menerapkan Text Style dari Design System supaya tipografi konsisten dengan halaman lain, menerapkan warna hijau Primary khas brand pada tombol beli, menarik component tombol yang sudah jadi alih-alih menggambar ulang dari nol, dan terakhir mengecek rasio kontras teks harga terhadap latar belakangnya. Perhatikan bahwa urutan ini tidak acak — setiap langkah membangun di atas langkah sebelumnya, persis seperti yang sudah kita bahas sepanjang pertemuan hari ini.

Kesalahan Umum Pemula di Figma

Menggambar ulang tombol/ikon setiap kali, bukan memakai Component — sulit di-maintain saat brand berubah.

Memilih warna teks abu-abu muda "karena estetik" tanpa mengecek rasio kontras WCAG.

Jarak antar-elemen "kira-kira rapi" (13px, 19px, 27px) — tidak konsisten dengan grid 8pt.

Memakai lebih dari 3 jenis huruf berbeda dalam satu layar, membuat hierarki membingungkan.

Cara menghindarinya: selalu mulai dari Design System (Frame ukuran baku, Component library, Color/Text Styles) — jangan mendesain bebas dari kanvas kosong.

Sebelum Anda berlatih mandiri, mari saya tunjukkan empat kesalahan yang paling sering saya temukan saat memeriksa tugas mahasiswa setiap semester. Pertama, menggambar ulang tombol atau ikon dari nol setiap kali dibutuhkan, padahal seharusnya cukup menarik Component yang sudah ada — ini membuat file sulit dirawat ketika suatu saat warna brand berubah. Kedua, memilih warna teks abu-abu muda karena terlihat elegan tanpa pernah mengecek rasio kontrasnya, sehingga hasilnya cantik tapi tidak terbaca. Ketiga, jarak antar-elemen yang hanya "kira-kira rapi" secara visual, padahal kalau diukur angkanya tidak konsisten dan bukan kelipatan delapan. Keempat, memakai terlalu banyak jenis huruf berbeda dalam satu layar sehingga mata pengguna bingung mana yang harus dibaca lebih dulu. Solusi untuk semua ini sebenarnya satu: jangan pernah mendesain dari kanvas kosong, selalu mulai dari Design System yang sudah dibangun dan disepakati.

Latihan Kelas: Ubah Wireframe Anda Jadi Mockup

Ambil 1 layar wireframe yang sudah Anda buat minggu lalu (pertemuan 9). Kerjakan di Figma selama 20 menit:

Wajib Diterapkan

Frame berukuran kelipatan 8pt
Minimal 1 Color Style + 1 Text Style
Minimal 1 Component (tombol/kartu)
Cek kontras teks utama ≥4,5:1

SETOR KE

LINK FIGMA

Bagikan link "view access" ke grup kelas sebelum jam berakhir. Kita bahas 2–3 hasil bersama.

Rangkuman: Cheat Sheet Mockup High-Fidelity

Aspek	Aturan Praktis
Wireframe vs Mockup	Wireframe = tata letak abu-abu; Mockup = tampilan akhir dengan warna/font/foto asli
Alat Figma inti	Frame (kanvas), Component (elemen dipakai ulang), Auto Layout (jarak otomatis)
Warna	1 primer + 1 aksen, sisanya netral; hijau=aman, merah=peringatan, biru=dipercaya
Tipografi	Maks. 2 keluarga huruf, 3–4 tingkat ukuran (Text Styles)
Spacing	Bulatkan semua jarak ke kelipatan 8 (grid 8pt)
Aksesibilitas	Rasio kontras ≥4,5:1 (teks normal) / ≥3:1 (teks besar) — rumus (L1+0,05)÷(L2+0,05)

Sebelum Kelas Berakhir

Minggu Depan

Prototyping Interaktif — mockup statis hari ini akan Anda hubungkan dengan tautan klik-antar-layar di Figma, sehingga bisa "dicoba" seperti aplikasi sungguhan.

TUGAS RUMAH

2 LAYAR MOCKUP

Selesaikan mockup high-fidelity untuk 2 layar proyek akhir Anda, ikuti cheat sheet slide sebelumnya. Kumpul sebelum pertemuan berikutnya.

Bawa mockup ini di pertemuan depan — tanpa mockup yang solid, prototipe interaktif tidak bisa dibangun.

Sebelum saya tutup, mari kita lihat sekilas ke depan. Minggu depan kita masuk ke tahap prototyping, di mana mockup statis yang Anda buat hari ini akan dihubungkan dengan tautan-tautan antar-layar, sehingga saat diklik terasa seperti aplikasi sungguhan meskipun sebenarnya masih di dalam Figma. Supaya pertemuan depan berjalan lancar, tugas rumah Anda adalah menyelesaikan mockup high-fidelity untuk dua layar dari proyek akhir semester Anda, dengan mengikuti seluruh cheat sheet yang baru saja kita rangkum — mulai dari grid delapan piksel sampai kontras warna. Saya tekankan, mockup ini adalah bahan baku wajib untuk minggu depan; tanpa mockup yang solid, kita tidak akan bisa membangun prototipe interaktif. Kalau ada kendala di Figma selama mengerjakan tugas, silakan hubungi saya atau tanyakan di forum kelas sebelum hari-H. Sampai jumpa minggu depan!