Rencana Pelaksanaan Pembelajaran

Bidang Keahlian : Seni dan Ekonomi Kreatif

Program Keahlian : Desain Komunikasi Visual
Mata Pelajaran : Konsentrasi Keahlian

Disusun oleh : Yuliyani Siyamtining Tyas, M.Cs

Kompetensi Awal : -
Sarana Prasarana : 1. PC/Laptop yang terkoneksi dengan internet.
2. Proyektor
Target Peserta Didik : Siswa Fase F
Model pembelajaran : Problem Based Learning
Tujuan Pembelajaran : Memahami alur pembuatan UI-UX Design yang dibutuhkan dalam
lingkup Desain Komunikasi Visual
Alokasi Waktu : 2 JP
Kegiatan : Kegiatan Pembuka(10 Menit)
Pembelajaran 1. Melakukan pembukaan dengan salam dan menujuk salah satu
peserta didik untuk memimpin berdoa sebelum memulai
pembelajaran.
2. Mengecek kehadiran dan kesiapan peserta didik.
3. Memberikan apersepsi dengan menanyakan materi sebelumnya
dan mengaitkan dengan materi yang akan disampaikan
4. Menjelaskan tujuan pembelajaran dan cakupan materi yang
akan di ajarkan.
5. Memberikan pertanyaan pemantik.
Kegiatan Inti (60 Menit)
1. Orientasi siswa pada masalah
 Guru menjelaskan studi kasus yang akan dikerjakan siswa
 Menjelaskan logistic yang diperlukan pengajuan masalah
 memotivasi siswa terlibat dalam aktivitas pemecahan
masalah yang dipilihnya
2. Mengorganisasi siswa untuk belajar
Guru membantu siswa mendefenisikan dan mengorganisasikan
tugas belajar yang berhubungan dengan masalah tersebut.
3. Membimbing penyelidikan individual maupun kelompok
 Guru mendorong siswa untuk mengumpulkan informasi
yang sesuai dan dimasukkan di lembar kerja peserta didik
 Guru mendorong siswa melaksanakan eksperimen, untuk
mendapat Solusi(pemecahan masalah)
4. Mengembangkan dan menyajikan hasil
Guru membantu siswa dalam merencanakan
dan menyiapkan karya(Rancangan Wireframe low fidelity).
5. Menganalisis dan mengevaluasi proses pemecahan masalah.
Guru membantu siswa melakukan refleksi atau evaluasi
terhadap penyelidikan mereka dalam proses-proses yang
mereka gunakan
Kegiatan Penutup (20 Menit)
1. Merefleksi/kesimpulan bersama peserta didik
2. Mendorong saling tanya- jawab terkait refleksi
pembelajaran.
3. Memberikan soal kepada peserta didik
 4. Menyampaikan rencana pembelajaran berikutnya
Asesmen :

Lampiran:

Job Sheet

A. Tujuan Praktikum : Memahami alur pembuatan UI-UX Design yang dibutuhkan dalam
lingkup Desain Komunikasi Visual
B. Teori Singkat:
Tahapan desain adalah proses menciptakan solusi visual atau konseptual untuk masalah
dalam bentuk produk, sistem, layanan atau pengalaman. Setiap desain memiliki karakteristik
dan pendekatan khusus, namun seluruh desain memiliki tujuan yang sama yaitu
meningkatkan kegunaan, daya tarik, dan efektivitas objek atau sistem yang dirancang.

Tahapan desain UI adalah proses desain yang berfokus pada tampilan suatu aplikasi atau
situs web. Tujuan utama dari desain UI adalah untuk membuat sebuah produk digital dapat
digunakan dengan mudah dan menyenangkan bagi penggunanya.
Tahapan Desain UI

Ada enam tahapan desain atau langkah-langkah yang harus dilakukan oleh desainer UI untuk
membuat desain interface yang ramah pengguna
1. Riset
Di tahapan pertama, penelitian dan pengumpulan informasi adalah langkah penting untuk
memahami kebutuhan pengguna dan konteks penggunaan produk. Proses ini melibatkan
beberapa langkah kunci:
 Mengidentifikasi Target Audiens Target, Mengetahui siapa pengguna produk akan
membantu menentukan fitur dan desain yang relevan. Misalnya, desain interface
untuk aplikasi kesehatan wanita akan berbeda dengan aplikasi e-commerce.
 Analisis Kebutuhan Pengguna, Melakukan survei atau wawancara dengan pengguna
potensial untuk mengumpulkan informasi tentang apa yang mereka butuhkan dan
inginkan dari produk. Contohnya, untuk membangun aplikasi perbankan maka harus
memahami fitur keamanan yang penting bagi penggunanya (pihak bank maupun
nasabah).
 Evaluasi Kompetitor, Menganalisis produk serupa di pasar untuk memahami standar
industri dan mencari peluang untuk inovasi. Misalnya, memeriksa bagaimana aplikasi
serupa mengatur menu navigasi, apa saja fitur mereka yang belum lengkap dan
mencari cara untuk memperbaikinya.
 Mengumpulkan Data Kontekstual, Memahami bagaimana dan di mana produk akan
digunakan. Misalnya, jika aplikasi seluler sering digunakan dalam perjalanan, maka
desain harus mudah diakses dengan satu tangan.
 Pembuatan User Persona, Mengembangkan persona pengguna yang mewakili
pengguna tipikal produk. Persona ini mencakup detail demografis, perilaku,
kebutuhan, dan tujuan pengguna. Misalnya, "Ana, mahasiswi berusia 22 tahun yang
sering menggunakan aplikasi untuk mencatat jadwal kuliah dan tugas-tugasnya.
Melalui penelitian dan pengumpulan informasi ini, desainer UI/UX dan tim dapat
membangun fondasi yang kuat untuk menciptakan antarmuka yang sesuai dengan
kebutuhan dan harapan pengguna.

2. Pembuatan Panduan Desain

 Pembuatan panduan desain adalah proses penting untuk memastikan konsistensi dan
efektivitas UI. Panduan ini berisi standar dan aturan desain yang harus diikuti. Berikut
adalah komponen utama dari panduan desain:
 Warna, Menetapkan palet warna yang digunakan, mulai dari warna utama, warna
pendukung, hingga warna aksen. Palet warna dibutuhkan untuk menciptakan
identitas visual yang konsisten dan mengkomunikasikan suasana atau emosi
tertentu.
 Tipografi, Mendefinisikan jenis font, ukuran, ketebalan, dan gaya. Pemilihan
tipografi yang tepat dapat mempengaruhi keterbacaan dan suasana interface bagi
penggunanya.
 Ikonografi, Menetapkan gaya ikon yang digunakan. Selain itu juga memastikan
ikon mudah dikenali dan mampu tampil konsisten di seluruh aplikasi atau situs
web.
 Layout dan Spasi, Mengatur tata letak elemen seperti header, footer, dan konten
utama serta menentukan spasi antar elemen untuk memastikan antarmuka yang
terorganisir dan mudah dinavigasi.
 Komponen UI, Mendefinisikan tampilan dan perilaku standar untuk elemen UI
seperti tombol, form, dan menu dropdown.
 Interaksi , Menentukan bagaimana reaksi elemen UI saat pengguna berinteraksi
dengan interface. Reaksi bisa berupa transisi maupun animasi yang bertujuan
meningkatkan pengalaman pengguna.
 Panduan Responsif, Tak kalah penting harus ada aturan desain untuk berbagai
ukuran layar dan perangkat. Hal ini supaya UI dapat berfungsi dengan baik di
berbagai perangkat.

3. Wireframe
Wireframe merupakan sketsa dasar yang menggambarkan kerangka kerja interface
aplikasi atau situs web yang dibuat oleh desainer untuk merencanakan tata letak dan
struktur informasi dari halaman web atau aplikasi. Kerangka kerja ini menetapkan
bagaimana pengguna akan berinteraksi dengan informasi tersebut.

Komponen dari wireframe biasanya meliputi elemen-elemen seperti header, footer, area
konten utama, menu navigasi, dan tombol. Elemen-elemen ini disajikan dalam bentuk
kotak dan garis untuk menunjukkan posisi dan ukuran relatif.

Wireframe digunakan pada tahap awal pengembangan produk untuk memfasilitasi

komunikasi antara desainer UI, pengembang, dan pemangku kepentingan lainnya.
Sehingga seluruh stakeholder bisa fokus pada fungsi dan penggunaan ruang tanpa
terdistraksi oleh elemen desain visual.

Contohnya dalam aplikasi e-commerce, wireframe menampilkan layout dasar di halaman

utama. Misalnya kotak untuk slider promosi di bagian atas, grid untuk produk unggulan,
menu navigasi di bagian atas atau samping, dan area footer.

Wireframe ini biasanya berbentuk sketsa hitam putih untuk menunjukkan struktur dan
layout saja.

4. Mockup
 Mockup adalah representasi visual UI yang lebih detail dan realistis. Jika wireframe hanya
fokus pada struktur dan layout, maka mockup menunjukkan desain sebenarnya dengan
elemen-elemen seperti warna, tipografi, ikon, dan gambar.

Mockup dibuat untuk menunjukkan tampilan dan nuansa akhir dari UI sebelum masuk ke
tahap pengembangan. Dari sini bisa terlihat memberikan gambaran yang lebih akurat
tentang bagaimana produk akan terlihat dan beroperasi dari segi visual.

Komponen mockup meliputi semua aspek visual seperti palet warna, font, ukuran teks,
gambar, dan elemen grafis lainnya. Mockup dapat menunjukkan efek visual tertentu
seperti bayangan, gradien, atau animasi.

Mockup digunakan untuk mendapatkan umpan balik dari stakeholders dan pengguna
tentang desain visual. Selain itu, juga membantu developer untuk memahami hasil akhir
yang perlu mereka ciptakan.

Misalnya di aplikasi e-commerce, mockup berarti layout di halaman utama sudah diberi
palet warna, terdapat ikon keranjang belanja, ikon pembayaran, dan i

5. Prototype

Prototype adalah versi kerja dari desain yang dapat berinteraksi dan digunakan untuk
menunjukkan dan menguji fungsionalitas produk.

Berbeda dari mockup, prototype memungkinkan pengguna untuk berinteraksi dengan

antarmuka. Sehingga prototype sudah mencakup navigasi antar halaman, klik tombol, dan
interaksi lainnya yang mirip dengan produk akhir.

Tujuan utama dari prototype adalah untuk menguji desain dan fungsionalitasnya. Ini
membantu mengidentifikasi masalah penggunaan dan mendapatkan umpan balik yang
berharga dari pengguna atau pemangku kepentingan sebelum pengembangan final.

Prototype bisa berkisar dari versi dasar dengan interaksi minimal hingga versi yang sangat
detail dan hampir menyerupai produk akhir. Tingkat detailnya tergantung pada tujuan
pengujian dan sumber daya yang tersedia.

Ada berbagai alat yang dapat digunakan untuk membuat prototype, seperti Figma, Adobe
XD, dan Sketch. Alat-alat inilah yang memungkinkan desainer untuk membuat interaksi
dan transisi yang realistis.

Sebagai contoh, prototype untuk aplikasi e-commerce sudah bisa dilakukan interaksi.
Sehingga dari desain yang ada sudah bisa melakukan proses menelusuri katalog produk,
menambahkan item ke keranjang belanja, dan melakukan proses checkout.

6. Pengujian dan Iterasi

Pengujian dan iterasi adalah tahapan krusial dalam proses desain UI untuk
meningkatkan dan menyempurnakan desain berdasarkan umpan balik pengguna.
 Pengujian

Tahap ini melibatkan pengujian desain UI yang telah dibuat dalam bentuk prototype
dengan pengguna nyata. Pengujian ini dapat dilakukan melalui berbagai metode, seperti
uji kegunaan , wawancara pengguna, survei, atau A/B testing.

Tujuannya adalah untuk mengumpulkan informasi tentang bagaimana pengguna

berinteraksi dengan UI. Informasi ini bisa berupa masalah yang ditemui, kebingungan
saat mengoperasikan produk, hingga aspek-aspek yang mereka sukai.

Iterasi

Setelah mendapatkan feedback dari tahap pengujian, desain UI akan disempurnakan.

Penyempurnaan ini bisa melibatkan perubahan kecil seperti menyesuaikan warna atau
font maupun perubahan besar seperti mengubah layout atau menambah dan
menghilangkan fitur.

Pengujian dan iterasi adalah proses berkelanjutan yang memastikan supaya desain UI
tidak hanya berdasarkan asumsi, tetapi juga mendapatkan feedback nyata dari
pengguna. Feedback inilah yang menjadi kunci untuk menciptakan produk yang sukses
dan disukai pengguna.
C. Tugas Siswa :
Usaha Mandiri Sixpro, bergerak di bidang produksi barang dan jasa yang menjual dan
melayani pembuatan merchandise dan produk custom seperti Kaos, Jaket, Tas, Topi, Mug,
Gelas, Pin, Gantungan Kunci, Stiker, Poster, ID Card, Brosur, e-flyer, e-poster

Usaha Mandiri Sixpro ingin melakukan Branding Untuk Meningkatkan Memiliki brand
awareness dengan membuat Website Landing Page, Landing Page adalah sebuah halaman
khusus yang dibuat dengan tujuan spesifik, yaitu untuk mengarahkan pelanggan melakukan
sebuah aksi tertentu, seperti membeli, memesan, ataupun mengisi formulir
Untuk Logo:

Instruksi Kerja:
1. Isikan Nama Kelompok Anda:
Ketua :
Anggota:
Deskripsikan tugas dari masing masing anggota sampai penyelesaian dari permasalahan
yang diberikan
 Nama Siswa Deskripsi Tugas Masing Masing Anggota
1.
2.
3.
4.

2. Carilah Referensi Halaman web yang akan digunakan sebagai acuan

Nama Siswa Link Web Referensi
1.
2.
3.
4.

3. Diskusikan dengan temanmu materi materi/ informasi yang akan ditampilkan di website
landing page
4. Buatlah rancangan desain(Low fidelity wireframe) dari landing page sixpro
Contoh:

Lembar Penilaian(Asesmen Sumatif)

1. Bagaimana proses pembuatan UI/UX?

2. Deskripsikan perbedaan Low Fidelity Wireframe dan High Fidelity Wireframe!
3. Deskripsikan perbedaan User Interface(UI) dan User Experience(UX)!
4. Apakah yang perlu diperhatikan dalam pembuatan User Interface?