Visual Design

Desain merupakan sebuah komunikasi secara visual (dalam bentuk tampilan). Tujuan dari Desain Visual adalah untuk dijadikan panduan yang membawa pengguna melalui desain, memimpin mereka untuk mencapai tujuan yang ditentukan pembuat.

Standar yang digunakan dalam pembuatan desain UI:

Untuk pembuatan desain UI, biasanya pembuat menggunakan Jakob Nielsen’s 10 Usability Heuristics for UI Design:

Nielsen’s 10 heuristics

Implementasi Visual Design yang dilakukan dalam projek:

Mockup dapat dilihat di sini.

Dalam projek ini, kita melakukan revamp terhadap desain interface halaman admin LAPOR!.

Salah satu interface yang dipakai pada LAPOR! saat ini

Hal pertama yang perlu dilakukan adalah membuat wireframe. Wireframe merupakan rancangan desain dari suatu aplikasi. Wireframe terbagi menjadi dua, yaitu low fidelity wireframe dan high fidelity wireframe. Low fidelity wireframe berisi rancangan kasar dari desain dan High fidelity wireframe berisi rancangan desain dengan komponen-komponen yang yang nantinya akan dipakai dalam pembuatan aplikasi.

Salah satu contoh page mockup yang telah kami buat

Untuk saat ini, kami telah membuat high fidelity wireframe yang telah disetujui oleh PO. Selain itu, kami juga mencoba menerapkan Nielsen’s Ten Usability Heuristics dalam perubahan desain interface:

• Penyederhanaan desain sidebar dan header yang ada (Minimalism).

Tampilan Header pada mockup

Tampilan Sidebar pada mockup. Untuk modul modul seperti LAPORAN, BUAT LAPORAN, MONITOR, dan PENGATURAN harus diklik terlebih dahulu untuk memunculkan submodul

• Menggunakan icon-icon yang lebih deskriptif sehingga mudah dimengerti dan peletakan tombol-tombol fungsional pada tempat yang strategis (Recognition).

Contoh beberapa icon yang kami gunakan. Tiap icon disesuaikan dengan fungsionalnya dan peletakkannya di bagian kanan atas setiap laporan

• Memberikan peringatan-peringatan tertentu untuk suatu fungsionalitas dan memberikan cara untuk menghindari kesalahan atau memperbaiki penyebab error, contohnya pemberian tanda required (*) pada form yang ada (Error Prevention dan Error Recovery).

Salah satu Error Prevention dan Recovery pada pengisian form

• Memberikan warna yang lebih jelas dan dominan pada tab header untuk menunjukkan posisi dari user saat menggunakan aplikasi (Visibility).

Warna merah pada tulisan LAPORAN menandakan bahwa user sedang berada di modul LAPORAN dan warna merah muda pada tulisan Kelola menandakan bahwa user sedang berada di submodul Kelola

• Menggunakan template yang sama untuk setiap page yang dibawakan agar konsisten (Consistency).

Sekian dari saya mengenai Visual Design. Terima kasih!