Bacaan: Latihan: Membuat kerangka kerja proyek

Gambaran umum

Saat Anda bersiap untuk mengembangkan aplikasi pemesanan makanan untuk restoran Little Lemon, pertama-tama Anda perlu membuat wireframe untuk proyek Anda. Bayangkan wireframe seperti cetak biru arsitek - ini adalah rencana dan garis besar produk digital. Tujuannya adalah untuk membuat struktur dasar untuk setiap desain layar, sebelum mempertimbangkan hal-hal spesifik seperti warna dan gambar merek. Wireframe juga menyediakan cara untuk mengomunikasikan ide dengan cepat, yang dapat disempurnakan kemudian. Fokusnya ditempatkan pada pengalaman pengguna dan apa yang mereka butuhkan untuk menyelesaikan tugas. Meskipun wireframe dapat dibuat sketsa dengan tangan, Anda akan menggunakan Figma untuk menggambar wireframe dalam latihan ini. Figma adalah alat yang berguna dalam pengembangan aplikasi. Alat ini memungkinkan untuk berbagi wireframe dengan anggota tim lain, sehingga mereka dapat mengomentari dokumen yang sama.

Skenario

Restoran Little Lemon menghadapi kesulitan dengan pemesanan online untuk pengantaran dan telah memutuskan untuk membuat aplikasi Android untuk menyelesaikan masalah ini. Dalam latihan ini, Anda akan membuat wireframe layar awal untuk proyek tersebut.

Petunjuk

Langkah 1: Pertimbangkan persyaratan klien

Mulailah dengan mempertimbangkan persyaratan Little Lemon. Ini akan menjadi blok konten yang akan memberi Anda kerangka konten apa yang akan muncul di mana dalam wireframe. Hal-hal berikut ini diperlukan:

• Informasi tentang Little Lemon
• Deskripsi dan foto hidangan
• Bilah navigasi
• Bilah pencarian
• Kategori menu (Makanan Pembuka, Makanan Utama, Makanan Penutup, dan Minuman).

Dengan garis besar konten yang diperlukan, Anda sekarang dapat mulai membuat bingkai gambar.

Langkah 2: Buat bingkai dan kisi-kisi

• Di Figma, buka menu bingkai dan pilih Bingkai.

• Pilih bingkai Android Besar dari panel bingkai yang terletak di sisi kanan layar.

• Tambahkan kisi tata letak 4 kolom ke bingkai dengan margin 25 dan selokan 20.

Catatan: Untuk rekap tentang cara membuat kisi-kisi, silakan lihat kursus Prinsip-prinsip desain UX dan UI.

Langkah 3: Buat blok konten

• Pada bingkai pertama, Anda memerlukan blok konten untuk memuat hal-hal berikut ini:
  • Navigasi (juga dikenal sebagai Header)
  • Bagian Pahlawan, yang menampilkan restoran Little Lemon
  • Bilah pencarian
  • Kategori menu (Makanan Pembuka, Makanan Utama, Makanan Penutup, dan Minuman)
  • Bagian Menu
• Buatlah blok-blok konten ini dengan menggunakan persegi panjang, lalu beri nama yang sesuai:

Langkah 4: Menyiapkan panduan

• Pindahkan blok konten keluar dari bingkai.
• Pilih persegi panjang dan buatlah lebih sempit. Hal ini akan memberi Anda panduan kasar mengenai blok konten yang akan digunakan sebagai referensi ketika menempatkan elemen di dalam bingkai.

Langkah 5: Tambahkan bilah Navigasi

Bilah Navigasi memerlukan elemen-elemen berikut: logo Little Lemon dan tautan ke akun profil pengguna.

• Untuk logo, gambar persegi panjang dan tarik garis diagonal melaluinya. Ini adalah cara konvensional untuk menunjukkan placeholder pada bingkai kawat jika gambar tidak tersedia.
• Ulangi langkah ini untuk profil pengguna.

Langkah 6: Tambahkan bagian Pahlawan

• Bagian Pahlawan harus mencakup: nama Little Lemon, lokasi restoran, deskripsi singkat tentang gaya makanan restoran, foto, dan fungsi pencarian hidangan.
• Tambahkan latar belakang yang ditunjukkan dengan warna abu-abu di bawah ini dan isi blok dengan bagian-bagian yang diperlukan.

Langkah 7: Tambahkan blok rincian menu

• Untuk menyoroti bahwa ini adalah aplikasi pesan antar makanan, tambahkan judul Pesan untuk peng antaran di blok perincian Menu.
• Karena Mario dan Adrian ingin pengguna mereka memiliki kemampuan untuk memfilter kategori menu, Anda perlu menambahkan tombol filter kategori menu di bawah judul ini.

Langkah 8: Tambahkan blok Item menu

• Bagian ini membutuhkan judul (nama hidangan), deskripsi, harga, dan gambar setiap hidangan.
• Pastikan untuk mencatat bahwa ketika sebuah hidangan diklik, pengguna akan dibawa ke layar lain dan bagian ini dapat digulir secara vertikal agar pengguna dapat melihat item lebih lanjut.

Dan itu melengkapi gambar kerja untuk layar beranda proyek Anda. Perhatikan bahwa tidak ada warna, font, atau gambar yang disertakan dalam gambar rangka. Yang penting di sini adalah konten, tata letak, dan fungsionalitas:

Kesimpulan

Sekarang setelah Anda membahas dasar-dasar wireframing dan membuat wireframing untuk layar pertama aplikasi Anda, Anda dapat melanjutkan membuat wireframing dan mendesain solusi untuk aplikasi pemesanan makanan lainnya.