Pembuatan Prototype/Hi-fi pada website AyoDolan di figma

Prototype atau High-Fidelity (Hi-Fi) merupakan tahapan lanjutan setelah pembuatan wireframe atau low-fi. Pada tahap ini, desain antarmuka sudah menampilkan tampilan visual yang mendekati produk akhir, baik dari segi warna, tipografi, ikon, hingga interaksi antar halaman.

Artikel ini membahas proses pembuatan prototype/Hi-Fi pada website AyoDolan menggunakan Figma, mulai dari perancangan tampilan setiap halaman hingga penerapan komponen visual dan interaksi dasar.

Gambar 1 - Home

Komponen pada Halaman Rekomendasi

Halaman ini terdiri dari beberapa komponen utama, yaitu:

• Navbar
• Search Bar
• Section Rekomendasi
• Card Tempat
• Tombol “Selengkapnya”

Langkah-langkah Pembuatan di Figma

1. Membuat Frame Halaman

1. Buka Figma lalu buat Frame baru.
2. Gunakan ukuran Desktop (misalnya 1440 × 1024).
3. Beri nama frame, misalnya Home — Rekomendasi.

2. Membuat Navbar

1. Buat Rectangle memanjang di bagian atas sebagai background navbar.
2. Beri warna gradasi biru sesuai identitas website AyoDolan.
3. Tambahkan:

• Logo AyoDolan

Pada Logo buat interaksi “click on — navigate to — Halaman Beranda”

• Menu “List Tempat” di bagian tengah kanan.

Pada menu List Tempat buat komponen kemudian buat variant baru, kemudian buat interaksi “while hovering — change to — variant2” pada variant2 buat interaksi “on click — navigate to — Halaman List Tempat”

• Ikon notifikasi.

Pada ikon notifikasi buat interaksi “on click — open overlay — Notifikasi”

• Tombol Masuk dan Login.

Pada tombol masuk dan login buat kompoen kemudian buat variant baru, setelah itu buat interaksi “while hovering — change to — variant2” pada variant2 buat interaksi “on click — open overlay — formlogin/formmasuk”.

3. Membuat Search Bar

1. Tambahkan rectangle dengan sudut rounded di bawah navbar.
2. Beri warna putih sebagai background search.
3. Tambahkan:

• Ikon search di kiri.
• Text placeholder “Cari lokasi”.
• Ikon tambahan (filter atau arah) di sisi kanan.

Pada ikon filter dan ikon search buat menjadi komponen dan tambahkan variant baru, setelah itu buat interaksi “while hovering — change to — variant2” setelah itu pada variant2(filter) buat interaksi “on click — open overlay — filterdrop”.

Kemudian pada SearchBar buat interaksi “on click— open overlay — Searchdrop”.

4. Membuat Section Rekomendasi

1. Tambahkan teks “Rekomendasi” sebagai judul section.
2. Tambahkan teks “Selengkapnya” → di sisi kanan sebagai navigasi ke halaman daftar lengkap. Dan tambahkan interaksi “on click — navigate to — halaman list tempat”
3. Atur ukuran font dan warna agar tetap kontras dan mudah dibaca.

5. Membuat Card Tempat

1. Buat Rectangle dengan sudut membulat sebagai container card.
2. Tambahkan gambar tempat di bagian atas card.
3. Di dalam card, tambahkan.

• Nama tempat (contoh: Abell PS).
• Rating bintang dan jumlah ulasan.
• Alamat singkat.
• Informasi fasilitas (PS3, PS5, Nintendo Switch, dll).
• Label harga dalam bentuk badge (contoh: Rp. 10.000–35.000).
• Tambahkan indikator status (titik warna hijau/oranye/merah) di sudut gambar.
• Pada Card buat interaksi “click on — navigate to — detailtempat”

Gambar 2 List Tempat

Komponen pada Halaman Daftar Tempat

Halaman Daftar Tempat terdiri dari beberapa komponen utama, antara lain:

• Navbar
• Search bar (Cari lokasi)
• Judul halaman “Daftar Tempat”
• List card tempat
• Informasi rating dan ulasan
• Tag fasilitas
• Rentang harga
• Pagination

Langkah-langkah Pembuatan di Figma

1. Membuat Frame Halaman Daftar Tempat

1. Buat Frame baru dengan ukuran Desktop (misalnya 1440 × 1024).
2. Beri nama frame List Tempat.
3. Salin navbar dan search bar dari halaman Home agar konsisten.

2. Membuat Judul Halaman

1. Tambahkan teks “Daftar Tempat” di bawah search bar.
2. Gunakan ukuran font lebih besar dan tebal sebagai penanda judul halaman.
3. Atur margin atas dan bawah agar judul terlihat jelas.

3. Membuat Card Daftar Tempat (Horizontal)

1. Buat Rectangle dengan sudut membulat sebagai container card.
2. Atur card secara horizontal (gambar di kiri, informasi di kanan).
3. Tambahkan gambar tempat di sisi kiri card.
4. Tambahkan indikator status (titik warna hijau) di sudut gambar.

4. Menambahkan Informasi Tempat

Di dalam card, tambahkan beberapa informasi berikut:

• Nama tempat (contoh: Abell PS).
• Rating bintang dan jumlah ulasan.
• Jumlah ruangan dan jenis fasilitas (PS3, PS5, Nintendo Switch).
• Alamat singkat lokasi.
• Rentang harga (Rp. 10.000 — Rp. 35.000).

5. Menambahkan Tag Fasilitas

1. Buat badge/button kecil berbentuk rounded.
2. Isi dengan teks fasilitas, seperti:

• 24 Jam
• Musholla
• VIP Room
• Toilet
• F&B

3. Gunakan warna biru sebagai warna utama agar konsisten dengan identitas website.

6. Membuat Pagination

1. Tambahkan button pagination di bagian bawah halaman.
2. Buat angka halaman (1, 2) dan tombol panah.
3. Beri highlight pada halaman aktif menggunakan warna utama.
4. Pastikan ukuran dan jarak antar tombol konsisten.

7. Menambahkan Prototype Interaksi

1. Masuk ke tab Prototype.
2. Hubungkan:

• Card tempat → ke halaman Detail Tempat.
• Angka pagination → ke frame halaman selanjutnya.

3. Atur interaksi:

• Trigger: On Click
• Action: Navigate To
• Animation: Smart Animate / Dissolve

Gambar 3 Overlay

3.1 Form Login

Komponen pada Form Login

Form Login terdiri dari:

• Avatar/icon user
• Input email
• Input password
• Tautan Belum punya akun?
• Tautan Lupa password?
• Tombol Login

Langkah-langkah Pembuatan Form Login di Figma

1. Buat Frame baru untuk halaman Login.
2. Tambahkan Rectangle dengan sudut membulat sebagai container form.
3. Letakkan ikon/avatar user di bagian atas form.
4. Tambahkan input field:

• Email
• Password

1. Tambahkan teks tautan Belum punya akun? dan Lupa password? di bawah input.
2. Tambahkan tombol Login dengan warna utama website

3.2 Form Masuk (Registrasi)

Komponen pada Form Masuk

Form Masuk berisi:

• Avatar/icon user
• Input username
• Input email
• Input password
• Tautan Sudah punya akun?
• Tombol Masuk

Langkah-langkah Pembuatan Form Masuk di Figma

1. Duplikasi container dari Form Login untuk menjaga konsistensi desain.
2. Tambahkan input Username di atas input Email.
3. Sesuaikan teks tombol menjadi Masuk.
4. Ubah teks tautan menjadi Sudah punya akun?

3.3 Form Lupa Password1

Komponen pada Form Lupa Password

• Input email
• Tombol Submit

Langkah-langkah Pembuatan Form Lupa Password

1. Buat Frame atau Overlay baru.
2. Tambahkan container dengan sudut membulat.
3. Tambahkan input Email.
4. Tambahkan tombol Submit.

3.4 Form Verifikasi OTP

Komponen pada Form OTP

• Teks instruksi
• Input kode OTP
• Tombol Submit

Langkah-langkah Pembuatan Form OTP di Figma

1. Duplikasi form Lupa Password.
2. Ganti input Email menjadi Kode OTP.
3. Tambahkan teks instruksi: “Masukkan kode yang telah kami kirimkan ke email anda.”
4. Sesuaikan ukuran teks agar mudah dibaca.

Prototype Interaksi Autentikasi

Untuk menambahkan interaksi antar form:

1. Masuk ke tab Prototype.
2. Hubungkan:

• Tombol Login → ke halaman Home.
• Teks Belum punya akun? → ke Form Masuk.
• Teks Sudah punya akun? → ke Form Login
• Teks Lupa password? → ke Form Lupa Password.
• Tombol Submit OTP → kembali ke Form Login.
• Gunakan animasi Dissolve atau Smart Animate agar perpindahan terasa halus.

Gambar 4 Overlay Notifikasi, SearchDrop dan FilterDrop

4.1 Notifikasi (Dropdown)

Komponen pada Notifikasi

• Container notifikasi
• Avatar/icon pengguna
• Judul notifikasi
• Deskripsi singkat
• Waktu notifikasi

Langkah-langkah Pembuatan di Figma

1. Buat Rectangle dengan sudut membulat sebagai container notifikasi.
2. Gunakan warna biru tua sebagai background utama.
3. Buat satu item notifikasi berisi avatar dan teks.
4. Gandakan item notifikasi untuk menampilkan beberapa notifikasi.
5. Tambahkan shadow agar tampilan terlihat seperti overlay.
6. Hubungkan item notifikasi ke halaman detail tempat

4.2 Search Dropdown

Komponen pada Search Dropdown

• Container dropdown
• Gambar thumbnail tempat
• Nama tempat
• Rating dan jumlah ulasan

Langkah-langkah Pembuatan di Figma

1. Buat Frame atau Rectangle di bawah search bar sebagai dropdown.
2. Gunakan warna biru gelap sebagai background dropdown.
3. Tambahkan item pencarian dalam bentuk list horizontal.
4. Masukkan thumbnail gambar di sisi kiri.
5. Tambahkan teks nama tempat dan rating di sisi kanan.
6. Hubungkan Item pencarian ke halaman detail tempat

4.3 Filter Dropdown

Komponen pada Filter Dropdown

Filter dropdown terdiri dari beberapa kategori, yaitu:

• Rating (Tertinggi, Terendah)
• Jarak (Terjauh, Terdekat)
• Harga (Termahal, Termurah)

Langkah-langkah Pembuatan di Figma

1. Buat container filter dengan sudut membulat.
2. Gunakan warna biru sebagai background.
3. Tambahkan teks judul kategori (Rating, Jarak, Harga).
4. Buat button kecil berbentuk pill untuk setiap opsi filter.
5. Atur jarak antar button menggunakan Auto Layout (Wrap).
6. Tandai opsi aktif dengan warna lebih terang.
7. Buat komponen untuk setiap button kecil dan buat variant baru kemudian buat interaksi “click on — change to — variant2”

4.4 Prototype Interaksi

Untuk menambahkan interaksi pada komponen ini:

1. Masuk ke tab Prototype.
2. Hubungkan:

• Ikon lonceng → Open Overlay (Notifikasi)
• Search bar → Open Overlay (Search Dropdown)
• Ikon filter → Open Overlay (Filter Dropdown)

3. Atur animasi:

• Dissolve atau Smart Animate

4. Aktifkan opsi Close when clicking outside agar dropdown dapat ditutup dengan mudah.

Gambar 5 Detail Tempat

Komponen pada Halaman Detail Tempat

Halaman Detail Tempat terdiri dari beberapa komponen utama, yaitu:

• Banner / Header gambar
• Informasi utama tempat
• Rating dan ulasan
• Alamat lokasi
• Daftar fasilitas
• Tombol aksi (Hubungi Operator, Booking)
• Tab navigasi konten

5.1 Langkah-langkah Pembuatan di Figma

1. Membuat Frame Halaman Detail

1. Buat Frame baru dengan ukuran Desktop (misalnya 1440 × 1024).
2. Beri nama frame Detail Tempat.
3. Salin navbar dari halaman sebelumnya untuk menjaga konsistensi desain.

2. Membuat Header / Banner

1. Tambahkan rectangle atau image besar di bagian atas halaman.
2. Masukkan gambar banner sebagai latar belakang.
3. Tambahkan overlay gelap agar teks tetap terbaca.
4. Letakkan tombol back di sisi kiri atas banner.

3. Menampilkan Informasi Utama Tempat

1. Tambahkan thumbnail gambar tempat di sisi kiri.
2. Tambahkan teks:

• Nama tempat (Abell PS)
• Informasi slot (contoh: Slot 7 / 10)

3. Tambahkan button:

• Hubungi Penjual
• Booking

4. Tambahkan tombol Hubungi Operator.

4. Menampilkan Rating dan Ulasan

1. Tambahkan ikon bintang rating.
2. Tampilkan nilai rating dan jumlah ulasan.
3. Gunakan ukuran ikon dan teks yang proporsional agar mudah dibaca.

5. Menampilkan Lokasi dan Fasilitas

1. Tambahkan ikon lokasi diikuti alamat lengkap.
2. Buat daftar fasilitas dalam bentuk bullet atau grid, seperti:

• Snack & Minuman
• Musholla
• Parkir Mobil
• Toilet
• VIP Room

6. Membuat Tab Navigasi Konten

1. Tambahkan tombol tab:

• Ruang
• Gambar
• Daftar Game
• Komentar

2. Gunakan bentuk button kecil dengan border.

3. Tandai tab aktif dengan warna utama website.

7. Menambahkan Prototype Interaksi

1. Masuk ke tab Prototype.
2. Hubungkan:

• Tombol Booking → Overlay Booking.
• Tab Navigasi Konten → konten masing-masing tab.
• Tombol Back → halaman Daftar Tempat.

3. Gunakan animasi Smart Animate untuk transisi tab.

Gambar 6 Overlay SlideRuangan, SlideGambar, SlideGame, SlideKomentar

6.1 Tab Ruang

Komponen pada Tab Ruang

• Card ruang
• Gambar ruang
• Nama ruang
• Jenis ruang (Reguler PS3)
• Spesifikasi
• Harga per jam
• Tombol Pilih Ruangan

Langkah-langkah Pembuatan di Figma

1. Buat card ruang dengan sudut membulat.
2. Tambahkan gambar ruangan di bagian atas card.
3. Tambahkan teks:

• Nama ruang (Ruang 1, Ruang 2, dst)
• Jenis ruangan
• Spesifikasi (TV LED, Smoking/Non-Smoking)
• Harga per jam

4. Tambahkan tombol Pilih Ruangan.

• Buat tombol pilih ruangan menjadi komponen dan buat variant baru, kemudian buat interaksi “on click — change to — variant2” dan pada variant2 buat interaksi “on click — change to — default”

6.2 Tab Gambar

Komponen pada Tab Gambar

• Grid gambar fasilitas
• Label gambar (Toilet, Musholla, Lobby, VIP, dll)

Langkah-langkah Pembuatan di Figma

1. Buat grid gambar dengan ukuran card seragam.
2. Tambahkan gambar fasilitas ke setiap card.
3. Tambahkan label teks di bawah atau di atas gambar.
4. Gunakan Auto Layout (Wrap/Grid) agar tampilan rapi.

6.3 Tab Daftar Game

Komponen pada Tab Daftar Game

• Navigasi alfabet (A–Z)
• Daftar game per huruf

Langkah-langkah Pembuatan di Figma

1. Buat bar alfabet dari A sampai Z.
2. Tambahkan highlight pada huruf aktif.
3. Buat daftar game dalam bentuk list.
4. Pisahkan daftar berdasarkan huruf awal.
5. Gunakan ukuran font kecil agar daftar tetap ringkas.

6.4 Tab Komentar

Komponen pada Tab Komentar

• Text area komentar
• Tombol kirim
• Daftar komentar pengguna
• Tombol filter (Terpopuler, Terbaru, Terlama)
• Informasi jumlah komentar dan balasan

Langkah-langkah Pembuatan di Figma

1. Tambahkan input komentar di bagian atas.
2. Tambahkan tombol Kirim di sisi kanan.
3. Buat satu template komentar:

• Avatar
• Nama pengguna
• Isi komentar
• Like dan jumlah balasan

Prototype Interaksi Tab

Untuk membuat tab dapat berpindah:

1. Masuk ke tab Prototype.
2. Hubungkan setiap tombol tab:

• Ruang → konten Ruang
• Gambar → konten Gambar
• Daftar Game → konten Game
• Komentar → konten Komentar

3. Gunakan Smart Animate agar perpindahan tab terlihat halus.

Gambar7 Overlay FormBooking, Barcide, ChatOrang

7.1 Form Booking

Komponen pada Form Booking

• Input nama pemesan
• Input tanggal
• Input waktu mulai
• Input waktu selesai
• Informasi harga
• Tombol Booking

Langkah-langkah Pembuatan di Figma

1. Buat Frame atau Card sebagai container Form Booking.
2. Tambahkan judul “Form Booking” di bagian atas.
3. Tambahkan beberapa input field:
4. Tambahkan teks keterangan (misalnya minimal booking 2 jam).
5. Tambahkan field Harga.
6. Tambahkan tombol Booking dengan warna utama website.

7.2 Pembayaran Menggunakan QR Code

Komponen pada Halaman QR Code

• Teks instruksi pembayaran
• Gambar QR Code

Langkah-langkah Pembuatan di Figma

1. Buat Frame atau Overlay baru untuk halaman pembayaran.
2. Tambahkan teks “Scan untuk melanjutkan pembayaran”.
3. Masukkan gambar QR Code ke bagian tengah frame.
4. Atur posisi dan ukuran agar QR Code mudah dipindai.

7.3 Fitur Chat dengan Operator

Komponen pada Halaman Chat

• Header chat (nama tempat/operator)
• Daftar percakapan
• Bubble chat pengguna
• Bubble chat operator
• Input pesan
• Tombol kirim

Langkah-langkah Pembuatan di Figma

1. Buat Frame baru untuk halaman Chat.
2. Tambahkan header berisi nama tempat (contoh: Abell PS).
3. Buat bubble chat dengan dua warna berbeda:

• Pesan pengguna
• Pesan operator

4. Tambahkan input field “Ketik pesan di sini…”.

5. Tambahkan tombol Kirim.

6. Gunakan Auto Layout agar chat mudah dikembangkan.

Prototype Interaksi Booking

Untuk mengatur alur interaksi:

1. Masuk ke tab Prototype.
2. Hubungkan:

• Tombol Booking → halaman QR Code

3. Gunakan animasi Dissolve atau Smart Animate agar transisi terasa halus.