Materi: Digital/Web/UI-UX Design
A. Pengertian Digital/Web/UI-UX Design
Digital/Web/UI-UX Design adalah proses merancang tampilan dan pengalaman pengguna pada media digital, seperti website, aplikasi mobile, dashboard, dan platform digital lainnya agar menarik, mudah digunakan, informatif, dan sesuai dengan kebutuhan pengguna.
Materi ini menggabungkan kemampuan desain komunikasi visual dengan pemahaman teknologi digital dan perilaku pengguna.
1. Digital Design
Digital Design adalah proses membuat karya visual menggunakan perangkat digital.
Contohnya:
Banner digital
Poster media sosial
Konten Instagram
Iklan digital
Infografis
Landing page
Desain aplikasi
2. Web Design
Web Design adalah proses merancang tampilan dan struktur visual sebuah website.
Hal yang diperhatikan:
Tata letak halaman
Warna
Tipografi
Gambar dan ilustrasi
Navigasi
Responsivitas
Konsistensi identitas visual
3. UI (User Interface) Design
UI Design adalah perancangan tampilan antarmuka yang digunakan oleh pengguna ketika berinteraksi dengan website atau aplikasi.
Elemen UI antara lain:
Tombol
Menu
Ikon
Formulir
Kartu informasi
Navigasi
Warna
Tipografi
Ilustrasi
Layout
4. UX (User Experience) Design
UX Design adalah proses merancang pengalaman pengguna ketika menggunakan suatu produk digital.
UX mempertimbangkan:
Apakah website mudah digunakan?
Apakah pengguna mudah menemukan informasi?
Apakah navigasinya jelas?
Apakah proses pendaftaran mudah?
Apakah pengguna merasa nyaman?
Apakah pengguna dapat menyelesaikan tujuannya dengan cepat?
Sederhananya:
UI = bagaimana produk digital terlihat.
UX = bagaimana produk digital digunakan dan dirasakan oleh pengguna.
B. Tujuan Digital/Web/UI-UX Design
Setelah mempelajari materi ini, siswa diharapkan mampu:
Menjelaskan konsep Digital Design, Web Design, UI dan UX.
Menganalisis kebutuhan pengguna.
Menentukan target pengguna sebuah produk digital.
Membuat struktur informasi website atau aplikasi.
Membuat sketsa/wireframe.
Menentukan warna dan tipografi yang sesuai.
Membuat desain antarmuka digital.
Membuat prototype sederhana.
Menguji desain berdasarkan pengalaman pengguna.
Memperbaiki desain berdasarkan hasil evaluasi.
Mempresentasikan hasil rancangan secara profesional.
C. Prinsip Dasar UI/UX
1. Simplicity
Desain dibuat sederhana sehingga pengguna tidak bingung.
2. Consistency
Warna, font, ikon, tombol, dan tata letak harus konsisten.
3. Hierarchy
Informasi penting harus lebih menonjol dibanding informasi pendukung.
4. Contrast
Perbedaan warna atau ukuran digunakan agar elemen mudah dibaca.
5. Alignment
Elemen desain harus tersusun rapi dan memiliki keteraturan.
6. Accessibility
Desain harus dapat digunakan oleh sebanyak mungkin pengguna, termasuk pengguna dengan keterbatasan tertentu.
7. User-Centered Design
Desain dibuat berdasarkan kebutuhan dan perilaku pengguna, bukan hanya berdasarkan selera desainer.
D. Tahapan Perancangan UI/UX
Siswa dapat menggunakan alur berikut:
Research → User Persona → User Flow → Wireframe → UI Design → Prototype → Testing → Evaluation
1. Research
Mengumpulkan informasi tentang:
Target pengguna
Kebutuhan pengguna
Masalah pengguna
Kompetitor
Tujuan produk
2. User Persona
Membuat gambaran pengguna utama.
Contoh:
Nama: Rina
Usia: 17 tahun
Status: Pelajar SMK
Kebutuhan: Mencari informasi jurusan dan pendaftaran sekolah
Kebiasaan: Menggunakan smartphone
Masalah: Sulit menemukan informasi sekolah karena website terlalu rumit.
3. User Flow
Menentukan alur yang harus dilalui pengguna.
Contoh:
Beranda → Pilih Jurusan → Detail Jurusan → Persyaratan → Daftar
4. Wireframe
Membuat kerangka awal tampilan tanpa terlalu fokus pada warna dan dekorasi.
5. UI Design
Mengubah wireframe menjadi desain visual dengan:
Warna
Font
Ikon
Foto
Ilustrasi
Button
Komponen visual
6. Prototype
Membuat simulasi interaksi antarmuka sehingga pengguna dapat mencoba alurnya.
7. Testing
Desain dicoba oleh beberapa pengguna.
8. Evaluation
Mencatat masalah dan melakukan perbaikan.
E. Studi Kasus
Studi Kasus: Merancang Website Promosi Produk UMKM
Situasi
Sebuah UMKM bernama "Kriya Nusantara" menjual produk kerajinan lokal seperti tas anyaman, dompet, dan aksesori.
Selama ini penjualan dilakukan melalui WhatsApp dan media sosial. Pemilik usaha ingin memiliki website sederhana untuk memperkenalkan produk dan meningkatkan penjualan.
Namun terdapat beberapa masalah:
Produk sulit ditemukan karena hanya diposting di media sosial.
Informasi harga tidak selalu tersedia.
Foto produk belum tertata.
Pelanggan kesulitan mengetahui cara melakukan pemesanan.
Belum tersedia katalog produk yang terstruktur.
Tampilan media promosi belum memiliki identitas visual yang konsisten.
Pemilik UMKM meminta siswa DKV untuk membuat rancangan website katalog produk.
F. Tugas Siswa
Tugas 1 – Analisis Masalah
Jawablah pertanyaan berikut:
Apa masalah utama yang dialami UMKM tersebut?
Siapa target pengguna website?
Informasi apa saja yang harus tersedia?
Apa tujuan utama website?
Mengapa website harus mudah digunakan pada smartphone?
Tugas 2 – Membuat User Persona
Buat satu user persona berdasarkan studi kasus.
Format:
| Komponen | Isi |
|---|---|
| Nama | ... |
| Usia | ... |
| Pekerjaan | ... |
| Tujuan | ... |
| Kebutuhan | ... |
| Kebiasaan | ... |
| Masalah | ... |
Tugas 3 – Membuat User Flow
Buat alur pengguna ketika ingin membeli produk.
Contoh:
Beranda → Katalog → Pilih Produk → Detail Produk → Pilih Jumlah → Pesan → WhatsApp
Siswa dapat mengembangkan alur tersebut sesuai hasil analisis.
Tugas 4 – Membuat Wireframe
Buat wireframe minimal 4 halaman:
Homepage
Halaman Katalog
Halaman Detail Produk
Halaman Kontak/Pemesanan
Wireframe dapat dibuat menggunakan kertas terlebih dahulu kemudian dilanjutkan menggunakan aplikasi seperti Figma, Adobe XD, CorelDRAW, atau aplikasi desain lainnya.
Tugas 5 – Membuat UI Design
Tentukan:
Warna:
Gunakan warna yang menggambarkan produk kerajinan lokal.
Tipografi:
Pilih maksimal 2–3 jenis font yang mudah dibaca.
Button:
Contoh:
Lihat Produk
Beli Sekarang
Pesan melalui WhatsApp
Komponen visual:
Logo
Foto produk
Ikon
Menu navigasi
Banner
Kartu produk
G. Tantangan HOTS
Kasus Pengembangan
Setelah prototype dibuat, dilakukan pengujian kepada 10 calon pengguna.
Hasil pengujian:
6 pengguna kesulitan menemukan tombol pemesanan.
4 pengguna mengatakan ukuran tulisan terlalu kecil.
3 pengguna tidak memahami ikon keranjang.
7 pengguna lebih cepat menemukan produk ketika kategori produk ditampilkan di halaman utama.
Pertanyaan
Masalah UI/UX apa yang ditemukan?
Bagian mana yang harus diperbaiki terlebih dahulu?
Bagaimana cara memperbaiki tombol pemesanan?
Bagaimana cara meningkatkan keterbacaan teks?
Apakah ikon harus diganti dengan teks, atau cukup diperjelas? Jelaskan alasanmu.
Bagaimana struktur homepage sebaiknya diubah berdasarkan hasil pengujian?
Buat rancangan perbaikan dari prototype tersebut.
H. Produk Akhir Proyek
Siswa menghasilkan:
1. User Persona
↓
2. User Flow
↓
3. Wireframe
↓
4. UI Design
↓
5. Prototype
↓
6. User Testing
↓
7. Revisi Desain
↓
8. Presentasi
Hasil akhir yang dikumpulkan
Dokumen analisis kebutuhan
User persona
User flow
Wireframe
Desain UI minimal 4 halaman
Prototype interaktif
Hasil pengujian
Desain setelah revisi
Presentasi proyek
Inti pembelajaran untuk siswa:
Desain UI/UX bukan hanya membuat website terlihat bagus, tetapi membuat pengguna dapat mencapai tujuannya dengan mudah, cepat, nyaman, dan jelas.
.jpeg)
0 komentar:
Posting Komentar