Tutorial membuat wireframe website di figma

Hi everyone!

Aku mau ngasih tutorial terkait membuat wireframe website di figma. Untuk kalian yang ingin membuat desain UI/UX pastinya sebelum membuatnya kalian melakukan tahap sketsa. Dalam pembuatan sketsa biasanya kita menuangkan ide dalam bentuk kasar di kertas atau sketchbook, dll. Namun, agar lebih rapi dan mudah dipahami, tahap sketsa ini bisa kita lanjutkan ke wireframe digital menggunakan tools seperti Figma. Wireframe sendiri adalah kerangka sederhana dari tampilan website/aplikasi, yang berfungsi untuk menggambarkan struktur halaman, penempatan elemen, serta alur navigasi.

Wireframe akan memudahkan kita dalam menuangkan ide berbentuk visual menggunakan bentuk bangun datar seperti persegi, persegi panjang, maupun lingkaran. Bentuk datar yang digunakan sangat memudahkan kita dalam mengatur layout atau tata letak website kita seperti apa nantinya bila sudah diaplikasikan menjadi desain fixnya. Wireframe tentunya masih berbentuk bangun datar yang masih polos atau biasanya hanya menggunakan warna monokrom seperti abu-abu karena wireframe adalah pondasi atau dasar dalam membuat desain UI/UX sehingga belum ada detail seperti warna dan gambar.

Umumnya dalam desain wireframe terdiri atas Header, Navigation, Hero section, Main, Footer, dan Header tambahan.

Header: terletak di ujung website atau bagian teratas dari website yang biasanya berupa logo, nama website, atau ada juga search bar

Navigation: terletak berdampingan dengan header dan biasanya berupa menu yang mengarahkan kita ke dalam isi websitenya. Contoh : Home, about dll.

Hero section: terletak di bagian paling atas setelah header dan biasanya berupa banner atau headline dari websitenya.

Main: merupakan bagian inti dari websitenya dan biasanya berupa deskripsi singkat tentang perusahaan, produk apa saja yang ditawarkan, kategori produk, promo/flash sale, ulasan produk, dan menu add to cart (menambahkan produk ke keranjang)

Footer: terletak di paling bawah dan biasanya berupa kontak, alamat, sosial media, kebijakan privasi.

Header tambahan: biasanya terletak dibagian yang sama dengan footer dan hanya menjadi highlight saja.

Setelah kalian mengetahui apa saja yang ada di wireframe, maka langsung saja yuk kita buat wireframenya. Ora usah ca ci cu langsung aja di let's go in~~

Langkah pertama ialah tentunya kalian membuka Figma (boleh website atau aplikasi). Setelah kalian buka maka akan ada tampilan awal seperti ini

Selanjutnya kalian klik menu yang design

Kalian akan melihat tampilan awal seperti ini

Kemudian pada bagian toolbar dibawah kalian klik region tools disebelah tombol kursor untuk membuat frame. Region tools >> Frame

Pilih ukuran frame yang digunakan untuk website yaitu ukuran dekstop (1440 × 1024 px)

Jika sudah memilih maka frame akan muncul di kanvas

Membuat Header Dan Navigation

Untuk membuat header kita akan menggunakan bentuk persegi panjang. Untuk menggunakan bentuk persegi panjang, kita akan menggunakan tools shape rectangle.

Selanjutnya kita buat rectanglenya di dalam frame. Saya menggunakan ukuran 1440 × 148 px

Kemudian kita akan menambahkan logo di pojok kiri atas. Saya menggunakan eclipse shape atau lingkaran.

Untuk membuatnya klik shape tool >> eclipse. Agar lingkaran simetris kalian bisa sembari menekan keyboard shift ketika membuat lingkaran.
Agar memudahkan, kita beri warna lingkaran dengan warna hitam.

Kemudian kita akan menambahkan search bar (optional). Kita gunakan kembali rectangle tool. Saya menggunakan ukuran 485 × 41 px.
Jika sudah kita akan menumpulkan sudut-sudutnya menggunakan corner radius yang terletak di menu sebelah kanan. Saya menggunakan 20 saja cornernya.

Setelah itu tambahkan icon search. Kalian bisa mendapatkannya dari assets yang ada.
Klik tool action >> pilih menu assets >> pilih tombol search yang diinginkan

Ganti warna tombol dengan warna putih.
Tambahkan rectangle kecil di dalam search bar untuk menambah menu "search here". Saya menggunakan ukuran 160 × 18. Jika sudah tampilannya akan seperti ini.

Selanjutnya kita tambahkan lagi beberapa persegi panjang untuk menu home, about, menu cafe (karena saya memilih tema ini), dan yang terakhir contact.

Membuat Hero Section

Untuk membuat hero section, saya menggunakan pen tool karena saya akan menggunakan model yang berbeda, bkn persegi panjang seperti biasa.

Kemudian kita ke bagian tools dibawah dan pilih pen

Buat pola seperti ini

Selanjutnya kita buat sudut-sudutnya melengkung dengan corner radius. Saya pakai 18 saja cornernya.

Hasilnya akan menjadi seperti ini

Setelah itu kita tambahkan dua persegi panjang ukuran 222 × 28 (kecil) untuk atas dan ukuran 342 × 34 (besar) untuk bawahnya. Desainnya akan jadi seperti ini

Membuat Main (Konten Utama)

Untuk membuat konten utama kita awali dengan membuat deskripsi toko. Saya akan menggunakan rectangle tools. Masing-masing ukuran 612 × 264 (besar) dan 213 × 230 (kecil). Persegi panjang yang ukuran besar diletakkan tepat dibawah hero section dibagian kiri.

Setelah itu kita tambah lima kotak untuk kategori produk di bawah bagian kanan bawah. Masing - masing kotak berukuran 121 × 61 dan kita copy sebanyak 4 kotak. Kita copy menggunakan shortcut CTRL + C kemudian CTRL + V atau bisa juga menggunakan CTRL + D agar lebih cepat. Desain akan terlihat seperti ini

Kemudian kita akan membuat beberapa persegi menggunakan rectangle seperti biasa untuk mewakili masing-masing kategori yang best seller. Saya menggunakan persegi ukuran 198 × 249 dan 145 × 129 (untuk foto produk), serta ukuran 96 × 22 untuk harga.

Tambahkan lingkaran kecil ukuran 32 × 32 dan tanda plus (cari di assets dengan keyword "plus")

Letakkan persegi ukuran besar dari sebelah kiri dibawah persegi profil toko kemudian tumpuk dengan persegi ukuran kecil untuk foto produk di atasnya dan tambahkan lagi persegi paling kecil dibawah. Taruh lingkaran di sebelah kanan harga.