4 Tips untuk Membuat Wireframe Desain Web

Coba tanyakan pada para desainer, fase apa yang paling penting dalam proses desain?

Kebanyakan dari mereka pasti menjawab “brainstorming” dan mengkonsep adalah bagian terpenting dalam proses sebuah desain. Setiap desain hebat dimulai dengan sebuah ide, dan ini berlaku tidak hanya untuk desain logo atau ilustratif tetapi juga untuk desain website. 

Apakah produk akhir kamu berupa dokumen Photoshop, HTML dan CSS? Semua produk ini harus diawali dengan wireframe – kerangka visual yang menggambarkan tata letak konten, elemen interface, dan sistem navigasi. Ketika kamu mendemonstrasikan fungsionalitas desain kamu pada klien, ini dapat memberikan mereka opsi untuk memilih sehingga menghemat waktu pengerjaan kamu nantinya.  

Berikut tips untuk membuat wireframe desain web yang bisa kamu terapkan untuk proyek desain web kamu!

1. Gunakan Pensil dan Kertas

Terlepas dari semua kemajuan teknologi kami baru-baru ini, banyak desainer lebih suka memilah ide-ide mereka dengan sketsa kuno yaitu menggunakan pensil dan kertas. Menggunakan pensil dan kertas, mudah untuk membuat mockup tata letak dan mengorganisasi isi masing-masing halaman. 

Kelebihan dan kekurangan: Cepat dan sederhana tapi kurang praktis saat harus di share ke orang lain. 

2. MockingBird

Aplikasi berbasis web yang mudah digunakan bernama MockingBird ini bagus untuk membuat maket situs web yang cepat dan fungsional. Ini memiliki user interface yang intuitif, penuh dengan elemen web yang dibuat sebelumnya dan memungkinkan kamu untuk menautkan halaman bersama. Selain itu, kamu dapat bekerja secara kolaboratif dalam sebuah proyek dengan anggota tim atau klien kamu.

Kelebihan dan kekurangan:

• Bekerja dari browser pada mesin apa pun
• Kemampuan untuk menautkan halaman
• Mudah untuk berkolaborasi
• Gratis/Harga terjangkau
• Pilihan terbatas untuk untuk mengerjakan lebih dari dua proyek, kamu perlu upgrade ke versi berbayar.

3. SimpleDiagrams

SimpleDiagrams, sangat sederhana, mudah digunakan, dan menyenangkan. Ada berbagai pilihan gaya atau background yang bisa kamu pilih. Kamu juga bisa dengan mudah menyimpan hasil desain kamu dalam format .png sehingga bisa dikirim via email ke klien atau mengunggahnya di situs 99designs. Meskipun program ini tidak memiliki fungsionalitas mendalam dari beberapa program wireframing programs lainnya, program ini terlihat apik dan kamu pasti bakal menikmati pengerjaan dengan program ini. 

Kelebihan dan kekurangan:

• Menyenangkan!
• Kompatibel di semua sistem operasi Mac, Windows, Linux
• Gaya gambar yang artistik
• Fungsionalitas terbatas
• Harus bayar setelah proses trial habis

4. Mockups

Jika kamu cukup beruntung memiliki iPad, kamu mungkin ingin mencoba melakukan brainstorming dan membuat konsep desain sambil nyantai di sofa pakai program iMockups. Program ini punya fitur snap-to-grid yang memungkinkan penyelarasan piksel dengan sempurna. Kamu dapat dengan mudah berbagi file yang bisa diedit dengan klien atau mengekspor ke format universal seperti .png atau .jpg.

Kelebihan dan kekurangan:

• Bisa diakses hanya melalui iPad 
• Fungsionalitas Snap-to-pixel
• Hasil profesional dengan interface yang menyenangkan