12 webdesign trend a 2019-es évre és jövőre [VENDÉGCIKK]

12 webdesign trend a 2019-es évre és jövőre [VENDÉGCIKK]

A webdesign a személygépkocsik design-jához hasonlóan folyton változásban van. Minden évben szemtanúi leszünk bizonyos változásoknak, amelyeket a webdesignerek ötletei mellett a technológia, az újonnan megjelenő eszközök, valamint a fogyasztási szokások is erőteljesen befolyásolnak.

Az, hogy milyen trendek lesznek tartósak az idei és a következő években és melyek tűnnek el, nagyban függ attól, hogy mennyire felelnek meg a „fogyasztók”, vagyis a weboldalakat látogató emberek, valamint a weboldalakat készíttető cégek elvárásainak.

Egy weboldal ugyanis lehet nagyon esztétikus, ha emellett nehezen használható, akkor nem tölti be azt a célt, amelyre létrehozták és ezzel végeredményként elfordulnak tőle a látogatók, magának a cégnek pedig veszteséget termel.

A webdesign trendeket így végső soron nem csak az esztétikum és az újdonság hatása befolyásolja, hanem az is, hogy mennyire elégíti ki a látogatói igényeket és mennyire képes az elvárt üzleti, illetve marketing célokat megvalósítani.

Ha webdesign-ról esik szó, akkor azt szoktuk elmondani az ügyfeleinknek, hogy:

  1. A látogató nem gyönyörködni megy a weboldalra. Pusztán az öncélú vizuális élmény nem fogja sikerre vinni a weboldalt.
  2. A látogató informálódni, vásárolni, tájékozódni megy a weboldalra. Éppen ezért azt várja el tőle, hogy céljait a lehető legrövidebb idő alatt, a lehető leghatékonyabban meg tudja valósítani.
  3. A látogató nem lojális, nem bocsátja meg a weboldal kisebb-nagyobb hibáit csak azért, mert ismerős cégről, márkáról van szó. Ha csalódik abban, amit lát, gondolkodás nélkül tovább áll és keres egy másik weboldalt.

Az alábbi listában szereplő webdesign trendek esetében azt kell mérlegelni, hogy valóban a cég brand építését, a felhasználói élmény növelését, a marketing és üzleti célok megvalósítását szolgálják-e. Ha igen, akkor megfontolandó, hogy weboldalunk ebbe az irányba fejlesszük tovább.

Webdesing trendek

www.kombudrinks.com

1. Egyedi illusztrációk

A legtöbb webdesign-ra igényes vállalkozás az utóbbi években már továbblépett a stock fotókról az egyedi saját fényképek használatának irányába. Mivel már egy átlag felhasználó is képes a stock fotókat a saját képektől megkülönböztetni, ezért nem csoda, hogy az utóbbiak esetében kimutathatóan alacsonyabb a bizalom és az elköteleződés.

A webdesign-nal foglalkozó szakemberek sok éve hangoztatják, hogy egy weboldalon mennyire fontos a saját képek használata a tömeg stock fotók helyett.

Ha még egy lépést szeretnénk tenni az egyediség, a konkurensektől való megkülönböztetés felé, akkor a saját fotók helyett egyedi illusztrációkat célszerű használnunk weboldalunkon. Illusztrációkat jellemzően nem webdesignerek, hanem kimondottan erre szakosodott grafikusok készítenek.

Ha a weboldallal azt szeretnénk elérni, hogy márkánkra felfigyeljenek, és meg szeretnénk magunkat különböztetni a konkurensektől, akkor egy egyedi illusztrációkkal színesített webdesign kitűnő választás lehet.

Webdesign: Egyedi illusztrációk

www.leedsbuildingsociety.co.uk

2. Particle backgrounds

A háttérben futó videók rendkívül látványossá teszik a weboldalt, de van egy nagy hátrányuk: fájlméretük miatt megnövelik az oldal betöltődési idejét, és ez negatív hatással lehet a felhasználói élményre. Ha ennek ellenére fontos a videó, akkor a particle background megoldást jelenthet a fájlméret problémára.

A particle background esetében az animációhoz javascriptet használnak, amely a fájlméretet alacsony szinten tartja, és így nem kell lemondani a mozgásról az oldalon. Ugyanakkor maga a mozgás felkelti a látogató figyelmét, kiemel a versenytársak tömegéből és eredményeképpen hosszabb ideig is fognak rá emlékezni.

3. Organikus formák

Organikus formának hívunk mindent, ami szabálytalan és nem egyenes vonalakból rajzolódik ki. Elsősorban az illusztrációkat tartalmazó weboldalaknál látjuk azt, hogy a hagyományos elrendezésű szöveges elemek mellett organikus hátterű illusztrációk töltik ki a teret.

Sokszor élénk színeikkel azonnal magukra vonják a látogató figyelmét, és garantáltan egyedivé teszik a weboldal megjelenését.

Webdesign: Organikus formák

https://mawla.io/

4. Nagyméretű félkövér betűtípusok

Az egyik legerősebb vizuális design eszköz a weboldalakon a tipográfia. A tipográfia fő célja, hogy a szöveges információ közvetítésén túl hozzájáruljon a weboldal arculatához.

A böngészők és a mögöttük álló technológia manapság már olyan szintre fejlődött, hogy szinte bármilyen betűtípust alkalmazhatunk egy weboldalon. Ez a fejlődés megnyitotta az utat a designerek számáram, és egyre bátrabban alkalmazzák a fontokkal való játékot munkájuk során.

A fejlécek fontos SEO elemek, amelyek a szkennelve olvasó látogatóknak segítenek az információ megtalálásában. Ha a webdesignerek tovább gondolják a fejlécek szerepét, akkor olyan nagy méretű formázással ellátott címsorokat hoznak létre, amelyek az olvashatóságon és a SEO-n túl az esztétikai élményt is növelik az oldalon.

Webdesign: Nagyméretű félkövér betűtípusok

www.ondaplus.it

5. Betöltődési sebesség

Ahogy a bevezetőben is írtuk, a weboldalak sebessége fontos szerepet játszik a webdesign trendek kialakulásában. Mobilon az ideális betöltődési idő valahol 3 másodperc körül van. A Google statisztikái szerint 4 másodpercnél a látogatók 25%-a már elfordul az oldaltól és keres egy másikat. Efölött pedig drasztikusan növekszik az elkattintók aránya.

Onnantól kezdve, hogy pontosan tudjuk mennyire hátrányosan érinti a weboldalak látogatottságát a lassú betöltődés, kiemelt szempont lett minden üzleti weboldal számára, hogy gyors legyen.

Ez pedig elindított egy olyan webdesign trendet, amely olyan grafikai megoldásokat alkalmaz, amely lehetővé teszik, hogy a weboldal a lehető leggyorsabb legyen. Nem kell bonyolult dolgokra gondolni, egész egyszerűen arról van szó, hogy kerüljük a tervezés során az olyan elemeket, amelyek eleve ellehetetlenítenék az oldal jó teljesítményét.

6. Felhasználói élmény

A felhasználói élmény a weboldalon mindazon elemek összessége, amelyek egy látogató véleményét, hangulatát befolyásolják. Ha a weboldal lassan töltődik be, apró betűi nehezen olvashatók, navigációja kusza, értelmezhetetlen, képei rossz minőségűek, arculata nem egyedi, szövegezése nem informatív stb.,  akkor ezek a dolgok mind negatívan befolyásolják a felhasználói élményt.

A 2019-es webdesign trendek közül egyértelműen a felhasználói élmény alapú tervezés (UX design) a legmeghatározóbb és a legösszetettebb is mindegyik közül. Az UX design során nagy hangsúlyt kap a célközönség meghatározása, a látogató weboldalon történő viselkedésének elemzése, a weboldal szerkezetének, szövegezésének folyamatos tesztelése és javítása.

Csak így érhető el, hogy a végeredmény egy a célközönség igényeire, motivációira, viselkedésére, eszköz használatára, nyelvezetére szabott weboldal legyen.

7. Mobile design tervezés

Mindenki tudja már, hogy mobilra tervezni fontos. A mobile first azonban nem ezt jelenti, hanem azt, hogy valóban a mobil kerül a középpontba, és a tervezés szakaszát már egyből a mobillal kezdjük. A mobil design verzió tesztelése és véglegesítése után térünk rá a tablet és a desktop verzió megtervezésére.

Ez a tervezési metódus teljesen feje tetejére állítja azt, ahogy eddig a designerek dolgoztak. Viszont, ha sikerül hozzászokni, akkor ez önmagában biztosítja azt is, hogy ne hagyjunk ki semmit a mobil verzióból, mert a Google ez alapján indexel, ezért ott is mindennek meg kell jelennie, aminek desktopon is.

Az alábbi képen négy prémium autógyártó weboldalának mobil verziója látható. Érdekes megfigyelni, hogy mennyire eltérő stratégiában gondolkodnak azt illetően, hogy mi kerüljön az oldalon a hajtás feletti részbe, milyen design-nal, szövegezéssel és képi anyaggal.

Webdesign: Mobile design tervezés www.audi.com, www.lexus.comwww.bmw.com, www.mercedes-benz.com

Már a logó, mobil menü és kereső elhelyezésében is eltérések vannak. Ezeknek az elemeknek a színét, formáját, pozícióját alapos kutatói munka előzi meg, éppen ezért érdekes, hogy mennyire eltérő eredményre jutottak az optimális megoldást illetően.

8. Egyoldalas design

Az egyoldalas design lényege, hogy a weboldal nem tartalmaz aloldalakat, minden tartalom a nyitólapon kerül elhelyezésre. Statisztikailag pontosan igazolható az ilyen típusú oldalak magasabb konverziós rátája, mivel a látogató pusztán görgetéssel minden információhoz hozzáfér, semmi nem tereli el a figyelmét a konverzióról.

Az egyoldalas design-nal készült site-ok, ha tartalmaznak menüsort, akkor az pusztán a nyitólapon a megfelelő tartalmi elemekre történő ugrást szolgálja. Emellett az egyoldalas design lehetővé teszi a látogató pontos irányítását az oldalon belül, így biztosítható, hogy előre megtervezett sorrendben jusson hozzá az információkhoz.

Éppen ezért a landing page-ek, az egy termék bemutatására koncentráló oldalak, a portfólió site-ok előszeretettel használják az egyoldalas design-t. Sőt, egyre több cég „konvertálja” át hagyományos elrendezésű weboldalát több különálló egyoldalas landing oldallá.

Webdesign: Egyoldalas designwww.trygustar.com , https://happy.tools/

9. Animált GIF-ek

Az animált gif-ek manapság reneszánszukat élik. A megjelenési formájuk, céljuk azonban sokat változott az elmúlt évek során.

A mai modern weboldalakon az animált gif-eknek két céljuk van: a statikus, mindenfajta mozgás nélküli weboldalakba olyan apró „gegeket” csempésznek, amely információ többletet nem hordoznak, de felkeltik a látogató figyelmét, izgalmasabbá, érdekesebbé teszik a weboldalt.

A másik cél olyan mikro animációk használata, amelyeknek szerepe kimondottan az információ átadás egy kompakt, könnyen érthető formában. Ez utóbbira példa, ha az animált gif egy weboldalon található funkció működésének bemutatásában segíti a felhasználót.

10. White Space

A web kezdeti szakaszában az általánosan elterjedt design gondolkodás az volt, hogy a rendelkezésre álló helyre próbáljunk meg minél több információt bezsúfolni.

Ez vezetettt azokhoz a weboldalakhoz, amelyek mai szemmel megmosolyogtatók. Különösen annak fényében, hogy azóta már statisztikailag is alá lett támasztva, hogy a túl sok információ inkább eltereli a látogató figyelmét a lényegről, szeme csapong az egyes tartalmak között, de igazából semmit sem tud teljes mértékben elolvasni.

A white space az egyes tartalmi elemek közötti helyet jelenti. Színe nem feltétlenül fehér, a lényege sokkal inkább az, hogy kellő távolságot tartson az egyes elemek között ahhoz, hogy a látogató figyelme ne kalandozzon el.

11. Aszimmetrikus elrendezés

A reszponzív technológia elterjedésével a rács szerkezetre történő weboldal tervezés egyre nagyobb hangsúlyt kapott. A rács szerkezet biztosít lehetőséget arra, hogy előre megtervezzük, az egyes elemek hogyan fognak viselkedni kisebb felbontásokon.

Ez a folyamat eredményezte azt, hogy az utóbbi időben túl sok hasonló kinézetű weboldalt látunk. Olyanok, mintha mindegyiket ugyanabból a sablonból gyúrták volna, csak a színeik és tartalmuk tér el egymástól.

Ettől a sztenderdizálástól térnek el azok a designerek, akik megpróbálnak kitörni a hagyományos rácsszerkezet korlátaiból és valami olyasmit alkotni, amely a reszponzívitás megőrzése mellett szakít a hagyományos elrendezési formákkal. Próbálkozásaik egyértelmű trendet jelölnek ki erre és talán a következő évekre vonatkozóan is.Webdesign: Aszimmetrikus elrendezés

www.bang-olufsen.com

12. Minimalizmus

A szuper minimál weboldalakat a felhasználói élmény alapú tervezés hívta életre. A cél az, hogy mindent elhagyjunk az oldalról, amely elterelné a látogató figyelmét a fő üzenetről. Valójában egy ilyen weboldalt létrehozni nem kis kihívást jelent, mivel agresszíven el kell távolítani valóban mindent az oldalról, amely nem 100%-ban támogatja az üzenet átadását.

A szuper minimál weboldalak esetében egyszerű a színhasználat, a szürke árnyalatai mellett jellemzően egy domináns szín jelenik meg, amely önmagában a konverziót megvalósító nyomógombok színe is egyben.Webdesign: Minimalizmus

absurd.design

Reméljük, tetszett a cikkünk és sok hasznos információval gyarapodott az éppen aktuális webdesignok terén.

A szerzőről:

Tusnádi István Usernet.hu
Tusnádi István
Content manager –  Usernet.hu
Cégével az elmúlt 18 évben 283 webfejlesztés és online marketing projektet bonyolítottak le. Fő profiljuk az UX design és a weboldal készítés. Az utóbbi években számos közép- és nagyvállalat weboldalát tervezték meg, fejlesztették le és üzemeltetik teljeskörűen.