Wireframes, Tahapan Penting Web Design Yang Sering Diabaikan - Pondasi Pembuatan Website Dengan Html5, Css3, Dan Javascript - Bagian 4

: 128 | : 0 | : 12 September 2017 | Programming


Ryo Suwito
- Contributor

Tags | Wireframes | Web Design

Apa itu wireframes?

Wireframes dalam pemrograman website adalah sebuah proses untuk memvisualisasikan rencana kita membuat sebuah desain website ke dalam bentuk kerangka yang sederhana. Wireframes dibuat dengan tampilan sesederhana mungkin, biasanya hanya berupa bentuk geometri sederhana yang ditujukan untuk menggambarkan tata letak komponen komponen penyusun website kita. Tujuan utama dari pembuatan wireframe, biasanya untuk media kita menuangkan gagasan kepada klien tentang gambaran akhir bagaimana nanti website yang kita buat ini akan terlihat. Jadi disini kita beritahukan kepada klien tentang konten apa saja yang akan ada di website mereka nanti, apa saja fungsi komponen tersebut dan alur desain yang akan kita buat.

wireframes

Photo : Designed by Freepik

Wireframes seringkali di anggap sama dengan mockup, padahal tidak sama. Wireframe lebih menekankan pada penyampaian tata letak komponen, sementara mock up lebih menekankan tampilan akhir dari komponen tersebut, apakah berwarna merah, pesegi dengan drop shadow dsb.

Membuat wireframes sangat mudah, tidak perlu memakai software yang rumit. Banyak desainer website yang menggunakan secarik kertas dan pulpen untuk menggambarkan wireframes, kemudian mereka scan dan kirimkan kepada klien untuk meminta feedback.

Dengan wireframes, klien akan lebih fokus pada tata letak komponen. Itulah alasan kenapa kita hanya menggunakan gambar yang sederhana, karena jika kita memberikan mereka sebuah wireframes yang rumit dengan foto atau teks serta kotak berwarna warni, klien mungkin akan lebih fokus ke foto tersebut, atau mereka akan mengkritisi isi teks yang ada di wireframe bukannya terfokus pada tata letak website seperti yang kita harapkan.

Salah satu kekurangan dari wireframe adalah kita tidak bisa menunjukan posisi komponen web yang hanya akan tampil ketika kita mengklik komponen lain atau mengarahkan mouse ke sebuah komponen. Biasanya kita bisa menggunakan tanda panah untuk menunjukan komponen yang kita maksud.

Perlu diingat bahwa wireframes hanya akan bermanfaat jika kita mengerjakan sebuah website sebagai sebuah tim. Jadi wireframes dapat menjadi acuan oleh anggota tim yang lain tentang bagaimana hasil akhir yang diharapkan oleh klien.

Tapi, ketika kita hanya bekerja seorang diri dan klien juga hanya seorang individu, kita tidak perlu melewati proses wireframe. Langsung saja ke proses prototype dan biarkan klien mencoba desain kita dari browser mereka, dengan begitu klien bisa memberikan feedback yang lebih baik dari apa yang ia rasakan.

Photo Cover: Designed by Freepik

Login untuk melihat komentar


Powered by: