> ## Documentation Index
> Fetch the complete documentation index at: https://v1-learn.neoartd.my.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Latihan Membuat Mockup

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](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:68f8b1e383ff0faf0c2ed3db16ea20f420211005163313.jpeg)](# "dos:68f8b1e383ff0faf0c2ed3db16ea20f420211005163313.jpeg")

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

## Menyiapkan Project 

1. Silakan buka kembali project Figma pada latihan sebelumnya. Anda dapat menemukannya pada halaman utama Figma seperti berikut:\
   [![dos:fd4aae77c58c1a0a422dcbd2612f1f8220211005163625.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:fd4aae77c58c1a0a422dcbd2612f1f8220211005163625.jpeg)](# "dos:fd4aae77c58c1a0a422dcbd2612f1f8220211005163625.jpeg")\
   Anda juga dapat menggunakan tautan berikut untuk melihat wireframe dari studi kasus kedai kopi: [Wireframe Aplikasi Pemesanan Kopi](https://www.figma.com/file/nahl4zkw5PVbWYaNG9uQqR/?node-id=210%3A437).

2. 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**.\
   [![dos:97259ad43af06a7dc14b659cd733e9ac20211005163313.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:97259ad43af06a7dc14b659cd733e9ac20211005163313.jpeg)](# "dos:97259ad43af06a7dc14b659cd733e9ac20211005163313.jpeg")\
   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:[![dos:2bdf21a48a01dbc27d9e922d431d38af20211005163313.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:2bdf21a48a01dbc27d9e922d431d38af20211005163313.jpeg)](# "dos:2bdf21a48a01dbc27d9e922d431d38af20211005163313.jpeg")

3. 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**.\
   [![dos:b960cf525ed4b75a38bc5b50047e09ab20211005163313.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:b960cf525ed4b75a38bc5b50047e09ab20211005163313.jpeg)](# "dos:b960cf525ed4b75a38bc5b50047e09ab20211005163313.jpeg")