Korábbi posztjaimban (ITT és ITT) már írtam két tervezésnél használatos mintáról, a Z és F mintákról, ebben a posztban röviden a Gutenberg elvről írok.

A két másik posztban már volt szó arról, hogy a nyugati világban az emberek olvasási mintája a balról-jobbra, fentről-lefelé irányt követi. Ez tulajdonképpen mindegyik minta alapja. A tudatos tervezésnél a tervező feladata az olvasó tekintetét megfelelően, az elérendő célok szerint vezetni. Ezért kell tudnunk, hogy a látogató tekintete nem egy pontra koncentrál, hanem ide-oda vándorol, az érdekesnek tűnő pontokon megáll, aztán továbbmegy. A tervező feladata ezt a bejárt utat irányítani, meghatározni, a megfelelő elemek és elrendezés használatával.

A Gutenberg diagram, annak alapján, hogy hogyan járja be az oldalt a tekintet, négy egyenlő, de szerepe szerint teljesen különböző részre tagolja a területet. A legaktívabb terület a bal felső és a jobb alsó négyszög. A másik két terület inkább passzív.

Gutenberg elv a webdesignban

Vagyis ezt értelmezve láthatjuk, hogy a tekintet a bal felső sarokból a jobb alsó sarok irányába halad, vagyis kevesebb figyelem jut a jobb felső és főleg a bal alsó sarokra, amit ilyen értelemben kihasználatlan. Ennek értelmében tehát, azt, amire e legtöbb figyelmet szeretnénk kapni, és amit a leglényegesebbnek gondolunk, érdemes a bal felső és a jobb alsó sarokba tenni. Így kerül általában a logó is az oldal bal felső sarkába. Mivel a jobb alsó sarokban az olvasó, vagy látogató az olvasási folyamatban tulajdonképpen egy törésponthoz ér, ezért érdemes ide elhelyezni a CTA-t, linket, képet stb., mert ez egy jó alkalom, hogy a látogatót valamilyen cselekvésre bírjuk.

A poszt megírásában segítségemre volt ez a cikk: https://alvalyn.com/applying-gutenberg-principle-print-web-design/