Suatu hari seorang klien mendatangi seorang web designer dan memintanya untuk membuat sebuah desain untuk web mereka. Mereka meminta untuk membuatkan sebuah web yang menampilkan portofolio mereka. Wow, dia mulai senang karena ini projek pertamanya.

Lalu sang designer langsung membuat semuat file html dan menambahkan nya sebuah css dengan hasil yang luar biasa indah, Sang designer tak berhenti disitu dia menambahkan animasi cantik dengan javascript. sempurna. senang sekali.

Lalu tiba-tiba klien anda memintanya merubah beberapa hal untuk desain, Dia kembali duduk di depan komputer meralat apa yang diminta. esoknya ketika telah jadi, klien muminta ralat lagi.

Setelah sekian puluh ralat kemudian baru, sang klient menyetujuinya.

Melelahkan bukan. Disinilah pentingnya wireframing bagi proses desain web. Pada dasarnya wireframing akan membuat jumlah koreksi atau ralat ketika melakukan coding akan berkurang karena kita telah memiliki gambaran jelas tentang layout sebuah web.

Selain itu hasil wireframing inilah yang akan kita perlihatkan kepada klien, jika diralat bukankah lebih mudah meralat gambar dari pada ratusan baris HTML

Contoh Wireframing untuk web portofolio

Gambar diatas contoh wireframing, meskipun bukan contoh yang efektif, tapi setidaknya bisa memberi gambaran bukan.

Pada saat wireframing gunakan bentuk bentuk sederhana seperti persegi panjang, bulat, dan tentu beberapa baris text. jangan buat wireframing dengan tampilan yang cantik karena hal tersebut terasa sia-sia. bukankah kita sedang menggambar sketsa bukan sedang mewarnai.

Wireframing bisa dilakukan menggunakan kertas atau mungkin dengan media digital.

Dengan kertas tentu kita menggunakan kertas dan pensil sebagai medianya.Jika memiliki dana yang lebih mungkin bisa menggunakan kertas yang memiliki garis atau sering disebut kertas milimeter.

Lalu jika berminat dengan media digital mungkin tools bernama ‘Pencil’  sangat cocok untuk digunakan karena Pencil dirilis dibawah GPL, jadi otomatis gratis. Sebenarnya banyak tool lainnya, tapi saya sering menemukan versi berbayar. Pencil dapat ditemukan pada webnya

GUI Pencil Project

Setalah hasil wireframing selesai, barulah code HTML nya kita buat. mudah bukan..

Selamat mencoba…