Visual hierarchy sangat penting diterapkan untuk menghasilkan website yang baik. Visual hierarchy adalah salah satu prinsip utama yang dapat membuat website anda mencapai tujuan yang diinginkan.

Ada banyak research dan upaya yang telah dilakukan untuk memahami bagaimana menerapkan Visual hierarchy yang baik dan bagaimana cara Visual hierarchy bekerja.

Design adalah Form Untuk Berkomunikasi

Pada intinya, sebuah design adalah bentuk komunikasi visual. Karena ini tentang bagaimana mengkomunikasikan sebuah gagasan kepada orang lain melalui visual. Hal ini berlaku untuk semua jenis design, terutama design web. Seseorang pada umumnya tidak hanya melihat sesuatu tetapi mengatur (mengolah) apa yang mereka lihat. Hal ini berkaitan dengan “visual relationships”.

Kebangkitan Visual Hierarchy

Terlepas dari bagaimana Visual Hierarchy ada dipemikiran otak manusia. Cara yang efektif untuk mengkomunikasi sebuah pesan adalah menerapkan Visual Hierarchy.

Tools Visual Hierarchy

Setelah anda mengerti tentang Visual Hierarchy. Anda perlu menggunakan tools untuk membantu anda menerapkan Visual Hierarchy yang baik.

1. Size

Bagaimana Menerapkan Visual Hierarchy Pada Web Design

Ini adalah tools yang baik untuk anda gunakan mengorganisasi sebuah visual.

2. Color

Bagaimana Menerapkan Visual Hierarchy Pada Web Design

Ini adalah tools yang baik bagaimana menggunakan warna sehingga anda dapat membangun informasi melalui Visual Hierarchy.

3. Fonts

Bagaimana Menerapkan Visual Hierarchy Pada Web Design

Menggunakan tools ini membantu anda memilih font yang tepat sehingga anda dapat membuat Visual Hierarchy pada design anda.

4. White Space

Bagaimana Menerapkan Visual Hierarchy Pada Web Design

Saat kita ingin menerapkan Visual Hierarchy, pastikan white space menjadi bagian yang perlu diterapkan dari Visual Hierarchy itu sendiri. Karena white space adalah elemen penting dari design visual.


Pola Human Eye dan Scanning

Mata manusia bekerja secara otomatis dengan melihat pada bagian menarik tertentu. Mungkin ada beberapa orang yang tidak melakukakannya, tetapi kebanyakan orang akan cenderung melihat pada bagian yang menarik termasuk ketika melihat sebuah web.

1. F-Pattern

Ini adalah pola scanning yang dilakukan kebanyakan orang ketika melihat sebuah web seperti blog atau wiki. Pertama-tama melakukan scanning pada garis vertikal disisi kiri sebuah page, mencari keywords pada beberapa kalimat pertama sebuah paragraf.

Begitu user menemukan sesuatu yang menarik, user akan mulai membaca text secara normal pada garis horizontal. Pola ini menyerupai huruf F atau E.

Bagaimana Menerapkan Visual Hierarchy Pada Web Design


2. Z-Pattern

Bagaimana Menerapkan Visual Hierarchy Pada Web Design

Pola ini digunakan untuk page yang tidak berpusat pada teks. User melakukan scanning (memindai) garis horizontal di bagian atas sebuah page. Begitu mata mencapai ujung garis horizontal, mata bergerak ke bawah dan ke kiri, seperti kebiasaan membaca yang dari kiri ke kanan. Pola ini menyerupai huruf Z.

Pola ini sangat berguna ketika anda menerapkan Visual Hierarchy.

Sumber :

https://speckyboy.com/visual-hierarchy-web-design/