3 Elemen Dasar Desain Visual pada UI Design yang Wajib Diketahui

Desain Visual adalah hal yang penting pada pembuatan produk karena hal yang biasa dilihat pertama kali oleh pengguna adalah UI Design (tampilan) sebelum masuk ke fungsional. Jika produk tidak memiliki tampilan visual yang menarik, bisa-bisa pengguna akan mendapatkan kesan pertama yang kurang menyenangkan. Sebaliknya, produk dengan tampilan visual yang menarik akan membekas di hati penggunanya.

Elemen Dasar UI Design

Untuk membangun desain visual yang menarik, kamu perlu menguasai terlebih dahulu elemen-elemen dasar sebelum membuat UI Design. Elemen ini merupakan hal dasar yang digunakan untuk membangun sebuah desain. Elemen tersebut adalah tipografi, warna, dan ikonografi. Penasaran dengan ketiganya? Yuk, mari kita ulas satu per satu.

Tipografi

Tipografi adalah ilmu dan teknik dalam mengatur jenis huruf supaya tulisan menjadi mudah terbaca dan menarik saat ditampilkan. Ada tiga langkah yang perlu kamu lakukan dalam tipografi, antara lain sebagai berikut

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

Mengetahui jenis font
Ada dua jenis font yang populer, yaitu Serif dan Sans Serif. Berikut ini adalah perbedaan dari keduanya.
Font jenis Serif memiliki ciri khas berupa tambahan garis kecil di sudut akhir setiap hurufnya yang disebut dengan serif. Font jenis ini memberikan kesan formal dan profesional, contohnya adalah logo lama Google yang dipakai pada sebelum tahun 2015. Lain halnya dengan Sans Serif yang lebih polos dan simpel tanpa adanya serif. “Sans” sendiri artinya “tanpa” dari bahasa Prancis. Font jenis ini memberikan kesan kasual dan santai, contohnya adalah logo baru yang dipakai Google.
Memilih typeface
Typeface adalah sekumpulan huruf, angka, dan simbol yang memiliki karakter khusus. Setiap typeface dibedakan berdasarkan ketebalan huruf, bentuk serif, dan panjang garisnya. Contoh typeface dari jenis Serif adalah Times New Roman, Raleway, dan Rockwell. Lalu, untuk typeface dari jenis Sans Serif adalah Arial, Calibri, dan Verdana.
Memilih font
Font adalah style pada suatu typeface yang lebih spesifik, seperti ukuran, ketebalan, dan kemiringan huruf yang berfungsi untuk memberikan penekanan pada suatu teks. Sebagai contoh dari keluarga typeface Roboto terdapat berbagai macam style seperti ini.

Warna

Warna adalah salah satu elemen esensial dalam UI Design. Pemilihan warna yang tepat dapat memberikan pengaruh yang berbeda pada pemikiran, perilaku, dan suasana hati pengguna. Hal ini karena setiap warna memiliki emosi psikologi masing-masing. Contohnya seperti ini.

Selain tentang psikologi warna, kamu juga perlu memahami cara mengombinasikan warna supaya terlihat serasi dan enak dilihat. Salah satu caranya adalah mengikuti aturan 60-30-10. Aturan ini sering digunakan dalam berbagai macam desain. Berikut adalah salah satu contoh dan pengertiannya.

60% warna netral untuk background.
30% warna utama untuk sebagian besar elemen, seperti app bar dan menu.
10% warna aksen untuk hal-hal kecil, seperti warna tombol dan toggle.

Untuk menentukan kombinasi warna tersebut, kamu bisa menggunakan 5 teknik berikut pada color wheel.

Complementary: Warna yang berseberangan. Menghasilkan warna yang sangat kontras.
Analogous: Tiga warna berderetan yang senada.
Triadic : Tiga pilihan warna yang membentuk segitiga. Menghasilkan warna yang vibrant.
Split Complementary: Warna yang berseberangan, tetapi ujung satunya dipisah sehingga menghasilkan tiga warna.
Tetradic: Empat pilihan warna yang berseberangan dan membentuk segi empat.

Supaya lebih mudah, kamu juga bisa memanfaatkan website colorsupplyyy.com untuk membuat color palette seperti berikut.

Ikonografi

Ikonografi adalah ilmu yang mempelajari cara untuk mengidentifikasi, mendeskripsikan, dan menginterpretasi sebuah konten dalam gambar. Ikonografi bisa berbentuk gambar, ilustrasi, ataupun ikon yang merepresentasikan suatu hal.

Sebagai contohnya adalah simbol shut down pada komputer kamu.

Ia hanya berupa lingkaran dan garis, tetapi banyak orang tahu bahwa ikon ini merepresentasikan power pada sebuah perangkat.

Dengan memanfaatkan ikonografi, kamu dapat menjangkau lebih banyak audiens yang mungkin sebelumnya kekurangan literasi atau keterbatasan bahasa. Selain itu, ia juga menghemat tempat daripada penggunaan teks yang biasanya lebih panjang. Ikon biasanya digunakan untuk transisi dari satu halaman ke halaman lain, contohnya ikon tanda panah terbalik untuk ke halaman sebelumnya atau ikon rumah untuk menuju ke halaman Home.

Hal lainnya yang perlu kamu perhatikan adalah gambar. Seperti sebuah pepatah,

“Sebuah gambar bernilai seribu kata”.

Gambar dapat menjelaskan suatu hal yang tak bisa diungkapkan dengan kata-kata, seperti foto produk asli yang ditawarkan pada marketplace. Gambar juga dapat membuat tampilan aplikasi menjadi lebih menarik dan hidup.

Gambar dan ilustrasi juga dapat mengubah emosi pengguna. Misalnya ketika kita salah mengakses suatu halaman pada website, biasanya akan muncul halaman error dengan kode 404. Berikut ini adalah contohnya.

Membuat tampilan halaman 404 yang menarik akan memberikan pengalaman tersendiri bagi pengguna sekaligus menunjukkan identitas brand yang kuat.

Itulah 3 elemen dasar yang perlu kamu ketahui sebelum membuat UI Design atau mockup aplikasi yang menarik. Namun, ketiga hal tersebut hanyalah elemen dasarnya saja. Kamu perlu mengetahui cara mengatur dan prinsip dasar desain visual untuk mengombinasikan ketiga hal tersebut dengan benar. Kira-kira apa sajakah itu? Silakan tebak di kolom komentar, ya!

Jika penasaran dengan jawabannya, kamu dapat mempelajarinya lebih dalam pada kelas Belajar Dasar UX Design. Di kelas tersebut dijelaskan lebih rinci tidak hanya tentang UI Design yang bagus, tetapi juga tentang bagaimana membuat desain yang nyaman dan mudah digunakan secara UX. Selamat belajar!

3 Elemen Dasar Desain Visual pada UI Design yang Wajib Diketahui – End.