LoFi Wireframe

• Apa itu LoFi Wireframe?
• Menggunakan LoFi Wireframe
• Pembuatan LoFi Wireframe
  • Frame
  • Mapping
  • Naming
  • Top Navbar
  • Bottom Navbar
  • Main Screen

Author : Muhammad Fauzan Arrafi

Apa itu Low Fidelity Wireframe?

Lofi wireframe adalah atau low fidelity wireframe adalah wireframe sederhana di mana di dalam pembuatan wireframe ini detail dari aplikasi bukan jadi prioritas utama, di wireframe ini ada beberapa point yang menjadi fokus dari pembuatan wireframe, di antaranya adalah :

• Fokus pada Struktur: Lofi wireframe menekankan pada tata letak elemen-elemen penting dalam aplikasi, seperti navigasi, konten utama, dan interaksi dasar.

• Keterbacaan dan Pemahaman: Tujuan utama adalah untuk memastikan bahwa pengguna dapat dengan mudah memahami bagaimana aplikasi akan berfungsi dan berinteraksi.

• Iterasi Cepat: Dengan detail yang minim, desainer dapat dengan cepat membuat dan mengubah wireframe untuk menjelajahi berbagai solusi desain.

• Uji Konsep: Lofi wireframe memungkinkan tim untuk menguji ide-ide dasar dan mendapatkan umpan balik awal sebelum melanjutkan ke tahap desain yang lebih detail.

• Kolaborasi: Karena sifatnya yang sederhana, lofi wireframe sering digunakan sebagai alat untuk diskusi dan kolaborasi antara desainer, pengembang, dan pemangku kepentingan.

• Fleksibilitas: Wireframe ini dapat dengan mudah diubah untuk mencerminkan perubahan dalam persyaratan atau umpan balik yang diterima.

Menggunakan LoFi wireframe

Pembuatan LoFi wireframe tergantung dari preferensi designer masing-masing beberapa designer memutuskan untuk membuat middle fidelity ketimbang membuat low fidelity wireframe dikarenakan middle fidelity wireframe lebih dapat menampilkan ide yang ingin di sampaikan designer ke client, akan tetapi ada banyak keuntungan dari membuat LoFi wireframe, di antaranya adalah:

• Kecepatan dan Efisiensi: LoFi wireframe memungkinkan desainer untuk membuat sketsa dengan cepat tanpa terfokus pada detail visual. Ini sangat berguna di tahap awal proyek ketika banyak ide perlu dieksplorasi. Dibandingkan dengan MidFi dan HiFi, waktu yang dibutuhkan untuk membuat LoFi jauh lebih singkat.

• Fleksibilitas untuk Perubahan: Dengan detail yang minim, LoFi wireframe lebih mudah untuk diubah atau disesuaikan. Ini memungkinkan tim untuk melakukan iterasi dengan cepat berdasarkan umpan balik dan kebutuhan pengguna, sedangkan MidFi dan HiFi sering kali lebih sulit untuk dimodifikasi.

• Fokus pada Fungsi: LoFi wireframe membantu tim untuk tetap fokus pada fungsi dan alur aplikasi, tanpa terganggu oleh elemen desain visual. Ini memungkinkan penemuan masalah dalam pengalaman pengguna lebih awal dalam proses, sebelum detail estetika diperkenalkan.

• Pengujian Awal dengan Pengguna: LoFi wireframe sangat efektif untuk pengujian pengguna awal, memungkinkan tim untuk mendapatkan umpan balik tentang struktur dan navigasi aplikasi tanpa membingungkan pengguna dengan detail visual yang lebih kompleks dalam MidFi atau HiFi.

dengan cepatnya pembuatan wireframe LoFi proses mengumpulkan feedback dari client dan menjadi lebih cepat, dengan begitu kinerja tim menjadi lebih efisien.

Pembuatan LoFi wireframe di Figma

Di modul ini aku akan memberikan contoh pembuatan wireframe LoFi sederhana untuk aplikasi notes di android, mulai dari cara pembuatan, tools yang di gunakan, serta proses perancangan dari layout aplikasi

1. Buat frame untuk memulai designing

Setelah membuat project baru, kita dapat membuat atau menamakan page dengan nama “Wireframe-LoFI” di Figma untuk memudahkan kita membedakan fungsi dari setiap page.

Untuk membuat frame, kita hanya perlu menekan tombol “F” di keyboard untuk memilih frame tool, setelah frame tool terpilih, akan muncul sidebar berisi template dari frame, di sini kita bisa memilih ukuran atau rasio dari display yang ingin kita buat, di sini aku memilih “iPhone 14&15 pro max”, setelah memilih jenis display, frame akan otomatis terbuat di workspace.

2. Mapping area di wireframe

Mapping adalah proses di mana kita membuat area di frame yang sudah kita buat kemudian kita berikan batasan area di mana area tersebut berfungsi untuk membantu membedakan wilayah dari bagian-bagian komponen design yang kita buat.

Di sini aku membuat 3 bagian di dalam frame, yang pertama ada top navbar, kemudian main screen, dan yang terakhir adalah bottom navbar, dengan adanya mapping ini, designer dapat membedakan lebih jelas layout yang nantinya di isi oleh design komponen yang client inginkan.

3. Naming

Ini adalah proses opsional di pembuatan wireframe project pribadi, akan tetapi jika kita bekerja di dalam tim di mana ada lebih dari satu designer yang di libatkan, penamaan dari setiap bagian merupakan hal penting agar designer lain yang bertugas mengubah bentuk wireframe LoFi menjadi prototype atau wireframe HiFi dapat mengerti dengan jelas fungsi dari setiap bagian.

4. Membuat Top Navbar

Setelah membuat map dari design yang ingin kita buat, kita bisa langsung mengubah area yang sudah kita mapping menjadi design komponen yang ingin kita buat, di sini kita mulai dari pembuatan Top Navigation atau Top Navbar.

5. Membuat Bottom Navbar

Pembuatan bottom navbar kurang lebih sama dengan pembuatan top navbar, akan tetapi perlu di ingat setiap design di wireframe LoFi harus memenuhi standard dari apa yang di inginkan client, untuk contoh, sebuah button yang kita design di LoFi wireframe harus di buat dan di tempatkan berdasarkan fungsi dari button tersebut

6. Membuat Main Screen

Main screen adalah bagian utama dari aplikasi, Main screen adalah layer yang paling bebas untuk di design, di contoh yang di buat, aku membuat placeholder untuk card yang nantinya akan berisi notes card untuk menyimpan data dari notes yang di save

Tahap Selanjutnya

Setelah membuat LoFi wireframe dari aplikasi yang kita ingin buat, dan kita merasa sudah puas dengan hasil dari layout yang terlihat, kita bisa lanjut ke step selanjutnya yaitu pembuatan HiFi wireframe, di modul berikutnya kita akan membahas tentang HiFi wireframe…