Wireframe merupakan kerangka dalam mendesain sebuat web. Tujuannya yaitu mempermudah dalam mengatur tata letak yang diinginkan di sebuah web nantinya. Nah, di sini saya akan menunjukan cara membuat Wireframe dengan menggunakan aplikasi Figma. Figma tentunya sudah akrab di telinga para desainer, aplikasi yang mudah dipakai terlebih lagi untuk para pemula. Aplikasi ini juga memperbolehkan anda untuk menggunakan bahasa pemprograman.
Berikut cara membuat Wireframe menggunakan Figma:
1. Buka Figma dan Buat New File
Berikut adalah tampilan lembar kerja Figma yang akan kita gunakan. Anda perlu login terlebih dahulu untuk menampilkan lembar kerja ini.
2. Buat Frame
Tekan simbol frame tersebut seperti di gambar atau bisa juga dengan menggunakan shortcut F.
3. Pilih Frame
Berikut merupakan beberapa pilihan Frame yang ada. Di sini saya akan memilih frame Desktop.
Berikut merupakan tampilan halaman setelah kita memilih Frame Deskstop.
4. Buat Gambaran Menu
Untuk membuat menu-menunya, kita menggunakan Rectangle di sini dengan menekan tombol seperti di atas atau bisa juga dengan menggunakan shortcut R. Apabila anda mau membuat menbentuk lainnya juga bisa. Di Figma terdapat pilihan bentuk yang tersedia yang dapat anda gunakan. Anda juga bisa membuat bentuknya tersendiri.
Buat bentuknya seperti gambar di atas. Bentuk tersebut yang akan nanti kita jadikan menu.
5. Buat Katalog Produk
Buat bentuk seperti ini di bawah bentuk menu. Setelah buat bentuk seperti ini, kita akan tambahkan bentuk untuk letak informasi produk lainnya.
Buat bentuk menimpa dengan bentuk sebelumnya, jangan lupa untuk bedakan warnanya agar lebih mudah untuk membedakan. Setelah membuat katalog produk ini selesai, kita gandakan menjadi enam kali untuk memenuhi halaman.
Jadilah seperti gambar di atas, akan terdapat katalog produknya. Di atas katalog produknya bisa ditambahkan bentuk untuk tempat memberitahuan bahwa yang di bawahnya merupakan katalog produk baru.
6. Buat Menu Search Bar
Buat menu Search Bar di bagian pojok kanan di atas bentuk menu yang kita buat sebelumnya.
7. Buat Menu Keranjang, Produk yang disukai dan Informasi Pelanggan
Buat menu-menu tersebut di atas bentuk menu yang kita buat juga. Gandakan menjadi tiga seperti di gambar.
Begini bentukan menu-menu yang sudah kita buat. Untuk bagian tengah atas, juga bisa dibuat seperti digambar ya, tujuan dibuat seperti di gambar yaitu nantinya untuk letak banner web kita.
Berikut hasil dari Wireframe yang sudah kita buat. Terdapat banner, katalog produknya, dan menu-menu.
Sekian cara membuat Wireframe dari saya dengan menggunakan aplikasi Figma.
.png)
0 Komentar