Hal – Hal Esensial pada Wireframe
Sumber: https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/
Wireframing adalah proses penggambaran sebuah produk untuk menetapkan struktur dan alur kerja produk tersebut. Wireframing adalah proses esensial pada tahap awal user-centred design process yang digunakan untuk mengeksplorasi bagaimana produk atau ide dapat mengakomodasi kebutuhan pengguna.
Merupakan bagian dari user-centred design process membuat wireframe harus dapat memudahkan komunikasi antara product designer dan stakeholder. Maka dari itu dalam pembuatannya terdapat beberapa hal penting yang perlu diperhatikan. Berikut beberapa hal yang harus diperhatikan dalam membuat wireframe:
- Userflow & Navigasi
Userflow adalah alur kerja sebuah sistem dari mata seorang pengguna. Sebelum membuat wireframe, akan lebih baik jika designer menetapkan userflow terlebih dahulu. Dengan adanya userflow pembuatan wireframe akan lebih cepat serta akan menggambarkan navigasi sistem yang sesuai.
- Grayscale atau Tidak Berwarna
Bertujuan untuk menetapkan struktur dan alur kerja sistem membuat wireframe tidak diperlukan untuk memiliki warna. Penggunaan greyscale membuat wireframe berfokus pada layout dan informasi yang ditampilkan pada layar sebuah sistem.
- Struktur Penempatan Layar
Wireframe adalah penggambaran produk secara dua dimensi dan tanpa interaksi. Maka dari itu, untuk sistem yang akan menampilkan lebih dari satu layar diperlukan penempatan layar yang rapih dan berurutan sesuai navigasi sistem.
- Konten
Tidak sesuainya konten dapat mempengaruhi keseluruhan design serta efektivitas layout. Maka dari itu, penting untuk selalu memasukan konten pada wireframe. Beberapa konten yang dapat dimasukkan pada wireframe antara lain: judul halaman, judul pada sebuah daftar/list, data tanggal & waktu, dan paragraph dengan panjang maksimal.
- Penggambaran button dan icon
Bergantung pada tingkat wireframe yaitu Low, Mid, dan High-Fidelity penggambaran button dan icon dapat bervariasi. Walau begitu, wireframe pada tingkat manapun harus dapat menggambarkan button dan icon dengan baik. Tidak diperlukan penggambaran secara detail, penggambaran button dan icon pada wireframe hanya dibutuhkan untuk dapat dipahami stakeholder dengan baik.
- Alignment
Alignment adalah jarak dan penempatan sebuah komponen pada wireframe. Berfokus dengan efektivitas layout dan navigasi membuat alignment merupakan salah satu hal penting pada wireframe. Meluangkan waktu untuk mengelompokkan dan menempatkan komponen akan membantu stakeholder memahami wireframe dengan lebih baik.
Referensi: