Sebelum masuk ke materi utama, ayo kita kenali APA ITU WIREFRAME? Wireframe 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.

Wireframe memungkinkan seorang developer dengan mudah mengerjakan pengembangan struktur dan arah dari website atau aplikasi yang akan dibangun. Bayangkan saja jika tidak adanya konsep ini, developer mungkin akan kebingungan saat website atau aplikasi telah jadi. Namun, setelah selesai diperiksa karena tidak membuat wireframe terlebih dahulu maka terdapat banyak revisi di setiap tampilan. Sehingga pekerjaan tersebut dapat memperlambat waktu.

sumber: https://www.dicoding.com/blog/wireframe-adalah

Nah, itu dia pengertian dari WIREFRAME sekarang langsung saja kita masuk ke materi utama yaitu BAGAIMANA CARA MEMBUAT WIREFRAME? 

Saat membuat wireframe kita harus paham unsur-unsur dasar di dalam desain agar desain kita terlihat menarik dan deskripsi website atau tampilan bisa di baca dengan jelas oleh pengguna., Saat ini saya memakai software FIGMA untuk mendesain WIREFRAME.


1. Buka Figma dan Buat File Desain Baru

Mulailah dengan mendaftar di Figma dan meluncurkan file baru. Kanvas awal adalah tempat Anda akan menghidupkan wireframe Anda.

2. Buat Papan Gambar Anda

Gunakan alat "Bingkai" untuk membuat papan gambar yang mewakili layar situs web Anda. Anda dapat memilih dari ukuran yang telah ditentukan sebelumnya atau membuat ukuran khusus.

3. Buat Bilah Navigasi dan Header

Bilah navigasi dan header merupakan bagian integral dari desain situs web. Di Figma, Anda dapat menggambar persegi panjang dan memberi label untuk mewakili elemen-elemen ini.

4. Sertakan Elemen Desain Dasar

Tarik dan lepas bentuk dasar untuk merepresentasikan gambar, kolom teks, dan tombol. Menjaga desain tetap sederhana pada tahap ini memungkinkan fleksibilitas dan iterasi.

5. Gaya dan Sejajarkan

Gunakan alat penyelarasan di Figma untuk mengatur elemen Anda dengan rapi. Konsistensi dalam ukuran dan jarak akan mem
buat wireframe Anda lebih mudah dibaca.


6. Buat Transisi (Koneksi)

Figma memungkinkan Anda menunjukkan alur pengguna dengan menghubungkan berbagai layar dan komponen dengan tautan interaktif.

sumber penjelasan: https://www.creativecorner.studio/blog/how-to-make-website-wireframe-in-figma