Latihan Membuat Mockup

Menyiapkan Project

Anda telah mempelajari berbagai macam teori elemen dasar desain visual dan cara mengaturnya. Selain itu, Anda juga sudah belajar tentang prinsip-prinsip dasar yang membuat desain lebih rapi dan menarik. Nah, sekarang saatnya untuk menerapkan ilmu-ilmu tersebut dalam sebuah latihan membuat Mockup. Mockup adalah desain yang menunjukkan hasil akhir produk yang bersifat statis. Ia berupa tampilan masing-masing halaman yang sudah dipoles dengan ilustrasi, ikon, warna, dan font yang berbeda sebagaimana produk aslinya. Pada latihan ini kita akan memanfaatkan Wireframe yang sebelumnya sudah kita buat sebagai referensi dalam membuat Mockup, yaitu sebuah halaman Home pada aplikasi pemesanan kopi seperti berikut:

dos:68f8b1e383ff0faf0c2ed3db16ea20f420211005163313.jpeg

Sudah siap? Mari kita mulai berlatih dengan mengikuti langkah-langkah berikut:

Menyiapkan Project

Silakan buka kembali project Figma pada latihan sebelumnya. Anda dapat menemukannya pada halaman utama Figma seperti berikut:

Anda juga dapat menggunakan tautan berikut untuk melihat wireframe dari studi kasus kedai kopi: Wireframe Aplikasi Pemesanan Kopi.
Supaya lebih mudah dalam pengaturan desain, buatlah halaman baru pada project tersebut. Caranya Klik tanda panah ke bawah pada pojok kanan atas. Kemudian klik ikon tambah (+) untuk Add new page.

Beri nama Hi-fi dan tekan Enter. Anda juga bisa mengganti nama halaman Page 1 dengan cara klik dua kali dan ganti namanya dengan Lo-fi. Sehingga, terdapat dua halaman seperti ini:
Sama seperti ketika membuat Wireframe, mari kita buat Frame untuk halaman Home terlebih dahulu. Caranya Klik menu Frame tool (F) yang berbentuk seperti tanda hashtag (#) dan buat ukurannya sama dengan yang ada di Wireframe, yakni 360x788. Kemudian ganti namanya menjadi Home.