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

  1. Használhatod a vonalakat, csíkokat a háttérben textúra létrehozására
  2. 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
  3. Függőleges beállítású kis tárgyakkal a háttérben is vertikálissá teheted a honlapod design-ját
  4. Vertikális vonalakat helyezhetsz a kiemelt képed fölé önálló rétegként, amit akár animálhatsz is
  5. Osztott képernyős kialakítással a széles csíkok trendjét valósítod  meg
  6. A vonalakat húzhatod  a teljes oldalon tartalmon keresztül és/vagy csak a háttérben.
  7. 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álataVertiká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