Wireframe adalah kerangka atau coretan kasar untuk penataan item-item pada halaman website sebelum proses desain sesungguhnya dimulai. Contoh item-item yang bisa ditata diantaranya banner, header, content, footer, link, form input, dll. Biasanya proses ini ditugaskan kepada UI Designer. Untuk merancang wireframe sang UI Designer bisa menggunakan coretan tangan di kertas ataupun menggunakan tools desain khusus wireframing. Secara visual wireframe hanya berupa garis dan kotak yang mengatur tata letak elemen-elemen pada website.
Manfaat Wireframe
Dengan adanya hal ini, web developer sangatlah terbantu pada pekerjaan mereka agar dalam proses pengembangan dapat terstruktur dan terarah. bayangkan bila tidak menggunakan wireframe terlebih dahulu mungkin saja dalam proses pengembangan sering terajadi revisi/perbaikan yang sangat memperlambat pekerjaan.
Elemen Wireframe
1. Desain Informasi
Pada elemen ini biasanya bersumber dari hasil riset apa saja konten atau informasi yang ingin disampaikan, yang dapat diilustrasikan sebagaimana pada saat presentasi di sekolah atau kampus, haruslah memiliki informasi yang terpercaya. Contohnya form input, thumbnail, gambar, link, paragraf, dll.
2. Navigasi
User interface tentu haruslah memiliki tampilan yang mudah digunakan, salah satu hal penting dalam website adalah navigasi. Diibaratkan navigasi adalah kompas yang berguna untuk memberikan petunjuk bagi pengguna agar tidak membingungkan, jika hal itu terjadi kemungkinan besar pengguna akan meng-close halaman website yang telah dibangun. Manfaat dengan adanya navigasi terlihat profesional karena lebih rapih konten
3. Desain Interface
Pada bagian ini dimana proses diseleksi dan penempatan elemen misalnya tombol, link, judul, text-align, font-size, dll. Yang bertujuan sebagai media bagi pengguna dalam berinteraksi dengan tampilan.
Perbedaan Wireframe dengan Mockup dan Prototype
Perbedaan yang mendasar dari Wireframe dan Mockup dapat dilihat dari tingkat fidelity, arti kata fidelity sendiri artinya presisi, termasuk kedalam low fidelity sedangkan Mockup teramasuk high fidelity, keduanya masih bersifat statis. Untuk Prototype sudah bersifat dinamis sehingga dapat berinteraksi dengan user dengan cara mengklik pada interface.
Yang telah disinggung sebelumnya bahwa low fidelity adalah Design yang tingkat presisi nya masih rendah. Sering disebut sebagai wireframe dan memang bertujuan untuk menentukan tata letak. sedangkan high fidelity adalah Design yang tingkat presisinya tinggi. Sudah memiliki warna, ukuran , jarak dan bentuk elemennya juga sudah dibuat dengan tingkat presisi dan akurasi yang detail.
Keuntungan Menggunakan Wireframe
1. Memastikan konsep fokus pada user
Menurut Career Foundry, wireframe adalah cara pengguna dapat dengan mudah memberikan masukan dan saran mengenai desain website atau aplikasi pada tahap wireframing.
Hal ini juga mempermudah stakeholder berkomunikasi dan memberikan ide pada desainer.
Selain untuk mendapatkan masukan dari pengguna dan stakeholder, proses wireframing juga bertujuan untuk mengidentifikasi titik masalah yang dialami pengguna.
Informasi yang diperoleh saat tahap wireframing dapat digunakan untuk memperbaiki konsep produk dan rancangannya.
Selain itu, juga digunakan desainer untuk mengukur dan menilai bagaimana pengguna website atau aplikasi berinteraksi dengan antarmuka yang didesain.
Informasi-informasi ini digunakan desainer untuk memahami pengguna lebih baik dan membuat produk yang mudah serta nyaman digunakan semua orang.
2. Memperjelas fitur
Ketika mengomunikasikan ide desain kepada klien, lebih baik gunakan bahasa yang sederhana dan cara yang mudah dipahami.
Nah, wireframing merupakan metode yang tepat untuk itu.
Dengan wireframing, kamu bisa lebih mudah mengomunikasikan fitur, fungsi, dan tujuan dari sebuah web atau aplikasi.
Stakeholder akan dapat mengukur berapa ruang yang perlu dialokasikan untuk fitur-fitur yang dirancang, menghubungkan arsitektur informasi pada desain visual, dan memperjelas fungsionalitas sebuah web atau aplikasi.
Wireframing membuat seluruh elemen dan fungsi desain lebih jelas.
Selain itu, hal ini juga mempermudah pemahaman tentang cara kerjanya sehingga keputusan-keputusan tepat dapat dibuat sebelum tahap perancangan selanjutnya.
3. Cepat dan murah
Salah satu alasan disukai oleh banyak desainer UI dan UX adalah karena mudah dan murah untuk dibuat.
Cukup dengan kertas dan pulpen, kamu bisa dengan cepat membuat sketsa tanpa harus mengeluarkan uang.
Selain itu, ada banyak tools dan software yang bisa membantu desain wireframe secara digital dengan mudah.
Tipe-Tipe Wireframe
Terdapat tiga tipe utama wireframe yaitu low-fidelity wireframe, mid-fidelity wireframe, dan high-fidelity wireframe.
Perbedaan ketiga tipe wireframe ini adalah detail informasi yang ditampilkan.
1. low-fidelity
Wireframe low-fidelity merupakan representasi visual yang paling dasar.
Biasanya, desain wireframe low-fidelity digunakan sebagai titik awal proses desain wireframe.
2. mid-fidelity
Kebanyakan desainer UI dan UX menggunakan wireframe mid-fidelity.
Wireframe mid-fidelity memiliki detail yang lebih baik dibanding low-fidelity.
Biasanya, wireframe mid-fidelity dibuat dengan warna hitam putih atau sedikit abu-abu untuk memperjelas elemen-elemen yang ada.
Tool yang bisa digunakan untuk membuat wireframe mid-fidelity adalah Sketch atau Balsamiq.
3. high-fidelity
Tipe ini didesain dengan layout pixel-specific.
Rencana gambar dan konten sudah ditampilkan jelas dengan tipe ini beserta detail-detail lainnya.
Biasanya, high-fidelity dibuat ketika konsepnya benar-benar matang dan desainer sudah siap untuk pengerjaan bagian yang lebih rumit seperti sistem menu atau peta interaktif.
Bukan hanya pensil saja dalam pengerjaannya, agar lebih indah gunakanlah stabilo dan spidol yang bertujuan memberikan tanda khsusus kepada elemen yang dirasa penting. misalnya tombol submit, tombol download, tombol login, dll.
Cukup sekian, semoga proyek website anda menjadi website yang bukan hanya baik pada sistem tetapi baikpula pada tampilan agar pengguna betah dan menjadi pelanggan setia. Jika dirasa bermanfaat bisa dibagikan kepada teman-teman agar merasakan manfaatnya.
Kelola penggajian bulanan perusahaan menjadi mudah dengan aplikasi otomatis JojoPayroll. Semua perhitungan telah disesuaikan dengan Kebijakan Perburuhan Indonesia, di mana basis data karyawan dapat diintegrasikan dengan pajak pribadi, asuransi, tunjangan, dan reimbursement. Dengan HRIS Integration, JojoPayroll menjadikan perhitungan Anda lebih mudah karena dapat dilakukan integrasi data untuk otomatisasi kehadiran sehari-hari, cuti, lembur, dan workshift. Gunakan JojoPayroll, untuk solusi Payroll perusahaan anda
