UI Design — Visual Design
Desain visual merupakan penggunaan citra, warna, bentuk, tipografi, pengaturan tampilan dan lainnya untuk meningkatkan kegunaan dan meningkatkan user experience. Desain visual itu lebih dari sekedar estetika dimana desainer diharuskan untuk menempatkan elemen dengan hati-hati untuk membuat antarmuka yang mengoptimalkan user experience.
Banyak orang yang salah mengartikan kalau desainer itu hanya membuat elemen yang menarik semata-mata untuk memaksimalkan daya tarik. Padahal desain visual digunakan untuk:
- mengatur elemen sehingga mengarahkan mata pengguna ke fungsionalitas elemen, dan
- membuat estetika konsistensi.
“Good design is like a refrigerator — when it works, no one notices, but when it doesn’t, it sure stinks.” –Irene Au
Damian Jolley, UI Designer
Desain visual yang sukses memastikan bahwa yang tetap menjadi konten yaitu pusat halaman atau fungsi, dan meningkatkannya dengan melibatkan pengguna serta membantu membangun kepercayaan dan minat mereka pada produk. Musuh terbesar desainer disini adalah ketidakpastian pengguna. Dengan mempertimbangkan cara membentuk atau menyusun elemen visual untuk memetakan prinsip-prinsip desain visual yang baik, desainer dapat membentuk user experience untuk memunculkan respon dan perilaku pengguna yang sesuai dengan penggunaan dan tujuan produk. Oleh karena itu desain visual harus menarik perhatian pengguna ke aspek-aspek penting dan mencapai keseimbangan antara desain yang fresh dan kuat serta sesuatu yang pengguna harapkan untuk dilihat. Dengan begitu, detail kecil dari estetika produk memainkan peran penting dalam desain user experience.
“Problems with visual design can turn users off so quickly that they never discover all the smart choices you made with navigation or interaction design.”
— Jesse James Garrett, UX Designer & Co-founder of Adaptive Path
Visual Design Basic Element
Elemen desain menciptakan setiap obyek di sekitar kita. Tidak ada yang bisa ada tanpa elemen-elemen ini. Terdapat sembilan elemen dasar yang ada di desain visual, yaitu:
- Garis, menghubungkan dua titik dan dapat digunakan untuk membanyu menentukan bentuk, membuat pembagian, dan membuat tekstur. Semua garis, jika lurus, memiliki panjang, lebar, dan arah.
- Bentuk merupakan sebuah bagian mandiri. Untuk menentukan area, desainer menggunakan garis, perbedaan nilai, warna, dan/atau tekstur. Setiap objek terdiri dari beberapa bentuk.
- Negative Space / White Space merupakan area antara elemen desain. Terlepas dari namanya, white space tidak perlu berwarna putih. Ini bisa berupa warna, tekstur, pola, atau bahkan latar belakang. White space atau negative space merupakan elemen yang bagus untuk menyeimbangkan elemen desain dan mengatur konten dengan lebih baik untuk meningkatkan pengalaman komunikasi visual.
- Volume merupakan elemen yang menunjukkan bentuk tiga dimensi yang terdiri dari panjang, lebar, dan kedalaman.
- Nilai merupakan elemen yang digunakan untuk mengatur hubungan antara kecerahan atau kegelapan suatu area. Biasanya elemen ini diukur dalam hubungan dengan skala yang dinilai dari putih ke hitam.
- Warna yang biasa dikenal sebagai rona. Elemen ini digunakan untuk mengatur tema atau nada dan menarik perhatian. Dengan pemilihan dan kombinasi palet warna juga dapat menunjukkan perbedaan item, membuat kedalaman, menambahkan penekanan, dan/atau membantu menata informasi. Teori warna memeriksa bagaimana berbagai pilihan secara psikologis berdampak pada pengguna.
- Tekstur merupakan elemen yang mengacu pada bagaimana permukaan terasa atau dirasakan. Dengan mengulangi elemen, tekstur akan dibuat dan pola akan terbentuk. Tergantung pada bagaimana tekstur diterapkan, mungkin digunakan secara strategis untuk menarik atau mencegah perhatian.
- Tipografi merupakan elemen yang mengacu pada font mana yang dipilih, ukuran, perataan, warna, dan penspasian. Tipografi juga sering menjadi elemen dalam bentuk komunikasi visual.
- Form merupakan elemen yang berlaku untuk obyek tiga dimensi dan menggambarkan volume dan massanya. Form dapat dibuat dengan menggabungkan dua bentuk atau lebih dan dapat lebih ditingkatkan dengan nada, tekstur, dan warna yang berbeda.
Visual Design Principles
Prinsip desain adalah alat yang digunakan untuk memformat elemen desain. Terdapat tujuh prinsip desain visual, yaitu:
- Unity, hubungan semua elemen pada suatu halaman secara visual atau konseptual yang muncul untuk membangun harmoni sehingga tampak milik bersama dan pengguna tidak terganggu oleh tata letak yang katau atau tidak selaras.
- Gestalt, bagaimana pengguna melihat desain keseluruhan dibandingkan melihat elemen secara individual.
- Hierarchy, perbedaan signifikan antar elemen. Desainer sering membuat hierarki melalui berbagai ukuran font, warna, dan penempatan halaman. Semakin keatas posisi suatu elemen, maka elemen tersebut makin dianggap hal yang penting.
- Balance, menciptakan persepsi bahwa ada distribusi secara merata. Merata disini tidak selalu diartikan simetri.
- Contrast, berfokus pada membuat elemen yang menonjol dengan menekankan perbedaan ukuran, warna, arah, dan karakteristik lainnya.
- Scale mengidentifikasi berbagai ukuran. Dimana hal itu menciptakan minat dengan menunjukkan bagaimana setiap item berhubungan satu sama lain berdasarkan ukuran.
- Dominance, terdapat satu elemen yang menonjol sebagai titik fokus dan yang lain menjadi pendukung. Ini sering dilakukan melalui penskalaan dan kontras berdasarkan ukuran, warna, posisi, bentuk, dan lain-lain.
Visual Design Implementation in Software Engineering Project
Di dalam proyek perangkat lunak, saya dan grup saya membuat mockup berdasarkan acuan desain yang diberikan oleh klien. Berikut adalah beberapa tampilan mockup:
Berdasarkan Nielsen’s 10 Usability Heuristics, mockups yang telah dibuat sudah menerapkan beberapa nilai heuristik seperti user control and freedom pada halaman detail informasi kuliah umum serta halaman admin untuk detail pengajuan partisipasi kuliah umum, consistency and standards pada semua halaman karena mengikuti design guideline, dan error prevention pada halaman tambah pengajuan pengadaan kuliah umum.
Sebagai penutup, saya ingin memberikan pandangan saya bahwa desain visual merupakan hal yang sangat penting karena membantu untuk menarik pengguna untuk menggunakan produk yang kita rancang, memberikan pengalaman yang baik selama memakai produk dan mendapatkan kesetiaan mereka.
Sampai bertemu di artikel selanjutnya!
Referensi:
[1] https://www.interaction-design.org/literature/topics/visual-design
[2] https://www.nngroup.com/articles/principles-visual-design/
[3] https://www.ponoko.com/blog/how-to-make/graphic-design-principles-and-elements-guide/
[4] https://uxmag.com/articles/why-visual-design-is-more-than-meets-the-eye
[5] https://www.nngroup.com/articles/ten-usability-heuristics/
