Desain 101: Mengapa Hirarki Visual Dalam Desain Penting

Jumlah konten yang kita semua lihat setiap hari sangat mengejutkan. Jadi kami mengandalkan bagaimana itu diatur untuk memahaminya. Inilah sebabnya mengapa buku memiliki bab, film memiliki adegan, podcast memiliki episode, dan mengapa ada hierarki visual dalam desain.

Hirarki visual adalah semua tentang organisasi konten Anda. Anda dapat menggunakannya untuk memperjelas apa yang paling penting, apa yang paling tidak penting, dan segala sesuatu di antaranya. Ada kemungkinan bahwa setiap anggota audiens Anda dapat menafsirkan materi iklan Anda dengan cara yang sedikit berbeda. Tetapi melalui hierarki visual dalam desain, Anda dapat memberi mereka beberapa petunjuk untuk memandu mereka.

Apa yang membuat ini begitu penting? Nah, konten yang pertama kali dilihat oleh pemirsa, akan dianggap sebagai yang paling penting. Dan elemen yang menarik perhatian mereka setelahnya, akan diberi peringkat yang sesuai.

Mendefinisikan hierarki visual dalam desain

Menurut Nielsen Norman Group, “Hirarki visual mengontrol penyampaian pengalaman. Jika Anda kesulitan mencari tahu di mana mencarinya di halaman, kemungkinan besar tata letaknya tidak memiliki hierarki visual yang jelas.”

Dengan kata lain, hierarki visual melibatkan pengaturan elemen desain untuk menunjukkan betapa pentingnya masing-masing elemen, dalam hubungannya satu sama lain. Desainer menyusun desain mereka sehingga orang dapat membaca dan memahami pesan yang dikomunikasikan dengan mudah.

Ketika elemen ditata secara kohesif dan logis, desainer mampu mempengaruhi persepsi pemirsa. Jadi sekarang kami telah memperkenalkan Anda pada hierarki visual dalam desain, mari kita lihat bagaimana Anda dapat mencapainya.

Pentingnya hierarki visual

Pada tingkat yang paling mendasar, hierarki visual membantu memandu pembaca melalui konten yang mereka lihat. Ini memberitahu mereka bagian-bagian dari informasi yang disajikan yang paling penting. Ini juga menunjukkan kepada mereka bagaimana informasi telah dipecah menjadi beberapa bagian dan kategori. Dan bagian konten mana yang harus mereka periksa terlebih dahulu.

Aturan ini berlaku sama baik itu teks, video, gambar atau bentuk desain lainnya. Membuat informasi mudah dipahami, dengan cara yang Anda inginkan untuk menyajikannya, adalah tujuan akhir dari hierarki visual dalam desain. Ini membangun hubungan antara berbagai bagian konten yang ingin Anda sajikan. Dan membantu Anda meninggalkan audiens Anda dengan kesan atau pesan tertentu.

Saat Anda meningkatkan keterbacaan dan memandu pemirsa secara visual, pesan yang Anda coba komunikasikan akan diperkuat. Tanpa menggunakan hierarki visual, semua kerja keras Anda dalam mengembangkan kampanye pemasaran bisa keluar jendela. Jadi mari kita lihat bagaimana hal itu dapat dicapai.

Cara membuat hierarki visual dalam desain

Dalam setiap aset pemasaran Anda, berpegang pada prinsip-prinsip desain sangat penting. Ini menciptakan pengalaman pengguna yang luar biasa. Inilah yang perlu Anda ingat dalam hal hierarki visual dalam desain:

Ingatlah pola membaca

Kebanyakan membaca halaman dari atas ke bawah dan dari kiri ke kanan. Atau mereka paling tidak akrab dengan konvensi ini meskipun mereka juga mengonsumsi konten dengan cara lain. Ini mungkin membuat perencanaan desain terdengar seperti proses yang mudah. Tetapi tugas yang dihadapi desainer di sini sebenarnya jauh lebih rumit.

Studi terbaru menunjukkan bahwa orang umumnya memindai melalui halaman, kemudian memutuskan apakah tampaknya cukup menarik bagi mereka untuk membaca. Dan pola pemindaian bervariasi dari apa yang kita ketahui tentang pola membaca. Mereka biasanya mengambil salah satu dari dua bentuk: F atau Z. Jadi, penting untuk fokus pada area ini ketika Anda mencoba menarik perhatian audiens Anda. Mari kita lihat apa yang dimaksud dengan masing-masing pola:

Pola F

Memiliki halaman teks yang berat (pikirkan blog dan ebook)? Maka pola F akan menjadi cara terbaik untuk meletakkannya. Ini karena pembaca akan dengan cepat memindai sisi kiri halaman dan kemudian mencari kata kunci yang menarik bagi mereka. Mereka akan mencari ini baik di judul rata kiri atau di beberapa kalimat topik pertama.

Mereka kemudian akan berhenti dan melanjutkan ke sisi kanan, jika mereka menemukan sesuatu yang menarik perhatian mereka. Pola pemindaian yang dihasilkan terlihat seperti F (atau bahkan E). Ingin tahu bagaimana Anda dapat memasukkan ini ke dalam desain Anda? Hanya meminta informasi yang paling penting untuk dibiarkan rata. Penggunaan judul pendek dan tebal, poin-poin dan kriteria lain yang menarik perhatian juga akan berguna untuk memecah paragraf yang berat.

Pola Z

Jika tidak ada blok teks seperti di atas, pola Z akan berlaku. Contoh yang baik dari hal ini adalah dalam desain halaman arahan dan atau pada materi iklan. Di sini, mata pembaca pertama-tama akan secara alami melihat ke bagian atas halaman. Mereka tahu bahwa di sinilah informasi penting paling mungkin tersedia.

Kemudian mereka langsung turun ke sudut yang berlawanan dalam garis diagonal. Dan mereka mengulangi pemindaian di bagian paling bawah halaman. Mayoritas desainer menggunakan ini untuk keuntungan mereka. Mereka melakukannya dengan menempatkan semua informasi terpenting di bagian paling atas dan paling bawah halaman. Dan kemudian mereka menempatkan semua informasi lain yang perlu dibaca di bagian atas dan bawah dalam garis penghubung diagonal.

Pertimbangkan ukuran dan skala

Jika ada sesuatu yang keras dan jelas, Anda akan lebih mudah mendengarnya bukan? Tidak ada volume pendengaran dalam hal hierarki visual dalam desain. Namun ukuran dan skala elemen desain yang digunakan tentu memiliki efek serupa. Semakin besar elemennya, semakin besar kemungkinan orang untuk melihatnya dan memperhatikannya. Inilah sebabnya mengapa elemen di bagian atas hierarki harus lebih besar.

Elemen-elemen yang tidak begitu penting dapat diperkecil agar tampak lebih kecil sehingga kurang mendapat visibilitas dan penekanan. Ini akan mendorong mereka ke tingkat yang lebih rendah pada skala kepentingan. Ini tidak berarti bahwa hal yang paling penting dalam tata letak hanya harus menjadi raksasa. Inilah mengapa penskalaan itu penting. Ukuran perlu digunakan dalam jumlah sedang, dalam kaitannya satu sama lain. Dan juga dengan selera tinggi agar tidak menghilangkan daya tarik visual dari sebuah desain. Elemen yang tampak terlalu besar dapat menutupi sisa desain. Dan elemen yang terlalu kecil akan hilang sama sekali dari pembaca.

Penggunaan warna dan kontras

Cara lain di mana hierarki visual dapat diimplementasikan dalam sebuah desain adalah melalui penggunaan warna dan kontras. Katakanlah halaman desain atau situs web Anda semuanya hitam putih. Jika Anda membawa sedikit warna ke area tertentu, itu akan menjadi titik fokus utama. Desainer idealnya harus mendandani elemen terpenting dalam desain dengan beberapa warna cerah untuk membuatnya menonjol dibandingkan dengan yang lebih pucat.

Inilah sebabnya mengapa siswa menyoroti dalam buku teks. Ini membantu mereka fokus pada poin-poin penting daripada membaca banyak teks. Demikian pula, elemen berwarna cerah dalam sebuah desain akan menarik perhatian pembaca sebelum elemen lainnya melakukannya.

Jika Anda melihat bahwa ada banyak warna cerah dalam desain Anda, bersaing untuk mendapatkan perhatian, pastikan untuk terhubung dengan desainer Anda. Jika mereka tidak jelas tentang bagian informasi mana yang perlu lebih tinggi dalam hierarki, mereka mungkin tidak menggunakan kontras dengan cara yang paling efektif untuk mencapai tujuan Anda.

Memiliki kontras tinggi dalam desain akan menarik fokus ke elemen tertentu yang harus dilihat pemirsa. Warna kontras dalam hierarki visual juga berdampak pada jarak yang dirasakan antar elemen. Warna-warna hangat akan lebih baik dalam menonjolkan latar belakang yang gelap. Dan mereka akan terlihat lebih dekat ke pembaca daripada warna yang lebih keren pada latar belakang yang sama.

Sebaliknya, warna yang lebih dingin akan tampak lebih cerah dan lebih dekat pada latar belakang yang lebih terang dibandingkan dengan warna yang lebih hangat. Namun, desainer harus menggunakan kontras warna dalam jumlah yang tepat saja. Jika terlalu sering digunakan, segala sesuatu dalam desain akan terlihat penting dan pembaca tidak akan tahu di mana mencarinya. Mereka bahkan mungkin merasa kewalahan. Dan Anda tahu apa yang menyebabkan – kehilangan perhatian mereka sama sekali. Selalu ingat bahwa hierarki visual perlu menjadi panduan pemirsa.

Bermain dengan ruang dan tekstur

Cara cerdas untuk membuat hierarki visual dalam desain adalah dengan memberikan ruang bernapas yang cukup di antara elemen-elemen di dalamnya. Misalnya, jika ada cukup ruang negatif yang tersisa di sekitar tombol CTA, perhatian akan tertuju padanya.

Pindah ke tekstur, ketika orang berbicara tentang tekstur dalam desain dan sehubungan dengan hierarki visual, itu memiliki arti yang sangat spesifik. Ini mengacu pada keseluruhan pengaturan atau pola ruang, detail atau bahkan teks dalam sebuah desain.

Mirip dengan ukuran dan skala, tekstur adalah alat yang berguna untuk memandu perhatian pemirsa ke bagian tertentu dari desain Anda. Melalui kedalaman tekstur dan bentuk dapat dibuat yang membuat desain Anda lebih menarik secara visual. Tetapi Anda dapat memiliki terlalu banyak hal yang baik. Desain dengan tekstur yang terlalu banyak dapat membingungkan, mengganggu, dan sulit dipahami secara keseluruhan.

Gunakan font dan hierarki tipografi yang berbeda

Font yang Anda gunakan tidak boleh bersaing satu sama lain karena ada hierarki visual atau tipografi. Dan penting untuk mempertimbangkan bagaimana font yang berbeda berpasangan, serta variasi yang tersedia untuk jenis huruf apa pun.

Misalnya, font seperti Times New Roman terdiri dari tipografi berbeda yang memiliki bobot, gaya, dan ukuran yang berbeda. Desainer Anda perlu mempertimbangkan hierarki visual dalam desain saat mereka memutuskan opsi mana yang akan digunakan.

Dalam desain yang baik, ukuran, gaya, dan bobot yang berbeda dari font yang sama dapat digunakan dalam kombinasi untuk membuat beberapa kata lebih menonjol daripada yang lain. Menyatukan terlalu banyak font atau tipografi yang berbeda akan membuat desain tidak menarik dan sibuk, jadi hindari melakukannya.

Biasanya lebih besar dan lebih berani berarti informasi tersebut ditafsirkan lebih penting. Sementara teks yang lebih kecil dan tipis dianggap kurang penting. Jika Anda hanya melihat majalah atau surat kabar, menjadi sangat jelas bagaimana headline muncul di atas dengan huruf besar dan tebal sementara subjudul mengikuti, akhirnya dengan salinan dengan huruf terkecil. Ini adalah pendekatan tingkat dasar yang dapat dimasukkan ke dalam berbagai jenis desain, apa pun desainnya.

Berikut uraian singkatnya:

• Tipografi Level 01 akan menjadi yang paling penting di halaman. Konten ini biasanya terdiri dari header dan harus menjadi hal pertama yang dilihat pelanggan.
• Tipografi Level 02 juga perlu disorot, tetapi tidak sebanyak Level 01. Ini akan membantu mengatur desain ke dalam kelompok dengan informasi yang benar yang terkait. Ini juga akan membantu untuk memecah teks dan memberikan semacam petunjuk arah kepada orang yang membacanya.
• Tipografi Level 03 adalah apa yang membuat tubuh teks. Itu harus tetap terbaca tetapi juga akan menjadi yang terkecil dan paling ringan dari tipografi yang digunakan.

Ketika Anda memiliki tingkat yang berbeda dalam desain, menjadi lebih mudah untuk menunjukkan kepada pembaca apa yang penting tanpa harus terlalu 'menghadapi Anda' tentang hal itu.

Perhatikan keseimbangan dan keselarasan

Objek apa pun dalam desain membawa sejumlah berat seperti yang mereka lakukan di dunia fisik. Ini disebut bobot visual dalam sebuah desain. Penjajaran elemen dalam kaitannya dengan elemen lain dalam desain dapat secara signifikan mengubah bobot visualnya.

Misalnya, jika objek diluruskan ke kiri, itu akan menarik perhatian pengguna terlebih dahulu. Sisa elemen dalam desain (pada pandangan pertama) hanya akan menyatu. Bobot visual dalam sebuah desain ini juga perlu memiliki jumlah keseimbangan yang tepat.

Keseimbangan dapat diimplikasikan dengan penggunaan ukuran, bentuk, dan kontras yang cerdik. Itu dapat dicapai melalui simetri, kesetaraan, dan bahkan asimetri. Pikirkan tentang asimetri sebagai kontras yang mencolok dari pencerminan. Alih-alih Anda melihat pantulan, Anda akan melihat sesuatu yang mendistribusikan elemen secara merata.

Faktor dalam gaya desain Anda

Gaya atau estetika desain Anda akan membantu Anda memperkuat tema dan melibatkan pengguna Anda. Gaya sebenarnya dapat mencakup segalanya mulai dari tipografi hingga warna dan bahkan spasi. Beberapa gaya paling populer dalam desain akhir-akhir ini adalah organik, datar, minimal, skeuomorfik, bergambar, atau retro.

Cara hebat lainnya untuk membuat konten Anda lebih menonjol adalah dengan mencocokkan gaya desain dengan konten. Jika konten yang perlu dimasukkan minimal dan, desain yang mengikuti dapat dilakukan sesuai dengan tema minimalis juga.

Hancurkan jaringan

Tata letak halaman arahan dirancang menurut pola kisi, yang dibuat ketika garis vertikal dan horizontal ditempatkan pada desain. Dalam sistem yang begitu mapan dan terstruktur, hanya ada satu cara untuk membangun hierarki – pecahkan kisi-kisi. Sekarang kami tidak bermaksud menghancurkannya sepenuhnya. Tapi teks yang diatur dalam kurva atau garis diagonal pasti akan menonjol di antara semua teks lain yang ditempatkan di grid. Jadi gunakan strategi ini untuk berita utama pada khususnya.

Bermain dengan komposisi

Desain lebih baik jika ada struktur untuk menciptakan hierarki visual. Inilah yang dikenal sebagai komposisi dalam desain. Seniman telah mengandalkan banyak teknik komposisi yang berbeda selama berabad-abad dan banyak di antaranya masih digunakan sampai sekarang.

• Aturan sepertiga adalah cara yang bagus untuk membuat komposisi dinamis di mana titik fokus tidak selalu harus ditempatkan tepat di tengah. Instad, aturan ini mengatakan bahwa Anda dapat membagi tata letak kotak menjadi tiga bagian yang berjarak sama dan menempatkan empat titik fokus di mana garis berpotongan.

• Aturan peluang menyatakan bahwa jumlah elemen ganjil lebih menarik bagi mata manusia daripada angka genap. Pikirkan titik fokus yang dikelilingi oleh dua item lain di kedua sisi. Perhatikan contoh di bawah ini yang menggunakan 3 mata pelajaran.

Praktik terbaik untuk memastikan hierarki visual dalam desain

Akhirnya, berikut adalah beberapa hal yang harus Anda ingat sebagai praktik terbaik untuk hierarki visual dalam desain. Menggunakan teknik ini akan membantu menciptakan pengalaman yang lebih baik bagi audiens Anda:

• Dalam hal desain UX seluler, pengguna di layar yang lebih kecil harus dapat langsung melihat elemen dan mereka harus dapat menavigasi konten dengan mudah.
• Berhati-hatilah saat Anda memilih font dan tipografi. Rumit, font kursif mungkin berlaku untuk beberapa industri seperti perencanaan pernikahan misalnya. Tetapi teks dekoratif bersama dengan efek tertentu dapat mengganggu dan juga dapat mengurangi keterbacaan.
• Ketahui apa prioritas pengguna. Anda ingin dapat memandu pengguna dengan informasi yang diurutkan berdasarkan kepentingannya. Akan menjadi kontraproduktif jika segala sesuatu dalam desain ditekankan. Anda juga perlu mengetahui elemen-elemen yang perlu dialokasikan pada tingkat kepentingan yang sama.
• Selalu ingat tujuan akhir yang ingin Anda capai dengan setiap desain dan pastikan Anda mengartikulasikannya dengan jelas kepada desainer Anda.

Hirarki visual adalah cara untuk menertibkan sebuah desain

Seperti yang Anda lihat, ada banyak cara di mana Anda dapat memasukkan hierarki visual ke dalam desain. Dan dengan melakukan itu, Anda dapat menyampaikan pesan Anda dengan jelas. Jika dilakukan dengan benar, ini akan membuat desain tetap seimbang, dan terlihat profesional. Dan itu akan mendapatkan jumlah perhatian yang tepat untuk konten yang paling penting. Mungkin perlu beberapa percobaan, terutama dengan beberapa metode yang tidak konvensional untuk mencapai hal ini. Tapi tetaplah melakukannya, karena selalu ada cara untuk menggunakan hierarki visual untuk membuat desain memiliki dampak dan kemahiran yang lebih baik.