Pengertian Wireframe, Elemen, Tipe, Tools, dan Manfaatnya
 |
| Wireframe |
A. Pengertian Wireframe
Wireframe adalah teknik yang digunakan oleh desainer yang memungkinkan mereka untuk menentukan dan merencanakan hierarki informasi desain mereka untuk situs web, aplikasi, atau produk. Wireframe hanya menampilkan lembaran yang terdiri dari kotak-kotak dan garis-garis untuk mengatur tata letak berbagai elemen pada website atau aplikasi.
Baca Juga: Layout: Pengertian, Elemen, Prinsip, Tujuan, dan Manfaatnya
Gambar rangka itulah yang dikenal dengan skema halaman atau blueprint layout halaman. Itu semua merupakan panduan visual yang mewakili kerangka tampilan aplikasi. Wireframe memungkinkan seorang developer dengan mudah mengerjakan pengembangan struktur dan arah dari website atau aplikasi yang akan dibangun.
Wireframe dibuat untuk tujuan mengatur elemen dan mencapai tujuan tertentu. Tujuan itu biasanya diinformasikan berdasarkan tujuan bisnis dan ide kreatif. Wireframe biasa ditugaskan kepada ahlinya, yang biasa dikenal sebagai UI/UX Designer.
B. 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, dan lain-lain.
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 rapi.
3. Desain Interface
Pada bagian ini di mana proses diseleksi dan penempatan elemen misalnya tombol, link, judul, text-align, font-size, dan lain-lain. Yang bertujuan sebagai media bagi pengguna dalam berinteraksi dengan tampilan.
C. Tipe Wireframe
Terdapat tiga tipe utama wireframe di mana perbedaan ketiga tipe wireframe ini ada pada 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, dan lain-lain.
D. Tools Wireframe
Untuk membuat suatu wireframe, alangkah baiknya Anda mengenal beberapa tools yang bisa Anda manfaatkan. Terdapat dua cara yang bisa Anda pakai, yaitu melalui software/aplikasi atau menggambar secara manual (hand sketching) pada kertas putih kosong.
Menggambar di kertas putih kosong memungkinkan desainer untuk dapat mengerjakan sebuah wireframe secara mudah dan cepat. Ini merupakan poin dasar bagi desainer awal karena mudah dan murah. Jika Anda memiliki skill menggambar yang baik, maka proses akhir dari wireframe dapat dilakukan sekaligus.
Jika Anda tertarik membuat wireframe menggunakan software atau aplikasi, ada beberapa tools yang recommended. Di antaranya adalah Figma, Zeppelin, Cacoo, Jumpchart, Gliffy, Adobe Illustrator, dan Mockflow Whimsical.
Dari tools tersebut, terdapat toolset dan fitur tambahan yang sangat membantu dalam pengerjaan suatu konsep desain. Harga yang ditawarkan pun bervariasi, ada yang gratis dengan fitur seadanya dan biaya bulanan dengan fitur lengkap.
E. Manfaat Wireframe
Penggunaan wireframe bukan tanpa sebab, tentunya ada kelebihan yang ditawarkan dari sebuah wireframe. Jika dibandingkan dengan pembuatan prototipe atau segala jenis desain layar mendetail, wireframe memiliki keunggulan dan manfaat di antaranya,
1. Mudah digambar. Wireframe memiliki tata letak yang sederhana dan bersih yang dibentuk oleh elemen layar sederhana tanpa gaya dan format yang detail.
2. Mudah dimengerti. Wireframe disambut baik oleh banyak tim pengembang dan pebisnis karena penggunaannya sangat sederhana sehingga setiap orang dapat memahaminya tanpa harus belajar terlebih dahulu.
3. Mudah dimodifikasi. Anda tidak akan memerlukan pemrograman apa pun untuk memvisualisasikan ide dan desain baru Anda sehingga membuatnya lebih praktis dan cepat.
4. Tidak diperlukan pengkodean. Tidak perlu pembuatan prototipe yang berat dan tanpa pengkodean. Anda hanya perlu menggambar wireframe seolah-olah Anda menggunakan alat gambar biasa saja.
5. Anotasi sebaris. Anotasi ide desain di tempat dengan bantuan bentuk anotasi yang mana notasi ini juga dapat ditampilkan dalam spesifikasi persyaratan.
Dari berbagai sumber
Terimakasih artikelnya sangat membantu dan mudah dipahami
ReplyDelete