Berkenalan dengan Visual Hierarchy :)

Al Kautsar M
Fazzdesign
Published in
3 min readOct 6, 2020

Pernah gak kalian udah bikin desain yang cukup oke, terus pas di tes ke user banyak yang lama banget menyelesaikan goal mereka? Bahkan terkadang malah sama sekali ga bisa?!

Coba ingat-ingat proses yang sebelumnya kita lakukan. Bagaimana cara kita menyusun Information Architecture (IA). Menurut saya, kita gak bisa ngomongin IA tanpa memperhatikan visual hierarchy didalamnya.

Seluruh aspek dipadukan menjadi interface design bertujuan untuk menyajikan informasi yang jelas kepada user.

Hampir setiap hari kita lihat layout atau interface yang memiliki perbedaan ukuran komponennya, bisa text-nya, bisa fotonya, atau lainnya. Sebut aja, billboard iklan, flyer penjualan mobil, flyer minimarket, koran ataupun aplikasi media sosial tempat para netijen berkumpul.

Contoh diatas itu bagaimana sebuah flyer menyajikan informasi se-sederhana mungkin kepada konsumen kalau ada promosi atau potongan harga, dengan resiko flyer yang diabaikan sama konsumen. Terlepas dari layout yang ramai, itu tujuannya mungkin agar promonya terkesan meriah.

Mungkin yang dapat menjadi contoh adalah layout pada koran yang diperkenalkan oleh Johann Carolus sejak 1605 masih relevan untuk digunakan masa sekarang, salah satunya The New York Times menggunakan layout ini. Informasinya cluttered, banyak informasi, tapi kita tahu kan yang mana headlinenya?

Duh sakit mata..

Warna dan kontras, juga wajib diperhatikan desainer untuk dapat membantu user untuk mendapat informasi yang mereka inginkan, mempermudah proses user discovery, juga aksesibilitas yang baik bagi yang memiliki gangguan penglihatan. Coba lihat contoh interface di bawah ini, duh pusing. . .

Alignment atau yang biasa kita sebut dalam layout “rata kanan-kiri-tengah” biasanya bertujuan untuk menciptakan kesinambungan antar elemen pada layout.

Mata manusia secara tidak sadar mengenali, mengikui dan membuat garis visual dalam melihat suatu layout yang menciptakan pengelompokan informasi. Kebiasaan ini dapat mempengaruhi strategic design pada desain kita.

Repetition adalah cara kita menjaga konsistensi dalam sebuah desain. Ini membantu user membiasakan diri dengan cara informasi disajikan kepada mereka. Pengaplikasiannya bisa pada font, warna, shape, atau ukuran komponen yang kita pakai.

Hmm…?!

Pengelompokan konten yang berkaitan (Proximity) juga sangat efektif digunakan dalam design layout. User dapat lebih mudah mengenali informasi yang diberikan.

Ingat layout seperti diatas? Yes, ini salah satu pengaplikasian rule of proximity

Kaitan Proximity dengan White Space juga sangat erat, pengelompokan tersebut dapat dipertegas dari space atau margin agar lebih clear. White Space juga bikin user nyaman melihat design kita, tidak di bombardir dengan layout atau informasi yang gak jelas relate-nya kemana.

Impact-nya cukup kerasa kan?

Intinya banyak hal yang memengaruhi sebuah desain itu dikatakan baik dari sisi tampilan dan fungsinya, dan sebagian aspek diatas secara sadar atau gak biasanya juga diaplikasikan oleh beberapa desainer. Sebaiknya desainer mengerti esensi visual hierarchy pada desain agar membantu proses design thinking kalian. Happy designing, folks!

Bye 😢

--

--