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.