Dalam desain aplikasi dan website, ada proses wireframe yang sangat dibutuhkan. Wireframe sendiri terbagi menjadi terbagi beberapa tahap agar hasilnya sempurna. Sebenarnya apa itu wireframe dan apa pula fungsi Warframe?
Apa Itu Wireframe?
Sumber Gambar : amazonaws.com
Wireframe merupakan kerangka dasar halaman aplikasi atau website, untuk memberi gambaran desain yang ingin diwujudkan. Dalam prosesnya, wireframing, akan ditentukan tata letak semua komponen yang ada di website. Ini termasuk banner, header, footer, konten, form, link dan lain sebagainya.
Wireframe dibuat oleh desainer user Interface/UI (tampilan antarmuka). Sebelum desain sampai ke keputusan final, wireframe akan didiskusikan dengan tim web development, lalu ke klien yang akan menjadi pemilik aplikasi atau website tersebut.
Fungsi Wireframe
Sumber Gambar : jennergy.com
Wireframe relatif mudah dibuat dan tidak menghabiskan biaya. Bentuknya pada umumnya hanya berupa garis-garis dan warnanya cukup hitam putih saja. Lalu apa saja fungsi wireframe dalam pembuatan aplikasi atau website?
1. Lebih Fokus pada Pengguna
Wireframe sangat efektif untuk menghasilkan website yang terfokus pada pengguna. Konsep wireframe akan dibicarakan dulu dengan pemegang saham dan akan didiskusikan dengan para desainer. Biasanya ada proses user testing juga, sampai akhirnya ditemukan desain yang paling sesuai dengan keinginan klien. Wireframing adalah proses paling efektif bagi desainer untuk mendapat gambaran akan keinginan klien.
2. Memperjelas Fitur
Tidak semua klien paham akan pentingnya fitur-fitur tertentu dalam aplikasi maupun website. Begitu pula sebaliknya, klien mungkin ingin ada fitur-fitur khusus di aplikasi dan website mereka. Lewat wireframing, hal ini bisa dibicarakan dan diperjelas. Dengan begitu, tidak ada yang hilang dan semua fitur yang diperlukan bisa masuk ke desain aslinya nanti.
Jenis Wireframe
Sumber Gambar : balsamiq.com
Wireframe terbagi menjadi 3 jenis. Yang membedakan ketiganya terutama adalah detail isinya. Berikut ini penjelasan ketiganya:
1. Low-fidelity Wireframe
Jenis yang pertama ini merupakan representasi visual dasar dari halaman aplikasi atau website yang biasanya digunakan di titik awal proses desain. Low-fidelity wireframe cenderung sangat kasar dan dibuat tanpa skala maupun akurasi pixel.
Low-fidelity wireframe akan menghilangkan berbagai detail yang bisa menjadi gangguan. Biasanya yang ditampilkan hanya gambar sederhana, bentuk blok, serta konten mock, seperti coretan untuk mengisi judul dan deskripsi. Biasanya jenis ini digunakan pada tahap awal untuk menentukan layout dan memetakan keinginan klien.
2. Mid-fidelity Wireframe
Jenis yang kedua ini adalah yang paling sering digunakan. Mid-fidelity wireframe hasilnya lebih akurat dan lebih rapi dibandingkan low-fidelity. Memang di sini masih tidak ada detail gambar dan tulisan, tapi komponen dan fiturnya jauh lebih jelas. Misalnya saja ukuran font yang berbeda digunakan untuk membedakan heading dan konten isi, sedangkan di low-fidelity semuanya masih sama. Warnanya juga masih hitam putih, biasanya desainer juga menambahkan warna abu-abu untuk elemen tertentu. Terkadang desainer sudah menggunakan mid-fidelity di diskusi awal dengan klien.
3. High-fidelity Wireframe
Terakhir ada high-fidelity wireframe yang menampilkan layout dengan pixel spesifik. Di level ini, wireframe bukan seperti coret-coretan lagi. Biasanya sudah dilengkapi dengan beberapa kotak kosong warna abu-abu. Tempat di mana akan ada gambar akan ditandai dengan huruf X. Bahkan ada juga yang sudah menambahkan gambar sungguhan dan konten tertulis di tahap ini, meski tidak harus.
Berbagai detail di tahap high-fidelity wireframe membuat desainer, tim web development dan klien jadi bisa masuk ke diskusi yang lebih detail. Misalnya saja sistem menu dan map interaktif. High-fidelity wireframe harus disimpan dengan baik untuk jadi pedoman proses desain selanjutnya, sehingga tidak ada komponen yang terlewat.
