Materi Materi Pertemuan 3 - Mengenal UI-UX di Dunia Digital_Kelas Creative Digital For Global Entrepreneur.pdf

UI UX

1. Fundamental & Short
Workshop:
MengenalUI/UX di
Dunia Digital
LPK GeTiIncubator-BinsaFauzi
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

2. USER EXPERIENCE
SuatuPengalamanbagipengguna
(User) saatberinteraksidengan
produkdigital maupunproduk
lainnya
USER INTERFACE
Tampilanvisual antarmukayang
dibuatagar pengguna(User) dapat
berinteraksidenganfiturdankonten
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

3. USER
EXPERIENCE
USER
INTERFACE
UX is focused
on the user’s
journey to
solve a
problem
UI is focused on
how a product’s
surfaces look and
function.
—Ken Norton, Partner at Google Ventures, Ex-Product Manager at Google
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

4. BelajarUI/UX Design
USER
EXPERIENCE
•MemahamiUserdanmasalahyang dihadapidalam
menggunakanproduk
•Membuatsebuahprodukdesainyang tidakhanyabagus
tapiberfungsi
USER
INTERFACE
•Mampumemahamidasar-dasarwarna, huruf, gambar.
•MampumerancangprodukbagikebutuhanUser
(Website danAplikasi)
•Membuatinteraksidalamprodukagar Usermudah
untukmencariinformasiyang dibutuhkan
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

5. ProdukUI/UX
Design
Website
Development

6. ProdukUI/UX
Design
Mobile Apps
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

7. User Experience
User
Research
User
Persona
Information
Architecture
WireframeCopywritingUsability
Testing
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

8. User Interviews
User interviewadalahsalah satuteknikumumuntuk
melakukanpenelitianuseryang bertujuanuntuk
mendapatkaninformasikualitatifdariuseryang sudah
adamaupunuserpotensial.
Pertanyaan:
Latar belakang, Pekerjaan, Penggunaan teknologi
Tujuan, Motivasi, Pain points
USER EXPERIENCE
User Research
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

9. LangkahdalamUser Interviews
•MenentukanTujuanWawancara
memahamimasalahyang merekahadapi, mengujifitur
baru, ataumemahamikebutuhanmereka?
•MembuatPanduan Wawancara
Buatdaftar pertanyaanyang akanAndatanyakan
selamawawancara. "CeritakanpengalamanAndasaat
menggunakanprodukini.
•MemilihdanMerekrutPartisipan
Rekrutpenggunayang sesuaidengantarget audiens
ataupersona produk.
USER EXPERIENCE
User Research
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

10. Menginterpretasikandata-data yang sudahdi
kumpulkanmengenaipermasalahanpenggunadi
tahapempathize.
Inilahdata yang dibutuhkanuntukmembuatUser
Persona:
1. IdentitasUser (nama, umur, pekerjaan, hobi, dll)
2. Pain Point (masalahUser) tau hal-halyang
membuatmerekafrustasi
3. Goals yang inginmerekadapatkan
USER EXPERIENCE
User Persona
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

11. USER EXPERIENCE
User Persona
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

12. Proses pengorganisasian dan
pelabelan informasi
USER EXPERIENCE
Information
Architecure
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

13. Kerangkauntukmenatasuatuitem pada halamanwebsite
atauaplikasiyang mengacupada sistemsitemap.
SketchLow-Fidelity WireframeHigh-Fidelity Wireframe
USER EXPERIENCE
Wireframe
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

14. UX Writing adalahpraktikmenulisinformasiyang
dipertimbangkandengancermatyang membahas
konteks, kebutuhan, danperilakupengguna.
USER EXPERIENCE
UX Writing
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

15. UX Writing adalahmemahamitone of voice darisebuah
produk.
Tone and voice inidigunakanuntukmengkomunikasikan
produkkepadapenggunamelaluibahasa.USER EXPERIENCE
UX Writing
Tone ataunada inibersifatfluktuatiftergantung
bagaimanakonteksataukondisipenggunaketika
melakukansesuatu.
Voiceberkaitandengangayakomunikasikitadengan
pengguna.
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

16. USER EXPERIENCE
UX Writing
Tone of voice ini menjadi pembeda antara produk kita
dengan kompetitor karena memiliki ciri khas terutama
dalam berkomunikasi dengan pengguna.
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

17. USER EXPERIENCE
UX Writing
Contoh Tone of Voice
Voice:Hangat, santai, danakrab
Tone (Saatonboarding):
"Hei, senangbertemudenganmu! Yuk, kitamulai
petualanganserumudi sini!"
Tone (Saaterror terjadi):
"Oops! Sepertinyaadayang salah. Cobalagisebentar,
ya!"
Friendly & Casual(Misalnyauntukaplikasimedia
sosialataue-commerce)
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

18. USER EXPERIENCE
UX Writing
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

19. User Interface
ColorsTypographyIconsLayoutsInteractivity &
Animation
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

20. USER INTERFACE
Colors
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

21. USER INTERFACE
Colors
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

22. USER INTERFACE
Colors
https://colorhunt.co/
https://coolors.co/
https://paletton.com/
Tools untukPaletWarna
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

23. Teknik menyusunhurufdanteks
sehinggamembuatnyadapat
terbaca, jelasdanmenariksecara
visual bagiuser
USER INTERFACE
Typography
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

24. USER INTERFACE
Typography
Hierarchy
Hierarki membantu usermeningkatkan keterbacaan untuk
mempermudah pengguna menemukan informasi penting
dengan lebih cepat.
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

25. USER INTERFACE
Typography
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

26. USER INTERFACE
Icon
Bentukdalamilustrasidenganukuran
kecilyang memilikifungsisebagai
pemberiarahyang
memungkinkanuseruntukdapat
mengaksessemuafituraplikasi.
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

27. USER INTERFACE
Icon
Kejelasan(Clarity):Ikon harusmengkomunikasikan
sebuahkonsepdenganjelas.
Keterbacaan(Readability):Hindaripenggunaanterlalu
banyakgarishalusdandekoratif
Konsistensi(Consistency):Garis, bentuk, warnadan
sudutyang sama
Personal (Personality):Konseplebihdekatdengan
personal danberkarakteristik
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

28. USER INTERFACE
Layouts (Tata Letak)
Tata letak(layout) dalamUI/UX mobile
app merujukpadapengaturandan
penempatanelemen-elemen
antarmukapengguna(UI) padalayar
perangkatmobile.
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

29. PrinsipDasar DesainUI untuk
AplikasiMobile
Balance (Keseimbangan)
Aturelemendi layaruntukmenciptakan
keseimbanganvisual.
Gunakanprinsipsimetridanasimetriuntuk
mencapaikeseimbanganyang diinginkan.
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

30. PrinsipDasar DesainUI untuk
AplikasiMobile
HirarkiVisual (Visual Hierarchy)
Gunakanukuran, warna, danruangputih
untukmembuathirarkivisual yang jelas.
Elemenyang lebihpentingharuslebih
menonjoldibandingkanelemenlainnya.
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

31. PrinsipDasar DesainUI untuk
AplikasiMobile
Unity (Kesatuan)
Unity dalamprinsipdesainvisual mengacu
padakesatuanataukonsistensidalamsuatu
komposisi. Inimencakuppenggunaanelemen-
elemendesainyang salingterkaitsecaravisual,
sepertitemayang konsisten, paletwarnayang
harmonis.
Copyright © 2025 ExportHub.id. All rights reserved. Unauthorized reproduction or distribution is prohibited.

32. Info BMKG
Badan Meteorologi, Klimatologi,
dan Geofisika
LAPOR!
LayananAspirasidan
PengaduanOnline Rakyat

33. TerimaKasih