1. Home
  2. Docs
  3. Kurikulum Flutter Mobile Apps
  4. Materi week 3
  5. Hari 11-Mockup Figma

Hari 11-Mockup Figma

Sebelum membuat aplikasi baik itu web based atau mobile biasanya akan dibuat terlebih dahulu sebuah prototipe atau desain mockup. Secara umum proses desain melingkupi : sketsa (level konsep) -> Wireframe (level komponen) -> Mockup/Prototype (level menghias/interaktif).

Tools untuk membuat Mockup yang direkomendasikan adalah Figma (Silahkan sign up / buat akun figma).

Tahap Sketsa (Konsep)

Tahap yang penting sebelum mendesain wireframe atau bahkan mockup adalah riset user. Pada bagian ini kita diminta untuk memetakan proses bisnis menjadi halaman-halaman (screens) yang dibutuhkan untuk mencapai tujuan (goals) tertentu.

Cara memetakan proses bisnis tersebut salah satunya dengan menggambar diagram alir (flow chart). Contohnya sebuah aplikasi untuk pemesanan makanan seperti berikut:

Membuat sketsa

Tahap selanjutnya adalah mulai menggambar sketsa berdasarkan satu per satu step yang ada pada diagram alir menjadi sebuah sketsa kasar. Sketsa bisa dibuat dengan coretan di atas kertas atau bisa menggunakan tools sketsa sederhana di komputer.

Setiap sketsa harus berpedoman pada dua pertanyaan dasar:

  • Apa tujuan dari halaman/screen tersebut dibuat?
  • Bagaimana halaman/screen tersebut dapat membantu user mencapai tujuan(goal)?

Berikut ini contoh sebuah sketsa dari halaman Home aplikasi pemesanan makanan:

Jika diperhatikan sketsa di atas hanya digambarkan dengan blok-blok komponen berbentuk persegi sederhana saja.

Tahap Wireframe

Tahap selanjutnya setelah membuat sketsa adalah menggambar wireframe berdasarkan sketsa yang sudah dibuat pada tahap konsep. Membuat wireframe artinya menggambarkan komponen-komponen pada sketsa dengan komponen yang lebih detail misalkan : komponen input (form), komponen button, komponen text, atau komponen gambar dan lain-lain.

Memilih Frame

Agar lebih aktual dengan ukuran sebenarnya, gunakanlah frame sesuai dengan yang diinginkan. Misalkan pilihlah device Android atau iPhone.

Referensi:

Figma

Pada tahap membuat Mockup diperlukan aplikasi yang dapat membantu komunikasi antara Client, Designer, dan Developer. Salah satu tools yang bisa digunakan adalah Figma (tools lain yang umum digunakan adalah Sketch, Adobe XD, Adobe Ilustrator, dan lain-lain).

Terdapat beberapa kelebihan dari Figma dibandingkan dengan aplikasi/tools lainnya, antara lain:

  • Salah satunya adalah kemampuannya dalam melakukan kolaborasi antar desainer. Figma memungkinkan 2 atau lebih UI Designer untuk berkerja sama secara langsung dalam satu waktu.
  • Dan karena figma berbasis web, sehingga user dari figma tidak harus melakukan proses instalasi aplikasinya.
  • Terlebih, figma cenderung memiliki banyak fitur yang dapat digunakan secara gratis.

Untuk mengetahui bagaimana cara menggunakan Figma terutama dalam membangun suatu desain aplikasi mobile, dapat langsung mengunjungi bagian Tugas 11 Mockup.