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

Meghosszabítottuk a nevezési határidőt!

2020. 10. 19.
Meghosszabbított nevezési határidővel 2020. november 5. éjfélig várják a jelentkezésedet az online szakma legrangosabb díjára, ’Az Év Honlapja’ pályázatra! A legjobb ho…
Bővebben

Reszponzív Design

2020. 10. 16.
A különböző felületeken való optimális megjelenés biztosításához, a reszponzív design alkalmazkodik a böngészők képernyőjének méretéhez. Ez azt jelenti, hogy a weboldal mind telefonon,…
Bővebben

Jelentkezz most!

2020. 10. 12.
2020. október 14. éjfélig várják a jelentkezésedet az online szakma legrangosabb díjára, ’Az Év Honlapja’ pályázatra! 
Bővebben
További hírek