Latihan: Membuat gambar rangka di Figma

Pengantar

Pada pelajaran sebelumnya, Anda telah mempelajari langkah-langkah untuk membuat gambar rangka untuk halaman beranda pemesanan online untuk situs web versi seluler "Little Lemon". Dalam latihan ini, Anda akan membuat gambar rangka halaman detail produk.

Catatan: Dalam wireframe, tidak ada warna atau gambar yang disertakan. Ini hanyalah sebuah cetak biru. Yang penting di sini adalah tata letak dan fungsionalitasnya.

Petunjuk

Untuk membuat gambar rangka, Anda harus menyelesaikan langkah-langkah berikut ini:

Langkah 1-5: Menyiapkan bingkai, kisi, dan penempatan konten.

Langkah 6-12: Merancang konten Anda.

Mari kita mulai!

Langkah 1: Kumpulkan Persyaratan

Di sini Anda menuliskan atau membuat sketsa tentang apa yang Anda perlukan untuk masuk ke halaman, seperti:

• Bilah navigasi
• Foto hidangan
• Waktu pengiriman
• Sesuaikan hidangan
• Jumlah hidangan yang dipesan
• Tombol tambahkan ke keranjang

Langkah 2: Buat bingkai dan kisi-kisi

• Buka file Figma baru dan buat bingkai.
• Pilih iPhone 13 Pro Max - 1.
• Tambahkan kisi 4 kolom dengan margin 25.

Langkah 3: Blok konten

• Buat panduan blok konten, menggunakan persegi panjang dasar untuk setiap blok.

Langkah 4

• Pindahkan panduan ini keluar dari bingkai.

Langkah 5

• Kurangi lebar persegi panjang panduan.
• Pertahankan teks karena ini memberikan garis besar kasar dari semua konten dalam gambar rangka. Anda akan menggunakannya sebagai referensi saat mendesain di dalam bingkai.

Langkah 6: Header/Bilah navigasi

Isi

• Tambahkan ikon menu. Cara untuk menavigasi ke layar beranda adalah dengan menggunakan menu hamburger untuk membukamenu sampingan, seperti yang saya gunakan dalam contoh ini. Hal ini membantu pengguna untuk menavigasi dengan mudah ke halaman lain di situs.

Catatan: Navigasi Anda tidak perlu terlalu rinci karena biasanya merupakan bagian sekunder dari gambar rangka.

• Tambahkan logo agar pengguna mengenali situs apa yang sedang mereka kunjungi.
• Tambahkan keranjang belanja karena ini adalah layanan pengiriman online. Ketika keranjang diketuk, itu membuka hamparan pop-up yang memungkinkan pengguna untuk melacak dan mengubah apa yang ingin mereka beli. Ini juga menambahkan opsi untuk melakukan pembayaran.

Catatan: Gambar direpresentasikan sebagai persegi panjang dengan tanda x melaluinya.

Langkah 7 Penempatan

• Tambahkan penempatan untuk gambar piring sebagai persegi panjang dengan tanda x melaluinya.
• Dan tambahkan penempatan untuk tombol kembali supaya pengguna dapat kembali ke halaman sebelumnya.

Langkah 8: Deskripsi

• Tambahkan sub-judul untuk nama makanan dan harganya.
• Tambahkan teks tubuh untuk memberikan deskripsi.

Catatan: Gambar rangka tidak harus menyertakan detail pada titik ini, tetapi ditambahkan di sini untuk tujuan demonstrasi.

Langkah 9: Pengantaran

• Tambahkan penempatan ikon untuk kendaraan.
• Tambahkan waktu umum untuk pengiriman.
• Tambahkan menu drop-down jika pelanggan membutuhkan waktu lain untuk pengantaran.

Langkah 10: Sesuaikan

• Tambahkan teks untuk memberi tahu pengguna bahwa mereka dapat menambahkan item ke dalam pesanan mereka.
• Cantumkan pilihan dan harganya.

Langkah 11: Jumlah hidangan yang dibutuhkan

• Tambahkan nilai tambah dan kurang sehingga pengguna dapat menambah atau mengurangi jumlah hidangan yang ingin mereka pesan.

Langkah 12: Tambahkan ke pesanan

• Terakhir, tambahkan tombol agar pengguna dapat mengetuk untuk menambahkan hidangan ke dalam pesanan mereka.
• Dan tambahkan penempatan teks yang menampilkan jumlah total hidangan di dalam tombol ini.