Sketsa atau wireframe adalah visualisasi tingkat keterbacaan
rendah dari antarmuka masa depan yang dibuat di selembar kertas atau di alat
digital. Tujuan dari wireframe adalah untuk membantu desainer memahami
bagaimana konten dan elemen fungsional harus diletakkan di layar.
Pada artikel ini, akan membagikan 8 tips yang akan membantu memaksimalkan
wireframing.
1. Petakan alur pengguna target sebelum memulai wireframing
Sebelum memulai wireframing, memerlukan gagasan yang jelas
tentang berapa banyak layar yang perlu rancang dan bagaimana pengguna akan
berinteraksi dengannya. Jauh lebih mudah untuk membentuk pemahaman ini ketika memiliki
alur pengguna yang dapat gunakan sebagai referensi. Dimungkinkan untuk
memvisualisasikan aliran menggunakan objek sederhana seperti kotak dan panah.
2. Buat wireframe untuk layar inti terlebih dahulu
Pilih layar yang paling penting untuk alur pengguna. Ini
akan membuatnya lebih mudah untuk mengulangi desain.
3. Pilih tingkatan yang tepat
Fidelity adalah tingkat realisme yang dimiliki aset visual.
Wireframe biasanya dibuat dalam keterbacaan rendah dan sedang. Wireframe dengan
tingkat keterbacaan rendah berisi detail desain yang minimum.
Wireframe tingkat keterbacaan rendah sementara adapula wireframe
medium-fidelity lebih mirip mockup.
Wireframe dengan tingkat keterbacaan rendah bisa bagus
selama fase awal proses desain — saat menjelajahi arah desain yang berbeda dan
ingin memvisualisasikan ide sebanyak mungkin.
Wireframe medium-fidelity harus dibuat ketika ingin menggali
jauh ke dalam solusi tertentu. Wireframe medium-fidelity juga sangat berguna
selama diskusi dengan desainer dan pengembang lain.
4. Gunakan warna untuk menarik perhatian
Wireframe secara tradisional dibuat dalam skala hitam &
putih atau abu-abu, tetapi dimungkinkan untuk menggunakan satu atau dua warna
kontras untuk membuat aksen visual dan mengarahkan perhatian pemirsa ke objek
tertentu (seperti tombol ajakan bertindak).
5. Cobalah untuk menghindari teks tiruan dalam wireframe
mid-fidelity
Pada tahap awal proses desain, tujuan adalah menciptakan
hierarki visual yang jelas, tata letak dengan struktur yang jelas. Tidak fokus
pada konten pada tahap ini; harus memikirkan bagaimana hal itu disajikan.
Tetapi setelah membuat hierarki visual yang layak, harus mulai mengganti teks
placeholder dengan salinan aktual yang akan gunakan dalam produk.
Ada alasan mengapa kita harus menghindari teks tiruan pada
tahap ini, Lorem Ipsum tidak banyak bicara kepada orang-orang yang akan
meninjau desain. Akibatnya, ketika mereka akan meninjau wireframe, mereka dapat
dengan mudah salah memahami desain.
6. Buat wireframe yang dapat diklik
Wireframe adalah artefak desain statis. Meskipun dimungkinkan
untuk mengirimkan desain sebagai kumpulan layar individual, jauh lebih baik
untuk membuat aliran keluar dari mereka atau bahkan membuat versi wireframe
yang dapat diklik. Wireframe yang dapat diklik memudahkan tim untuk memahami
detail skenario, mereka membuat berpikir tentang fungsionalitas produk secara
holistik. Misalnya, saat melewati arus, dapat melihat bahwa perlu
memperkenalkan keadaan di antara beberapa layar untuk menciptakan perjalanan
yang mulus.
7. Anotasi wireframe
Sebagai desainer produk, kita perlu memberikan konteks dan
mengkomunikasikan keputusan desain kepada anggota tim dan pemangku kepentingan.
Jika berencana untuk mempresentasikan wireframe kepada tim, selalu lebih baik
untuk menyertakan anotasi. Anotasi membantu menciptakan konteks dan dengan
cepat menyampaikan ide-ide kunci. Pastikan menggunakan anotasi pendek-ke-titik.
Jika perlu membahas konsep secara lebih rinci (katakanlah, perlu menulis
paragraf teks), lebih baik melakukannya dalam dokumentasi desain, bukan pada
wireframe.
Jangan membuat wireframe mid-fidelity dari awal. Gunakan kit
atau software wireframe khusus untuk mempercepat proses.