Wireframe atau bisa juga disebut dengan blueprint pada suatu desain adalah sebuah kerangka untuk menata suatu item di laman website atau aplikasi. Pembuatan wireframe biasanya dilakukan sebelum pembuatan produk tersebut dilakukan. Item yang berkaitan seperti teks, gambar, layoiting, dan sebagainya.
Wireframe biasa ditugaskan kepada ahlinya, yang biasa dikenal sebagai UI/UX Designer. Untuk melakukannya, seorang UI/UX Designer menggunakan kertas coretan atau software khusus untuk wireframing. Wireframe hanya menampilkan lembaran yang terdiri dari kotak-kotak dan garis-garis untuk mengatur tata letak berbagai elemen pada website atau aplikasi.
Setelah mengetahui tentang pengertian wireframe, selanjutnya kita akan membuat wireframe website sederhana dengan menggunakan figma.
Kali ini kita akan mencoba membuat wireframe untuk website toko online. Berikut langkah-langkah pembuatannya:
- Buka figma, lalu login
- Setelah berhasil log in, buat file baru
- Setelah membuat file baru, selanjutnya buatlah frame dengan cara klik region tools - frame
- Pilih frame desktop dengan ukuran 1440x1024
- Setelah berhasil membuat frame selanjutnya kita akan membuat wireframe. Tetapi sebelum itu kita harus tau lebih dahulu bahwa setiap website memiliki layout yang berbeda-beda. Namun, umumnya layout sebuah website terdiri dari: Header, Nav, Main, Footer.
- Header: Bagian ini biasanya berisi informasi awal dari sebuah website, biasanya diisi dengan nama website, logo,dll.
- Nav: Bagian ini berisikan menu atau link navigasi suatu website.
- Main: Bagian ini berisi konten utama di dalam website. Pada bagian main biasanya terdapat bagaian-bagian kecil yang lain.
- Footer: bagian ini berisikan informasi akhir dari sebuah website, biasanya diisi dengan nama perusahaan, logo, link sosial media, slamat, email, dll.
1. Membuat header
- Pertama kita akan masuk ketahapan pembuatan header terlebih dahulu.
- Klik shape tools - Rectangle, untuk membuat persegi
- Buatlah sebuah persegi panjang diframe. Persegi panjang ini akan digunakan untuk membuat header.
- Buatlah persegi panjang dengan ukuran yang kalian inginkan.
- Setelah itu kalian bisa mengubah warna persegi panjang yang telah kalian buat dengan klik Fill, lalu ubah dengan warna yang kalian inginkan.
- Selanjutnya, biasanya terdapat logo atau nama website pada bagian header. Jadi kita akan membuat penempatan logo dengan menggunakan text.
- Klik text tool untuk membuat text.
- Buat logo dengan text tool pada bagian header.
- Setelahnya buatlah sebuah persegi panjang untuk membuat kolom "search" pada bagaian header.
- Lalu ubah corner radius nya menjadi 31
- Tambahkan Effects - Drop shadow pada persegi panjang yang telah dibuat
- Untuk membuat profil, buatlah sebuah lingkaran dengan klik Shape tool - Ellipse.
- Setelahnya berilah Effects - Drop shadow dengan komposisi yang sama dengan persegi sebelumnya.
- Selanjutnya, tambahkan icon 'search' dan 'profil'
- Klik Plugins - Manage plugins, lalu pilih icon8
- Lalu cari pada kolom pencarian yang ada
- Setelahnya pilih icon yang kalian suka
- Atur icon yang telah dipilih agar sesuai dengan header
2. Membuat Nav
- Pertama, buatlah sebuah persegi panjang dibawah header
- Klik Shape tool - Rectangle
- Buatlah persegi tersebut agar berbeda warna dengan Header
- Selanjutnya, tambahkan text untuk membuat link pada bagian Nav
- Klik text tool lalu tambahkan link navigasi. Buatlah link navigasi sesuai dengan kebutuhan
- Silahkan sesuaikan dengan kebutuhan untuk jumlah link, jenis, ukuran, style font atau bahkan letak menu atau linknya
3. Membuat Main
- Pertama buat beberapa persegi untuk menyajikan produk yang ditawarkan
- Buatlah untuk beberapa kategori
4. Membuat Footer
- Buatlah sebuah persegi panjang dibawah halaman menggunakan warna yang sama dengan warna header
- Tambahkan info seperti email, seller center, atau media sosial yang dimiliki oleh perusahaan
- Tata informasi dengan rapih
0 Komentar