Vizuális hierarchia a weben

A vizuális hierarchia kialakításával azért érdemes foglalkozni, mert általa vezethetjük a látogató figyelmét és elérhetjük, hogy a tartalmat olyan sorrendben „fogyassza el”, ahogyan azt mi szeretnénk. A megfelelő vizuális hierarchia kialakításának rengeteg eszköze ismert, amelyekből most az alábbiakat szeretném bemutatni:

  • Kontraszt és színek használata
  • Figyelem irányítása a méretekkel
  • Játék a formákkal
  • Elhelyezés és white space

Hierarchia kialakítása a méretekkel – mert igenis számit!

A méret és a méretarány egy nagyon kézenfekvő dolog, ugyanakkor a megfelelő használatán van a hangsúly. Fontos, hogy a lényegi részt emeljük ki ilyen módon, vezetve a látogatót és érdemes figyelnünk arra, hogy túlzásba se essünk. Ne emeljünk ki mindent, illetve amit kiemelünk azt is ízlésesen tegyük.
Az alábbi kép egy megfelelő példa arra, hogy hogyan lehet vezetni a látogató figyelmét csupán a megfelelő méretek alkalmazásával.

Vizualis_hierarchia

Ugye, hogy te is abban a sorrendben olvastad el, ahogyan azt én megterveztem? 😉

Hierarchia színekkel és kontraszttal

A kontrasztot és a színeket sokszor arra használhatjuk, hogy valamit kiemeljünk a többi hasonló elem közül.
Megszokott módszer például az ajánlatok közül a legkedveltebb vagy a legelőnyösebb ajánlat kiemelésének a használatára is, ahogy azt az alábbi képen is megfigyelhetitek.

Vizualis_hierarchia

Ugyanakkor fontos, hogy mindig figyeljünk a megfelelő kontrasztra, mivel csupán az eltérő szín alkalmazása nem biztos, hogy a kívánt eredményt hozza, ugyanis számít, hogy milyen színeket milyen környezetben használunk.

Erre tökéletes példa az alábbi két kép. Ha megfigyeled, akkor mind a két esetben ugyan azok a színek kerültek feltüntetésre, csupán a háttér változott. Míg világos háttérrel a kék is jól érvényesül, addig egy sötétebb háttéren már teljesen jelentéktelenné válik. A sárgával pedig ugyan ez a helyzet csak éppen fordítva.

Vizuális hierarchia

Vizuális hierarchia

A színekkel történő kiemelésre remek példák a weboldalon található gombok is, aminek pontosan a látogatók figyelmének megragadása a célja. Ezért mindig érdemes az arculatba illő, de a fő tartalomtól eltérő szín használata CTA gombok esetében.

Vizuális hierarchia

forrás: Dribbble.com – Vistala – NFT Marketplace Landing Page

Játék a formákkal

Akár csak a színekkel a formákkal is ugyan így tudjuk vezetni a felhasználó figyelmét, ugyanis egy eltérő formával izolálni tudjuk az adott elemet,tehát „ki fog lógni a sorból”.
Ezt az alábbi példa is jól szemlélteti:

Vizuális hierarchia

Szintén jól alkalmazható gombok, vagy hasonló típusú tartalmak esetében a fontosabb, újabb, hasznosabb tartalom kiemelésére.

Hagyd levegőhöz jutni a tartalmadat és meghálálja!

Nagyon fontos, hogy sok esetben éppen azért vész el az információ, mert telezsúfoljuk a felületeket tartalommal és nem szűrhető ki jól a lényeg.
Valójában, ha nagy tereket hagyunk üresen, akkor akarva-akaratlanul a felhasználó szeme a tartalmunkra fog tévedni. Talán a white space az egyik leghatásosabb eszköz a weben. Ennél jobban véleményem szerint semmi nem irányítja a figyelmet. Éppen ezért ez is a személyes kedvencem.

Vizuális hierarchia

forrás: https://stevebenjamins.com/

Az alábbi példákat azért hoztam, mert nagyon egyszerű mégis nagyon jó az, ahogyan felépülnek ezek az oldalak. Tökéletesen alkalmazzák a fentieket, vezetik a tekintetet és ezáltal az utadat is kialakítják az oldalon.

www.verdesigns.com/
bacc.cc/
stevebenjamins.com/

Szükséged van weboldalra vagy logóra?

Korábbi munkáim