0% menganggap dokumen ini bermanfaat (0 suara)
9 tayangan10 halaman

Memahami User Flow dalam Desain UI/UX

Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
0% menganggap dokumen ini bermanfaat (0 suara)
9 tayangan10 halaman

Memahami User Flow dalam Desain UI/UX

Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd

Modul Ajar SMK Fase F Kelas 11

Project Based Learning: Membuat Leaflet


Tujuan Pembelajaran
 Memahami tujuan dan fungsi leaflet dalam komunikasi bisnis.
 Menguasai teknik desain grafis untuk membuat leaflet yang menarik dan informatif.
 Memahami strategi pemasaran melalui leaflet.

Rencana Pembelajaran
Pendahuluan (15 menit)
 Penjelasan tentang leaflet dan perannya dalam komunikasi bisnis.
 Diskusi tentang tujuan dan target audiens dari leaflet.

Teknik Desain Grafis (30 menit)


 Pembahasan tentang prinsip desain grafis yang efektif.
 Demonstrasi penggunaan perangkat lunak desain grafis seperti Adobe Illustrator atau
Canva.

Penulisan Konten (20 menit)


 Panduan untuk menulis konten yang singkat, jelas, dan menarik.
 Latihan menulis konten untuk leaflet.

Pembuatan Leaflet (60 menit)


 Proses praktik pembuatan leaflet sesuai dengan topik atau produk yang ditentukan.
 Bimbingan individual saat siswa membuat desain leaflet.

Presentasi dan Feedback (15 menit)


 Siswa mempresentasikan leaflet yang telah mereka buat.
 Diskusi dan feedback dari guru dan teman sekelas.
Metode Penilaian
 Penilaian formatif melalui partisipasi dalam diskusi.
 Penilaian sumatif berdasarkan kualitas dan kreativitas leaflet yang dibuat.
 Evaluasi peer-to-peer berdasarkan presentasi dan feedback.

Penyesuaian Pembelajaran
 Untuk siswa dengan gaya belajar visual, menyediakan contoh leaflet dan tutorial desain
grafis.
 Untuk siswa dengan gaya belajar auditori, menyediakan penjelasan melalui presentasi
dan diskusi kelompok.
 Untuk siswa dengan gaya belajar kinestetik, memberikan kesempatan untuk langsung
mencoba membuat leaflet dan melakukan perbaikan berdasarkan feedback.

Dengan rencana pembelajaran ini, diharapkan siswa dapat memahami pentingnya


leaflet dalam komunikasi bisnis, menguasai teknik desain grafis, dan memperoleh
pengalaman praktis dalam membuat leaflet yang efektif.

Modul Pembelajaran: Membuat


Desain UI/UX Web
Tujuan Pembelajaran
1. Memahami prinsip desain UI/UX web.
2. Mampu menerapkan prinsip desain UI/UX web dalam proyek berbasis teknologi.
3. Mengembangkan keterampilan desain grafis dan pengalaman pengguna.

Durasi Pembelajaran
10 minggu (1 semester)

Materi Pembelajaran
Minggu 1-2: Pengenalan Desain UI/UX Web
 Pengertian dasar desain UI/UX web.
 Perbedaan antara UI dan UX.
 Contoh-contoh desain UI/UX yang baik.

Minggu 3-4: Prinsip Desain UI/UX Web


 Keterkaitan antara desain dan pengalaman pengguna.
 Prinsip-prinsip desain UI/UX web yang efektif.
 Menerapkan prinsip desain responsif.

Minggu 5-6: Tools Desain UI/UX Web


 Pengenalan software desain grafis seperti Adobe XD, Figma, atau Sketch.
 Penggunaan tools desain untuk membuat prototipe UI/UX web.

Minggu 7-8: Proyek Desain UI/UX Web


 Perencanaan proyek desain UI/UX web.
 Menerapkan prinsip-prinsip desain yang telah dipelajari dalam proyek.

Minggu 9-10: Presentasi Hasil Proyek


 Menyajikan hasil proyek kepada kelas.
 Mendapatkan umpan balik dari rekan sejawat dan instruktur.

Metode Pembelajaran
 Diskusi kelompok untuk memahami konsep-konsep dasar desain UI/UX.
 Demonstrasi penggunaan tools desain grafis.
 Proyek berbasis teknologi untuk menerapkan prinsip-prinsip desain yang telah
dipelajari.
 Presentasi hasil proyek untuk meningkatkan keterampilan komunikasi.
Penilaian
 Penugasan individu: Membuat prototipe desain UI/UX web (30%)
 Presentasi proyek: Kualitas desain dan pengalaman pengguna (40%)
 Partisipasi dalam diskusi dan kolaborasi kelompok (30%)

Penyesuaian Pembelajaran
 Menyediakan materi dalam berbagai format untuk memfasilitasi beragam gaya belajar
siswa.
 Memberikan tugas yang memungkinkan siswa untuk mengekspresikan kreativitas
mereka sesuai dengan preferensi mereka.

Dengan modul ini, diharapkan siswa dapat mengembangkan pemahaman yang kuat
tentang prinsip desain UI/UX web dan mampu mengaplikasikannya dalam proyek
berbasis teknologi.

Modul Pembelajaran SMK Fase F


Kelas 11
Project Based Learning: Membuat Desain UI/UX Web
Tujuan Pembelajaran
 Memahami konsep dasar desain UI/UX web.
 Mampu menerapkan prinsip UI/UX dalam desain web.
 Mengembangkan keterampilan dalam menggunakan perangkat lunak desain grafis.
 Mampu berkolaborasi dalam sebuah proyek desain web.

Rencana Pembelajaran
1. Pendahuluan (15 menit)
 Memperkenalkan konsep dasar UI/UX web.
 Menjelaskan pentingnya desain UI/UX yang baik dalam pengalaman pengguna.

2. Konsep Dasar Desain UI/UX (30 menit)


 Mengajarkan prinsip-prinsip desain UI/UX seperti tata letak, warna, tipografi, dan user
flow.
 Memberikan contoh-contoh desain web yang baik dan buruk untuk memahamkan
konsep tersebut.

3. Penggunaan Perangkat Lunak Desain Grafis (45 menit)


 Mengenalkan perangkat lunak desain grafis seperti Adobe XD, Figma, atau Sketch.
 Memandu siswa dalam membuat desain sederhana menggunakan perangkat lunak
yang dipilih.

4. Proyek Desain UI/UX Web (120 menit)


 Memperkenalkan proyek pembuatan desain UI/UX web kepada siswa.
 Membagi siswa menjadi kelompok-kelompok kecil untuk berkolaborasi dalam proyek
tersebut.
 Memandu siswa dalam merancang desain UI/UX web berdasarkan tema yang telah
ditentukan.

5. Presentasi dan Ulasan (30 menit)


 Setiap kelompok mempresentasikan desain UI/UX web yang telah mereka buat.
 Memberikan ulasan dan umpan balik terhadap desain dari setiap kelompok.
 Mendorong diskusi tentang perbaikan yang dapat dilakukan.

Metode Penilaian
 Penilaian formatif melalui kinerja siswa selama sesi praktikum dan proyek.
 Penilaian sumatif berdasarkan presentasi kelompok dan desain UI/UX web yang
dihasilkan.

Pertimbangan Gaya Belajar


 Siswa visual: Memberikan contoh-contoh visual dalam konsep UI/UX.
 Siswa auditori: Mengadakan diskusi kelompok dan presentasi untuk memfasilitasi
pembelajaran.
 Siswa kinestetik: Memberikan sesi praktikum menggunakan perangkat lunak desain
grafis.

Dengan mengikuti modul ini, diharapkan siswa dapat memahami dan menerapkan
prinsip-prinsip desain UI/UX dalam pembuatan desain web secara efektif, serta dapat
berkolaborasi dalam sebuah proyek desain.

Materi User Flow untuk Desain


UI/UX
Tujuan Pembelajaran
Setelah menyelesaikan materi ini, peserta diharapkan mampu:

1. Memahami konsep dasar user flow dalam desain UI/UX.


2. Membuat user flow yang efektif untuk memandu pengguna dalam menggunakan
produk digital.
3. Mengaplikasikan prinsip-prinsip desain UI/UX dalam pembuatan user flow.

Aktivitas Pengajaran
1. Pendahuluan (10 menit)
 Memperkenalkan konsep user flow dan pentingnya dalam desain UI/UX.
 Menjelaskan tujuan dan manfaat dari pembuatan user flow.

2. Konsep Dasar User Flow (20 menit)


 Menjelaskan konsep dasar user flow, termasuk pemahaman tentang kebutuhan
pengguna, tindakan yang diambil oleh pengguna, dan hasil yang diharapkan.
 Menyajikan contoh user flow sederhana untuk memperkuat pemahaman.
3. Prinsip Desain UI/UX dalam User Flow (30 menit)
 Mengidentifikasi prinsip-prinsip desain UI/UX yang perlu diterapkan dalam pembuatan
user flow, seperti konsistensi, kejelasan, dan keterlibatan pengguna.
 Memperlihatkan contoh-contoh user flow yang menerapkan prinsip-prinsip tersebut.

4. Pembuatan User Flow (60 menit)


 Memandu peserta untuk membuat user flow sederhana untuk produk digital yang
mereka pilih.
 Memberikan panduan langkah demi langkah dalam pembuatan user flow, mulai dari
identifikasi kebutuhan pengguna hingga penyusunan alur tindakan.

5. Presentasi dan Diskusi (20 menit)


 Meminta peserta untuk mempresentasikan user flow yang mereka buat.
 Mendorong diskusi tentang kelebihan, kekurangan, dan perbaikan yang dapat dilakukan
pada masing-masing user flow.

Metode Penilaian
1. Penilaian Formatif:

 Memantau partisipasi peserta selama sesi pembelajaran.


 Memberikan umpan balik langsung saat peserta membuat user flow.

2. Penilaian Sumatif:

 Mengevaluasi user flow yang dibuat oleh peserta berdasarkan kriteria yang telah
diajarkan, seperti kejelasan alur, kesesuaian dengan kebutuhan pengguna, dan
penerapan prinsip desain UI/UX.

Penyesuaian untuk Gaya Belajar Beragam


 Visual: Memberikan contoh user flow dalam bentuk diagram atau grafik untuk
memfasilitasi pemahaman visual.
 Auditori: Menyajikan penjelasan secara lisan dan mendorong diskusi kelompok.
 Kinestetik: Mengizinkan peserta untuk secara aktif terlibat dalam pembuatan user flow
melalui sesi praktikum.

Dengan mengikuti materi ini, diharapkan

Materi User Flow untuk Desain


UI/UX Web
I. Pendahuluan
 Definisi User Flow
 Pentingnya User Flow dalam Desain UI/UX
 Tujuan dari pembahasan User Flow

II. Komponen User Flow


 Persona
 Pengertian Persona
 Proses pembuatan Persona
 User Journey
 Konsep User Journey
 Tahapan dalam membuat User Journey
 Sitemap
 Definisi Sitemap
 Manfaat Sitemap dalam User Flow

III. Proses Desain User Flow


 Research
 Pentingnya riset dalam pembuatan User Flow
 Metode riset yang digunakan
 Ideation
 Proses mencari ide dalam pembuatan User Flow
 Teknik-teknik ideation yang efektif
 Wireframing
 Definisi Wireframing
 Langkah-langkah dalam proses wireframing

IV. Tools untuk Pembuatan User Flow


 Software untuk Pembuatan Persona
 Contoh software yang dapat digunakan
 Kelebihan dan kekurangan dari masing-masing software
 Tools untuk Pembuatan User Journey
 Tools yang direkomendasikan untuk membuat User Journey
 Fitur-fitur yang dibutuhkan dalam tools tersebut
 Software untuk Pembuatan Sitemap
 Pilihan software untuk pembuatan Sitemap
 Tutorial penggunaan software tersebut

V. Best Practices dalam Pembuatan User Flow


 Kesesuaian dengan kebutuhan pengguna
 Mengapa kesesuaian dengan kebutuhan pengguna penting
 Cara mengetahui kebutuhan pengguna
 Pengujian User Flow
 Metode pengujian yang efektif
 Langkah-langkah dalam melakukan pengujian User Flow
 Iterasi dan Perbaikan
 Pentingnya iterasi dalam User Flow
 Teknik perbaikan berdasarkan hasil pengujian

VI. Studi Kasus


 Contoh User Flow dalam Desain UI/UX Web
 Analisis dan pembahasan dari setiap studi kasus
 Kesimpulan dari setiap studi kasus

VII. Kesimpulan
 Gambaran keseluruhan tentang User Flow
 Tindak lanjut setelah mempelajari User Flow
 Saran untuk pengembangan lebih lanjut

Dengan outline ini, presentasi akan memberikan pemahaman yang komprehensif


tentang User Flow dalam desain UI/UX web, serta memberikan panduan praktis dalam
proses pembuatan User Flow menggunakan berbagai tools dan best practices yang
relevan.

Anda mungkin juga menyukai