Wireframe, juga dikenal sebagai halaman skema atau layar cetak biru (screen blueprint), adalah panduan visual yang mewakili layout sebuah website atau aplikasi (desktop maupun mobile). Wireframe dibuat dengan tujuan untuk melihat gambaran pengaturan elemen untuk mencapai susunan yang terbaik. Wireframe menggambarkan tata letak halaman atau pengaturan konten website, termasuk elemen antarmuka dan sistem navigasi, dan bagaimana elemen-elemen tersebut bekerja sama.
Wireframe biasanya secara visual dan grafis sangat sederhana, tidak memiliki gaya tipografi, warna, atau grafis tertentu, karena fokus utamanya bukan untuk menampilkan gambaran asli sebuah website atau aplikasi, tetapi lebih untuk menjelaskan fungsi, perilaku, dan prioritas konten. Seperti seniman yang menggambar sketsa, sebagian desainer bahkan cukup menggunakan pensil dan kertas, walaupun saat ini tersedia juga software khusus untuk keperluan wireframing. Berikut adalah contoh wireframe situs berbagi video YouTube:
Dan ini adalah sketsa yang melegenda, menunjukkan imajinasi Jack Dorsey saat membuat coretan desain awal layout Twitter di atas buku bloknote bergaris miliknya:
Wireframe umumnya dibuat oleh analis bisnis, desainer pengalaman pengguna (user experience), pengembang, desainer visual, dan peran lainnya dengan keahlian dalam desain interaksi, arsitektur informasi dan penelitian pengguna. Pengembang menggunakan wireframe untuk mendapatkan pemahaman yang lebih nyata dari fungsi situs, sementara desainer menggunakannya untuk mendorong proses user interface (UI). Desainer pengalaman pengguna dan arsitek informasi menggunakan wireframe untuk menunjukkan jalur navigasi antar halaman. Analis bisnis menggunakan wireframe untuk mendukung secara visual aturan bisnis dan persyaratan interaksi untuk layar. Pemangku kepentingan bisnis meninjau wireframe untuk memastikan bahwa persyaratan dan tujuan dapat tercapai melalui desain awal yang dibuat.
Selain secara manual, beragam software tersedia untuk keperluan wireframing atau pembuatan mock up. Salah satu yang terpopuler adalah Balsamiq. Balsamiq digunakan oleh perusahaan IT dan pengembang-pengembang software besar seperti Apple, Adobe, Cisco, Skype, dan Dropbox untuk membuat mock up aplikasi mereka.
Jika ingin yang gratisan Anda dapat menggunakan Pencil, sebuah GUI prototyping tool gratis dan open-source yang dapat dengan mudah diinstall dan digunakan untuk membuat mock up di platform desktop yang populer (Windows, Mac, dan Linux). Selain itu Pencil tersedia pula sebagai Firefox Extension.
Pencil menyediakan beragam koleksi built-in shapes (windows, button, slider, drop-down menu, dsb) untuk menggambar berbagai jenis antarmuka pengguna buat aplikasi desktop maupun untuk platform mobile. Mulai dari versi 2.0.2, Pencil dilengkapi dengan pra-install Android dan iOS UI untuk merancang UI aplikasi Android dan iOS.
Wireframe biasanya secara visual dan grafis sangat sederhana, tidak memiliki gaya tipografi, warna, atau grafis tertentu, karena fokus utamanya bukan untuk menampilkan gambaran asli sebuah website atau aplikasi, tetapi lebih untuk menjelaskan fungsi, perilaku, dan prioritas konten. Seperti seniman yang menggambar sketsa, sebagian desainer bahkan cukup menggunakan pensil dan kertas, walaupun saat ini tersedia juga software khusus untuk keperluan wireframing. Berikut adalah contoh wireframe situs berbagi video YouTube:
Dan ini adalah sketsa yang melegenda, menunjukkan imajinasi Jack Dorsey saat membuat coretan desain awal layout Twitter di atas buku bloknote bergaris miliknya:
Wireframe umumnya dibuat oleh analis bisnis, desainer pengalaman pengguna (user experience), pengembang, desainer visual, dan peran lainnya dengan keahlian dalam desain interaksi, arsitektur informasi dan penelitian pengguna. Pengembang menggunakan wireframe untuk mendapatkan pemahaman yang lebih nyata dari fungsi situs, sementara desainer menggunakannya untuk mendorong proses user interface (UI). Desainer pengalaman pengguna dan arsitek informasi menggunakan wireframe untuk menunjukkan jalur navigasi antar halaman. Analis bisnis menggunakan wireframe untuk mendukung secara visual aturan bisnis dan persyaratan interaksi untuk layar. Pemangku kepentingan bisnis meninjau wireframe untuk memastikan bahwa persyaratan dan tujuan dapat tercapai melalui desain awal yang dibuat.
Selain secara manual, beragam software tersedia untuk keperluan wireframing atau pembuatan mock up. Salah satu yang terpopuler adalah Balsamiq. Balsamiq digunakan oleh perusahaan IT dan pengembang-pengembang software besar seperti Apple, Adobe, Cisco, Skype, dan Dropbox untuk membuat mock up aplikasi mereka.
Jika ingin yang gratisan Anda dapat menggunakan Pencil, sebuah GUI prototyping tool gratis dan open-source yang dapat dengan mudah diinstall dan digunakan untuk membuat mock up di platform desktop yang populer (Windows, Mac, dan Linux). Selain itu Pencil tersedia pula sebagai Firefox Extension.
Pencil menyediakan beragam koleksi built-in shapes (windows, button, slider, drop-down menu, dsb) untuk menggambar berbagai jenis antarmuka pengguna buat aplikasi desktop maupun untuk platform mobile. Mulai dari versi 2.0.2, Pencil dilengkapi dengan pra-install Android dan iOS UI untuk merancang UI aplikasi Android dan iOS.
Komentar
Posting Komentar