12+ Hirarki Visual Yang Wajib Diketahui Setiap Desainer Grafis

5 Likes Comment
Hirarki Visual

Banyak desainer pemula, terlebih yang belajarnya otodidak, tidak memperhatikan detail-detail penting dalam desain yang kemudian disebut hirarki visual.

Artinya, ada prinsip-prinsip tertentu yang harus dipegang agar desain buatan anda itu menarik, elengan dan sesuai tren.

Bagi saya, memahami hirarki visual adalah salah cara mengkomunikasikan desain tersebut seefektif mungkin.

Dengan kata lain, anda harus mengkombinasikan antara firasat dan citarasa pribadi dengan teori-teori desain yang ada.

Karena itu sebelum buat desain ada baiknya anda memahami prinsip hirarki visual, teori warna, komposisi dan perspektif.

Karena itulah, di artikel kali ini saya mau ulas beberapa prinsip hirarki visual yang harus diketahui oleh anda sebagai desainer grafis.

Apa itu hirarki visual?

Hirarki visual adalah teknik menyusun atau mengorganisasikan desain berdasarkan tingkat paling penting.

Misalnya nih, konsep awal desain didominasi oleh typografi, maka hirarkinya cenderung mengarah ke teks.

Jika desainnya berkaitan dengan situs web, maka hirarkinya tentu dimulai dari menu atau kategori, yang memungkinkan pengunjung memilah konten yang ada didalamnya.

Contoh sederhana bisa dilihat dari tampilan blog ini, yang mana hirarkinya dimulai dari header [menu, kolom pencarian dan favicon], diikuti body dan footer.

Singkatnya, anda mengatur dan memprioritaskan hirarkisnya terlebih dahulu untuk kemudian disesuaikan sama item atau elemen lain, seperti.

  • Ukuran, yang mana audiens cenderung melihat elemen yang ukurannya lebih besar
  • Warna cerah yang biasanya lebih menarik perhatian dibanding warna gelap
  • Kontras yang berarti warna yang terlihat sangat kontras cenderung lebih menarik
  • Perataan dimana elemen yang tidak sejajar akan terlihat menonjol dibanding yang tidak
  • Pengulangan, yang berarti, gaya berulang bisa membantu audiens memahami konten mana yang paling penting dan konten terkait dalam desain
  • Kedekatan, dimana, elemen-elemen yang ditempatkan secara dekat punya keterkaitan satu sama lain
  • Spasi yang berarti, lebih banyak ruang di sekitar elemen akan membuat desain lebih menarik
  • Terakhir soal tekstur dan gaya yang harus dibuat lebih kaya karena lebih menonjol dibanding yang datar-datar saja

Dengan demikian, hirarki visual yang efektif membantu desainer untuk menginformasikan, menekankan dan menarik orang yang melihatnya.

Jadi, apabila anda ingin situs web, aplikasi atau produk anda terlihat menarik, sangat penting untuk menyusun setiap elemenya agar terstruktur.

12+ Hirarki Visual Yang Wajib Diketahui Setiap Desainer Grafis

Nah tanpa perlu berlama-lama, berikut disajikan 12+ prinsip hirarki Visual yang harus diketahui setiap desainer grafis, diantaranya:

1.Ukuran dan skala [Size and scale]

Hirarki Visual

Yang pertama berkaitan dengan ukuran dan skala meski sampai hari ini masih ada perdebatan soal dua istilah diatas.

Perdebatan itu tidak berhenti pada substansi katanya tapi pada pengaplikasiannya, yang mana, apakah item dalam desain yang ukurannya besar terlihat lebih menarik?

Saya sih sepakat soal ini bahwasanya, elemen elemen visual yang besar cenderung lebih menarik ketimbang elemen yang ukurannya kecil.

Gak percaya? Coba lihat gambar diatas? Manakah yang lebih menarik menurut anda?

Sebagai contoh, coba bayangkan bagaimana jika postingan yang sedang anda baca sekarang ini, ukuran judul dan isi artikelnya sama?

Apakah menarik? Apakah anda akan terus membaca postingan ini? Ataukah anda segera meninggalkan blog ini jika tampilannya begitu?

Prinsipnya sama seperti saat anda buat desain dalam konsep apa saja. Artinya, ini tidak hanya ada saat mau buat desain situs web, tetapi juga berlaku di bidang lain.

Selain itu, elemen yang ukurannya lebih besar, baik dalam bentuk teks atau gambar, tidak saja menarik perhatian tapi juga akan memberikan kesan yang lebih kuat.

Begitu juga dengan skala. Skala, dalam konsep ini, dapat diartikan sebagai ukuran antar satu objek dengan objek lainnnya.

Tujuannya apa? Untuk menciptakan balance dan membantu audiens fokus pada elemen utama yang lebih dominan.

2. Warna dan kontras [Color and contrast]

Hirarki Visual

Konsep warna dan kontras ini tak jauh beda dengan ukuran dan skala yang sudah saya jelaskan pada poin pertama di atas.

Dimana, warna yang kontras cenderung lebih menarik ketimbang warna yang tidak kontras, atau dalam bahasa gaul, burik.

Karena apabila ada suatu huruf atau gambar dalam suatu desain yang warnanya cenderung cerah biasanya terlihat lebih menarik dibanding yang tidak.

Dalam desain grafis, konsep atau cara menghubungkan antar warna disebut colour scheme atau skema warna.

Dengan memilih skema warna yang sesuai tidak saja menciptakan balance dan harmoni tetapi juga menciptakan kontras yang akan membantu audiens memahami pesan utama dalam desain.

Sementara, apabila desain tersebut menggunakan warna yang kontrasnya berlebihan atau terlalu banyak warna akan membuat desain itu tidak lagi menarik, berantakan dan terkesan asal buat.

Karena itu, pilihlah warna yang sesuai dengan visi desain kalau perlu belajar lagi soal teori warna dan bagaimana menggunakan warna-warna yang menarik.

3.Hirarki tipografi [Typographics Hierarchy]

Hirarki Visual

Coba perhatikan desain Koran, majalah, kartu nama atau resume yang cenderung menggunakan font dan ukuran huruf yang berbeda-beda.

Penggunaan macam ini wajar mengingat kombinasi ukuran tidak saja membantu audiens memahami item mana yang paling penting dalam desain.

Tetapi juga untuk meningkatkan kesinambungan dan kehirarkisan komposisi seluruh desain.

Konsepnya sih sederhana dimana anda harus buat teks dengan ukuran yang berbeda-beda termasuk bobot dan spasi.

4. Spasi [Spacing]

Hirarki Visual

Ada dua hal penting yang harus anda ketahui soal spasi, diantaranya:

a. Ada aturan penggunaan spasi [Rule of spacing]

Aturan spasi berkaitan dengan apa yang mau anda tekankan dalam desain dan ini tak kalah penting untuk diaplikasikan.

Prinsip ini, pada dasarnya, menekankan pada pernyataan bahwa mesti ada ruang yang bisa meningkatkan estetika desain secara visual.

Artinya apa? Artinya, sebuah desain pun butuh ruang untuk bernafas, tidak terkesan sesak dan sempit, yang dikenal dengan istilah white space, lepas dari warna yang digunakan.

Dengan demikian, saat anda mengatur setiap elemennya, anda harus bisa menggunakan ruang-ruang disekitarnya untuk menempatkan pesan terpisah.

Pesan ini bisa berupa anak panah tersembunyi atau karakter lain yang membantu audiens memahami mana elemen utamanya.

b. Pola membaca [Page-scanning patterns]

Konteks ini berkaitan dengan hirarki visual dari sisi audiens. Karena audiens punya kecenderungan melihat desain dalam pola tertentu.

Bisa dari atas ke bawah, ke bawah dulu baru ke atas, ke tengah, ke samping kiri dan lain sebagainya.

Dengan demikian, apabila anda ingin audiens memperhatikan suatu elemen terlebih dahulu, anda harus punya visi yang jelas dalam desain.

Atau, anda bisa mengakalinya dengan menggunakan pola membaca paling general yang sering digunakan audiens, diantaranya:

  • F-Patterns yang cara kerjanya sama seperti saat anda baca buku atau artikel di internet. Dimana, mata anda akan melihat dari kiri ke kanan bagian atas, lalu mengulangnya lagi ke setiap baris teks baru sampai artikel itu selesai dibaca. Karena alasan inilah banyak desainer yang cenderung menggunakan pola satu ini saat mau buat situs web atau desain yang didominasi teks
  • Z-Patters atau pola membaca Z yang memungkinkan audiens menangkap atau melihat gambar terlebih dahulu sebelum teks. Dengan kata lain, gambar dalam desain lebih dominan ketimbang teks. Dan biasanya, audiens akan melihat dari kiri ke kanan, lalu turun ke bawah halaman secara diagonal sebelum melihat kembali ke bagian kiri
5. Kedekatan [Proximity]

Hirarki Visual

Proximity berarti anda menempatkan sebuah elemen yang saling terkait dengan elemen lain.

Dengan begitu, anda memberikan kesan kepada audiens bahwa semua objek dalam desain itu saling terkait.

Anda juga boleh menempatkan setiap elemen yang saling terkait itu dengan pesan yang sama atau sendiri-sendiri.

Sebagai contoh nih, apabila anda menempatkan sebuah elemen pada peta, audiens bisa tahu bahwa ada suatu hal dibaliknya.

Bisa saja tentang jarak antar suatu titik apakah dekat atau suatu lokasi aneh yang belum diketahui oleh anda sebagai kartografer.

6. Ruang putih [Negative space]

Hirarki Visual

Menempatkan ruang putih disekitar elemen bisa membantu audiens memahami hubungan antar satu elemen dengan elemen lain.

Meski pada dasarnya dua elemen ini memberikan pesan terpisah di sekitar ruang putih desain.

Hanya saja, kebanyakan audiens lebih fokus pada satu elemen karena memang desain dengan teknik ini fokus pada satu item secara individual.

Beberapa desainer bahkan menambahkan objek lain di ruang kosong ini, dengan tujuan untuk memperkuat pesan utama seperti yang ada pada logo.

7. Keselarasan [Alignment]

Hirarki Visual

Alignment berarti struktur setiap elemen yang ada dibuat dalam satu desain saja. Artinya begini, anda sudah mengatur bahwa komponen dalam desain, entah itu gambar atau teks, tidak ditempatkan asal-asalan

Dan biasanya dilihat saat mau buat desain teks, apakah disejajarkan ke kiri. Jika sejajar kiri maka marginnya pun ke kiri.

Visualisasi paling sering ditempatkan ditengah bingkai, dimana item tersebut akan memberikan kesan harmoni, selaras, sejajar dan bikin hati lega.

Saat ini, ada banyak desain yang rata tengah, yang berarti, akan ada jarak di setiap halaman yang bisa diberi margin kiri atau kanan.

Apabila kata-katanya tersebar secara acak akan membuat audies bingung karena itu, desain macam ini cenderung menggunakan konsep F-Patterns, yang disejajarkan ke kiri.

Sementara, pola Z sering menggunakan kombinasi perataan kiri, tengah atau kanan.

8. Penempatan elemen ditengah [Rule of Odds]

Hirarki Visual

Rule of odds berarti anda menempatkan suatu elemen, dalam banyak kasus berupa gamber, ada ditengah-tengah.

Anda juga bisa menempatkan elemen-elemen tambahan disekitarnya, guna memberi kesan bahwa elemen ditengahlah yang paling penting.

Desain macam ini akan membuat audiens lebih nyaman karena pola desainnya yang terlihat seimbang.

Tambahan, elemen yang jumlahnya ganjil di satu blok cenderung lebih menarik secara estetis ketimbang yang jumlahnya genap.

9. Pengulangan [Repetition]

Hirarki Visual

Tak jauh beda seperti kontras yang sudah saya jelaskan diatas. Hanya saja, repetition akan menambah kesan yang lebih kuat dalam desain.

Coba perhatikan artikel-artikel yang sudah saya terbitkan di blog ini, yang mana, desainnya sudah diatur sedemikian rupa.

Dengan demikian, setiap elemen-elemen yang ada entah itu font, ukuran huruf, warna dan iteman lainnya berbeda satu sama lain.

Karya dengan gaya ini bisa menciptakan kohesif yang diakui secara umum dan sudah jadi rule model desain situs web modern.

Disisi lain, untuk desain terpadu seperti yang ada pada brosur iklan, tetap diperlukan pengulangan entah itu font, huruf dan warna.

Ini penting ujntuk menciptakan kesan konsisten yang akan membantu audiens memahami poin utama yang mau disampaikan dalam desain.

10. Mengulang komposisi [Leading Lines]

Hirarki Visual

Leading lines adalah salah satu teknik dimana desainer mengulang komposisi yang ada dalam desain.

Komposisi ini bisa berupa titik-titik, garis-garis vertikal dan horizontal atau item-item lainnya.

Pengulangan menciptakan kesatuan yang bisa meningkatkan pemahaman dan pengenalan pada elemen tertentu.

Untuk menerapakan hal ini, anda bisa membuat badan teks dengan satu font sementara judul atau catatan kaki menggunakan font lain.

Usahakan juga untuk tetap mempertahankan konsistensinya agar karya tersebut bisa kohesif dan berkesinambungan.

11. Aturan pertiga [Rule of thirds]

Hirarki Visual

Konsep ini masih menggunakan teknik fotografi, yang mana, sebuah desain yang mantap selalu menggunakan beberapa kisi.

Biasanya, grid paling khas menggunakan komposisi modular klasik yang melintang diantara garis vertical dan horizontal.

Banyak seniman dan fotografer yang sudah menerapkan aturan ini dalam karya mereka. Hasilnya? Jauh lebih bagus dibanding yang tidak.

Intinya, aturan pertiga ini akan meningkatkan keseimbangan antar setiap elemen yang ada dalam desain.

Penggunaannya gimana? Anda bisa menempatkan dua garis horizontal dan dua garis vertikal yang akan menciptakan sembilan ruang terpisah seperti yang terlihat pada gambar ilustrasi diatas.

12. Perspektif [Perspective]

Hirarki Visual

Perspektif dibuat dengan tujuan untuk menciptakan ilusi yang idenya berasal dari kehidupan sehari-hari manusia.

Anda boleh menempatkan ilusi macam ini beberapa inci atau beberapa mil dalam desain.

Dengan ilusi tersebut, secara langsung audiens akan melihat bahwa objek yang lebih besar terkesan lebih dekat dibanding objek yang ukurannya lebih kecil.

Dengan begitu, audiens bakal melihat ilusi ini untuk pertama kalinya sebelum lanjut ke objek lain dalam desain.

Penutup

Sebagai konklusi, baiknya anda menghindari penggunaan item yang terlalu banyak agar hirarki desain tidak terlihat amburadul.

Karena apabila semua elemen dalam desain terlihat menonjol, sebenarnya anda memperlihatkan bahwa tidak ada yang menonjol disitu.

Disinilah fungsi hirarki visual tersebut. Karena itu, setelah desain itu dibuat, bertanyalah kepada diri sendiri, apakah desainnya sudah tepat? Elemen mana yang bakal dilihat audiens untuk kali pertama dan pertanyaan serupa lain.

Demikian artikel tentang 12+ hirarki desain yang harus diketahui setiap desainer grafis. Semoga artikel ini bisa bermanfaat untuk anda. ***

NOTABENE: Materi dan gambar artikel ini diambil dari blog Visme.co. Artikel asli bisa dilihat lewat tautan ini

You might like

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *