Wireframe

A.   

Pengertian Desain Wireframe

Desain Wireframe adalah cara untuk bereksperimen sebuah modul dari suatu ide. Ini adalah cara untuk memberikan ide kita muncul untuk banyak orang agar mereka bisa melihat apakah ide kita mempunyai suatu nilai. Wireframe dapat disebut sebagai blueprint dalam arsitektur. Tujuan dibuatnya wireframe bukan desain visual, namun menyampaikan susunan, struktur, layout, navigasi dan organisir konten. Maka dari itu, biasanya wireframe dibuat dengan warna hitam putih. Wireframe lebih menekankan isi dari konten. Wireframe merupakan tata letak dari sebuah halaman atau layar yang mendemonstrasikan elemen apa saja yang dapat dimasukkan ke dalamnya yang juga dapat dianggap sebagai kerangka dari sebuah halaman website. . Mungkin kita seringkali melihat wireframe yang tidak berwarna, atau grafik tertentu. Hal ini dilakukan karena dengan menghindari penggunaan warna dan grafik atau elemen visual lainnya, kita dapat lebih terfokus pada fungsi dan penempatan elemen kunci serta bagaimana cara pengguna berinteraksi dengannya.

 

B.    Tujuan dari Desain Wirefram

Tujuan dari wireframing adalah untuk bekerja seminimal mungkin cara untuk memulai mengorganisir informasi-informasi dan memulai mencari tahu alur halaman sebelum memikirkan sesuatu hal seperti font, warna dan lainnya. Dengan wireframing, kita bisa bekerja lebih cepat dan menghasilkan banyak ide. Biasanya, dimulai hanya dengan sebuah pena dan kertas.

Wireframes lebih fokus pada:

a.      Rentang fungsi yang tersedia

b.     Prioritas relatif dari informasi dan fungsi

c.      Aturan untuk menampilkan jenis informasi tertentu

d.     Efek dari berbagai skenario pada tampilan

 

C.    Tiga tipe wireframe

Wireframe mungkin memiliki tingkat detail yang berbeda dan dapat dipecah menjadi dua kategori dalam hal kesetiaan, atau seberapa mirip mereka dengan produk akhir.

1.     Low-fidelity

Menyerupai sketsa kasar atau mock-up cepat, wireframes kesetiaan rendah dapat diproduksi dengan cepat. Gambar rangka ini membantu tim proyek mengkomunikasikan ide dan berkolaborasi lebih efektif karena lebih abstrak, menggunakan persegi panjang dan pelabelan untuk mewakili konten. Konten tiruan, teks pengisi Latin (lorem ipsum), sampel atau konten simbolik digunakan untuk mewakili data saat konten sebenarnya tidak tersedia. Misalnya, alih-alih menggunakan gambar sebenarnya, persegi panjang placeholder dapat digunakan.

2.     High-fidelity

Gambar rangka dengan ketelitian tinggi sering digunakan untuk mendokumentasikan karena mereka menggabungkan tingkat detail yang lebih cocok dengan desain laman web yang sebenarnya, sehingga membutuhkan waktu lebih lama untuk membuatnya. Untuk gambar sederhana atau dengan ketelitian rendah, pembuatan prototipe kertas adalah teknik yang umum. Karena sketsa ini hanyalah representasi, anotasi — catatan yang berdekatan untuk menjelaskan perilaku — berguna. Untuk proyek yang lebih kompleks, rendering wireframes menggunakan perangkat lunak komputer sangat populer. Beberapa alat memungkinkan penggabungan interaktivitas termasuk animasi Flash, dan teknologi web front-end seperti, HTML, CSS, dan JavaScript.