MODUL 1

UI/UX Design

Fondasi UI/UX Design

Tim Kelas Desain

Sebelum merancang sebuah antarmuka digital, kita perlu memahami fondasi berpikirnya terlebih dahulu. Bab ini adalah gerbang pembuka mata pelajaran UI/UX Design — membahas perbedaan UI & UX, sejarah perkembangannya, profesi di industri kreatif, prinsip User-Centered Design, hingga peta besar proses kerja dan tools yang akan digunakan sepanjang semester ini.

Apa itu UI dan UX?

Definisi

UI (User Interface) adalah segala sesuatu yang dilihat dan disentuh pengguna: tombol, warna, ikon, tipografi, layout, hingga animasi kecil (micro-interaction). UX (User Experience) adalah keseluruhan pengalaman dan perasaan pengguna saat memakai produk — seberapa mudah tugas diselesaikan dan senyaman apa alurnya.

Analogi Sederhana

•UI ibarat interior, meja, dan plating makanan sebuah restoran — hal yang terlihat indah.

•UX ibarat kecepatan pelayanan, kemudahan memesan, dan kenyamanan duduk — hal yang dirasakan.

•Tampilan cantik (UI bagus) tidak menjamin pengguna betah jika alurnya membingungkan (UX buruk).

Pengaplikasian

UI adalah bagian dari UX, bukan lawannya. UX adalah payung besar (riset, alur, struktur informasi), sedangkan UI adalah wujud visual dari strategi tersebut — keduanya harus dikuasai seorang desainer profesional.

Sejarah Singkat UI/UX

UI/UX bukan tren sesaat, melainkan disiplin yang terus berevolusi mengikuti perubahan perangkat teknologi — dari layar besar berbasis mouse hingga genggaman berbasis sentuhan dan AI.

Tonggak Penting

•1970-an — Xerox PARC menciptakan GUI pertama (desktop, ikon, mouse).

•1984 — Apple Macintosh mempopulerkan GUI ke pasar konsumen.

•1990-an — Donald Norman resmi memperkenalkan istilah "User Experience".

•2007 — iPhone mengubah desain UI ke berbasis sentuhan (mobile-first).

•2016 — Figma mengubah kerja desain menjadi kolaboratif berbasis cloud.

•2020-an — Artificial Intelligence mulai terintegrasi ke proses desain.

Pengaplikasian

Sebagai calon desainer, kalian dituntut untuk terus belajar sepanjang karier karena perangkat dan cara pengguna berinteraksi akan terus berubah.

1970 → Sekarang

1970s

1984

1990s

2007

2016

2020s

Profesi & Ekosistem Kerja UI/UX

Sesuai pemetaan Kementerian Ketenagakerjaan (Kemnaker) dan kebutuhan industri kreatif digital, UI/UX membuka beragam peran profesi yang saling berkolaborasi dalam satu tim produk.

Peran Utama

•UI Designer — merancang tampilan visual & style guide.

•UX Designer — merancang alur & struktur informasi.

•UX Researcher — riset pengguna & analisis perilaku.

•Product Designer — menggabungkan UI, UX, dan strategi bisnis.

•Interaction Designer — merancang animasi & respons sistem.

•Design System Manager — menjaga konsistensi komponen.

Pengaplikasian

Industri yang membutuhkan: startup teknologi, e-commerce, fintech, media, layanan publik digital, agensi kreatif, hingga UMKM yang bertransformasi digital — membuka peluang kerja luas bagi lulusan DKV.

Prinsip User-Centered Design & Design Thinking

Prinsip dasar UI/UX: desain dibuat untuk pengguna, bukan untuk selera desainer semata. Kerangka berpikir yang dipakai luas di industri untuk mewujudkannya disebut Design Thinking.

5 Tahap Design Thinking

1.Empathize — memahami masalah & kebutuhan pengguna.

2.Define — merumuskan inti permasalahan.

3.Ideate — mencari sebanyak mungkin ide solusi.

4.Prototype — membuat purwarupa solusi secara cepat.

5.Test — menguji purwarupa ke pengguna nyata.

Pengaplikasian

Kelima tahap ini tidak linear — desainer bisa kembali ke tahap sebelumnya jika hasil pengujian menunjukkan pemahaman awal masih kurang tepat.

Elemen Dasar UI

Lima elemen visual yang membentuk sebuah antarmuka (UI) dan akan dipelajari lebih mendalam pada Bab 4: Visual Design System.

Lima Elemen Utama

•Layout & Grid — kerangka penataan elemen agar rapi & konsisten.

•Visual Hierarchy — urutan elemen berdasarkan kepentingan.

•Warna — membangun suasana, branding, & penanda status.

•Tipografi — keterbacaan teks & karakter produk.

•Komponen UI — tombol, form, kartu, navigasi, ikon.

Pengaplikasian

Kelima elemen ini saling berkaitan — mengubah satu elemen (misalnya warna) dapat memengaruhi elemen lain seperti hierarki dan keterbacaan.

Proses Kerja UI/UX: Double Diamond

Definisi

Double Diamond (British Design Council) adalah peta besar proses kerja UI/UX yang akan menjadi acuan seluruh bab pada mata pelajaran ini.

Empat Tahap

•Discover — eksplorasi & riset pengguna (Bab 2).

•Define — merumuskan masalah & kebutuhan (Bab 3).

•Develop — wireframe, prototype, visual design (Bab 3–6).

•Deliver — usability testing & handoff (Bab 7–8).

Pengaplikasian

Peta ini menunjukkan bahwa Bab 1 adalah fondasi, sekaligus arah pembelajaran seluruh bab berikutnya di mata pelajaran Desain UI/UX.

Discover

Define

Develop

Deliver

Tools Industri: Figma & Alternatifnya

Figma — Tools Utama

Figma dipilih sebagai tools utama karena berbasis cloud & kolaboratif real-time, gratis untuk pelajar (Figma Education), lintas platform (berjalan di browser), serta menjadi syarat utama mayoritas lowongan UI/UX Designer di Indonesia.

Aplikasi Pendukung

•Canva — desain cepat & materi presentasi.

•Miro / FigJam — brainstorming & user flow.

•Maze / UsabilityHub — usability testing daring.

•Notion — dokumentasi riset & studi kasus.

Pengaplikasian

Figma tetap menjadi pusat pembelajaran; aplikasi lain diperkenalkan sebagai pelengkap sesuai tahap proses, bukan pengganti.

Kesimpulan

Fondasi UI/UX Design adalah pintu masuk untuk memahami bagaimana tampilan (UI) dan pengalaman (UX) bekerja bersama menciptakan produk digital yang bermanfaat. Semakin kuat pemahaman fondasi ini, semakin siap peserta didik melangkah ke tahap riset, perancangan, hingga pengujian pada bab-bab berikutnya.

E-Book Modul Ini

Baca ringkasan lengkap materi Fondasi UI/UX Design dalam format e-book yang bisa dibuka langsung tanpa perlu mengunduh.