Vizuális hierarchia, avagy melyek a legfontosabb vizuális elemek egy honlapon

2020-10-06

Manapság már a legtöbb vállalkozás saját weboldallal rendelkezik. Ez nem csak azért hasznos, mert ezáltal lehet hirdetni, de a honlapodon keresztül tájékoztathatod a vásárlóidat a vállalkozásoddal kapcsolatos legfrissebb információkról. A megfelelően felépített weboldal a vállalkozásod színvonalát is tükrözi. Az igényes, letisztult honlap, megbízható és igényes szolgáltatásokra utalhat. Ebben a cikkben szeretnénk nektek egy pár tippet adni, hogy mi azok a tényezők, amelyek segíthetnek a honlapod megjelenésében.

A vizuális hierarchia a vizuális elemek elrendezésére, méretére, színére és kontrasztjára utal. Ez a hierarchia egy fontossági sorrendet állít fel az alapján, hogy a szem milyen sorrendben veszi észre őket. A webdesignerek ezt alkalmazzák annak érdekében, hogy először a fontos elemekre irányítsák a látogatók figyelmét. A vizuális hierarchia miatt követ egy bizonyos útvonalat a szemed, minden egyes alkalommal, mikor egy honlapot végigböngészel.

 

Elrendezés

Elrendezését tekintve a két legmeghatározóbb az F-minta és a Z-minta. Az F-mintát általában olyan weboldalakhoz szokták használni, ahol sok a szöveg, például blogoknál. Ilyenkor a látogató először a honlap bal oldalát, fentről lefelé nézi végig, keresve a kulcsszavakat vagy érdekes bekezdéseket. Amikor az olvasó talál egy érdekes bekezdést, akkor kezdi el rendesen, vízszintesen olvasni a sorokat.

A látogatók ritkán olvassák el a szöveg minden egyes szavát. Az első két bekezdés a legfontosabb, ennek kell tartalmazni a legérdekesebb kulcsszavakat.

A Z-mintát inkább olyan weboldalakon szokták használni, amik nem szövegre koncentrálnak. Ilyenkor a látogató először a honlap tetejét nézi végig, tehát a menüsort, majd mikor a végére ér, akkor a figyelme lefelé és baloldalra irányul. Itt újra megismétli, balról-jobbra nézi végig a következő sort. A Z-minta nagyszerű megoldás lehet olyan weboldalakra, ahol az elsődleges prioritás az egyszerűség, minimalizmus és letisztultság.

 

Szövegméret

Szövegméretet tekintve a nagyobb betűméret talán jobban felkelti az olvasó figyelmét, de nem minden esetben ez a legmegfelelőbb megoldás. Hasznos lehet, ha a weboldalad legfontosabb eleme a legnagyobb méretű, a részletek, bonyolultabb szövegrészek pedig inkább kisebbek. A szövegmérettel a látogató figyelme könnyen ráirányítható a call-to-action (cselekvésre ösztönző) gombokra. Persze ez nem azt jelenti, hogy ezt a gombot 10-szer nagyobbá kell tenni, ugyanis ez tolakodó lehet és az összhang pedig nagyon fontos a weboldal kialakításakor.

 

Színek

A vizuális kommunikációban nagyon fontos a színek használata. Könnyedén alkalmazhatóak a fontos képek vagy információk kiemelésére. Az élénk, piros vagy sárga színeket nehéz figyelmen kívül hagyni (lásd például a közlekedési tábláknál). A helyes színhasználat az egyik legfontosabb módszer az oldal elemeinek megkülönböztetésére és a figyelem felhívására. Érdemes hasonló színeket használni a kapcsolódó elemek csoportosítására. A színek megfelelő használatával a szöveget közelebbinek vagy távolabbinak is érzékeltethetjük. A melegebb színek sötét háttér előtt távoli, míg a sötétebb színek világos háttér előtt közeli hatást keltenek.

 

Kontraszt

Egy tanulmány szerint a kontraszt megfelelő használatával könnyedén irányítható a látogató figyelme. A cselekvésre ösztönző gombok színe helyett érdemes a háttér színének a kontrasztján állítani, vagy a gomb és a gombon lévő szöveg kontrasztján. Minél világosabb a háttér, annál jobban vonzzák a szemet a sötétebb elemek. A kontraszt miatt a szem olyan tárgyakra összpontosít, amelyek a környező tárgyakhoz viszonyított színkülönbségük miatt kitűnnek.

Ám a kontraszt használatot sem szabad túlzásba vinni. A túl sok kontrasztos szín könnyen rendezetlen hatást kelthet.

 

Ha úgy gondolod, hogy a honlapod kiemelkedő megjelenéssel bír, akkor mutasd meg és jelentkezz Az Év Honlapja 2020 pályázatra! Erre október 14-ig van lehetőséged.

Vissza

Hogyan válassz megfelelő domain nevet?

2021. 09. 09.
Fontos, hogy jól megfontolt, alaposan átgondolt döntés legyen, amit hosszú távon alkalmazhatsz, és később sem fogsz megbánni. Legyen könnyen leírható, 2-3 szónál ne legyen több, és ami…
Bővebben

Semmelweis Egyetem - az oktatás, kutatás és betegellátás honlapja

2021. 09. 07.
Már megy a 2021-es 'Az Év Honlapja' pályázatra a nevezés! Október 14-ig lehet benyújtani a pályázatokat! Ha még mindig nem neveztetek, ne habozzatok! Olvassátok el a Semmelweis…
Bővebben

Valami új, mégis már ismert: új kategóriánk, az Ipari weboldalak

2021. 08. 31.
‘Az Év Honlapja’ a 2021-es évben jubileumi születésnapját ünnepelve 2 új kategóriával bővült, amelyből az egyik az Ipari weboldalak!
Bővebben
További hírek