Mata Kuliah: MKK.10.01.01 – UI/UX Design (TW2). Durasi: 120 menit (Tatap Muka). Penyusun: David Arga Ganeza.
Tujuan Pertemuan
- Mengevaluasi penguasaan materi pertemuan 1 hingga 5
- Mengukur pemahaman konsep UI/UX, Figma, dan desain web e-commerce
- Menilai kemampuan praktik membuat prototype dan konversi ke HTML
- Menetapkan umpan balik untuk perbaikan pada pertemuan berikutnya
Materi yang Diujikan
Kuis 1 mencakup seluruh konsep dari pertemuan 1 sampai 5: perbedaan UI dan UX, prinsip desain visual, penggunaan Figma dan frame, anatomi homepage e-commerce, hero animation, halaman detail produk dan keranjang, halaman checkout, pembuatan prototype, serta dasar konversi desain ke kode HTML. Mahasiswa diharapkan menguasai baik aspek teori maupun kepraktikan penggunaan alat.
Bentuk Penilaian
Penilaian dilakukan dalam dua bagian. Bagian pertama adalah kuis tertulis atau kuis online berisi soal pilihan ganda dan esai singkat untuk menguji pemahaman konsep. Bagian kedua adalah tugas praktik menyeluruh di mana mahasiswa memperlihatkan prototipe web e-commerce yang telah dibangun dari pertemuan sebelumnya, sekaligus hasil konversi salah satu halaman menjadi HTML dan CSS.
Umpan balik bersifat membangun: mahasiswa mendapat catatan atas apa yang sudah baik dan apa yang perlu diperbaiki, sehingga revisi dapat dilakukan sebelum prototipe dipakai pada konversi berikutnya.
Rubrik Tugas 1
- Kelengkapan halaman: homepage, detail produk, keranjang, dan checkout.
- Kualitas desain: konsistensi warna, tipografi, dan hierarki visual.
- Fungsional prototype: alur antar halaman dapat dijalankan dengan mulus.
- Hasil konversi ke HTML: kesesuaian dengan desain dan kerapian kode.
- Kerapihan file Figma: penamaan layer dan penggunaan auto layout.
Checklist Sebelum Mengumpulkan
- Pastikan seluruh frame menggunakan nama layer yang jelas dan mudah dikenali.
- Cek seluruh tautan prototype tidak terputus dan alurnya lengkap.
- Verifikasi halaman HTML dapat dibuka dan menampilkan desain dengan benar.
- Bandingkan hasil konversi dengan desain asli dan lakukan penyesuaian yang diperlukan.
Umpan Balik dan Perbaikan
Setelah penilaian, mahasiswa akan menerima umpan balik yang mencakup apa yang sudah berjalan baik dan hal-hal yang perlu disempurnakan. Gunakan masukan ini untuk memperbaiki prototipe sebelum dipakai pada proses berikutnya. Kesalahan yang paling sering terjadi adalah alur prototype yang terputus, kode HTML yang tidak rapi, dan kurangnya konsistensi visual, sehingga ketiga hal ini perlu menjadi fokus utama revisi.
Strategi Belajar dan Contoh Soal
Untuk mempersiapkan kuis, pelajari ulang istilah inti setiap pertemuan lalu praktikkan langsung di Figma. Contoh soal konsep: apa perbedaan antara UI dan UX; sebutkan prinsip hierarki visual; fungsi Auto Layout; bagaimana cara membuat animasi hero; langkah mengonversi desain ke HTML. Soal praktik biasanya meminta mahasiswa menyebutkan atau membuktikan langkah-langkah teknis dalam pengerjaan.
Bentuk soal lain menguji kemampuan analisis, misalnya meminta mahasiswa mengidentifikasi kelemahan tata letak pada sebuah desain yang disajikan dan mengusulkan perbaikannya. Latihan semacam ini menumbuhkan sudut pandang desainer yang mampu menilai karya sendiri maupun orang lain, bukan sekadar mengoperasikan alat.
Kelola waktu pengerjaan dengan bijak: kerjakan soal yang mudah dan pasti lebih dahulu, sisihkan waktu khusus untuk soal esai yang membutuhkan penjelasan, dan simpan pekerjaan secara berkala. Ketelitian dalam membaca soal sangat menentukan, karena soal praktik sering memuat persyaratan teknis yang harus dipenuhi persis, seperti ukuran frame atau nama layer.
Gunakan waktu mengerjakan Tugas 1 sebaik mungkin untuk mempraktikkan seluruh keterampilan yang telah dipelajari, bukan hanya menyelesaikan secara minimal. Semakin lengkap prototipe dan semakin rapi kode hasil konversi, semakin kuat dasar untuk mengerjakan bagian mobile yang akan datang. Anggap tugas ini kesempatan menyatukan pengetahuan menjadi sebuah karya yang dapat dibanggakan.
Setelah mengumpulkan, jangan lewatkan umpan balik yang diberikan. Catat setiap catatan perbaikan dan terapkan pada revisi. Perbaikan berkelanjutan adalah bagian dari budaya kerja desainer profesional, sebab desain hampir selalu menjadi lebih baik melalui beberapa putaran penyempurnaan berdasarkan masukan.
Pada bagian akhir sesi, rapatkan kembali setiap catatan dan buat ringkasan singkat tentang hal yang sudah dicapai. Refleksi tertulis atas proses belajar akan membantu mengingat istilah dan sekaligus menjadi bekal yang baik ketika materi bergeser ke desain aplikasi mobile pada pertemuan berikutnya.
Kelompok dan Presentasi
Selain penilaian individu, mahasiswa dapat diminta mempresentasikan prototipenya secara berkelompok untuk berlatih menjelaskan keputusan desain. Kemampuan mengomunikasikan alasan di balik pilihan warna, tata letak, dan alur merupakan keterampilan profesional yang sama berharganya dengan kemampuan menggambar. Terima masukan dari teman secara terbuka dan gunakan untuk menyempurnakan karya.
Latihan Uji Alur
Salah satu cara menguatkan penguasaan adalah menguji prototipe dengan pengguna lain dan meminta mereka menyelesaikan tugas belanja sederhana, misalnya menemukan produk tertentu lalu sampai ke halaman checkout. Latihan seperti ini memperkenalkan gagasan usability testing sejak dini, yang kelak sangat berguna dalam pengembangan produk sungguhan. Untuk pertemuan berikutnya, mahasiswa mulai beralih dari web ke desain aplikasi mobile.