Tugas Pendahuluan 7

PRAKTIKUM DESIGN UI/UX

“Prototype”

Asisten :
1. Nur Rifdah
2. Andi Nurul Inaya

Oleh :
Nama : Maharani Sania Budiarti
Nim : 60900121002
Kelas : A

LABORATORIUM KOMPUTER TERPADU

JURUSAN SISTEM INFORMASI
FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS ISLAM NEGERI ALAUDDIN MAKASSAR
2023
Soal:
1. Jelaskan fungsi dari prototype!
2. Jelaskan juga tahapan dalam prototyping?
3. Apa itu "Prototype" mode di Figma dan bagaimana menggunakannya
untuk menguji interaksi prototipe?
4. Jelaskan perbedaan antara prototipe statis dan interaktif di Figma!

Jawaban:
1. Fungsi-fungsi prototype:
a. Prototype berguna untuk mengolah sebuah ide menjadi
sesuatu yang lebih berwujud fisik, sehingga dapat dirasakan,
dimainkan, dan diuji-coba.
b. Dengan keberadaan sebuah prototype, maka akan
didapatkan umpan balik yang maksimal baik dari klien
maupun pengembang/desainer, sehingga dapat
meminimalisir kegagalan dan kesalahan.
c. Proses pembuatan prototype dapat memberikan gambaran
kepada desainer/pengembang terhadap tingkat kesulitan dan
kompleksitas proses produksinya.
d. Keberadaan Prototype dapat mengurangi kesalah-pahaman
antara klien maupun desainer.
e. Keberadaan Prototype dapat menghemat waktu, tenaga, dan
biaya, baik bagi klien maupun desainer.

2. Tahapan prototype:
a. Mendengarkan klien, mendengar keluhan pelanggan salah
satu cara untuk pengumpulan kebutuhan dari sistem. Klien
perlu mengetahui apakah sistem berjalan baik atau ada
kendala yang akhirnya mengetahui masalah yang terjadi
b. Merancang dan membuat prototype, berdasarkan keluhan
klien yang diterima, prototype dapat dikembangkan sesuai
kebutuhan sistem yang telah didefinisikan
c. Uji coba, tahap ini prototype kembali di uji oleh klien atau
pengguna. Lalu pengembang dapat memperbaiki prototype
jika masih dapat keluhan dari pelanggan.
d. Presentasi dan komunikasi, prototype dapat digunakan
sebagai alat untuk presentasi dan komunikasi pada klien,
tim proyek, atau pemangku kepentingan lainnya. Mereka
dapat memahami konsep, fitur, dan protensi produk atau
sistem yang akan di kembangkan.
e. Peningkatan desain, umpan balik yang diperoleh dari
pengujian prototype, desainer dapat melakukan iterasi pada
desain untuk memperbaiki fitur, fungsionalitas, atau desain
keseluruhan. Dalam membantu dalam meningkatkan
kualitas dan performa produk atau sistem sebelum produksi.
3. Prototype pada figma adalah dapat dibuat oleh designer berupa
prototype klik tayang, yaitu klik interface untuk menunjukkan
bagaimana proses alur desain yang telah dibuat. Cara menggunakan
prototype, yaitu:
a. Buat frame, frame yang akan menjadi elemen interakrif
dalam sebuah desain. Seperti menu, kartu atau tampilan
lainnya.
b. Pilih element, pilih objek yang ingin anda jadikan interaktif,
jika ingin sebuah gambar berubah, klik untuk berpindah ke
tampilan lainnya.
c. Aktifkan mode prototype, pada ikon “prototype” bagian atas
panel kanan figma, akan membawa anda ke mode
prototype.
d. Tambahkan aksi, dapat menentukan aksi yang ingin terjadi
saat elemen telah diinteraksikan. Klik dan tahan elemen.
e. Preview dan interaksi, diatas panel kanan untuk melihat
prototype secara real-time. Dapat mengklik elemen
interaktif untuk melihat transisi dan animasi yang telah
dibuat.

4. Prototype pada figma, adalah untuk membuat simulasi interaksi

pengguna dan menggambarkan aliran desain yang telah dibuat pada
figma tersebut. Sedangkan interaktif pada figma adalah pengguna
dapat berinteraksi dengan elemen pada desain, seperti mengklik
tombol, mengganti halaman, memilih opsi, dan sebagainya.