Elemen Dasar Desain Visual
Desain Visual adalah hal yang penting pada pembuatan produk. Karena hal yang biasa dilihat pertama kali oleh pengguna adalah 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. Untuk membangun desain visual, dibutuhkan elemen-elemen dasar yang esensial seperti tipografi, warna, dan ikonografi. 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 Anda lakukan dalam tipografi. Hal tersebut adalah:-
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. Sedangkan Sans Serif 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 dari ketebalan huruf, bentuk serif, dan panjang garisnya. Contoh typeface dari jenis Serif adalah Times New Roman, Raleway, dan Rockwell. Sedangkan 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:
- Legibility : Kemudahan untuk dibaca dengan memperhatikan hirarki dalam penulisan. Sebagai contoh adalah headline pada koran biasanya akan menggunakan teks dengan ukuran yang lebih besar dan tebal. Hal ini tentu akan membantu pengguna untuk mencari hal yang penting dan dibutuhkan dengan cepat bukan?
- Branding : Kesesuaian font yang digunakan dengan brand perusahaan. Perlu diingat bahwa tipografi juga menjadi salah satu poin penting yang menunjukkan ciri khas brand suatu produk.
- Consistency : Konsisten dalam ukuran dan font untuk tipe konten yang sama. Jangan sampai dua header yang setara memiliki font yang berbeda. Selain itu, sebaiknya jangan menggunakan lebih dari tiga typeface yang berbeda, karena akan mengganggu konsentrasi.
Warna
Warna adalah salah satu elemen yang esensial dalam desain. 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, Anda 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.
- Menentukan titik fokus : Anda bisa memberikan warna yang terang untuk mengarahkan pengguna menekan suatu tombol aksi.
- Branding : Sama seperti font, warna juga merupakan salah satu elemen branding yang paling kuat untuk mengenali suatu merek. Sebagai contoh Google konsisten menggunakan warna Biru, Merah, Kuning, dan Hijau untuk logo-logo aplikasi yang dibuatnya.
- Aksesibilitas : Gunakan warna yang kontras dengan latar belakangnya sesuai dengan Web Content Accessibility Guidelines (WCAG). Jika warna latar belakangnya terang, jangan gunakan warna teks yang terang juga.
Ikonografi
Ikonografi adalah ilmu yang mempelajari cara untuk mengidentifikasi, mendeskripsikan, dan menginterpretasi sebuah konten dalam gambar. Ikonografi bisa berbentuk gambar ataupun ikon yang merepresentasikan suatu hal. Sebagai contohnya adalah simbol shut down pada komputer Anda.
Ia hanya berupa lingkaran dan garis, tetapi banyak orang tahu bahwa ikon ini merepresentasikan power pada sebuah perangkat.
Dengan memanfaatkan ikonografi, Anda 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 Anda 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.
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. Ia sekaligus menunjukkan identitas brand yang kuat.
Sama seperti elemen lainnya, salah satu tips dalam menerapkan ikonografi adalah konsistensi. Gunakanlah ikon dengan style yang sama untuk semua halaman. Jangan gunakan ikon dengan tipe solid dan outline secara bersamaan. Berikut adalah contoh perbandingannya:
