04. July 2020 · Comments Off on Pentingnya Visual Hierarchy Untuk Desain · Categories: Tips · Tags: , , , ,

Sobat Unlimited, desain sudah ada dan dikenal dalam waktu yang lama. Ia digunakan untuk menyampaikan pesan. Media yang digunakan juga bervarias. Dimulai dari ukiran batu hingga ke zaman di mana gawai elektronik adalah makanan sehari-hari. Dan agar pesan yang dibawa dapat ditangkap dengan baik oleh pembaca sangat tergantung pada elemen yang ada pada desain tersebut. Setiap elemen dalam desain harus dapat meningkatkan pengalaman pengguna dan menyampaikan pesan dengan jelas. Oleh karena itu, pada artikel ini kita akan bersama-sama mempelajari apa itu visual hierarchy dan mengapa ia sangat penting untuk meningkatkan pengalaman pengguna saat berinteraksi dengan produk.

Apa itu visual hierarchy?

visual hierarchy

Sebelum lebih jauh membahas tentang pentingnya penggunaan visual hierarchy, alangkah baiknya Anda mengetahui terlebih dahulu pengertian visual hierarchy. Visual hierarchy digunakan untuk memberi tingkatan elemen desain dan pengaruh dalam urutan yang Anda inginkan, ketika terlihat oleh pengguna. Dengan menggunakan prinsip-prinsip seperti kontras, skala, keseimbangan, dan masih banyak banyak lagi.

Elemen-elemen yang ada di harapkan dapat membantu menyampaikan pesan dalam desain kepada pembaca.

Mengapa visual hierarchy penting di UX Design?

visual hierarchy

Sekarang mari kita membicarakan tentang kenapa visual hierarchy penting pada bidan UX desgn. Visual hierarchy dapat memainkan peran penting dalam perencaan struktur informasi Anda. Tujuannya tak lain untuk membantu pembaca menavigasi produk Anda lebih mudah.

Hal ini sekaligus dapat mengurangi upaya yang dilakukan oleh pembaca untuk berinteraksi dengan produk Anda. Karena bagaimanapun, UX design adalah tentang menghilangkan upaya berlebihan dan meningkatkan nilai guna suatu produk.

Prinsip dasar Visual Hierarchy

Lantas, apakah prinsip dasar dari visual hierarchy? Ini adalah pertanyaan yang penting untuk dijawab, karena desainer akan dipaksa untuk memikirkan banyak hal saat bekerja berkat framework yang responsif.

Desainer dituntut memandu mata pembaca menuju informasi yang paling penting dengan konten yang padat dengan teks dan rentang informasi yang pendek. Karena itulah, sebagai desainer, Anda harus bekerja dengan 6 prinsip visual hierarchy. Berikut adalah keenam prinsip visual hierarchy tersebut:

  1. Pola membaca

Masing-masing budaya di dunia memiliki cara membacanya sendiri-sendiri. Ada budaya membaca dari atas ke bawah, dan lebih banyak lagi yang membaca dari kiri ke kanan. Kebudayaan-kebudayaan itulah yang kelak juga sangat mempengaruhi seorang desainer tentang bagaimana cara menyampaikan pesan kepada pembaca.

Penelitian terbaru menunjukkan bahwa orang pertama kali akan memindai halaman untuk mengetahui apakah mereka akan tertarik untuk membaca lebih lanjut apa yang ada di depan mereka. Pola pemindaian sendiri cenderung mengambil satu dari dua bentuk huruf yaitu “F”dan “Z”. Anda dapat menggunakan dua pola ini dalam desain yang Anda buat.

  • F pattern

F pattern biasanya digunakan untuk halaman website tradisional, teks-teks berat, atau postingan blog. Pembaca akan memindai ke sisi kiri halaman, mencari kata kunci yang menarik dalam judul di sebelah kiri atau awal kalimat. Lalu akan berhenti dan membaca ke kanan saat mereka mendapati sesuatu yang menarik.

Hasilnya akan terlihat seperti hruf “F”, dan tak jarang pula membentuk huruf “E”. Cara mengaplikasikannya pun cukup mudah. Anda dapat mensejajarkan informasi penting dan gunakan tajuk berita pendek, tebal, dan memuat poin-poin penting. Ini akan menarik perhatian.

  • Z pattern

Untuk “Z” pattern banyak diaplikasikan pada halaman iklan dan halaman utama website. Dimana, informasi tidak harus disajikan dalam blok paragraf. Mata pembaca pertama kali akan memindai bagian atas halaman, tempat dimana informasi penting ditemukan, kemudian beralih ke sudut diagonal berlawanan. Dan melakukan hal yang sama di bagian bawah halaman.

Desainer akan membuat halaman yang secara eksplisit dan menempatkan informasi penting di sudut-sudut halaman. Serta mengarahkan informasi penting lainnya di sepanjang bilah atas dan bawah secara diagonal.

  1. Ukuran

Membicarakan tentang ukuran, Anda harus tahu satu hal: Orang membaca hal yang lebih besar terlebih dahulu. Penentuan ukuran adalah prinsip yang sangat mendasar dan krusial, yang dapat memberikan elemen penting dan membantu menarik perhatian pemirsa.

Dengan meningkatkan skala elemen, ,Anda dapat menarik perhatian. Namun Anda harus hati-hati jangan membuat ukuran yang terlalu besar, karena dapat mengurangi keterlihatan elemen lainnya.

  1. Pemilihan warna

visual hierarchy

Dalam desain penggunaan sangat penting karena dapat memberi arti penting pada elemen desain. Warna-warna yang lebih cerah umunya dapat menarik perhatian daripada warna-warna yang cenderung datar.

Demikian pula warna dengan kontras yang lebih tinggi akan tampak lebih dekat ke pemirsa. Sedangkan bila menggunakan satu warna cerah sebagai titik fokus dapat membantu dan menarik perhatian. Di manapun Anda menembpatkan warna tersebut dalam desain Anda.

  1. Perspektif

Sebagian besar interface, seperti situs website dan aplikasi dirancang untuk menjadi dua dimensi, sehingga terlihat datar. Dengan memainkan perspektif desainer dapat membuat ilusi jarak dan pemisahan dalam elemen Anda, untuk membawa fokus pada area penting desain Anda.

Beberapa cara untuk memberikan ilusi perspektif adalah dengan meningkatkan ukuran elemen dalam hubungannya dengan pembacanya. Bisa juga dengan menambahkan efek paralaks yang memberikan efek gerak semu secara perlahan.

  1. Tipografi

Pemilihan tipografi adalah hal penting lain dalam visual hierarchy. Pemilihan tipografi yang tepat dapat memberikan karakter yang pada website Anda dan dapat menarik pembaca di area tertentu. Tipografi dengan ukuran dan bobot yang tepat juga dapat digunakan agar elemen teks menjadi lebih menonjol.

Untuk website sendiri, umumnya dirancang menggunakan heading yang berbeda untuk memberikan arti penting terkait konten yang dimuatnya. Penggunaan header ini akan sangat membantu pembaca untuk memindai halaman teks, sehingga mereka tertarik dengan bagian tertentu dari desain Anda.

  1. Space

Space, atau bisa diartikan sebagai spasi berguna untuk memberikan pembaca untuk sedikit “bernafas” saat melihat konten Anda. Ketika Anda pertama kali mulai mengerjakan desain, semua bermula dari kanvas kosong tentunya.

Whitespace adalah istilah yang digunakan untuk menggambarkan jarak antar elemen dalam suatu desain. Ini dapat digunakan untuk mengelompokkan elemen bersama atau memisahkannya, untuk memberikan atensi pada pembaca.

Kesimpulan

Pada desain apapun, visual hierarchy sangat penting adanya. Sebenarnya tak hanya pada karya visual saja, tetapi pada media apapun, aspek visual memang tak boleh dilewatkan begitu saja. Bukan sebatas untuk estetika, tetapi juga fungsionalitas.

Sobat Unlimited,demikian artikel tentang visual hierarchy kali ini. Semoga bermanfaat.