Hirarki Visual untuk Pemula

Hirarki visual adalah organisasi objek dalam urutan tertentu untuk menarik perhatian ke area yang dituju.

Umumnya digunakan dalam desain UX, hierarki visual memberi pembaca waktu yang lebih mudah untuk menavigasi dan membantu mengarahkan perhatian mereka ke tempat yang Anda inginkan.

Penggunaan yang tidak tepat atau kurangnya hierarki visual dapat membuat pengunjung situs web bingung dan tersesat.

Hirarki visual lazim di poster dan iklan untuk membantu mengarahkan perhatian ke elemen yang dimaksud.

Blog ini akan membekali pemula dengan dasar-dasar hierarki visual.

Hirarki Visual Rusak

Memecah hierarki visual menjadi bagian-bagian yang lebih sederhana membantu menjelaskan bagaimana desainer menangani konsep desain.

Tiga adalah tiga peran utama dalam hierarki visual, dua di antaranya sangat terkait.

Ukuran

Mengubah ukuran objek dapat membantu menarik perhatian atau menjauh darinya.

Sangat penting untuk meninggalkan ukuran terbesar untuk informasi terpenting yang ingin Anda ungkapkan. Menggunakan terlalu banyak elemen berukuran sama akan menghilangkan efek ini, karena tidak ada yang menonjol.

Ukuran penskalaan sangat penting untuk menunjukkan perbandingannya dengan objek lain. Menciptakan rasa keseimbangan membantu dalam penskalaan untuk menekankan bagaimana objek terbesar Anda dibandingkan dengan yang lebih kecil.

Jika Anda memiliki informasi yang tidak penting, menyimpannya dalam ukuran kecil akan menjauhkannya dari jalan dan meninggalkannya di tempat yang terakhir dilihat pengguna.

Warna & Kontras

Warna yang lebih cerah melakukan pekerjaan yang lebih baik untuk menarik perhatian daripada yang lain. Efek ini meningkat saat Anda menggabungkan warna-warna cerah dengan latar belakang yang lebih gelap. Hasilnya membuat informasi Anda lebih menonjol dan menarik perhatian dengan mudah.

Warna dan kontras adalah dua bagian dari hierarki visual, tetapi keduanya bekerja sama dengan sempurna untuk menarik perhatian.

Salah satu cara untuk menggunakan metode ini adalah mengubah warna teks dengan menyorotnya dengan warna mencolok; itu akan menarik perhatian sebelum teks berwarna kusam lainnya.

Semakin besar kontrasnya, semakin kuat perhatiannya. Menambahkan perbedaan warna yang drastis seperti latar belakang gelap dengan font merah cerah akan menarik perhatian pengguna dan menjadikannya hal pertama yang mereka perhatikan pada gambar atau halaman web mana pun.

Saat membuat warna kontras untuk menarik perhatian, yang terbaik adalah meminimalkannya. Terlalu banyak objek kontras membingungkan pembaca dan menciptakan efek yang tidak diinginkan dan merugikan.

Cara lain untuk menggunakan warna adalah dengan memilih palet serupa untuk menciptakan korelasi antara objek tertentu.

Yang terbaik adalah memesan taktik ini hanya untuk elemen yang paling penting pada halaman, karena Anda ingin semua perhatian diarahkan terlebih dahulu.

Desain UX yang baik mencakup banyak kontras, dengan sebagian besar estetika menggunakan kontras yang kuat untuk menciptakan karya yang menakjubkan.

Pola F & Z

Dalam hal memberikan informasi terutama melalui teks, ada dua pola utama yang paling baik memanfaatkan cara kita memproses informasi visual.

Pola-pola ini berfungsi untuk sebagian besar bahasa tetapi berfungsi dengan baik untuk bahasa Inggris karena kata-kata dibaca dari kiri ke kanan dan dari atas ke bawah.

Pola F

Pola F adalah pilihan sempurna untuk desain yang berisi teks ekstensif. Desain mengikuti huruf yang dinamai menurut namanya, mulai dari kiri atas dan bergerak ke kanan.

Setelah itu, pemirsa memindai ke bawah untuk mencari subjudul atau tajuk utama.

Pola ini secara bergantian bernama E-pattern, meskipun F-pattern lebih ikonik.

Untuk menggunakan pola-F, Anda perlu menempatkan semua informasi penting di sisi kiri dalam judul kecil untuk menarik perhatian.

Desain ini luar biasa dalam menghilangkan kebosanan yang terkait dengan membaca teks dari blok paragraf yang besar.

Pengguna dapat memindai tajuk utama untuk menemukan tajuk utama atau poin-poin yang menarik, karena mereka berfungsi untuk menarik perhatian.

Pola Z

Sementara pola-F cocok untuk situs web yang padat teks, pola-Z berbeda.

Pola Z sangat cocok untuk situs web atau iklan yang tidak memiliki beberapa paragraf teks.

Desain dimulai dengan menempatkan informasi prioritas tertinggi di kiri atas, kemudian mengalir penting ke kanan atas, kiri bawah, dan kanan bawah.

Pengguna akan menavigasi pola-Z dengan mudah, karena ini adalah desain yang sering digunakan dan mudah dipahami.

Bagian kiri atas biasanya disediakan untuk logo, karena itu akan menjadi hal pertama yang diperhatikan orang. Di kanan atas adalah ajakan bertindak yang diposisikan setelah pengguna melihat logo perusahaan. Ajakan bertindak dalam situasi ini biasanya berupa permintaan pendaftaran.

Bagian tengah desain biasanya menyertakan gambar untuk mengisi bagian yang kosong.

Kiri dan kanan bawah mencakup semua teks atau informasi yang ingin Anda tunjukkan kepada pengunjung Anda.

Pengertian Tipografi

Hirarki tipografi mudah dipahami dan dapat diterapkan untuk desain apa pun yang melibatkan banyak teks, yang merupakan sebagian besar. Itu dapat dipecah menjadi tiga bagian, dengan urutan menjadi judul, subjudul, dan akhirnya teks Anda.

Judul Anda berisi informasi penting, ditempatkan paling tinggi pada desain Anda, dan merupakan konten yang paling terlihat.

Subjudul Anda berfungsi untuk mengurutkan semua teks Anda dan mengatur kekacauan paragraf. Selalu pertahankan subpos Anda lebih kecil dari judul Anda, karena mereka tidak boleh bersaing dalam prioritas.

Subjudul menyediakan navigasi langsung bagi pengguna untuk menemukan informasi spesifik.

Bagian terakhir Anda adalah teks Anda, yang biasanya melibatkan paragraf. Ukuran font harus kecil tetapi tetap mudah dibaca. Dua bagian sebelumnya berfungsi untuk memberikan waktu yang lebih mudah bagi pengguna untuk bernavigasi di sekitar teks padat Anda.

Pentingnya Spasi

Untuk situs web yang berisi informasi minimal, meninggalkan banyak ruang di sekitar informasi penting akan menyebabkan perhatian tertuju ke pusat di mana semua ruang berada.

Konsep ini juga harus berlaku untuk semua desain Anda yang lain, menambahkan terlalu banyak informasi akan memberi Anda pengalaman pengguna yang tidak menyenangkan.

Konten di sekitarnya dengan ruang menyediakan desain UX yang sederhana dan mudah diikuti.

Menjejalkan terlalu banyak informasi dan menyisakan sedikit ruang di sekitar area akan membuat Anda memiliki desain yang terasa berlebihan dan membuat orang merasa bingung. Ketika pengguna bingung, mereka selalu memiliki kesempatan untuk meninggalkan situs web Anda, pastikan untuk hanya menggambarkan informasi penting.

Menggunakan Perataan

Penting untuk menyelaraskan desain Anda, karena menempatkan teks secara acak akan menciptakan gambar yang menarik untuk dilihat.

Desain pola-F dan pola-Z keduanya mewujudkan penggunaan keselarasan. Desain pola-F menggunakan perataan kiri, sedangkan desain pola-Z menggunakan perataan kiri dan kanan, dan perataan tengah.

Saat membuat desain visual dengan teks sebagai fokus, sebaiknya ratakan ke kiri.

Untuk desain visual yang ketat dengan fokus yang sederhana, menyelaraskan semua elemen ke tengah cenderung menciptakan desain yang menarik.

Menggunakan Grid

Saat membangun desain, kisi-kisi adalah metode umum untuk membantu dalam proses pembuatan. Penggunaan aturan sepertiga memungkinkan kemampuan untuk menambahkan keseimbangan pada desain Anda.

Untuk menggunakan aturan pertiga, tambahkan kisi ke desain Anda, dan biarkan itu bertumpu pada dua garis horizontal dan vertikal. Hasilnya memberikan desain yang enak dipandang dan enak dipandang.

Objek yang lebih dekat ke tengah akan menarik perhatian, sedangkan yang jauh akan menarik perhatian terakhir.

Kedekatan dan Hubungan

Ketika elemen-elemen saling berdekatan, pembaca Anda akan menganggap mereka terkait.

Ini dapat membantu Anda mengatur banyak informasi dan membuatnya lebih mudah dipahami oleh pemirsa Anda.

Mengelompokkan gambar dengan teks berarti keduanya terkait, dan pembaca akan mengaitkan keduanya. Memiliki gambar dan teks yang berjauhan akan membuat pembaca menganggap kedua elemen tersebut tidak berhubungan dan tidak ada hubungannya satu sama lain.

Font dan Hirarki Visual

Mengubah ukuran font Anda dengan font yang lebih besar disediakan untuk informasi penting akan membantu mengarahkan perhatian mereka.

Untuk poster, nama harus berupa salah satu font yang lebih besar, sedangkan item seperti alamat harus ditulis dengan font kecil.

Beranjak dari ukuran font, menggunakan berbagai jenis font akan membantu mengarahkan perhatian pengguna. Gunakan font yang berbeda untuk judul, subjudul, dan teks informasi. Metode desain ini akan membantu memberikan karya Anda pop yang dibutuhkan untuk mengumpulkan dan mempertahankan perhatian pembaca.

Kiat Hirarki Visual

Sebelum Anda mulai membuat desain, mencatat beberapa catatan dapat membantu mengatur desain Anda dan bahkan membantu Anda membuat desain yang lebih estetis.

Catat informasi terpenting yang perlu Anda prioritaskan, dan metode mana yang akan Anda gunakan untuk melakukannya.

Juga, coba bayangkan perjalanan pembaca dan coba perbaiki desain UX, dan hilangkan detail yang berantakan.

ROI dari desain UX yang baik selalu sepadan dengan pekerjaan ekstra, jadi jangan meremehkan pentingnya.

Bungkus

Hirarki visual adalah tentang mendikte urutan apa yang Anda inginkan agar diperhatikan oleh pembaca Anda; Anda ingin informasi penting dilihat terlebih dahulu, diikuti oleh yang lainnya.

Penggunaan kontras dapat menciptakan warna yang menonjol dan menjadi hal pertama yang diperhatikan pembaca dalam sebuah desain.

Mengetahui informasi mana yang ingin Anda lihat pertama kali oleh pembaca akan memungkinkan Anda menggunakan semua elemen hierarki visual untuk memberikan desain UX yang baik kepada orang lain.