Penggunaan Wireframe Untuk Desain Awal Web
Wireframe dapat kita gunakan untuk media berkomunikasi dengan client / user yang akan memanfaatkan web kita. Dengan media wireframe kita bisa menampilkan sebuah rencana tampilan dan komponen apa saja yang memang sekiranya akan dijadikan fitur-fitur dalam website tersebut
Apa itu Wireframe?
Mungkin ada beberapa orang yang mempresepsikan bahwa wireframe dan prototype itu sama, namun sebenarnya keduanya itu beda.
Kalau wireframe adalah langkah awal dalam membuat desain web untuk menentukan komponen / struktur yang ada didalam web (ex: bisa dilihat gambar disamping).
Sedangkan prototype merupakan sebuah halaman website yang bisa dibilang semi-fungsional, untuk prototype sendiri biasanya sudah menampilkan tampilan GUI dan bisa kita jalankan meskipun belum maksimal. Biasanya dibuat dengan html css terkadang juga dengan javascript.
Kenapa Harus di Awali dengan Wireframe?
Dalam pembuatan sebuah web, akan lebih efektif jika saat pembuatan desain awal web kita terlebih dahulu membuat sebuah wireframe dari pada kita langsung mendesain dengan bentuk html / css, Karena, jika kita presentasikan desain awal ke client menggunakan bentuk html / css namun client meminta untuk merubah tampilan sesuai keinginannya. Ini malah akan merepotkan kita nantinya dalam merevisi tampilan.
Namun, jika kita membuat desain awal dengan wireframe, apabila client / user kurang begitu suka dengan tampilan awal yang kita buat dan ingin merubahkan, kita tidak perlu capek-capek coding karena kita bisa meng-customize tampilan wireframe dengan mudah.
Jadi, dengan wireframe kita akan lebih mudah untuk merevisi desain awal website yang kita buat sehingga memang cocok dengan apa yang diinginkan client / user yang nantinya akan menggunakan web tersebut. Ini akan lebih efisien dalam pengguaan waktu dan tenaga kita.
Aplikasi Yang digunakan Membuat Wireframe
Untuk aplikasi pembuat Wireframe sangat banyak juga pilihannya, anda bisa memanfaatkan secara gratis namun biasanya hanya untuk beberapa saat / saat kuota fitur untuk trialnya habis anda akan diharuskan untuk beralih menjadi PRO untuk tetap bisa memanfaatkan penggunaan aplikasi tersebut. berikut beberapa aplikasi pembuat wireframe.
Cacco
Mockingbird
Lumzy
MockFlow
Apa Saja yang Harus Ada di Wireframe?
Untuk pembuatan wireframe intinya adalah komponen / fitur yang nantinya akan kita masukkan harus dimuat dalam wireframe, entah itu ada di header, footer, sidebar, ataupun di content nya sendiri.
Kita juga bisa menambahkan elemen-elemen untuk pemanis tampilan nantinya dengan menampilkan menu navigasi, widget, pencarian dan elemen-elemen dasar lainnya. Mengenai detail yang kita buat sendiri itu tergantung seberapa kompleks sebuah aplikasi website yang akan kita buat nantinya.
Kalau kita ingin mempresentasikan kepada client yang akan memanfaatkan website kita, maka kita harus menampilkan tampilan detail secara formal dan tertata sedemikian rupa agar client lebih mudah faham. akan tetapi jika wireframe hanya menjadi bahan acuan kita untuk membuat sebuah website ya... ndak usah terlalu dipusingkan dengan proses wireframe hehe.
Jadi intinya untuk pembuatan wireframe ini cukup kita sesuaikan dengan kebutuhan kita, tidak ada standarisasinya wireframe harus begini-begini, itu semua tergantung dari tujuan kita dalam pembuatan wireframe tersebut.
Saya juga punya beberapa contoh wireframe prototype, yang sebenarnya ini tugas kuliah..hehe, berikut selengkapnya:
Saya juga punya beberapa contoh wireframe prototype, yang sebenarnya ini tugas kuliah..hehe, berikut selengkapnya:
Disitu sudah saya beri penjelasan dan juga link lengkap untuk akses di Cacco-nya, semoga bermanfaat bagi kawan-kawan sekalian. Mohon dikoreksi jika ada yang salah
Jangan lupa baca juga selengkapnya info tentang Seputar Multimedia DISINI
Jangan lupa baca juga selengkapnya info tentang Seputar Multimedia DISINI
1. Dilarang komentar SARA
2. Promosi boleh tapi dengan syarat (no sex, judi dan hal yang terlarang lainnya)
3. Cukup perhatikan nomor 1 dan 2 saja
4. Thank you for visiting