Az elmúlt hónapokban egyre több weboldalon találkozhatunk vertikális vonalakkal. Az egymás mellett futó csíkok különlegessé teszik a honlapodat, nem beszélve arról a kiváló tulajdonságukról, hogy vezetik a szemet. Ha új design-ban gondolkodsz azért, ha csak egy kis frissítést szeretnél akkor azért olvass tovább!
Miért különleges?
Az oldalak látogatói inkább a megszokott horizontális layout-ot várják, gondolj csak a monitorodra. A legtöbb weboldal még mindig a 16:9 felbontásra készül, majd ezt követően optimalizálják a vertikális kijelzőjű mobilra. Azzal hogy vertikálissá teszed az oldaladat a megszokottól teljesen eltérővé válik a többi weboldalhoz képest. Hány versenytársadnak vannak csíkjai az oldalon? Ki akarsz tűnni? Használd a csíkokat!
A 16:9-es képernyő-felbontásról átterelődik a tartalom fogyasztás mobilra és táblagépre. Tehát a vertikális layout nem is annyira idegen a felhasználóknak, a függőleges orientáció miatt nem fogják elhagyni a honlapodat.
Válassz a márkádnak, célcsoportodnak megfelelő csíkokat!
A keskenyebb csíkok inkább elegánsabbak, míg a vastagabb csíkok harsányabbak. A vastagság mellett a színekkel is játhatsz. Amennyiben új színt tervezel bevezetni az arculatodba, a csíkokon keresztül el is kezdheted lassan terjeszteni ezzel növelve a könnyebb elfogadást, beazonosítást.
A megkülönböztetés mellett mit adnak a csíkok?
A különböző vastagságú vonalak, a felfelé és lefelé mutató elemek segítik a felhasználót a tartalom feldolgozásában, összeköthetsz egymástól elkülönülő elemeket. (Tudtad, hogy a felhasználók szerint ami közel van egymáshoz az összetartozik?). Ezt kiválóan lehet alkalmazni kiegészítő termékek és szolgáltatások esetén. Továbbá ösztönzik a görgetést és lehetővé teszik a kívánt elemek kiemelését.
7 tipp a vertikális csíkok használatához
- Használhatod a vonalakat, csíkokat a háttérben textúra létrehozására
- Függőleges alakú kollázs létrehozásával kiválóan prezentálható a portfóliód vagy a termékeid, szolgáltatásaid
- Függőleges beállítású kis tárgyakkal a háttérben is vertikálissá teheted a honlapod design-ját
- Vertikális vonalakat helyezhetsz a kiemelt képed fölé önálló rétegként, amit akár animálhatsz is
- Osztott képernyős kialakítással a széles csíkok trendjét valósítod meg
- A vonalakat húzhatod a teljes oldalon tartalmon keresztül és/vagy csak a háttérben.
- A weboldalad tartalmi elemeit kötheted össze a függőleges vonalakkal
5 példa a használatra
Osztott képernyős kialakítás
Termék leírás vertikális elrendezés alkalmazásával
Vertikális képek használata a portfólió prezentálásához
Rétegként használt animált függőleges csíkok
Tartalmi elemeket összekötő függőleges vonal
A bejegyzést inspirálta: 3 Essential Design Trends, July 2017
