Barion Pixel
Ez itt a lifelong learning

Sosem tudhatsz eleget!

Blog

Elrendezési minták a webdesignban I. – Z-pattern

2017. augusztus 14. | Dörnyei Barbara

A vizuális hierarchia, a jó webdesign egyik legfontosabb alapelve, ami meghatározza az elemek elrendezését és bemutatását, azok fontosságának megfelelően. A vizuális hierarchia befolyásolja azt a rendet, ahogyan az emberi szem érzékeli azt, amit lát. Egyszerűbben fogalmazva, meghatározza azt, hogy mit veszünk észre legelőször és mi jön azután. Ennek ismerete és megértése, nagyon fontos a webdesignban is, ahol lényeges feladat az információk rendszerezése ilyen módon, hiszen ezzel tudjuk a látogató figyelmét irányítani. Éppen ezért szerencsés, ha a weboldal követ valamilyen elrendezési mintát. A három leggyakoribb ilyen minta a Z-pattern, F-pattern és a Gutenberg diagram.

Ebben a posztban a Z-patternt, vagy magyarul Z-mintát nézzük meg részletesebben. Ez a minta követi azt az irányt és sorrendet, ahogyan általában olvasunk. Kezd a bal felső sarokban, (1-es pont) onnan tovább egyenesen jobbra (2-es pont), aztán átlósan lefelé a bal sarok felé (3-as pont), onnan pedig megint jobbra (4-es pont).

 

Jöjjön egy példa arra, hogy is néz ki ez a gyakorlatban!

Illetve egy másik, ahol szintén ezt a mintát alkalmazták:

 

Ez az út tulajdonképpen egy „Z” alakot formál, ezért kapta a Z-pattern nevet. Egy oldalon persze nem csak egy ilyen alakzat képzelhető el, hanem több kisebb is, illetve az irányváltásokból is lehet több, ilyenkor már inkább a cikk-cakk, avagy Zig-zag pattern elnevezést használjuk. Utóbbi olvasási minta a jellemző akkor, ha például sok, összefüggő szöveget olvasunk.

 

A Z-pattern esetében tehát azt tegyük legfelülre, amit elsőként szeretnénk, hogy a látogató észrevegyen, útközben elhelyezhetünk egyéb információkat, de a lényeg az út végén a CTA, vagyis a Call to Action legyen. A Z-pattern leginkább azoknál az oldalaknál alkalmazható sikeresen, ahol viszonylag kevés a szöveg, és több a vizuális elem. Működni pedig azért működik jól, mert a látogatók zöme ugyanúgy nézi a weboldalt, mint ahogy könyvet is olvas, vagyis balról-jobbra és fentről-lefelé. Nyilván ennek a mintának a használata sincs kőbe vésve, minden oldal mást és mást igényel, viszont nagyon jó támpontot adhat az oldal elrendezésének kialakításában. Íme két példa, a Z-pattern gyakorlati alkalmazására.

 

Iratkozz fel YouTube csatornákra!

blog

Virtuális asszisztens legyél vagy webdesigner?

Virtuális asszisztens legyél vagy webdesigner?

2024. február 01.

Mindkettő fantasztikus lehetőség arra, hogy elhagyd a hagyományos kereteket, mint szoros, rugalmatlan munkaidő, helyhez kötöttség vagy akár a bérplafon. Egy ponton találkozik is a két munkakör, ahol a grafikai munka már az asszisztenciába hajlik – designerként is végezhetsz weboldal adminisztrációt, közösségi média tartalom készítést vagy felügyeletet és virtuális asszisztensként is sokszor találkozni már-már tervezői munkába […]

Tovább a cikkre
Secured By miniOrange