Mulai Kuis
MATERI 03 - BIDANG DKV

UI/UX
Design

Merancang produk digital yang tidak hanya cantik dilihat, tapi nyaman dan intuitif digunakan.

UIUX Illustration

Pengertian UI & UX

Memahami perbedaan UI dan UX dalam desain digital

UX • User Experience

User
Experience

Pengalaman pengguna saat berinteraksi dengan produk digital

"Bagaimana rasanya menggunakan produk ini? Apakah mudah? Apakah masalah pengguna terpecahkan?"

  • ▶ Fokus pada pengalaman dan kemudahan penggunaan
  • ▶ Melibatkan riset pengguna (user research)
  • ▶ Menghasilkan wireframe dan user flow
  • ▶ Bersifat strategis dan berbasis data
  • ▶ Tujuan: produk yang bermanfaat dan mudah dipakai
≠
UI • User Interface

User
Interface

Tampilan visual dan elemen interaktif yang dilihat dan diklik pengguna

"Seperti apa tampilan produk ini? Apakah konsisten? Apakah elemen visualnya menarik?"

  • ▶ Fokus pada tampilan visual dan komponen desain
  • ▶ Meliputi warna, tipografi, ikon, layout
  • ▶ Menghasilkan mockup dan design system
  • ▶ Bersifat kreatif dan visual-driven
  • ▶ Tujuan: produk yang indah dan konsisten

Perbedaan UI & UX

Memahami perbedaan ini penting agar kamu tahu peranmu saat PKL di bidang UI/UX

Aspek
Fokus Utama
Pertanyaan
Output
Proses
Tools Utama
Skill Inti
UX Design
Pengalaman & kemudahan pengguna
"Apakah mudah dipakai?"
Wireframe, user flow, persona
Riset → Analisis → Prototype → Test
Figma, Miro, Hotjar, Maze
Empati, logika, riset, problem solving
UI Design
Tampilan visual & estetika
"Apakah terlihat menarik?"
Mockup, style guide, aset UI
Eksplorasi visual → Desain → Polish
Estetika, tipografi, warna, layout
Empati, logika, riset, problem solving
Di perusahaan kecil / startup, satu orang sering mengerjakan keduanya disebut UI/UX Designer. Di perusahaan besar, ada tim terpisah untuk masing-masing.
Ilustrasi Desain Web

Apa itu Desain Web?

Desain web adalah proses merancang tampilan dan pengalaman pengguna di sebuah website mulai dari layout, navigasi, warna, hingga setiap elemen interaktif di halaman.

Website yang baik bukan hanya terlihat bagus, tapi juga mudah digunakan di semua perangkat.

Responsif

Responsif

Tampilan menyesuaikan otomatis di desktop, tablet, dan smartphone

Aksesibel

Aksesibel

Bisa digunakan oleh semua orang, termasuk yang berkebutuhan khusus

Performa

Performa

Halaman harus cepat dimuat

User-Centered

User-Centered

Setiap keputusan desain didasarkan pada kebutuhan pengguna

Prinsip Dasar UI/UX

4 prinsip fundamental yang wajib dipahami setiap UI/UX designer

Simetris
Microsoft (Simetris)
Asimetris
Airbnb (Asimetris)
Balance
Prinsip 01

Balance (Keseimbangan)

  • ▶ Distribusi elemen visual yang seimbang di seluruh halaman
  • ▶ Symmetrical balance, elemen kiri dan kanan seimbang
  • ▶ Asymmetrical balance, berbeda tapi tetap terasa seimbang secara visual
  • ▶ Halaman yang balance terasa stabil dan nyaman dilihat
Contoh Contrast
Spotify
Contrast
Prinsip 02

Contrast (Kontras)

  • ▶ Perbedaan jelas antara elemen penting dan tidak penting
  • ▶ Kontras warna memudahkan keterbacaan teks (legibility)
  • ▶ CTA (tombol aksi) harus kontras agar mudah ditemukan pengguna
  • ▶ Kontras bisa berupa ukuran, warna, bentuk, atau bobot tipografi
Contoh Consistency
Tokopedia
Consistency
Prinsip 03

Consistency (Konsistensi)

  • ▶ Gunakan pola, warna, dan komponen yang sama di seluruh produk
  • ▶ Tombol dengan fungsi sama harus selalu terlihat sama
  • ▶ Konsistensi membangun kepercayaan pengguna terhadap produk
  • ▶ Design system dan style guide adalah alat penjaga konsistensi
Contoh Whitespace
Apple
Whitespace
Prinsip 04

Whitespace (Ruang Kosong)

  • ▶ Ruang kosong bukan pemborosan, ini elemen desain yang aktif
  • ▶ Membantu konten utama lebih mudah dibaca dan diproses
  • ▶ Elemen penting jadi lebih menonjol karena ada "napas"
  • ▶ Desain yang terlalu padat terasa sesak dan sulit dipahami

Tools UI/UX Design

Kuasai minimal satu tools desain sebelum PKL. Figma adalah prioritas utama karena paling banyak digunakan di industri saat ini.

Figma

Figma

  • ▶ Desain UI dengan komponen yang bisa dipakai ulang
  • ▶ Prototyping interaktif langsung di browser
  • ▶ Kolaborasi tim secara real-time (seperti Google Docs)
  • ▶ Design handoff ke developer dengan mudah
  • ▶ Gratis untuk pelajar
Tools Pendukung

Tools Lainnya

  • ▶ Miro > whiteboard digital untuk brainstorming dan user journey
  • ▶ Notion > dokumentasi riset dan project management
  • ▶ Maze > usability testing prototipe Figma secara online
  • ▶ Hotjar > heatmap dan rekaman sesi pengguna nyata
  • ▶ Zeplin / DevMode— design handoff ke developer

Cara Kerja di Industri bidang UI/UX

Memahami budaya kerja di industri sebelum PKL akan memudahkanmu beradaptasi lebih cepat dan memberi kesan lebih profesional.

Membaca Brief

Membaca Brief

  • ▶ Brief = instruksi kerja dari atasan atau klien
  • ▶ Baca ulang minimal 2–3 kali sebelum mulai desain
  • ▶ Tanyakan jika ada yang ambigu, jangan asumsikan
  • ▶ Tandai kata kunci: target user, platform, tujuan, batasan
Siklus Revisi

Siklus Revisi

  • ▶ Revisi adalah bagian normal dari proses bukan tanda gagal
  • ▶ Simpan semua versi desain (v1, v2, v3, dst)
  • ▶ Catat alasan di balik setiap perubahan
  • ▶ Desainer senior bisa revisi 5–10 kali per project
Kerja Tim

Kerja Tim

  • ▶ Desainer bekerja bersama: developer, product manager, copywriter
  • ▶ Update progres secara berkala tanpa harus ditanya
  • ▶ Berikan feedback yang konstruktif kepada anggota tim lain
  • ▶ Konflik diselesaikan dengan data dan argumen logis
Deadline

Deadline

  • ▶ Deadline di industri bersifat mutlak tidak bisa ditawar
  • ▶ Kalau terancam terlambat, komunikasikan lebih awal
  • ▶ Lebih baik selesai 80% tepat waktu dari 100% terlambat
  • ▶ Biasakan menggunakan task manager (Notion, Trello, Jira)

Tips Sukses PKL di Bidang UI/UX

Bukan sekadar teori, melainkan hasil pengalaman nyata para desainer dan pembimbing PKL di industri kreatif digital.

1

Lebih banyak bertanya daripada menebak

Tidak mengerti brief? Langsung tanya. Lebih baik bertanya 5 menit daripada salah desain 2 jam.

5

Pisahkan ego dari karya

Desainmu boleh dikritik, itu bukan berarti kamu dikritik. Terima feedback dengan terbuka dan jadikan bahan berkembang.

2

Dokumentasikan setiap proses

Screenshot progress, catat feedback, simpan semua versi. Ini berguna saat review akhir PKL dan untuk portofolio.

6

Bangun koneksi dengan tim

Ajak ngobrol developer, PM, atau desainer senior. Koneksi yang baik sering membuka peluang kerja setelah lulus.

3

Jangan takut dengan Figma

Kamu tidak harus ahli. Yang penting tahu dasar-dasarnya dan mau terus belajar saat praktik langsung.

7

Selesaikan PKL dengan laporan yang baik

Laporan yang rapi dan project yang terdokumentasi dengan baik bisa langsung jadi portofolio profesionalmu.

4

Amati desainer senior di sekitarmu

Perhatikan cara mereka bekerja, mempresentasikan desain, dan merespons feedback. Itu pelajaran terbaik yang bisa kamu dapat.

Siap Untuk Menguji
Pengetahuanmu?

Ikuti kuis minat dan analisis soft-skill dari VISPATH
untuk mengetahui bidang DKV yang paling cocok untukmu.

Mulai Kuis Lihat Materi Dulu