Pahami Dulu Yuk Apa itu Wireframe Sebelum Kamu Membuat Website!

Share on whatsapp
Share on facebook
Share on twitter
Share on telegram
Share on linkedin

Bagi Teman desty yang sudah cukup akrab dengan dunia UI/UX, apa itu wireframe bukanlah istilah baru. Namun, bagi yang lain, istilah tersebut cukup asing terdengar. Apakah wireframe itu merupakan bingkai kabel?

Nyatanya, wireframe memang merupakan bingkai, tapi bingkai untuk pembuatan website atau aplikasi.

Bingung? Sini desty jelasin di artikel berikut.

1. Kenalan Dulu dengan Wireframe Yuk!

Wireframe merupakan kerangka awal website atau aplikasi yang berkaitan dengan antarmuka atau interface. Sederhananya, wireframe ini merupakan cikal bakal tampilan website/aplikasi yang akan dibuat.

Dari wireframe, pada desainer UI/UX akan membuat dan mengembangkan aplikasi hingga menjadi bentuk yang sudah direncanakan sebelumnya.

Sampai sini paham ya?

Lalu, apa hubungannya dengan bingkai? 

Seperti yang desty jelaskan, wireframe ini merupakan rancangan dasar atau konsep awal yang terancang. 

Hanya dengan melihat wireframe-nya, bukan hanya designer UI/UX yang akan paham tapi juga klien dan developer-nya dalam pembuatan website/aplikasi.

Kalau masih bingung, coba perhatikan contoh berikut:

Pada contoh di atas, kamu bisa melihat gambar awal (paling kiri atas) sebagai tampilan antar muka (interface) suatu aplikasi. Gambar di samping kanannya menjelaskan tampilan aplikasi di salah satu menu. Di gambar-gambar berikutnya juga menjelaskan tampilan mengenai tampilan dan alurnya.

Jadi masing-masing gambar menjelaskan suatu interface aplikasi dan saling berkesinambungan. Hal yang sama juga berlaku dalam pembuatan website ya.

2. Lantas, Kapan Wireframe Dibuat?

Wireframe merupakan dasar. Karena hal tersebut, desainer UI/UX akan membuat wireframe terlebih dahulu.

Apa itu wireframe? Dalam hal ini harus ada 3 komponen utama, yaitu:

  • Layout utama seperti menu navigasi, sidebar, body, header.
  • Komponen interface misalnya link, logo, tombol, judul hingga font size.
  • Navigasi seperti tanpa panah, menu, keranjang belanja atau icon lainnya untuk memperjelas alur dan mempermudah user saat menggunakan aplikasi/website.

Jika sudah jadi, wireframe akan disampaikan dulu kepada klien. Tujuannya agar klien paham bagaimana alur serta tampilan dari website/aplikasi yang akan kamu buat.

Jika pun ada perubahan, kamu bisa segera merubah alur atau tampilannya sebelum wireframe tersebut kamu serahkan ke developer. Dengan begitu, baik klien atau pun developer sendiri akan lebih mudah memahami website/aplikasinya.

3. Manfaat Wireframe dalam Pembuatan Aplikasi/Website

Setidaknya ada 4 manfaat dari pembuatan wireframe yang akan Teman desty dapatkan, yaitu:

  • Menghemat waktu, tenaga dan biaya.
  • Membantu klien dan developer mengenai gambaran website/aplikasi sejak awal.
  • Pembuatan dan pengembangan web/aplikasi menjadi lebih terstruktur.
  • Mempermudah kerjasama dan koordinasi terutama antara desainer UI/UX dengan developer.

Karena manfaat tersebutlah, wireframe memiliki peranan yang cukup penting dalam proses pembuatan aplikasi/website.

Dari penjelasan desty di atas, Teman desty sudah ada sedikit gambaran tentang apa itu wireframe ya. Oh ya, jangan ragu untuk tinggalkan komentar agar desty bisa notice kamu dan membagikan info yang kamu perlukan. See you!

Kategori

Kategori

Topik

Topik

Share on whatsapp
Share on facebook
Share on twitter
Share on telegram
Share on linkedin
Artikel lainnya
Bisnis

3 Contoh Toko Online Yang Menarik Untuk Kamu Tiru

Bisnis

3 Cara Membuat Deskripsi Produk Online Yang Menarik

Uncategorized

3 Cara Jitu Supaya Jualan Laku di Instagram

Uncategorized

Belajar Digital Marketing Instagram Yuk Untuk Meningkatkan Pengunjung di Sosial Media

Desty Store

Buka toko dan belanja online di desty store

Buka toko baru, belanja online, kembangin bisnis, semuanya gampang pakai Desty!​

Mulai bangun bisnis online kamu di Desty

Dapatkan tips, informasi, dan inspirasi bisnis, marketing, juga media sosial GRATIS dari Desty Academy.

Mulai bangun bisnis online kamu di Desty

Dapatkan tips, informasi, dan inspirasi bisnis, marketing, juga media sosial GRATIS dari Desty Academy.

Mulai bangun bisnis online kamu di Desty

Dapatkan tips, informasi, dan inspirasi bisnis, marketing, juga media sosial GRATIS dari Desty Academy.

Bikin bisnis makin laris di Desty