MODUL AJAR SMKN 1 Dukuhturi

Kelas: XII / Fase F

KONSENTRASI KEAHLIAN
DESAIN KOMUNIKASI VISUAL
Semester: 1 (Gasal)

I. INFORMASI UMUM
A. Identitas Modul
Nama Penyusun : Deviati, [Link].
Nama Sekolah : SMKN 1 Dukuhturi
Tahun Penyusunan : 2025
Jenjang Sekolah : SMK
Alokasi Waktu : 110 jam pelajaran (5 Pertemuan X 22 JP)
Fase :F
Elemen : Karya Desain

B. Kompetensi Awal
Kemampuan awal yang dipersyaratkan untuk mempelajari modul ini peserta didik
sudah memiliki kemampuan dasar mengenai konsep UI-UX Design.

C. Profil Pelajar Pancasila

PROFIL PELAJAR
PRAKTIK INTI
PANCASILA

Beriman, bertaqwa Mampu mengamalkan nilai-nilai agama dan

Kepada Tuhan YME dan kepercayaannya sebagai bentuk religiusitasnya,
Berakhlak Mulia percaya dan menghayati keberadaan tuhan serta
memperdalam ajaran agamanya yang tercermin
dalam perilakunya sehari-hari sebagai bentuk
penerapan pemahaman terhadap ajaran agamanya.

Bergotong royong Mampu berkolaborasi dengan orang lain dan secara

proaktif mengupayakan kesejahteraan dan
kebahagiaan orang-orang yang ada dalam
masyarakatnya.

Bernalar kritis Untuk mencapai sebuah kesuksesan pada target.

Kemampuan untuk menyelesaikan masalah yang
memberi kesempatan individu untuk mencapai ide-
ide.
Kritis tanpa memaksakan pendapatnya sendiri) dan
kreatif (selalu berupaya aktif menolong orang-orang
yang membutuhkan dan mencarikan solusi terbaik
untuk mendukung.

1
 Kreatif Mampu memodifikasi dan menghasilkan sesuatu
yang orisinal, bermakna, bermanfaat, dan
menggunakan imajinasi dan pengalamannya secara
bebas dalam berkreasi untuk mengembangkan diri,
menemukan kebahagiaan, hingga memecahkan
berbagai persoalan.

Mandiri Menekankan pada prakarsa dan tanggung jawab atas

pembelajaran dan pengembangan dirinya dengan
mempertimbangkan potensi, minat, situasi dan
tuntutan perkembangan.

D. Sarana dan Prasarana

Bahan : 1. Modul Ajar
2. Presentasi Power Point
3. Video
Alat : 1. Whiteboard
2. Laptop/ Komputer
3. Smartphone
4. Proyektor
5. Jaringan Internet
Media Aplikasi : 1. Google
2. Google Classroom
3. Youtube
4. Figma

E. Target Peserta Didik

Perangkat ajar ini dapat digunakan guru untuk mengajar di kelas XII (dua belas)
konsentrasi keahlian Desain Komunikasi Visual. Adapun target pembelajaran peserta
didik yang ingin dicapai yaitu:
1. Peserta didik harus mampu mencapai tujuan pembelajaran yang telah
ditetapkan
2. Peserta didik dapat mencapai nilai yang melebihi ambang batas atau KKM
yaitu 75.

F. Model Pembelajaran yang digunakan

Model Pembelajaran : Problem Based Learning
Moda Pembelajaran : Tatap muka
Metode Pembelajaran : Tanya jawab, diskusi, observasi, presentasi

2
G. Ketersediaan Materi
Materi disajikan dalam bentuk aktivitas pembelajaran (mengamati, menyimak,
membaca, bertanya, mencoba, berlatih, berdiskusi, presentasi, menulis, dll) sehingga
menghasilkan proses kognitif, afektif, psikomotorik yang membentuk karakter.

H. Kata Kunci
Konsep UI-UX Design

KOMPONEN INTI
1. Tujuan Pembelajaran
Rumusan Capaian Pembelajaran masing-masing elemen adalah sebagai berikut :
Elemen Capaian Pembelajaran
Karya Desain Pada fase F, peserta didik mampu dalam
merancang visual secara sistematis mulai dari
pemahaman terhadap permasalahan, diskusi
pencarian ide (brainstorming), pengembangan
alternatif, hingga menjadi karya akhir. Proses
tersebut dapat menggunakan metode design
thinking maupun metode lainnya. Karya desain
yang dihasilkan disesuaikan dengan sub
konsentrasi keahlian (peminatan) dalam lingkup
Desain Komunikasi Visual: Print Design/
Videografi/ Fotografi/ Tipografi/ Typeface
Design/Story Boarding/Ilustrasi/ Sequential
Art/Motion Graphic/Web & App Design/UI-UX
Design/ Concept Art/Motion Graphic Design/
Environmental Graphic Design/dan lainnya yang
terkait.

Tujuan Pembelajaran :
1. Peserta didik dapat menjelaskan konsep dasar User Interface (UI) dan User
Experience (UX)
2. Peserta didik dapat mengidentifikasi kebutuhan dan permasalahan pengguna
melalui riset dan analisis
3. Peserta didik dapat mengembangkan wireframe dan prototype sebagai
representasi dari struktur dan tata letak desain
4. Peserta didik dapat mengaplikasikan prinsip UI-UX design, seperti konsistensi,
kesederhanaan, keterbacaan, efisiensi, responsif, dan keindahan
5. Peserta didik dapat menggunakan tool dan perangkat lunak desain UI-UX,
seperti Sketch, Figma, Adobe XD, atau lainnya

3
 2. Pemahaman Bermakna
Konsep User Interface (UI) dan User Experience (UX), Identifikasi Permasalahan
Pengguna, Pengembangan Wireframe dan Prototype, Prinsip Desain UI-UX,
Penggunaan Tool dan Teknologi Desain.

3. Pertanyaan Pemantik
a) Apa yang kamu ketahui tentang UI-UX Design?
b) Apa yang membuat UI-UX Design itu sangat penting dalam membuat aplikasi
atau web?
c) Apa saja tren dalam industri UI-UX design saat ini?
d) Bagaimana cara kamu agar terus update dengan desain sekarang?
e) Tools apa saja yang kamu kuasai dalam merancang UI-UX design?

4. Kegiatan Pembelajaran

Pertemuan ke-1 : 22 JP x 45 menit

Model Pembelajaran : Problem Based Learning
Materi : Konsep UI-UX Design
Kegiatan Langkah Aktivitas guru Aktivitas peserta didik Alokasi
kerja waktu
Pendahuluan Apersepsi - Guru membuka - Peserta didik 10 menit
pelajaran dengan menjawab salam
salam dan doa. (Disiplin, Peduli
(Mindful Sosial)
Learning: - Peserta didik berdoa
Menciptakan untuk mengawali
suasana tenang pembelajaran
dan fokus) (Religius, Toleransi)
- Guru memeriksa - Peserta didik
kehadiran peserta termotivasi dan
didik semangat untuk
- Guru memberikan mengikuti
motivasi agar pembelajaran
peserta didik - Peserta didik
semangat dalam menyimak tujuan
mengikuti pembelajaran
pembelajaran - Peserta didik
- Guru melakukan menyimak aktivitas
apersepsi dengan pembelajaran
mengaitkan materi - Peserta didik
sebelumnya menyimak teknik
- Guru menjelaskan penilaian yang akan
tujuan dilakukan selama
pembelajaran proses pembelajaran

4
 memberi gambaran
tentang materi
yang akan
dipelajari dan
menunjukkan
pentingnya materi
dalam kehidupan
sehari- hari
- Guru mengajukan
pertanyaan pemantik
untuk menstimulasi
pemikiran peserta
didik tentang UI /
UX. (Meaningful
Learning:
Mengaitkan
dengan
pengalaman dan
memunculkan
relevansi)
Inti Orientasi - Guru memberikan - Peserta didik 850
peserta didik stimulus tentang mengajukan menit
pada masalah Konsep dasar User pertanyaan
(Mengamati) Interface (UI) dan (Communication)
User Experience - Peserta didik
(UX) mengamati slide
- Guru menampilkan power point tentang
slide power point Konsep dasar User
tentang Konsep Interface (UI) dan
dasar User User Experience
Interface (UI) dan (UX)
User Experience
(UX) (TPACK)
(Menanya) - Guru mempersilakan - Peserta didik
peserta didik untuk bertanya apa yang
bertanya mengenai kurang dipahami
materi yang belum (Communication)
dipahami - Peserta didik lain
- Guru mempersilakan menjawab dan
peserta didik lain mengemukakan
menjawab pendapat
pertanyaan dan (Communication,
mengemukakan Critical Thinking,
pendapat

5
 - Guru dan peserta Creativity)
didik membahas - Guru dan peserta
jawaban bersama- didik membahas
sama jawaban bersama-
sama (Collaboration)
Mengorgani- - Guru membagi - Peserta didik duduk
sasikan peserta peserta didik ke perkelompok
didik untuk dalam beberapa - Peserta didik
belajar kelompok bertanya mengenai
(Meaningful teknik pengisian
Learning: LKPD yang
Mengidentifikasi diberikan
permasalahan
nyata dan relevan)
- Guru membagikan
LKPD Konsep
dasar User
Interface (UI) dan
User Experience
(UX)
- Guru menjelaskan
prosedur pengisian
LKPD
- Guru memfasilitasi
peserta didik dalam
merumuskan
pertanyaan -
pertanyaan
penelitian yang
relevan dengan
masalah (Joyful
Learning:
Memberikan
kesempatan untuk
merumuskan
pertanyaan sendiri)
Membimbing - Guru menampilkan - Peserta didik
penyelidikan video Konsep dasar mengamati video
individu/ User Interface (UI) Konsep dasar User
kelompok dan User Interface (UI) dan
Experience (UX) User Experience
(Mengumpul- (TPACK) (UX)
kan informasi) - Guru - Peserta didik
mengintruksikan bertanya apa yang

6
 peserta didik untuk kurang dipahami
(Mengasosiasi praktik secara - Peserta didik
kan/ mengolah berkelompok mengumpulkan
informasi) - Guru membimbing informasi tentang
dan memantau Konsep dasar User
proses penyelidikan Interface (UI) dan
setiap kelompok, User Experience
memberikan arahan (UX) menurut
dan bantuan jika pemahaman masing-
diperlukan. masing kelompok
(Mindful Learning: - Peserta didik
Kehadiran guru mengolah informasi
sebagai fasilitator yang didapat dari
yang mendukung video dan penjelasan
proses belajar) guru, kemudian
mempraktikannya
(Communication,
Collaboration)
- Peserta didik
melakukan praktik
Mengembang - Guru meminta - Peserta didik
kan dan peserta didik untuk membuat laporan
menyajikan membuat laporan praktikum
hasil karya praktikum yang
akan dipresentasikan
- Guru membimbing
dalam pembuatan
laporan praktikum
Menganalisis - Guru membagikan - Masing-masing
dan lembar penilaian kelompok
mengevaluasi antar kelompok mempresentasikan
- Guru hasil laporan
(Mengkomuni mengintruksikan praktikum
kasikan) kepada setiap - Setiap kelompok
kelompok untuk menilai presentasi
menilai kelompok kelompok yang
lain yang sedang sedang presentasi
presentasi pada form yang
- Guru mempersilakan sudah disediakan
setiap kelompok - Kelompok lain
untuk memberikan
mempresentasikan tanggapan terhadap
laporan praktikum presentasi yang telah
masing-masing disampaikan

7
 (Meaningful (Communication,
Learning: Collaboration)
Mengembangkan - Peserta didik
kemampuan merangkum atau
komunikasi dan membuat kesimpulan
kolaborasi) materi yang telah
- Guru mempersilakan dipelajari (Critical
kelompok lain untuk Thinking, Creativity)
menanggapi
kelompok yang
tampil
- Guru memberikan
penguatan dan
meluruskan
pemahaman yang
kurang tepat.
(Mindful Learning:
Merenungkan
proses belajar dan
mengevaluasi
solusi)
Penutup - Guru dan peserta - Peserta didik 20 menit
didik menyimpulkan mengerjakan
pelajaran yang evaluasi
sudah dibahas - Peserta didik
bersama-sama memberikan
- Guru memberikan tanggapan
apresiasi kepada - Peserta didik
semua kelompok menyimak tentang
atas partisipasi dan materi yang akan
hasil kerja mereka. dipelajari pada
(Joyful Learning: pertemuan
Memberikan selanjutnya
pengakuan dan - Peserta didik berdoa
membangun untuk mengakhiri
motivasi) pembelajaran
- Guru (Religius, Toleransi)
mengintruksikan - Peserta didik
peserta didik untuk menjawab salam
mengerjakan
evaluasi secara
online menggunakan
Google form

8
 (Collaboration)
- Guru melakukan
refleksi terhadap
pembelajaran :
1. Pengalaman
yang didapatkan
2. Materi yang
disampaikan
jelas?
3. Apakah terlalu
cepat dalam
menjelaskan?
- Rencana perbaikan
dan pengayaan
- Guru menjelaskan
tentang materi yang
akan dipelajari pada
pertemuan
selanjutnya
- Guru mempersilakan
salah satu peserta
didik untuk
memimpin doa
- Guru mengucapkan
salam dan
memberikan pesan

9
 Pertemuan ke-2 : 22 JP x 45 menit
Model Pembelajaran : Problem Based Learning
Materi : Print design, videografi, fotografi, dan tipografi
Kegiatan Langkah Aktivitas guru Aktivitas peserta didik Alokasi
kerja waktu
Pendahuluan Apersepsi - Guru membuka - Peserta didik 10 menit
pelajaran dengan menjawab salam
salam dan doa. (Disiplin, Peduli
(Mindful Sosial)
Learning: - Peserta didik berdoa
Menciptakan untuk mengawali
suasana tenang pembelajaran
dan fokus) (Religius, Toleransi)
- Guru memeriksa - Peserta didik
kehadiran peserta termotivasi dan
didik semangat untuk
- Guru memberikan mengikuti
motivasi agar pembelajaran
peserta didik - Peserta didik
semangat dalam menyimak tujuan
mengikuti pembelajaran
pembelajaran - Peserta didik
- Guru melakukan menyimak aktivitas
apersepsi dengan pembelajaran
mengaitkan materi - Peserta didik
sebelumnya menyimak teknik
- Guru menjelaskan penilaian yang akan
tujuan dilakukan selama
pembelajaran proses pembelajaran
memberi gambaran
tentang materi
yang akan
dipelajari dan
menunjukkan
pentingnya materi
dalam kehidupan
sehari- hari
- Guru mengajukan
pertanyaan pemantik
untuk menstimulasi
pemikiran peserta
didik tentang UI /
UX. (Meaningful
Learning:

10
 Mengaitkan
dengan
pengalaman dan
memunculkan
relevansi)
Inti Orientasi - Guru memberikan - Peserta didik 850
peserta didik stimulus tentang mengajukan menit
pada masalah Identifikasi pertanyaan
(Mengamati) Permasalahan (Communication)
Pengguna - Peserta didik
- Guru menampilkan mengamati slide
slide power point power point tentang
tentang Identifikasi Identifikasi
Permasalahan Permasalahan
Pengguna (TPACK) Pengguna
(Menanya) - Guru mempersilakan - Peserta didik
peserta didik untuk bertanya apa yang
bertanya mengenai kurang dipahami
materi yang belum (Communication)
dipahami - Peserta didik lain
- Guru mempersilakan menjawab dan
peserta didik lain mengemukakan
menjawab pendapat
pertanyaan dan (Communication,
mengemukakan Critical Thinking,
pendapat Creativity)
- Guru dan peserta - Guru dan peserta
didik membahas didik membahas
jawaban bersama- jawaban bersama-
sama sama (Collaboration)
Mengorgani- - Guru membagi - Peserta didik duduk
sasikan peserta peserta didik ke perkelompok
didik untuk dalam beberapa - Peserta didik
belajar kelompok bertanya mengenai
(Meaningful teknik pengisian
Learning: LKPD yang
Mengidentifikasi diberikan
permasalahan
nyata dan relevan)
- Guru membagikan
LKPD Identifikasi
Permasalahan
Pengguna
- Guru menjelaskan

11
 prosedur pengisian
LKPD
- Guru memfasilitasi
peserta didik dalam
merumuskan
pertanyaan -
pertanyaan
penelitian yang
relevan dengan
masalah (Joyful
Learning:
Memberikan
kesempatan untuk
merumuskan
pertanyaan sendiri)
Membimbing - Guru menampilkan - Peserta didik
penyelidikan video Identifikasi mengamati video
individu/ Permasalahan Identifikasi
kelompok Pengguna (TPACK) Permasalahan
- Guru Pengguna
(Mengumpul- mengintruksikan - Peserta didik bertanya
kan informasi) peserta didik untuk apa yang kurang
praktik secara dipahami
(Mengasosiasi berkelompok - Peserta didik
kan/ mengolah - Guru membimbing mengumpulkan
informasi) dan memantau informasi tentang
proses penyelidikan Identifikasi
setiap kelompok, Permasalahan
memberikan arahan Pengguna menurut
dan bantuan jika pemahaman masing-
diperlukan. masing kelompok
(Mindful Learning: - Peserta didik
Kehadiran guru mengolah informasi
sebagai fasilitator yang didapat dari
yang mendukung video dan penjelasan
proses belajar) guru, kemudian
mempraktikannya
(Communication,
Collaboration)
- Peserta didik
melakukan praktik
Mengembang - Guru meminta - Peserta didik
kan dan peserta didik untuk membuat laporan
menyajikan membuat laporan

12
 hasil karya praktikum yang praktikum
akan dipresentasikan
- Guru membimbing
dalam pembuatan
laporan praktikum
Menganalisis - Guru membagikan - Masing-masing
dan lembar penilaian kelompok
mengevaluasi antar kelompok mempresentasikan
- Guru hasil laporan
(Mengkomuni mengintruksikan praktikum
kasikan) kepada setiap - Setiap kelompok
kelompok untuk menilai presentasi
menilai kelompok kelompok yang
lain yang sedang sedang presentasi
presentasi pada form yang
- Guru mempersilakan sudah disediakan
setiap kelompok - Kelompok lain
untuk memberikan
mempresentasikan tanggapan terhadap
laporan praktikum presentasi yang telah
masing-masing disampaikan
(Meaningful (Communication,
Learning: Collaboration)
Mengembangkan - Peserta didik
kemampuan merangkum atau
komunikasi dan membuat kesimpulan
kolaborasi) materi yang telah
- Guru mempersilakan dipelajari (Critical
kelompok lain untuk Thinking, Creativity)
menanggapi
kelompok yang
tampil
- Guru memberikan
penguatan dan
meluruskan
pemahaman yang
kurang tepat.
(Mindful Learning:
Merenungkan
proses belajar dan
mengevaluasi
solusi)
Penutup - Guru dan peserta - Peserta didik 20 menit
didik menyimpulkan mengerjakan

13
 pelajaran yang evaluasi
sudah dibahas - Peserta didik
bersama-sama memberikan
- Guru memberikan tanggapan
apresiasi kepada - Peserta didik
semua kelompok menyimak tentang
atas partisipasi dan materi yang akan
hasil kerja mereka. dipelajari pada
(Joyful Learning: pertemuan
Memberikan selanjutnya
pengakuan dan - Peserta didik berdoa
membangun untuk mengakhiri
motivasi) pembelajaran
- Guru (Religius, Toleransi)
mengintruksikan - Peserta didik
peserta didik untuk menjawab salam
mengerjakan
evaluasi secara
online menggunakan
Google form
(Collaboration)
- Guru melakukan
refleksi terhadap
pembelajaran :
4. Pengalaman
yang didapatkan
5. Materi yang
disampaikan
jelas?
6. Apakah terlalu
cepat dalam
menjelaskan?
- Rencana perbaikan
dan pengayaan
- Guru menjelaskan
tentang materi yang
akan dipelajari pada
pertemuan
selanjutnya
- Guru mempersilakan
salah satu peserta
didik untuk
memimpin doa

14
 - Guru mengucapkan
salam dan
memberikan pesan

Pertemuan ke-3 : 22 JP x 45 menit

Model Pembelajaran : Problem Based Learning
Materi : Print design, videografi, fotografi, dan tipografi
Kegiatan Langkah Aktivitas guru Aktivitas peserta didik Alokasi
kerja waktu
Pendahuluan Apersepsi - Guru membuka - Peserta didik 10 menit
pelajaran dengan menjawab salam
salam dan doa. (Disiplin, Peduli
(Mindful Sosial)
Learning: - Peserta didik berdoa
Menciptakan untuk mengawali
suasana tenang pembelajaran
dan fokus) (Religius, Toleransi)
- Guru memeriksa - Peserta didik
kehadiran peserta termotivasi dan
didik semangat untuk
- Guru memberikan mengikuti
motivasi agar pembelajaran
peserta didik - Peserta didik
semangat dalam menyimak tujuan
mengikuti pembelajaran
pembelajaran - Peserta didik
- Guru melakukan menyimak aktivitas
apersepsi dengan pembelajaran
mengaitkan materi - Peserta didik
sebelumnya menyimak teknik
- Guru menjelaskan penilaian yang akan
tujuan dilakukan selama
pembelajaran proses pembelajaran
memberi gambaran
tentang materi
yang akan
dipelajari dan
menunjukkan
pentingnya materi
dalam kehidupan
sehari- hari
- Guru mengajukan
pertanyaan pemantik

15
 untuk menstimulasi
pemikiran peserta
didik tentang UI /
UX (Meaningful
Learning:
Mengaitkan
dengan
pengalaman dan
memunculkan
relevansi)
Inti Orientasi - Guru memberikan - Peserta didik 850
peserta didik stimulus tentang mengajukan menit
pada masalah Pengembangan pertanyaan
(Mengamati) Wireframe dan (Communication)
Prototype - Peserta didik
- Guru menampilkan mengamati slide
slide power point power point tentang
tentang Pengembangan
Pengembangan Wireframe dan
Wireframe dan Prototype
Prototype (TPACK)
(Menanya) - Guru mempersilakan - Peserta didik
peserta didik untuk bertanya apa yang
bertanya mengenai kurang dipahami
materi yang belum (Communication)
dipahami - Peserta didik lain
- Guru mempersilakan menjawab dan
peserta didik lain mengemukakan
menjawab pendapat
pertanyaan dan (Communication,
mengemukakan Critical Thinking,
pendapat Creativity)
- Guru dan peserta - Guru dan peserta
didik membahas didik membahas
jawaban bersama- jawaban bersama-
sama sama (Collaboration)
Mengorgani- - Guru membagi - Peserta didik duduk
sasikan peserta peserta didik ke perkelompok
didik untuk dalam beberapa - Peserta didik
belajar kelompok bertanya mengenai
(Meaningful teknik pengisian
Learning: LKPD yang
Mengidentifikasi diberikan
permasalahan

16
 nyata dan relevan)
- Guru membagikan
LKPD
Pengembangan
Wireframe dan
Prototype
- Guru menjelaskan
prosedur pengisian
LKPD
- Guru memfasilitasi
peserta didik dalam
merumuskan
pertanyaan -
pertanyaan
penelitian yang
relevan dengan
masalah (Joyful
Learning:
Memberikan
kesempatan untuk
merumuskan
pertanyaan sendiri)
Membimbing - Guru menampilkan - Peserta didik
penyelidikan video mengamati video
individu/ Pengembangan Pengembangan
kelompok Wireframe dan Wireframe dan
Prototype (TPACK) Prototype
(Mengumpul- - Guru - Peserta didik bertanya
kan informasi) mengintruksikan apa yang kurang
peserta didik untuk dipahami
(Mengasosiasi praktik secara - Peserta didik
kan/ mengolah berkelompok mengumpulkan
informasi) - Guru membimbing informasi tentang
dan memantau Pengembangan
proses penyelidikan Wireframe dan
setiap kelompok, Prototype menurut
memberikan arahan pemahaman masing-
dan bantuan jika masing kelompok
diperlukan. - Peserta didik
(Mindful Learning: mengolah informasi
Kehadiran guru yang didapat dari
sebagai fasilitator video dan penjelasan
yang mendukung guru, kemudian
proses belajar) mempraktikannya

17
 (Communication,
Collaboration)
- Peserta didik
melakukan praktik
Mengembang - Guru meminta - Peserta didik
kan dan peserta didik untuk membuat laporan
menyajikan membuat laporan praktikum
hasil karya praktikum yang
akan dipresentasikan
- Guru membimbing
dalam pembuatan
laporan praktikum
Menganalisis - Guru membagikan - Masing-masing
dan lembar penilaian kelompok
mengevaluasi antar kelompok mempresentasikan
- Guru hasil laporan
(Mengkomuni mengintruksikan praktikum
kasikan) kepada setiap - Setiap kelompok
kelompok untuk menilai presentasi
menilai kelompok kelompok yang
lain yang sedang sedang presentasi
presentasi pada form yang
- Guru mempersilakan sudah disediakan
setiap kelompok - Kelompok lain
untuk memberikan
mempresentasikan tanggapan terhadap
laporan praktikum presentasi yang telah
masing-masing disampaikan
(Meaningful (Communication,
Learning: Collaboration)
Mengembangkan - Peserta didik
kemampuan merangkum atau
komunikasi dan membuat kesimpulan
kolaborasi) materi yang telah
- Guru mempersilakan dipelajari (Critical
kelompok lain untuk Thinking, Creativity)
menanggapi
kelompok yang
tampil
- Guru memberikan
penguatan dan
meluruskan
pemahaman yang
kurang tepat.

18
 (Mindful Learning:
Merenungkan
proses belajar dan
mengevaluasi
solusi)
Penutup - Guru dan peserta - Peserta didik 20 menit
didik menyimpulkan mengerjakan
pelajaran yang evaluasi
sudah dibahas - Peserta didik
bersama-sama memberikan
- Guru memberikan tanggapan
apresiasi kepada - Peserta didik
semua kelompok menyimak tentang
atas partisipasi dan materi yang akan
hasil kerja mereka. dipelajari pada
(Joyful Learning: pertemuan
Memberikan selanjutnya
pengakuan dan - Peserta didik berdoa
membangun untuk mengakhiri
motivasi) pembelajaran
- Guru (Religius, Toleransi)
mengintruksikan - Peserta didik
peserta didik untuk menjawab salam
mengerjakan
evaluasi secara
online menggunakan
Google form
(Collaboration)
- Guru melakukan
refleksi terhadap
pembelajaran :
7. Pengalaman
yang didapatkan
8. Materi yang
disampaikan
jelas?
9. Apakah terlalu
cepat dalam
menjelaskan?
- Rencana perbaikan
dan pengayaan
- Guru menjelaskan
tentang materi yang
akan dipelajari pada

19
 pertemuan
selanjutnya
- Guru mempersilakan
salah satu peserta
didik untuk
memimpin doa
- Guru mengucapkan
salam dan
memberikan pesan

Pertemuan ke-4 : 22 JP x 45 menit

Model Pembelajaran : Problem Based Learning
Materi : Print design, videografi, fotografi, dan tipografi
Kegiatan Langkah Aktivitas guru Aktivitas peserta didik Alokasi
kerja waktu
Pendahuluan Apersepsi - Guru membuka - Peserta didik 10 menit
pelajaran dengan menjawab salam
salam dan doa. (Disiplin, Peduli
(Mindful Sosial)
Learning: - Peserta didik berdoa
Menciptakan untuk mengawali
suasana tenang pembelajaran
dan fokus) (Religius, Toleransi)
- Guru memeriksa - Peserta didik
kehadiran peserta termotivasi dan
didik semangat untuk
- Guru memberikan mengikuti
motivasi agar pembelajaran
peserta didik - Peserta didik
semangat dalam menyimak tujuan
mengikuti pembelajaran
pembelajaran - Peserta didik
- Guru melakukan menyimak aktivitas
apersepsi dengan pembelajaran
mengaitkan materi - Peserta didik
sebelumnya menyimak teknik
- Guru menjelaskan penilaian yang akan
tujuan dilakukan selama
pembelajaran proses pembelajaran
memberi gambaran
tentang materi
yang akan
dipelajari dan

20
 menunjukkan
pentingnya materi
dalam kehidupan
sehari- hari
- Guru mengajukan
pertanyaan pemantik
untuk menstimulasi
pemikiran peserta
didik tentang UI /
UX (Meaningful
Learning:
Mengaitkan
dengan
pengalaman dan
memunculkan
relevansi)
Inti Orientasi - Guru memberikan - Peserta didik 850
peserta didik stimulus tentang mengajukan menit
pada masalah Prinsip Desain UI- pertanyaan
(Mengamati) UX (Communication)
- Guru menampilkan - Peserta didik
slide power point mengamati slide
tentang Prinsip power point tentang
Desain UI-UX Prinsip Desain UI-
(TPACK) UX
(Menanya) - Guru mempersilakan - Peserta didik
peserta didik untuk bertanya apa yang
bertanya mengenai kurang dipahami
materi yang belum (Communication)
dipahami - Peserta didik lain
- Guru mempersilakan menjawab dan
peserta didik lain mengemukakan
menjawab pendapat
pertanyaan dan (Communication,
mengemukakan Critical Thinking,
pendapat Creativity)
- Guru dan peserta - Guru dan peserta
didik membahas didik membahas
jawaban bersama- jawaban bersama-
sama sama (Collaboration)
Mengorgani- - Guru membagi - Peserta didik duduk
sasikan peserta peserta didik ke perkelompok
didik untuk dalam beberapa - Peserta didik
belajar kelompok bertanya mengenai

21
 (Meaningful teknik pengisian
Learning: LKPD yang
Mengidentifikasi diberikan
permasalahan
nyata dan relevan)
- Guru membagikan
LKPD Prinsip
Desain UI-UX
- Guru menjelaskan
prosedur pengisian
LKPD
- Guru memfasilitasi
peserta didik dalam
merumuskan
pertanyaan -
pertanyaan
penelitian yang
relevan dengan
masalah (Joyful
Learning:
Memberikan
kesempatan untuk
merumuskan
pertanyaan sendiri)
Membimbing - Guru menampilkan - Peserta didik
penyelidikan video Prinsip mengamati video
individu/ Desain UI-UX Prinsip Desain UI-
kelompok (TPACK) UX
- Guru - Peserta didik bertanya
(Mengumpul- mengintruksikan apa yang kurang
kan informasi) peserta didik untuk dipahami
praktik secara - Peserta didik
(Mengasosiasi berkelompok mengumpulkan
kan/ mengolah - Guru membimbing informasi tentang
informasi) dan memantau Prinsip Desain UI-
proses penyelidikan UX menurut
setiap kelompok, pemahaman masing-
memberikan arahan masing kelompok
dan bantuan jika - Peserta didik
diperlukan. mengolah informasi
(Mindful Learning: yang didapat dari
Kehadiran guru video dan penjelasan
sebagai fasilitator guru, kemudian
yang mendukung mempraktikannya

22
 proses belajar) (Communication,
Collaboration)
- Peserta didik
melakukan praktik
Mengembang - Guru meminta - Peserta didik
kan dan peserta didik untuk membuat laporan
menyajikan membuat laporan praktikum
hasil karya praktikum yang
akan dipresentasikan
- Guru membimbing
dalam pembuatan
laporan praktikum
Menganalisis - Guru membagikan - Masing-masing
dan lembar penilaian kelompok
mengevaluasi antar kelompok mempresentasikan
- Guru hasil laporan
(Mengkomuni mengintruksikan praktikum
kasikan) kepada setiap - Setiap kelompok
kelompok untuk menilai presentasi
menilai kelompok kelompok yang
lain yang sedang sedang presentasi
presentasi pada form yang
- Guru mempersilakan sudah disediakan
setiap kelompok - Kelompok lain
untuk memberikan
mempresentasikan tanggapan terhadap
laporan praktikum presentasi yang telah
masing-masing disampaikan
(Meaningful (Communication,
Learning: Collaboration)
Mengembangkan - Peserta didik
kemampuan merangkum atau
komunikasi dan membuat kesimpulan
kolaborasi) materi yang telah
- Guru mempersilakan dipelajari (Critical
kelompok lain untuk Thinking, Creativity)
menanggapi
kelompok yang
tampil
- Guru memberikan
penguatan dan
meluruskan
pemahaman yang
kurang tepat.

23
 (Mindful Learning:
Merenungkan
proses belajar dan
mengevaluasi
solusi)
Penutup - Guru dan peserta - Peserta didik 20 menit
didik menyimpulkan mengerjakan
pelajaran yang evaluasi
sudah dibahas - Peserta didik
bersama-sama memberikan
- Guru memberikan tanggapan
apresiasi kepada - Peserta didik
semua kelompok menyimak tentang
atas partisipasi dan materi yang akan
hasil kerja mereka. dipelajari pada
(Joyful Learning: pertemuan
Memberikan selanjutnya
pengakuan dan - Peserta didik berdoa
membangun untuk mengakhiri
motivasi) pembelajaran
- Guru (Religius, Toleransi)
mengintruksikan - Peserta didik
peserta didik untuk menjawab salam
mengerjakan
evaluasi secara
online menggunakan
Google form
(Collaboration)
- Guru melakukan
refleksi terhadap
pembelajaran :
10. Pengalaman
yang didapatkan
11. Materi yang
disampaikan
jelas?
12. Apakah terlalu
cepat dalam
menjelaskan?
- Rencana perbaikan
dan pengayaan
- Guru menjelaskan
tentang materi yang
akan dipelajari pada

24
 pertemuan
selanjutnya
- Guru mempersilakan
salah satu peserta
didik untuk
memimpin doa
- Guru mengucapkan
salam dan
memberikan pesan

Pertemuan ke-5 : 22 JP x 45 menit

Model Pembelajaran : Problem Based Learning
Materi : Print design, videografi, fotografi, dan tipografi
Kegiatan Langkah Aktivitas guru Aktivitas peserta didik Alokasi
kerja waktu
Pendahuluan Apersepsi - Guru membuka - Peserta didik 10 menit
pelajaran dengan menjawab salam
salam dan doa. (Disiplin, Peduli
(Mindful Sosial)
Learning: - Peserta didik berdoa
Menciptakan untuk mengawali
suasana tenang pembelajaran
dan fokus) (Religius, Toleransi)
- Guru memeriksa - Peserta didik
kehadiran peserta termotivasi dan
didik semangat untuk
- Guru memberikan mengikuti
motivasi agar pembelajaran
peserta didik - Peserta didik
semangat dalam menyimak tujuan
mengikuti pembelajaran
pembelajaran - Peserta didik
- Guru melakukan menyimak aktivitas
apersepsi dengan pembelajaran
mengaitkan materi - Peserta didik
sebelumnya menyimak teknik
- Guru menjelaskan penilaian yang akan
tujuan dilakukan selama
pembelajaran proses pembelajaran
memberi gambaran
tentang materi
yang akan
dipelajari dan

25
 menunjukkan
pentingnya materi
dalam kehidupan
sehari- hari
- Guru mengajukan
pertanyaan pemantik
untuk menstimulasi
pemikiran peserta
didik tentang UI /
UX (Meaningful
Learning:
Mengaitkan
dengan
pengalaman dan
memunculkan
relevansi)
Inti Orientasi - Guru memberikan - Peserta didik 850
peserta didik stimulus tentang mengajukan menit
pada masalah Penggunaan Tool pertanyaan
(Mengamati) dan Teknologi (Communication)
Desain - Peserta didik
- Guru menampilkan mengamati slide
slide power point power point tentang
tentang Penggunaan Tool
Penggunaan Tool dan Teknologi
dan Teknologi Desain
Desain (TPACK)
(Menanya) - Guru mempersilakan - Peserta didik
peserta didik untuk bertanya apa yang
bertanya mengenai kurang dipahami
materi yang belum (Communication)
dipahami - Peserta didik lain
- Guru mempersilakan menjawab dan
peserta didik lain mengemukakan
menjawab pendapat
pertanyaan dan (Communication,
mengemukakan Critical Thinking,
pendapat Creativity)
- Guru dan peserta - Guru dan peserta
didik membahas didik membahas
jawaban bersama- jawaban bersama-
sama sama (Collaboration)
Mengorgani- - Guru membagi - Peserta didik duduk
sasikan peserta peserta didik ke

26
 didik untuk dalam beberapa perkelompok
belajar kelompok - Peserta didik
(Meaningful bertanya mengenai
Learning: teknik pengisian
Mengidentifikasi LKPD yang
permasalahan diberikan
nyata dan relevan)
- Guru membagikan
LKPD Penggunaan
Tool dan Teknologi
Desain
- Guru menjelaskan
prosedur pengisian
LKPD
- Guru memfasilitasi
peserta didik dalam
merumuskan
pertanyaan -
pertanyaan
penelitian yang
relevan dengan
masalah (Joyful
Learning:
Memberikan
kesempatan untuk
merumuskan
pertanyaan sendiri)
Membimbing - Guru menampilkan - Peserta didik
penyelidikan video Penggunaan mengamati video
individu/ Tool dan Teknologi Penggunaan Tool
kelompok Desain (TPACK) dan Teknologi
- Guru Desain
(Mengumpul- mengintruksikan - Peserta didik bertanya
kan informasi) peserta didik untuk apa yang kurang
praktik secara dipahami
(Mengasosiasi berkelompok - Peserta didik
kan/ mengolah - Guru membimbing mengumpulkan
informasi) dan memantau informasi tentang
proses penyelidikan Penggunaan Tool
setiap kelompok, dan Teknologi
memberikan arahan Desain menurut
dan bantuan jika pemahaman masing-
diperlukan. masing kelompok
(Mindful Learning: - Peserta didik

27
 Kehadiran guru mengolah informasi
sebagai fasilitator yang didapat dari
yang mendukung video dan penjelasan
proses belajar) guru, kemudian
mempraktikannya
(Communication,
Collaboration)
- Peserta didik
melakukan praktik
Mengembang - Guru meminta - Peserta didik
kan dan peserta didik untuk membuat laporan
menyajikan membuat laporan praktikum
hasil karya praktikum yang
akan dipresentasikan
- Guru membimbing
dalam pembuatan
laporan praktikum
Menganalisis - Guru membagikan - Masing-masing
dan lembar penilaian kelompok
mengevaluasi antar kelompok mempresentasikan
- Guru hasil laporan
(Mengkomuni mengintruksikan praktikum
kasikan) kepada setiap - Setiap kelompok
kelompok untuk menilai presentasi
menilai kelompok kelompok yang
lain yang sedang sedang presentasi
presentasi pada form yang
- Guru mempersilakan sudah disediakan
setiap kelompok - Kelompok lain
untuk memberikan
mempresentasikan tanggapan terhadap
laporan praktikum presentasi yang telah
masing-masing disampaikan
(Meaningful (Communication,
Learning: Collaboration)
Mengembangkan - Peserta didik
kemampuan merangkum atau
komunikasi dan membuat kesimpulan
kolaborasi) materi yang telah
- Guru mempersilakan dipelajari (Critical
kelompok lain untuk Thinking, Creativity)
menanggapi
kelompok yang

28
 tampil
- Guru memberikan
penguatan dan
meluruskan
pemahaman yang
kurang tepat.
(Mindful Learning:
Merenungkan
proses belajar dan
mengevaluasi
solusi)
Penutup - Guru dan peserta - Peserta didik 20 menit
didik menyimpulkan mengerjakan
pelajaran yang evaluasi
sudah dibahas - Peserta didik
bersama-sama memberikan
- Guru memberikan tanggapan
apresiasi kepada - Peserta didik
semua kelompok menyimak tentang
atas partisipasi dan materi yang akan
hasil kerja mereka. dipelajari pada
(Joyful Learning: pertemuan
Memberikan selanjutnya
pengakuan dan - Peserta didik berdoa
membangun untuk mengakhiri
motivasi) pembelajaran
- Guru (Religius, Toleransi)
mengintruksikan - Peserta didik
peserta didik untuk menjawab salam
mengerjakan
evaluasi secara
online menggunakan
Google form
(Collaboration)
- Guru melakukan
refleksi terhadap
pembelajaran :
13. Pengalaman
yang didapatkan
14. Materi yang
disampaikan
jelas?
15. Apakah terlalu
cepat dalam

29
 menjelaskan?
- Rencana perbaikan
dan pengayaan
- Guru menjelaskan
tentang materi yang
akan dipelajari pada
pertemuan
selanjutnya
- Guru mempersilakan
salah satu peserta
didik untuk
memimpin doa
- Guru mengucapkan
salam dan
memberikan pesan

5. Asesmen
a) Jenis (Performa, tertulis, sikap)

Performa Tertulis Sika

p
Dengan teknik observasi Menggunakan ujian Disiplin (Dapat dilihat
guru mengamati kinerja online yang sudah dari waktu pengerjaan)
sebagai aspek keterampilan disiapkan guru dengan Tanggungjawab (Dapat
peserta didik dilihat dari menggunakan Google dilihat dari kelengkapan
hasil pekerjaan dan form dalam mengerjakan
kelengkapannya tugas)

b) Penilaian (Asesmen individu dan kelompok)

 Asesmen Formatif

No Komponen Indikator Skor

Penilaian
1 Persiapan Kerja Melakukan persiapan kerja dengan sangat baik 5
Melakukan persiapan kerja dengan baik 4
Melakukan persiapan kerja dengan cukup baik 3
Melakukan persiapan kerja dengan kurang baik 2
Melakukan persiapan kerja dengan sangat kurang 1

30
 baik
2 Proses Kerja Menerapkan konsep UI-UX Design dengan 5
sangat baik
Menerapkan konsep UI-UX Design dengan baik 4
Menerapkan konsep UI-UX Design dengan 3
cukup baik
Menerapkan konsep UI-UX Design dengan 2
kurang baik
Menerapkan konsep UI-UX Design dengan 1
sangat kurang baik
3 Hasil Kerja Hasil kerja menerapkan konsep UI-UX 5
Design dengan sangat baik
Hasil kerja menerapkan konsep UI-UX 4
Design dengan baik
Hasil kerja menerapkan konsep UI-UX 3
Design dengan cukup baik
Hasil kerja menerapkan konsep UI-UX 2
Design dengan kurang baik
Hasil kerja menerapkan konsep UI-UX Design 1
dengan sangat kurang baik
4 Laporan Hasil Laporan disusun dengan sangat baik 5
Kerja Laporan disusun dengan baik 4
Laporan disusun dengan cukup baik 3
Laporan disusun dengan kurang baik 2
Laporan disusun dengan sangat kurang baik 1

Pengolahan :

N Penilaian Sko Nilai Akhir keterampilan

o r
(1-5)
1 Persiapan kerja NA = ∑ Skor Perolehan
2 Proses kerja ×100
Skor Maksimal
3 Hasil Kerja
4 Laporan Hasil
Kerja
Jumlah skor

 Asesmen Sumatif
(Lampiran 1)
 Asesmen Sikap
Penilaian Observasi
Penilaian observasi berdasarkan pengamatan sikap dan perilaku peserta
didik sehari- hari, baik terkait dalam proses pembelajaran maupun secara

31
 umum. Pengamatan langsung dilakukan oleh guru. Berikut instrumen
penilaian sikap:

Sikap
Nama
Beriman & Bergotong- Bernalar Jumlah
No Peserta Kreatif Mandiri
Bertaqwa royong kritis skor
didik (1-4) (1-4)
(1-4) (1-4) (1-4)
1
2
3
4
5

Rubrik Penilaian
Sikap beriman & bertaqwa Rubrik pemberian skor:
Indikator  4 = jika peserta didik
• Berdoa sebelum dan sesudah kegiatan melakukan 4 (empat) kegiatan
pembelajaran tersebut
• Memberi salam pada saat awal dan akhir  3 = jika peserta didik
presentasi sesuai agama yang dianut melakukan 3 (tiga) kegiatan
• Saling menghormati, toleransi tersebut
• Memelihara hubungan baik dengan sesama  2 = jika peserta didik
teman sekelas melakukan 2 (dua) kegiatan
Sikap bergotong-royong tersebut
Indikator  1 = jika peserta didik
• Bersedia melakukan tugas kelompok melakukan 1 (satu) kegiatan
• Membantu teman tanpa mengharapkan tersebut
imbalan
• Aktif dalam kerja kelompok
Sikap bernalar Kritis
Indikator
• Kemampuan untuk menyelesaikan masalah
• Tidak memaksakan pendapatnya sendiri
• Aktif mencari solusi permasalahan
Sikap Kreatif
Indikator
• Kemampuan menghasilkan ide-ide yang
bervariasi
• Mampu memecahkan berbagai persoalan
Sikap Mandiri
Indikator
• Mengerrjakan tugas yang diberikan

32
• Mengikuti pembelajaran dengan khidmat

6. Refleksi Peserta Didik

Aspek Refleksi Peserta Didik
Perasaan dalam belajar Apa yang menyenangkan dalam kegiatan
pembelajaran hari ini?
Makna Apakah aktivitas pembelajaran hari ini bermakna
dalam kehidupan saya?
Penguasaan materi Saya dapat menguasai materi pelajaran pada
hari ini
 Baik
 Cukup
 Kurang
Keaktifan Apakah saya terlibat aktif dalam pembelajaran
hari ini? Apakah saya menyumbangkan ide
dalam proses pembuatan presentasi?
Gotong Royong Apakah saya dapat bekerjasama dengan teman 1
kelompok?

7. Refleksi Pendidik

Refleksi Pendidik
Apakah model PBL efektif dalam meningkatkan pemahaman peserta didik
tentang UI / UX?
Apakah ada kendala dalam pembelajaran?
Apakah semua siswa aktif dalam kegiatan pembelajaran?
Apa saja kesulitan siswa yang dapat diidentifikasi pada kegiatan pembelajaran?
Apakah siswa yang memiliki kesulitan ketika berkegiatan dapat teratasi dengan
baik?
Apa level pencapaian rata-rata siswa dalam kegiatan pembelajaran ini?
Apakah pendekatan Deep Learning (Mindful, Meaningful, Joyful) terintegrasi
dengan baik dalam kegiatan pembelajaran? Berikan contohnya.

8. Pengayaan dan Remedial

a. Pengayaan diberikan dalam bentuk materi yang lebih kompleks dan
tambahan latihan-latihan sesuai materi
b. Remidial diberikan dalam bentuk lembar kerja atau tugas yang belum dicapai
oleh masing-masing peserta didik yang berbeda

Dukuhturi, Juli 2025

Mengetahui,
Kepala SMK Negeri 1 Dukuhturi Guru Mata Pelajaran,

33
 Dra. A. Marsiti, M.M. Deviati, [Link].
NIP. 19650717 199203 2 011 NIP. 19891020 201902 2 003

Lampiran 1. Asesmen Sumatif

1. Pernyataan yang benar terkait UI/UX design adalah …
A. Disiplin desain untuk menciptakan antarmuka pengguna yang mudah digunakan dan
menyenangkan bagi pengguna
B. Teknik pemrograman untuk membuat aplikasi web dan mobile
C. Model bisnis untuk mengembangkan produk dan layanan
D. Algoritma untuk mengoptimalkan mesin pencari
E. Metode riset untuk analisis pasar
2. Berikut yang termasuk dalam UI design adalah …
A. Pengembangan dan penyempurnaan pengalaman pengguna
B. Pengembangan konsep, prototype, pengujian, dan pengoptimalan fitur-fitur aplikasi
C. Pengembangan elemen visual pada antarmuka pengguna
D. Pengumpulan data untuk memperbaiki performa aplikasi
E. Analisis pasar untuk mengembangkan strategi bisnis
3. Berikut yang termasuk dalam UX design adalah …
A. Pengembangan dan penyempurnaan pengalaman pengguna
B. Pengembangan konsep, prototype, pengujian, dan pengoptimalan fitur-fitur aplikasi
C. Pengembangan elemen visual pada antarmuka pengguna

34
 D. Pengumpulan data untuk memperbaiki performa aplikasi
E. Analisis pasar untuk mengembangkan strategi bisnis
4. Prototype adalah …
A. Pengembangan dan penyempurnaan pengalaman pengguna
B. Pengembangan konsep, prototype, pengujian, dan pengoptimalan fitur-fitur aplikasi
C. Pengembangan elemen visual pada antarmuka pengguna
D. Pengumpulan data untuk memperbaiki performa aplikasi
E. Analisis pasar untuk mengembangkan strategi bisnis
5. Salah satu alasan UI/UX design penting dalam pengembangan aplikasi web dan mobile
adalah …
A. UI/UX design dapat memudahkan pengguna dalam menggunakan aplikasi atau situs
web
B. UI/UX design dapat meningkatkan performa aplikasi atau situs web
C. UI/UX design dapat mengoptimalkan mesin pencari
D. UI/UX design dapat membantu analisis pasar
E. UI/UX design dapat mengembangkan strategi bisnis
6. Hal yang menjadi faktor penting dalam pengembangan UI/UX design adalah …
A. Memerhatikan kebutuhan dan keinginan pengguna
B. Memiliki budget yang besar
C. Memiliki tim desain yang terlatih
D. Memiliki teknologi terbaru
E. Memiliki strategi pemasaran yang kuat
7. Usaha berikut yang menjadi faktor dalam memperbaiki UI/UX design yang buruk
adalah…
A. Memperbaiki desain visual saja
B. Menambahkan fitur-fitur baru tanpa mempertimbangkan kebutuhan pengguna
C. Meningkatkan performa aplikasi tanpa mempertimbangkan pengalaman pengguna
D. Menggunaka metode pengujian yang tidak sesuai tujuan pengujian
E. Tidak melakukan perbaikan sama sekali
8. Faktor dalam melakukan usability testing pada UI/UX design adalah …
A. Memilih sample yang tidak mewakili target pengguna
B. Tidak memperhatikan lingkungan dan situasi pengguna saat menggunakan aplikasi
atau situs web
C. Tidak memberikan instruksi yang jelas kepada pengguna saat melakukan pengujian
D. Menggunakan metode pengujian yang tidak sesuai tujuan pengujian
E. Memperhatikan kebutuhan dan keinginan pengguna serta melakukan pengujian
dengan metode yang sesuai tujuan pengujian
9. Pernyataan berikut yang berdampak bagus dari UI/UX design adalah …
A. Meningkatkan tingkat kepuasaan pengguna dan menurunkan tingkat churn rate
B. Menurunkan pengguna aktif dan menurunkan performa aplikasi atau situs web
C. Menurunkan nilai perusahaan dan kepercayaan inverstor
D. Menurunkan jumlah pengunjung dan keuntungan bisnis
E. Tidak terdampak yang signifikan
10. Alasan pentingnya penerapan UI/UX design pada suatu produk digital adalah …

35
A. Memperindah tampilan visual produk
B. Menarik minat pengguna dan meningkatkan popularitas produk
C. Meningkatkan kualitas dan fungsionalitas produk serta memberikan pengalaman
pengguna yang baik
D. Mempercepat waktu pengembangan produk
E. Menghemat biaya pengembangan produk

36
Lampiran 2. Lembar Kerja Peserta Didik (LKPD)

LKPD 1
Tanggal : ............................ Materi : Konsep User Interface (UI) dan User
Kelas : …………………. Experience (UX)
Kelompok : (1)………………….
(2)…………………. Tujuan Pembelajaran :
(3)…………………. Melalui diskusi dan menggali informasi,
(4)…………………. peserta didik dapat menjelaskan konsep dasar
(5)…………………. User Interface (UI) dan User Experience
(6)…………………. (UX)

1. Jelaskan secara singkat terkait perbedaan UI dan UX design dan cara keduanya
berkontribusi dalam pengembangan produk digital!
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................

2. Jelaskan tujuan pembuatan User Interface (UI) dan User Experience (UX) design!
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................

3. Apa saja faktor yang memengaruhi UI/UX design?

...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................
...........................................................................................................................................

37
LKPD 2
Tanggal : ............................ Materi : Identifikasi Permasalahan Pengguna
Kelas : ………………….
Kelompok : (1)…………………. Tujuan Pembelajaran :
(2)…………………. Melalui diskusi dan menggali informasi,
(3)…………………. peserta didik mampu mengidentifikasi
(4)…………………. kebutuhan dan permasalahan pengguna
(5)…………………. melalui riset dan analisis
(6)………………….

Studi Kasus
Situasi Kasus:
Situasi pandemi Covid-19 dimana harus menjaga jarak, aktifitas keramaian dikurangi,
proses belajar secara daring, berbagai layanan yang biasanya offline harus dilakukan online,
dll.

Problem Case:
Contoh kasus yang bisa menjadi topik kajian:
1. Pendidikan --> bagaimana optimalisasi proses pembelajaran daring?
2. Pelayanan Publik --> pelayanan daring untuk Pemerintah kota, kabupaten, desa, kantor,
sekolah, dll (Target User adalah masyarakat umum)
3. Kesehatan --> melakukan pengukuran kesehatan sendiri

Tema:
Buatlah suatu rancangan produk/aplikasi dengan memilih salah satu topik pada bidang
berikut:
1. Pendidikan
2. Pelayanan Publik
3. Kesehatan
4. Toko Retail
5. Perbankan Online
6. Aplikasi Mobile

Tentukan target audiens aplikasi.

Lakukan wawancara atau survei untuk memahami kebutuhan dan preferensi pengguna.

38
Buat persona pengguna untuk menggambarkan karakteristik dan tujuan pengguna aplikasi.
LKPD 3
Tanggal : ............................ Materi : Pengembangan Wireframe dan
Kelas : …………………. Prototype
Kelompok : (1)………………….
(2)…………………. Tujuan Pembelajaran :
(3)…………………. Melalui diskusi dan menggali informasi,
(4)…………………. peserta didik mampu membuat wireframe dan
(5)…………………. Prototype sebagai representasi dari struktur
(6)…………………. dan tata letak desain.

Buatlah wireframe atau sketsa kasar untuk tata letak aplikasi yang akan Anda buat (Tugas
LKPD 2).

39
LKPD 4
Tanggal : ............................ Materi : Prinsip Desain UI-UX
Kelas : ………………….
Kelompok : (1)…………………. Tujuan Pembelajaran :
(2)…………………. Melalui diskusi dan menggali informasi,
(3)…………………. peserta didik mampu mengaplikasikan prinsip
(4)…………………. UI-UX design, seperti konsistensi,
(5)…………………. kesederhanaan, keterbacaan, efisiensi,
(6)…………………. responsif, dan keindahan.

Dalam tugas ini, Anda diminta untuk menganalisis sebuah aplikasi mobile yang sudah ada.
Pilih aplikasi yang Anda kenal dan sering digunakan, misalnya aplikasi e-commerce, media
sosial, atau produktivitas.
Identifikasi masalah-masalah UI dan UX pada aplikasi yang Anda pilih.
Kumpulkan umpan balik dari pengguna, jika memungkinkan.
Buat daftar elemen-elemen yang perlu diperbaiki atau dioptimalkan.

40
LKPD 5
Tanggal : ............................ Materi : Penggunaan Tool dan Teknologi
Kelas : …………………. Desain
Kelompok : (1)………………….
(2)…………………. Tujuan Pembelajaran :
(3)…………………. Melalui diskusi dan menggali informasi,
(4)…………………. peserta didik mampu menggunakan tool dan
(5)…………………. perangkat lunak desain UI-UX, seperti
(6)…………………. Sketch, Figma, Adobe XD, atau lainnya.

1. Kembangkan prototype interaktif yang menunjukkan alur pengguna dan fitur-fitur utama
dari aplikasi yang akan Anda buat (Tugas LKPD 2 dan 3)
2. Gunakan tool desain seperti Figma, Sketch, atau Adobe XD.
3. Pastikan desain Anda intuitif, mudah dinavigasi, dan estetis.
4. Lakukan uji coba dengan beberapa pengguna untuk mendapatkan umpan balik tentang
desain Anda.
5. Identifikasi area yang masih memerlukan perbaikan berdasarkan umpan balik tersebut.
6. Dokumentasikan proses desain Anda, termasuk analisis awal, penelitian pengguna,
wireframe, prototype, dan hasil uji coba.
7. Buat presentasi yang menjelaskan alasan di balik setiap keputusan desain yang Anda buat.

41
Lampiran 3. Materi Peserta Didik
A. UI-UX Design
UI-UX design adalah disiplin desain yang berfokus pada pengembangan antarmuka
pengguna (UI) dan pengalaman pengguna (UX) untuk aplikasi dan situs web. User
Interface (UI) berkaitan dengan cara antarmuka pengguna terlihat dan berfungsi,
termasuk tata letak, warna, tipografi, dan ikon. Tujuannya untuk membuat antarmuka
pengguna yang mudah digunakan dan intuitif sehingga pengguna dapat dengan mudah
berinteraksi dengan produk digital.
Sementara itu, User Experience (UX) berfokus pada pengalaman pengguna saat
menggunakan produk digital. Hal ini melibatkan pemahaman tentang cara pengguna
berinteraksi dengan produk digital, termasuk pengalamannya dalam menyelesaikan
tugas, interaksi dengan antarmuka, dan tingkat kepuasannya dalam menggunakan produk
tersebut.

Seiring waktu, sistem antarmuka pengguna tidak hanya sekadar dipakai untuk
menjalankan fungsi, tetapi sudah merambah ranah branding dan business development.
Sebagai contoh, sebuah bisnis dengan logo berwarna biru biasanya akan membuat
aplikasi dengan nuansa antarmuka berwarna senada.
Mengapa UI dan UX Penting dalam Pengembangan Website dan Aplikasi?
Menurut beberapa survei dan riset, inilah pentingnya UI UX pada sebuah produk.
1. Menghasilkan Produk yang Dibutuhkan Pengguna
Dengan memfokuskan desain pada user experience, Anda dapat membuat sebuah produk
dengan fitur-fitur yang memang dibutuhkan oleh pengguna. Produk yang dibuat
berdasarkan kebutuhan pengguna akan lebih diminati.
Salah satu perusahaan yang telah membuktikan keberhasilan dari mendengarkan
kebutuhan pengguna adalah ESPN. ESPN berhasil meningkatkan 35% pendapatan
website mereka setelah mendesain ulang homepage dengan pendekatan user experience.
2. Meningkatkan Kepuasan Pengguna Terhadap Produk
Produk dengan tampilan yang buruk dan sulit digunakan akan cepat ditinggalkan oleh
pengguna. Riset dari Dot Com Infoway (DCI) mengatakan 62% pengguna meng-
uninstall aplikasi di ponsel mereka karena tampilan berantakan dan sering terjadi eror.

42
 Namun, bila produk Anda memiliki tampilan menarik dan mudah digunakan, pengguna
akan puas menggunakan produk Anda. Kepuasan pengguna akan membuat produk Anda
tetap digunakan. Dengan kata lain, salah satu manfaat UI UX adalah untuk memanjakan
pengguna produk.
3. Meningkatkan Penjualan dan Bisnis
Bila website atau aplikasi bisnis Anda didesain dengan UI UX yang baik, Anda tidak
hanya memberikan pelayanan optimal kepada pelanggan. Secara tidak langsung, Anda
berarti telah menjalankan strategi peningkatan bisnis.
Bagaimana UI dan UX yang Baik?

B. Identifikasi Permasalahan Pengguna

UI-UX design melibatkan proses pengembangan yang meliputi riset, analisis,
perancangan, dan pengujian. Riset dan analisis dilakukan untuk memahami kebutuhan
dan preferensi pengguna serta mempelajari persaingan dan tren desain terbaru.
Berdasarkan hasil riset dan analisis ini, perancangan dilakukan dengan membuat
wireframe atau prototype untuk menentukan tata letak, alur, dan fungsi produk digital.
Setelah perancangan selesai, tahap pengujian dilakukan untuk memastikan bahwa
antarmuka pengguna dan pengalaman pengguna dapat berfungsi dengan baik dan
memenuhi harapan pengguna. UI-UX design sangat penting dalam mengembangkan
produk digital yang sukses dan memuaskan pengguna. Produk yang dirancang dengan

43
 baik akan memudahkan pengguna dalam menggunakan dan memperoleh nilai dari
produk tersebut. Selain itu, produk yang dirancang dengan baik juga dapat membantu
meningkatkan reputasi dan nilai merek dari produk digital tersebut.
Berikut langkah-langkah umum dalam menerapkan UI-UX design.
1. Research (Riset)
Lakukan riset tentang target pengguna, kebutuhan, dan pesaing yang sudah tersedia.
Hal ini dapat membantu desainer dalam memahami tujuan desain dan elemen desain
yang perlu disertakan.
2. Wireframing
Buat wireframe atau sketsa kasar dari antarmuka pengguna. Ini membantu desainer
untuk mengeksplorasi ide dan mengatur tata letak elemen desain.
3. Design
Setelah wireframe selesai, desainer dapat mulai mendesain tampilan visual
menggunakan elemen desain, seperti warna, jenis huruf, dan gambar. Desainer harus
memastikan desain memiliki tampilan yang menarik, mudah dibaca, dan mudah
digunakan.
4. Prototype
Buat prototype atau model interaktif dari desain. Ini memungkinkan desainer untuk
menguji desain dengan pengguna dan melakukan perbaikan pada desain yang belum
optimal.
5. Testing
Lakukan uji coba dengan pengguna untuk mengetahui keefektifan desain dalam
mencapai tujuan. Hal ini dapat membantu desainer memperbaiki desain dan
membuatnya lebih sesuai kebutuhan pengguna.
6. Implementation (Implementasi)
Setelah desain telah diuji dan dioptimalkan, desain dapat diimplementasikan ke
dalam produk digital. Pastikan produk digital yang dihasilkan memiliki desain yang
konsisten dan mudah untuk pengguna.
7. Evaluation (Evaluasi)
Terakhir, lakukan evaluasi dan analisis kinerja desain. Hal ini dapat membantu
desainer dalam memahami kinerja desain dan membuat perbaikan pada desain di
masa depan.

C. Pengembangan Wireframe dan Prototype

1. Wireframe
Wireframe adalah sebuah kerangka untuk menata suatu item di laman website atau
aplikasi. Pembuatan wireframe biasanya dilakukan sebelum pembuatan produk tersebut
dilakukan. Item yang berkaitan seperti teks, gambar, layouting, dan sebagainya. Sketsa
desain ini juga menunjukan alur informasi bagi user untuk dapat mengoperasikan
produk. Di sinilah peran UX Designer merancang desain.
Proses wireframing meliputi pembuatan sketsa produk yang akan dikembangkan
menjadi sebuah produk. Wireframe ini juga akan membantu tim desainer, content dan
developer untuk memvisualisasikan bagaimana tampilan produk.
Seorang UI/UX Designer menggunakan kertas coretan atau software khusus untuk
wireframing. Wireframe hanya menampilkan lembaran yang terdiri dari kotak-kotak
dan garis-garis untuk mengatur tata letak berbagai elemen pada website atau aplikasi.
Ada banyak tools yang bisa dipakai dalam proses wireframing, seperti Figma, Adobe
XD, dan lain sebagainya.

44
2. Isi Wireframe
Pada saat kita membangun suatu halaman web atau aplikasi, tentunya ada beberapa
pertimbangan dan hal wajib yang perlu kamu ketahui. Pertimbangan tersebut antara
lain:
a. Halaman harus menyesuaikan dengan website atau aplikasi secara keseluruhan.
b. Isi seperti tulisan, gambar, video, dan lainnya, harus memenuhi tujuan dan dapat
disampaikan ke pengguna dengan baik.
c. Elemen di setiap isi, links, dan widgets harus berhubungan dengan elemen
lainnya.
d. Halaman web atau aplikasi harus terlihat sebagaimana yang diminati user.
Wireframe juga perlu menjelaskan beberapa hal penting seperti berikut ini :
a. Apa saja isi yang ada di dalam halaman website atau aplikasi?
b. Apa isi yang paling penting untuk diutamakan dan harus menonjol?

45
 c. Kemana user akan diarahkan?
d. Bagaimana user bergerak di sekitar halaman?
e. Bagaimana isi tersebut diorganisir melalui halaman?
3. Tipe-tipe Wireframe
1. Low-fidelity Wireframe
Low-fidelity wireframe adalah wireframe dengan desain yang paling sederhana.
Tipe wireframe ini biasanya dibuat dalam bentuk yang masih kasar. Maksudnya,
tanpa menggunakan skala, kisi, dan akurasi piksel. Bahkan, hanya bermodal
kertas dan pensil saja, Anda sudah bisa membuat low fidelity wireframe.
Tak heran, proses pembuatan desain web atau aplikasi, sering memanfaatkan low
fidelity wireframe ini. Sebab, bisa dibuat dengan cepat.
2. Mid-fidelity Wireframe
Meskipun low fidelity itu mudah dibuat, ternyata mid-fidelity wireframe adalah
tipe wireframe yang paling umum digunakan. Alasannya, wireframe tipe ini
menampilkan representasi layout yang lebih akurat. Pun demikian, mid fidelity
memang masih belum menggunakan gambar.
Pada tipe wireframe ini, sudah terlihat perbedaan ukuran teks yang dapat
memisahkan judul dan konten dengan baik. Tipe ini juga sudah menggunakan
beberapa elemen website yang menonjol dengan pewarnaan yang berbeda.
Mid fidelity wireframe memang bisa digunakan dengan modal kertas dan pensil.
Namun, dengan menggunakan software, hasilnya bisa jauh lebih akurat.
3. High-fidelity Wireframe
High-fidelity wireframe adalah tipe wireframe yang paling spesifik. Kerangka
desain sudah menggunakan gambar dan tulisan konten yang sebenarnya. Tak
hanya itu, tipe wireframe ini juga sudah dilengkapi menu interaktif dalam
desainnya. Tipe wireframe high fidelity lebih cocok untuk dibuat oleh seorang UI
UX designer. Sebab, bisa menggabungkan ide desain dengan kebutuhan pengguna
dengan lebih detail.
4. Prototype
Tahap UI vs UX berikutnya yaitu membuat prototype Desain sesuai dengan desain
wireframe dan flow yang telah dibuat. Prototype adalah model awal atau percobaan dari
produk yang akan dibuat. Ini seperti gambaran kasar tentang bagaimana produk akan
terlihat dan berfungsi. Dalam pembuatan prototipe, kita bisa menggunakan sketsa,
model fisik, atau bahkan simulasi digital.
Lalu tujuan utama prototype yakni menguji ide-ide dan konsep produk sebelum
menghabiskan banyak waktu dan uang untuk membuat produk sebenarnya. Dengan
begitu, prototype membantu kita memperbaiki desain, mengurangi risiko, dan
mendapatkan umpan balik dari pengguna sebelum produk final dirilis. Berikut
penjelasan tujuannya secara komprohensif.
Untuk membuat prototype desain, Anda bisa membuatnya dengan aplikasi seperti
Invision, MockPlus, Adobe XD, dan lain-lain.
Prototype desain tersebut dapat diuji coba oleh internal tim dan langsung diperbaiki
jika diperlukan. Jika prototype desain tersebut telah lolos di internal tim, Anda bisa
mengujinya ke user Anda.

46
 Pembuatan prototype memainkan peran yang sangat penting dalam desain UI/UX.
Dikarenakan dapat membantu memastikan bahwa produk akhir yang dihasilkan tidak
hanya berfungsi dengan baik, tetapi juga memenuhi kebutuhan dan harapan pengguna
dengan baik. Berikut alasan mendasarnya:
a. Mengalami Pengalaman Pengguna yang Lebih Baik
Prototype memungkinkan desainer untuk menciptakan simulasi yang lebih dekat
dengan pengalaman pengguna sebenarnya. Dengan demikian, memungkinkan
mereka untuk mengevaluasi dan menguji desain dari sudut pandang pengguna serta
memastikan bahwa antarmuka pengguna akhir memberikan pengalaman yang intuitif
dan memuaskan.
b. Mendapatkan Umpan Balik yang Lebih Kaya
Prototype yang interaktif memungkinkan pengguna untuk berinteraksi dengan
antarmuka produk seperti yang mereka lakukan dengan produk yang sebenarnya.
Dalam arti lain, ini memberikan kesempatan bagi desainer untuk mendapatkan
umpan balik yang lebih kaya dan berguna, yang nantinya dapat digunakan untuk
melakukan perbaikan dan penyesuaian yang diperlukan sebelum produk akhir dirilis.
c. Memperlihatkan Alur Kerja yang Lebih Nyata
Dengan membuat prototype interaktif, desainer akan dapat memperlihatkan alur
kerja produk secara langsung kepada pengguna. Sehingga ini memungkinkan mereka
untuk menguji bagaimana pengguna akan berinteraksi dengan berbagai fitur dan
fungsi dalam konteks nyata. Selain itu, membantu dalam mengidentifikasi potensi
masalah dan meningkatkan desain secara keseluruhan.
d. Mengurangi Kesenjangan antara Desain dan Implementasi
Prototype yang baik dapat membantu mengurangi kesenjangan antara desain yang
diinginkan dan implementasi yang sebenarnya. Maka dengan membuat prototype
yang lebih dekat dengan fungsionalitas produk akhir, tim desain dapat bekerja sama
dengan tim pengembangan untuk memastikan bahwa desain yang diinginkan dapat
direalisasikan secara baik.
e. Meningkatkan Keterlibatan Tim dan Pemangku Kepentingan
Prototype tidak hanya berguna untuk pengujian pengguna, tetapi juga dapat
digunakan sebagai alat komunikasi yang kuat di antara anggota tim dan rekan kerja
lainnya. Sebab dengan memperlihatkan prototype, semua pihak bisa terlibat serta
memiliki pemahaman yang lebih baik tentang bagaimana produk akan beroperasi dan
berinteraksi dengan pengguna, sehingga meningkatkan keterlibatan dan kolaborasi
tim.
Manfaat yang dapat didapatkan jika merancang prototype desain UX:
 Desainer dapat merancang desain yang lebih ramah pengguna.
 Prototipe dapat mendeteksi masalah desain yang tak terduga.
 Prototipe berfungsi sebagai representasi dari hasil akhir desain.
 Desainer dapat merancang strategi terbaik untuk menyelesaikan masalah desain
dengan prototype.

47
48
D. Prinsip Desain UI-UX
UI-UX design adalah proses merancang yang efektif dan efisien untuk produk digital.
Antarmuka pengguna yang baik harus mempertimbangkan prinsip-prinsip UI-UX design
yang dapat membantu meningkatkan pengalaman pengguna. Berikut diuraikan beberapa
prinsip dasar UI-UX design yang harus diperhatikan.
1. Konsistensi
Konsistensi dalam UI Design membantu menciptakan pengalaman yang familiar dan
dapat diprediksi bagi pengguna. Hal ini mencakup penggunaan pola desain,
terminologi, ikon, dan perilaku antarmuka yang konsisten di seluruh produk dan
layanan. Misalnya, jika tombol "Simpan" di satu halaman berwarna hijau, maka
sebaiknya di tempat lainnya juga sama.
Dalam melakukan UI dan UX sekalipun, konsistensi harus ada pada setiap unsurnya.
Dimana perubahan–perubahan yang terjadi harus disesuaikan dengan keadaan alur
yang tepat. Konsistensi ini membantu pengguna memahami dan memprediksi fungsi
tanpa harus belajar dari awal setiap kali mereka menggunakan fitur baru. Selain itu,
konsistensi juga menciptakan rasa familiaritas dan memudahkan navigasi.
2. Kesederhanaan
UI Design yang baik berfokus pada menyajikan informasi penting dengan cara yang
sederhana dan mudah dipahami. Hal ini melibatkan menghilangkan elemen yang
tidak perlu, menyederhanakan navigasi, dan memprioritaskan konten yang paling
relevan bagi pengguna. Contohnya bisa dilihat ketika sebuah halaman hanya
memerlukan pengguna untuk mengisi informasi kontak. Maka, kamu hanya perlu
tampilkan form yang relevan dan hindari menambahkan elemen dekoratif tanpa nilai
tambah.
3. Keterbacaan
Setiap elemen penting harus mudah dilihat dan diakses. Jangan menyembunyikan
fitur-fitur utama di balik menu atau tombol yang sulit ditemukan.
Misalnya, tombol "Beli Sekarang" pada situs e-commerce harus diletakkan di tempat
yang jelas dan mudah dilihat. Dengan begitu, pengguna tidak perlu bingung dan
mencari-cari.
4. Efisiensi
Fokus pada menciptakan pengalaman pengguna yang efisien dengan meminimalkan
jumlah langkah yang diperlukan untuk menyelesaikan tugas dan dengan
menyederhanakan navigasi. Ini akan membantu pengguna mencapai tujuan mereka
dengan cepat dan tanpa frustrasi.
5. Reponsif
Setiap kali pengguna melakukan sesuatu seperti mengklik tombol atau mengisi form,
mereka harus segera mengetahui hasil dari aksi tersebut.
Feedback dapat berupa animasi, suara, atau pesan teks. Hal ini penting agar
pengguna merasa bahwa sistem merespons dan tidak dibiarkan bertanya-tanya apa
yang terjadi.
6. Keindahan
Desain yang menarik tidak hanya meningkatkan daya tarik visual, tetapi juga
berdampak positif pada keterlibatan dan konversi pengguna. Dengan memilih skema
warna yang harmonis, gambar yang menarik secara visual, dan elemen desain yang

49
 konsisten untuk menciptakan pengalaman pengguna yang menyenangkan secara
visual.

E. Penggunaan Tool dan Teknologi Desain

Untuk membuat desain UX/UI, memiliki seperangkat alat dan sumber daya yang
tepat sangatlah penting. Berikut adalah beberapa alat dan sumber daya populer yang
dapat membantu meningkatkan keterampilan desain dan menciptakan pengalaman
desain aplikasi yang luar biasa:
1. Adobe XD

Adobe XD adalah alat desain dan prototyping yang memungkinkan desainer

membuat wireframe, maket, dan prototype interaktif dengan mudah. Fitur
kolaborasi menjadikannya ideal untuk bekerja dengan desainer dan pemangku
kepentingan lain untuk mengembangkan dan mengulangi desain.
Adobe XD adalah tools UI design yang dibuat oleh perusahaan Adobe. Adobe
XD dirancang khusus oleh Adobe untuk membuat desain UI atau antarmuka
aplikasi baik mobile maupun website. Adobe XD digunakan oleh hampir semua
kalangan UI/UX designer mulai dari pemula hingga profesional karena memiliki
banyak fitur menarik serta kemudahan dalam penggunaannya.
Banyak sekali fitur yang terdapat dalam Adobe XD, seperti fitur repeat grid
yang dapat digunakan untuk membuat duplikasi dan pengulangan suatu objek, fitur
Content-Aware layout yang memudahkan dalam menyesuaikan layout dan spasi
pada suatu objek. Selain itu, ada juga fitur bernama component yang biasa
digunakan untuk membuat aset, seperti tombol, form, dll. Dengan fitur ini, semua
aset yang telah dibuat dapat digunakan kembali sehingga konsistensi desain akan
terjaga. Fitur menarik lain yang dapat ditemukan di Adobe XD adalah fitur
responsive size. Fitur ini memudahkan seorang UI/UX designer dalam
memodifikasi komponen untuk ukuran layar yang berbeda. Tidak hanya itu, masih
banyak fitur yang bisa dicoba di Adobe XD, seperti voice trigger dan auto animate.
2. Figma

Figma adalah alat desain online populer yang menawarkan fitur canggih untuk
mendesain, membuat prototype, dan berkolaborasi di proyek web dan aplikasi.
Sifatnya yang berbasis cloud memungkinkan tim untuk berkolaborasi secara real-
time dan mengerjakan desain dari mana saja tanpa perlu menyimpannya di
PC/Laptop kamu secara manual seperti aplikasi lain pada umumnya.. Figma adalah
salah satu tools desain yang populer. Figma sangat cocok digunakan oleh seorang
UI/UX designer dalam melakukan pekerjaan mereka.

50
 Figma dapat berjalan pada web browser, seperti Google Chrome, Mozilla
Firefox, Safari, dll, sehingga Figma dapat digunakan di semua sistem operasi, baik
Windows, MacOS, dan Linux.
Salah satu kelebihan dari Figma adalah dapat digunakan untuk berkolaborasi
secara realtime. Hal ini memungkinkan kita untuk melakukan perubahan pada file
secara bersamaan sehingga efektif untuk developer, designer, dan stakeholder
lainnya dalam berkolaborasi secara langsung. Banyak fitur menarik yang ada di
dalam Figma, seperti auto layout yang memudahkan kita untuk mengatur antar
komponen, fitur prototyping yang dapat digunakan untuk menguji rancangan alur
dan desain yang telah kita buat, dan masih banyak fitur lain yang bisa kamu coba
secara langsung di Figma.
3. Sketch

Sketch adalah alat desain berbasis vektor yang banyak digunakan untuk
mendesain antarmuka, ikon, dan aset digital lainnya untuk situs web dan aplikasi.
Ini menawarkan berbagai plugin dan integrasi untuk memperluas fungsionalitas dan
merampingkan alur kerja.
Tidak kalah populer dengan Figma, Sketch juga salah satu tools UI design yang
digunakan oleh banyak UI/UX designer. Sketch dapat digunakan untuk berbagai
kebutuhan mulai dari membuat tampilan high-fidelity, membuat icon, user flow,
ilustrasi, hingga prototyping. Di dalam sketch juga terdapat banyak plugin yang bisa
kita gunakan sesuai kebutuhan.
Beberapa fitur yang dapat kita coba di Sketch antara lain fitur create grid yang
dapat digunakan untuk menentukan banyaknya baris dan kolom yang digunakan
pada suatu objek. Selain itu, ada juga fitur smart guides untuk melihat jarak antar
objek. Selain itu ada satu fitur menarik yang ditawarkan Sketch, yaitu symbols.
Fitur ini dapat digunakan untuk membuat aset dan elemen UI yang bisa digunakan
kembali atau reusable. Fitur symbols ini sangat membantu desainer dalam membuat
desain yang rapi dan konsisten.
4. InVision
InVision adalah platform desain dan pembuatan prototipe yang mendukung
pembuatan prototipe interaktif, kolaborasi desain, dan pengujian pengguna. Ini
dapat membantu Anda menghidupkan desain dan mengumpulkan umpan balik yang
berharga untuk meningkatkan kegunaan dan pengalaman pengguna.
5. Axure

51
 Axure adalah alat yang ampuh untuk membuat wireframe, prototipe, dan
spesifikasi untuk situs web dan aplikasi. Ini menawarkan fitur-fitur canggih untuk
merancang pengalaman web yang dinamis, berbasis data, dan responsif.
Axure merupakan salah satu tool wireframing terbaik yang mendukung
pembuatan wireframe dengan fidelity rendah dan tinggi. Semua tugas, termasuk
pengembangan aplikasi, pengujian, implementasi, dan pengumpulan feedback bisa
dilakukan tanpa kode.
Tool ini menawarkan fitur-fitur keren, seperti:
 Proyek yang dilindungi password. Kirim prototipe dengan perlindungan kata
sandi untuk keamanan tambahan.
 Tampilan adaptif. Buat satu set tampilan halaman yang adaptif dengan mengatur
ulang dan menata ulang elemennya agar sesuai dengan berbagai ukuran layar.
 Diagram aliran. Tambahkan elemen dan buat gambar smart line di antara
elemen tersebut menggunakan tool konektor untuk membuat flowchart, alur
pengguna, model proses bisnis, dan diagram alur lainnya.
 Panel dinamis. User bisa melihat dan mengedit semua status panel dinamis
secara berdampingan. Fitur ini memudahkan Anda beralih panel saat mendesain
prototipe.
6.
7. Whimsical

Whimsical adalah sebuah tools yang mengombinasikan whiteboard atau papan

tulis dan dokumen dalam sebuah kolaborasi. Whimsical dapat digunakan untuk
berbagai kebutuhan seperti membuat wireframe atau low-fidelity, berbagai macam
flowchart seperti ERD dan DFD, bahkan Whimsical dapat digunakan untuk
membuat sebuah mind map.
Salah satu fitur yang mudah digunakan oleh seorang UI/UX designer adalah
membuat wireframe karena telah disediakan banyak komponen yang mendukung
untuk pembuatan sebuah wireframe. Sama seperti Figma, Whimsical juga
memungkinkan pengguna untuk berkolaborasi secara realtime di semua fitur yang
ditawarkan.
8. Miro

Miro adalah salah satu tools alternatif pengganti Whimsical. Miro memiliki fitur
yang hampir sama dengan Whimsical. Miro adalah virtual whiteboard yang
memudahkan penggunanya untuk dapat berkolaborasi dalam suatu proyek secara
realtime.
Kita dapat menggunakan Miro untuk berbagai kebutuhan, seperti membuat
customer journey, user story map, bahkan untuk membuat wireframe. Selain itu,
kita juga bisa meng-export whiteboard yang sudah dibuat dalam format pdf maupun
gambar. Miro juga terintegrasi dengan Sketch, Adobe XD, Figma, Notion, dll

52
 sehingga tools ini dapat memudahkan seorang UI/UX designer dalam
menyelesaikan pekerjaannya.

Sejatinya tidak ada sebuah tools UI/UX yang dapat memenuhi kebutuhan semua
desainer sehingga penting bagi desainer untuk memikirkan apa yang menjadi
kebutuhan mereka. Berikut beberapa pertanyaan yang dapat kamu jadikan acuan dalam
memilih tools UI/UX sesuai kebutuhan.
 Seberapa berguna tools ini?
 Seberapa cepat saya bisa mulai menggunakan tools ini dengan baik dan lancar?
 Apakah tools ini memungkinkan kolaborasi dengan anggota tim lain?
 Sistem operasi apa saja yang dapat menggunakan tools ini?
 Seberapa baik integrasi tools ini dengan tools UI/UX lainnya?
Dari pertanyaan-pertanyaan tersebut, diharapkan kita dapat membuat catatan tentang
perbandingan tools yang telah kamu jelajahi mulai dari kualitas, aksesibilitas hingga
harga. Sehingga nantinya kamu dapat menemukan tools yang sesuai dengan
kebutuhanmu.

Referensi :
Sarwendah, [Link] Desain (Desain Komunikasi Visual).Magelang: Liniswara
M. [Link] Produksi Desain (Desain Komunikasi Visual). Magelang:
Liniswara
[Link] Diakses pada tanggal 6 Juli 2024
Jam 08.00
[Link] Diakses
pada tanggal 6 Juli 2024 Jam 08.30
[Link] Diakses
pada tanggal 7 Juli 2024 Jam 10.00
[Link] Diakses pada tanggal 9 Juli 2024
Jam 08.00
[Link]
Diakses pada tanggal 12 Juli 2024 Jam 15.04
[Link] Diakses pada tanggal
12 Juli 2024 Jam 15.12
[Link] Diakses
pada tanggal 13 Juli 2024 Jam 07.20
[Link] Diakses pada
tanggal 13 Juli 2024 Jam 07.30

53