Hierarki Visual Dalam Desain Grafis dan Web
Artikel berikut membahas tentang susunan atau tingkatan object dalam hierarki visual dalam desain grafis dan web.
Jika Anda sering bekerja dengan desainer atau salah satu desainer grafis, maka penting bagi Anda untuk sedikit banyak memahami hierarki visual.
Mungkin ada dari Anda yang sudah berbakat, tanpa sadar dapat mengatur layout komposisi desain dengan baik tanpa menghadapi suatu kesulitan, namun hierarki visual dalam desain grafis dan web adalah suatu ilmu dan keahlian yang dapat dipelajari sehingga Anda bisa mengatur konten visual dengan profesional sehingga menarik, tertata baik dan efektif.
Segala sesuatu di tuntut agar lebih baik dan lebih cepat diera digital seperti saat ini.
Rentang perhatian menyusut dan teknologi berkembang, desainer grafis dan web dipaksa untuk menyajikan informasi dengan cara yang paling mudah dicerna - cara yang memandu orang untuk membaca lebih dalam dan jauh.
Dalam hal inilah hierarki visual bekerja. Hierarki visual membantu mengarahkan orang ke informasi paling penting pada halaman menggunakan elemen desain grafis seperti warna, ukuran, dan pengaturan tata ruang untuk mengatur, memprioritaskan dan cara penyajian konten.
Hierarki Visual Dalam Desain Grafis dan Web
Mari kita bahas empat elemen dasar dari hierarki visual:
- Warna
- Ukuran
- Penjajaran
- Ruang
1. Provokasi warna
Mata manusia pada dasarnya tertarik pada warna. Warna terang dan cerah lebih menonjol daripada warna yang gelap memiliki bobot visual yang lebih besar.
Dalam sebuah media desain, warna dapat digunakan untuk membuat struktur, atau membantu navigasi.
Warna juga memiliki makna dan menciptakan respon emosional pada penonton secara tidak sadar.
Penelitian menunjukkan bahwa warna biru sering kali dianggap dapat diandalkan, aman, dan menenangkan, sedangkan warna merah merangsang dan bahkan dikenal dapat meningkatkan detak jantung pemirsa.
Contoh penerapan warna dalam desain grafis adalah seperti iklan berikut. Iklan ini menggunakan warna untuk membuat penonton merasa tidak nyaman dan menarik perhatian ke sesuatu yang tidak biasa.
warna dalam hierarki visual
Inti nya? Jangan sembarangan memilih warna karena terlihat bagus.
Ketika digunakan secara strategis, warna sangat ampuh untuk menyoroti informasi penting, mengarahkan orang ke tempat yang mereka tuju, dan memicu respons emosional.
2. Ukuran membuat kesan berbeda
Menjaga keseimbangan dan keselarasan adalah kunci untuk semua elemen desain grafis.
Ukuran menentukan hierarki visual di mana item yang lebih besar menarik lebih banyak perhatian dan dengan demikian tampaknya menjadi yang paling penting.
Hanya dengan melihat gambar di atas tanpa konteks, mata Anda langsung menganggap lingkaran terbesar adalah yang paling penting.
Anda telah menarik makna dari bentuk dan tatanan ini dengan hanya satu kualitas yang berubah di antara keduanya.
Gambar: ukuran dalam hierarki visual
Ukuran sering digunakan dalam konten teks untuk mengidentifikasi subjek, judul, atau kutipan penting yang bermakna, menjadikan mana yang paling penting menjadi yang terbesar.
Ingatlah bahwa terlalu banyak variasi ukuran bisa jadi membingungkan, jadi dengan mempunyai suatu susunan dasar struktur ukuran adalah ide yang baik.
Konten sekunder, seperti label, harus lebih kecil, sehingga tidak bersaing dengan informasi yang lebih penting.
ukuran huruf dalam hierarki visual
Saat mendesain, ukuran setiap elemen adalah bagian penting untuk menciptakan sesuatu yang mudah diingat dan jelas.
Di bawah ini adalah contoh merek yang menggunakan hierarki ukuran yang tepat untuk menekankan nama merek terlebih dahulu, dan semua elemen lainnya di urutan kedua.
Di sebelah kanan, kami melihat contoh buruk ukuran dalam hierarki visual di mana slogan mendominasi dan kami dibiarkan tanpa kesan yang jelas tentang nama perusahaan.
3. Tatanan layout dalam media grafis
Layout menciptakan sistem aturan dalam hierarki visual. Hal ini memastikan tidak ada yang ditempatkan secara acak pada media desain, namun sebaliknya, menuntun pandangan mata orang dari satu elemen ke elemen lainnya.
Gambar: pola z dalam layout desain
Diagram Guttenberg menegaskan orang membaca sepintas konten dalam pola Z, yang berarti informasi yang paling penting harus ada di pojok kiri atas dan kanan bawah. Kami sering melihat ini dalam desain. Lihat halaman pendaftaran Trello.
Gambar: contoh praktek pola z pada halaman web trello
Nilai dan tujuan dikomunikasikan di pojok kiri atas utama, diikuti oleh tombol pendaftaran di kanan bawah.
Untuk seseorang yang membolak-balik halaman, ini adalah dua hal yang perlu Anda waspadai segera sebelum menindaklanjuti dengan tindakan pendaftaran.
Saat Anda membaca halaman ini, perhatikan kemana mata Anda pergi dulu dan kemudian kedua. Anda akan terkejut dengan betapa konsistennya prinsip penyelarasan ini diterapkan.
Di bawah ini adalah contoh penyelarasan yang digunakan secara menguntungkan dalam logo di kiri, dan buruk di kanan.
Menumpuk elemen desain dari yang terkecil hingga terbesar dan menyejajarkannya di tengah memberikan struktur informasi yang jelas — terutama dalam potongan desain kecil seperti logo.
Di sebelah kiri, kita melihat betapa buruknya penyelarasan elemen desain Anda dapat membuat logo berantakan yang tidak mengalir dengan baik.
Berpegang pada prinsip keselarasan ini akan membantu Anda membangun kerangka untuk elemen desain Anda. Menghasilkan pengalaman visual yang mengalir bagi penonton!
4. Ruang menciptakan keseimbangan
Ruang negatif, atau “Ruang putih”, dalam desain adalah ruang kosong yang tidak berisi. Ruang negatif menarik perhatian pada apa yang harus difokuskan oleh pemirsa.
Desain yang mengabaikan elemen ini dalam hierarki visual akan terlihat berantakan dan berantakan.
Ruang putih memisahkan dan mengatur elemen desain untuk menciptakan keseimbangan.
Ruang negatif pada desain
Lihat bagaimana desain kemasan coklat menempatkan logo pada satu-satunya ruang kosong dan putih sebagai cara untuk menarik perhatian ke nama perusahaan?
Penggunaan ruang kosong dan warna yang disengaja ini adalah contoh sempurna tentang betapa halus namun pentingnya penggunaan ruang dalam hierarki visual.
Sekarang Anda siap untuk menyempurnakan desain Anda!
Sekarang setelah Anda memiliki pemahaman dasar tentang empat prinsip inti hierarki visual, Anda dapat membuat pilihan desain yang tepat.
Ingat, hierarki visual dalam grafis desain dan web terdiri dari 4 elemen penting, yaitu:
- Warna menarik perhatian dan memprovokasi respons emosional
- Ukuran menetapkan hierarki kepentingan di halaman
- Penjajaran adalah jalan bata kuning yang mengarahkan mata melalui informasi terpenting
- Ruang menciptakan ruang bernapas bagi pemirsa untuk fokus pada hal-hal yang penting
Siap menerapkan elemen hierarki visual ke materi desain Anda? Anda bisa konsultasi untuk mendapatkan hasil web desain terbaik pada:
FruityLOGIC Design - fruitylogic.com
Graphic Design, Website Design, SEO
Kupang Baru 1/100, Surabaya 60189
t : +62317344564
f : +62317342062
e : info[@]fruitylogic.com
WA : 081332161357