Ikuti 7 Prinsip Hierarki Visual Ini agar Desainmu Semakin Menarik

Tayang 22 Agu 2021 - Dibaca 10 mnt

Isi Artikel

    Untuk kamu yang berkecimpung di dunia desain, mungkin prinsip hierarki visual bukanlah hal yang asing untuk kamu.

    Ya, prinsip ini sering kali dipakai untuk membuat desainmu menjadi lebih indah dan selalu diingat oleh audiens.

    Bagaimana cara menerapkan prinsip ini? Simak ulasan lengkapnya berikut ini.

    Apa yang Dimaksud Prinsip Hierarki Visual?

    user interface animation

    © Freepik.com

    Situs Interaction Design Foundation mengatakan, hierarki visual adalah sebuah prinsip tata letak (layout) elemen desain yang tujuannya menampilkan hal penting lebih dulu, kemudian yang lebih tidak penting. 

    Artinya, desain tersebut harus mampu menampilkan poin utama dan dipahami oleh siapa pun yang melihat.

    Desain itu pula yang kemudian akan memengaruhi keputusan seseorang, untuk bertindak sesuai dengan apa yang dimaksud oleh visual designer.

    Prinsip hierarki visual ini berlaku luas, untuk segala sesuatu yang bisa didesain, mulai dari poster, flyer, website, hingga tampilan apps.

    Bisa dibilang, prinsip ini sangat berguna bagi para UI designer. Pernahkah kamu membuka sebuah apps, tapi bingung mana yang mau kamu cari karena semua tampak serupa?

    Nah, jika pernah, desain UI yang dipakai mungkin belum mengadopsi prinsip-prinsip ini.

    Baca Juga: Ini Beda Pekerjaan Web Designer dan UI/UX Designer

    Apa Saja Prinsip Hierarki Visual?

    Berikut ini adalah prinsip hierarki visual yang sudah Glints rangkum untukmu dari Visme dan G2:

    1. Ukuran dan skala

    ukuran skala visual

    ©Visme.co

    Secara sederhana, gambar yang lebih besar tentu akan menarik perhatian kamu lebih dulu, bukan, dibandingkan yang kecil?

    Itu sebabnya, kamu sering kali melihat informasi utama di situs tertentu atau koran sebagai yang paling besar.

    Bukan hanya untuk menarik perhatian, elemen yang berukuran besar seharusnya membawa pesan yang paling penting.

    Kamu juga perlu memperhatikan skala dari gambar tersebut. Apalagi, jika kamu akan menampilkan beberapa elemen desain.

    Penentuan skala membantu kita sebagai desainer grafis, juga audiens, mengetahui mana yang lebih dominan.

    2. Warna dan kontras

    prinsip hierarki visual kontras

    ©Visme.co

    Prinsip hierarki visual selanjutnya adalah warna dan kontras. Pemilihan warna dan kontras tentu akan membuat satu elemen lebih menonjol dibandingkan yang lainnya.

    Nah, cara ini juga perlu kamu gunakan dalam desainmu, untuk menginformasikan kepada user, elemen mana yang ingin kamu unggulkan.

    Warm colors, seperti merah atau kuning akan lebih standout jika disandingkan dengan background berwarna gelap (cool color).

    Meski kontras warna membantu menonjolkan desain, menggunakan terlalu banyak juga akan membuat bingung. Hal ini akan mengaburkan elemen desain yang penting.

    Perlu diingat, prinsip hierarki ini harus menjadi sebuah panduan bagi pembaca, users, atau audiens lainnya, dalam memahami sebuah desain.

    3. Tipografi

    Prinsip visual hirarki tipografi

    ©Visme.co

    Mengombinasikan beberapa ukuran font dalam satu desain juga dapat membantu menentukan elemen paling penting dari sebuah desain.

    Contoh paling gampang, kamu tentu pernah melihat sebuah surat kabar bukan?

    Beberapa di antaranya ditulis dengan beragam ukuran font, untuk menentukan berita mana yang jadi tajuk utama.

    4. Ruang kosong

    Visual design hirarki - ruang

    ©Visme.co

    Dalam mendesain, terkadang ada keinginan untuk memenuhi ruang-ruang kosong yang masih tersisa.

    Padahal, menciptakan ruang kosong merupakan salah satu prinsip hierarki visual yang penting.

    Adanya ruang kosong pada desain yang kamu buat bisa membuat objek utamamu menjadi “terlihat”.

    Sebaliknya, menambah terlalu banyak gambar justru akan membuat desainmu tampak ramai dan kehilangan fokus.

    5. Pola membaca

    pola membaca F2 dalam desain visual

    ©G2.com

    Ada dua pola membaca yang menjadi prinsip dalam hierarki visual, yakni pola F dan pola Z.

    Pola membaca F adalah pola yang paling umum digunakan banyak orang. Sebab, ini adalah pola yang juga kita gunakan ketika membaca sehari-hari. Beberapa menyebutnya sebagai pola E.

    Kita akan mulai membaca dari kiri kemudian ke kanan, baru beranjak ke informasi yang ada di bawahnya. Itu sebabnya, web designer yang bertugas mendesain website yang padat dengan teks akan menggunakan pola ini.

    Baca Juga: 15 Tips Belajar Web Design untuk Jadi Web Designer Andal

    Sementara itu, pola membaca Z biasanya lebih banyak dipakai untuk situs yang berbasis gambar. Hal ini karena otak manusia memproses gambar lebih cepat ketimbang teks.

    Lewat pola ini, informasi penting akan diletakkan di paling atas.

    Setelahnya, pengguna akan menyapu pandangannya ke sebelah kanan, untuk kemudian secara diagonal melihat apa yang ada di kiri bawah. Itu sebabnya, pola ini disebut sebagai pola Z.

    6. Kedekatan (proximity)

    prinsip proximity dalam desain visual

    ©Visme.co

    Menempatkan beberapa objek berdekatan merupakan salah satu prinsip dasar dalam menyampaikan pesan pada format visual.

    Objek yang ditempatkan berdekatan menandakan bahwa elemen-elemen tersebut memiliki hubungan.

    7. Rule of third

    Prinsip hierarki visual rule of thirds

    ©Visme.co

    Rule of third merupakan salah satu prinsip hierarki visual, sekaligus teknik fotografi yang sudah sangat umum.

    Ya, untuk menghasilkan komposisi gambar yang seimbang, para fotografer biasanya akan membagi bidang fotonya menjadi 3 bagian, sebelum menangkap objek.

    Cara ini bisa membantu gambar terlihat “berbicara” dibandingkan gambar yang selalu diletakkan di tengah bidang.

    Baca Juga: Rekomendasi 5 Software Desain Web untuk Merancang Situs Tanpa Coding

    Memahami prinsip hierarki visual tentu akan membuat desain kamu menjadi lebih powerful. Kamu juga bisa memengaruhi tindakan seseorang melalui desain yang kamu sajikan.

    Untuk mengetahui bagaimana desainmu menjadi lebih efektif dan impactful bagi audiens-mu, kamu bisa bergabung di Glints ExpertClass.

    Di sini, kamu bisa belajar dan berdiskusi langsung dengan profesional dan pakar di bidangnya.

    Jadi, tunggu apa lagi? Ayo, cek kelas-kelas pilihan sebelum kehabisan kuota!

    Seberapa bermanfaat artikel ini?

    Klik salah satu bintang untuk menilai.

    Nilai rata-rata 4.4 / 5. Jumlah vote: 21

    Belum ada penilaian, jadi yang pertama menilai artikel ini.

    We are sorry that this post was not useful for you!

    Let us improve this post!

    Tell us how we can improve this post?


    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Artikel Terkait