Apa itu Wireframe?

Apa itu wireframe? Wireframe merupakan sebuah kerang yang memberikan gambaran kasar pada sebuah halaman website atau aplikasi sebelum proses design sesungguhnya dimulai. Wireframe juga menjadi alat komunikasi yang efektif dalam proses pembuatannya. Designer akan menguji relasi sebuah produk, menerima feedback, dan juga bahan pertimbangan lainnya lewat wireframe ini.

Pada umumnya desain wireframe akan berwarna hitam dan putih. Wireframe akan berfokus pada gambaran besar sebuah tampilan produk. Contoh elemen-elemen yang bisa di tata pada wireframe seperti banner, header, content, footer, form, dll. Pembuatan wireframe ini biasanya ditugaskan kepada seorang UI Designer. Untuk membuat sebuah wireframe bisa dengan coretan tangan maupun tools khusus wireframing.

 

Manfaat Wireframe

Dengan adanya wireframe, web developer menjad lebih terstruktur dan terarah dalam proses pengembangan. 

Elemen-Elemen Pada Wireframe

1. Desain Informasi

Elemen ini biasanya bersumber dari sebuah riset konten atau informasi yang ingin disampaikan. Contohnya seperti form input, thumbnail, gambar, paragraf, link, dll.

2. Navigasi

Sebuah user interface tentunya harus memiliki tampilan yang mudah dilihat dan tidak membingungkan atau ngalieurkeun. Navigasi berguna untuk memberikan petunjuk pada user agar tidak membingungkan.

3. Desain Interface

Bagian ini bertujuan sebagai media bagi user dalam berinteraksi dengan tampilan, misalnya tombol, link, text align, font-size, dll.

 

Perbedaan Wireframe dengan Mockup dan Prototype

Pastinya dari kalian ada juga yang pernah mendengar dengan istilah mockup dan prototype. Lalu apa sih perbedaanya?

1. Wireframe merupakan rendering dasar. Wireframe memiliki tingkat fidelity atau presisi yang rendah. Hanya berfokus pada gambaran besar mengenail tampilan sebuah produk.
2. Berbeda halnya dengan wireframe, mockup memiliki tingkat presisi yang tinggi. Sudah memiliki ukuran, warna, jarak, dan bentuknya sudah dibuat dengan tingkat presisi yang lebih mendetail. Walaupun begitu, elemen-elemen didalamnya masih bersifat statis yang berarti tidak dapat berfungsi.
3. Sedangkan prototype adalah sebuah mockup yang sudah dinamis, mampu mendemostrasikan bagaimana seorang user akan berinteraksi dengan fitur-fitur yang ada. 

Keuntungan Menggunakan Wireframe

1. Memastikan konsep kepada user
2. Memperjelas fitur
3. Cepat dan tentunya murrah

 

Itulah tadi diatas penjelasan mengenai wireframe.