Webdesign útikalauz 2023 →
A meglepetések és a UX éve

Oké, oké. Tudjuk, hogy a szellősebb honlapelrendezés, a dark mode, az illusztrációk, 3D-s és a geometriai alakzatok menőnek számítanak. Tényleg azok, és még lesznek is 2023-ban. Ám mi most nem ezt keressük, ugye?

Számos honlap kerül ki a világhálóra nap mint nap. Ha mázlink van, nem lesz a versenytársunk. Ám, ha mégis, akkor valamit kell tenni azért, hogy egy kicsit különbözzünk.

A 2023-as webdesign trendek jelszavai a következők:

KÉNYELMES BÖNGÉSZÉS.
MOBILE FIRST.
LETISZTULT TARTALOM.
ÚJSZERŰ MEGOLDÁSOK ÉS MIKRO-MOZGÁSOK.
ILLUSZTRÁCIÓS BON-BONOK.
USER EXPERIENCE (UX), AZAZ A FELHASZNÁLÓI ÉLMÉNY KIMAXOLÁSA.
ÉS EGY KIS VARÁZSLAT…HA BELEFÉR.

De mielőtt elmerülünk a design irányzatokban, vessünk egy pillantást a technikai követelményekre és innovatív megoldásokra. Nyugi, nem lesz unalmas. És még lehet, hogy tanulsz is valamit.

1. A weboldal betöltési ideje és a honlapsebesség továbbra is a király

Az Ananász Design blogon többször terítékre került már a weboldal gyorsítás. Eszerint nincs mit szépíteni azon a tényen, hogy ha nem tölt be egy honlap 2-3 másodperc alatt, nagyon sok látogató kinyomja a böngészőt, és vissza se néz.

Tehát az első számú webdesign trend 2023-ban is szerintünk az ultra-gyors betöltődési idő lesz. A honlap sebesség már évek óta esszenciális faktora a SEO-nak, és a felhasználói élménynek (más néven UX – User Experience-nek), és a fentiek alapján továbbra is top prioritással bír majd.

Egy diagram sokszor többet mond a szavaknál, ezért érdemes az alábbi ábrát szemügyre venni, mely a 2, illetve 3 másodperce betöltődési időket figyeli a felhasználói oldal elhagyások tekintetében. Látható, hogy egyetlen másodperc milyen sokat jelent. 2 másodperces oldalbetöltési időt a látogatók 47%-a, míg a 3 másodperceset már csak 40%-a várja meg.

Forrás

Amennyiben szeretnéd megmérni weboldalad sebességét, >> ebben a cikkünkben << találsz hozzá útmutatót.

2. Első a biztonság, ami maga a bizalom és a kattintás

Van olyan, hogy amikor beírunk egy weboldalt a böngészőbe, figyelmeztetést ad a laptopunk, vagy mobilunk vírusirtója, hogy “veszélyes tartalom, biztos folytatod”? Szerintem itt nagyon sokan a “nem”-re kattintanak. És ezen a ponton búcsút is inthetünk az érdeklődőnek.

A megoldást a tárhelyedhez igényelt ú.n. SSL tanúsítvány biztosítja, mely azért szükséges, hogy a látogató és a honlapod közötti “csatorna” és “kommunikáció” biztonságos legyen. >> Az SSL tanúsítványról ide kattintva olvashatsz többet. <<

3. Egy igazán high-tech és menő megoldás: a chatbot

A sort egy – hazánkban még mindig – innovatívnak számító megoldással folytatjuk. A chatbotok, melyek amolyan virtuális ügyfélszolgálatnak is minősülnek.

A chatbot egy előre programozott, adott kérdésekre megadott választ küldő chat alkalmazás.

A háttérben egy előre megírt kérdés-válasz útvonal alapján reagál a chatbot, de akár a mesterséges intelligencia is meghúzódhat mögötte. Szóval elég haladó megoldás, azért is gondoltam, hogy helye van a 2023-as webdesign trendek között.

Az egyszerűbb, előzetes forgatókönyv alapján működő chatbotok ma már a magyar nyelvterületen is igen jól teljesítenek, gondoljunk csak a Facebook Messengerre.

Találkozhatunk velük bankos oldalakon, különféle webshopokban, és még több másik helyen is. Mikrovállalkozásként is nyugodtan eljátszhatunk a gondolattal, hogy beépítsünk egy ilyen jellegű segítséget webshopunkba vagy weboldalunkra.

A chatbotok lényege tehát az, hogy a honlapra látogatónak nem kell az ügyfélszolgálatot hívogatni, e-mailt írni és várakozni. Csupán feltenni egy chatablakban a kérdését a hét bármely napján, bármely órában.

Azért ezen a ponton tán már mind sejtjük, hogy az ügyfélszolgálatos teendők egy részét is át tudja venni egy jól beállított chatbot.

4. LIVE! Elevenedjen meg a honlapod: mikro-interakciók és mikro-animációk

A mikro-interakciók olyan kis elemek a honlapon, melyek a látogatónak finom kis visszajelzéseket adnak a weboldalon történő navigáció során. Ilyen például az, ha egy gomb vagy link színe megváltozik, amikor fölé visszük a kurzort. Vagy amikor egy cikk gögetése során a fejlécben vizualizálja az előrehaladást egy progress bar segítségével a honlap.

A mikro-interakciók során fontos megtalálni az arany középutat, ugyanis az éles váltások és animációk könnyen visszaütnek. Egy hatalmasra nőtt gomb nem is elegáns, nem is esztétikus, és képzeljük csak el, mobilon mekkora lehet. A kevesebb tehát több. A finom kis színátmeneteket például mi nagyon szeretjük.

A mikro-animációk – ahogy azt az elnevezésből sejteni lehet – kis (tényleg kicsi) animációk. De a kicsi korántsem jelentéktelen! Cél a felhasználói élmény fokozása, eltérés a megszokottól. A dinamikus megjelenítés fokozása.

A lenti példa nagyon jól szemlélteti a mikro-animációkat (ugye milyen menő?), de mikro-animációnak minősül például az is, ha a webshopban egy adott termék fotója körbe-körbe forog, hogy minden irányból megtekinthesse a vásárló(jelölt).

Forrás

5. Jöjjön a design! Egy személyes kedvenc, az Art Deco

art deco stílus webdesign trendek 2023
Készítette: Rapai-Csáki Györgyi 2019

Körülbelül 3 éve, webdesigner karrierem hajnalán volt szerencsém részt venni egy pályázaton, ahol Dreher plakátot kellett készíteni Art Deco stílusban. Nagyon menő volt már akkor is, ezért külön öröm most látni a 2023-as webdesign trendek között.

Az Art Deco megjelenése nagyban támaszkodik a szimmetrikus és geometrikus formákra. Gyakran találkozhatunk benne különféle mintázatokkal, dekoratív és díszítő elemekkel.

A stílus alapelemei tökéletesen használhatóak design grafikák készítésére, vagy akár egy vagányabb honlap arculataként.

Bárcsak a 2023-as évben készíthetnénk egy art deco honlapot… Van jelentkező?

6. Rajzok, absztraktok és pacák

webdesign trendek 2023 absztrakt honlap elemek illusztrációk
Minta egy Insta-sztori nyitólapjára

A következő 2023-as webdesign trend szintén a brand megjelenésének összképére lehet hatással.

A gyors vázlatok, rajzok és absztraktok, melyek a grafika és webdesign egy teljes értékű tervezési állomásai voltak eddig is, immáron életre kelnek a honlapokon.

Nagyvonalú ábrázolások, melyekről reálisan gondolkodva akár még azt is állíthatjuk, hogy félkész állapotú grafikák, ugyanakkor rá kell döbbennünk, hogy önmagukban is tökéletesen megállják a helyüket.

A képek bármilyen jellegűek és természetűek lehetnek, kezdve az emberektől és az arcoktól az absztrakcióig. Egy igazán rugalmas stílus az alkotás szabadságát kínálva. Ezt már szeretjük, ugye?!

Egy-egy ilyen grafikai és webdesignirányzat amúgy számos területen alkalmazható, például ruházati- vagy játékboltoknál kiváló választás lehet.

7. Hoppá, még egy meglepetés: hatalmas és informatív lábléc

Rajongunk a hatalmas láblécért! Formabontó, informatív, menő. Helyet kaphat benne a hírlevél feliratkozás, a termék vagy szolgáltatás kategóriák áttekintése, a social media linkek, valamint a kötelező jogi doksik. Két példát hoztunk. Az egyiket a 360gardalife.hu honlapról, a másikat a szívünkhöz oly közel álló rapack.hu-ról.

webdesign trendek 2023 hatalmas lábléc

8. Hatalmas lábléchez hatalmas fejléc dukál

Amitől eddig sokszor féltünk, 2023-ban design trendként hódít

A honlapokat értékesítés-fókuszúan építjük fel. Éppen ezért sokszor javasoljuk, hogy a fejléc alatt elhelyezkedő banner kép (vagy videó), legyen keskenyebb. Így a látogató hamarabb eljut az érdemi tartalomhoz. Kevesebbet kell görgetnie.

Ezzel ellentétben van egy 2023-as webdesign trend, ami a hatalmas banner használatát javasolja. Mint egy óriásplakát. Egy menő grafika nagy felületen, ami mellett nem lehet elmenni, és szinte garantálja a “WOW”-élményt.

A hatékonyság érdekében viszont érdemes szöveget is elhelyezni a képen, közben pedig ügyelni a megfelelő kontrasztra. Magyarán annak ellenére, hogy a betűk egy képen helyezkednek el, továbbra is jól olvashatóak legyenek.

Ezen felül a képet le kell tesztelni különböző eszközökön – mobilon és tableten, kis- és nagy képernyőn egyaránt, ugyanis az esetek nagy százalékában ez általában elcsúszik, és igazításra szorul.

9. Mattüveg-effektus

Ha valami igazán menőre vágysz a 2023-as webdesign trendek között

A technológia és a kezünk alatt lévő grafikai eszközök immáron lehetővé teszik az ú.n. mattüveg-effektus egyszerű kialakítását.

A mattüveg fedőréteg mögötti elemek elmosódott megjelenése segít színesíteni egy adott területet, miközben lehetővé teszi, hogy a rajta elhelyezett szöveg vagy objektum továbbra is jól elkülönüljön, a betűk olvashatóak maradjanak.

Az effektus joggal kap egy helyet a 2023-as trendek között, és simán elképzelhető, hogy egyre több ilyennel találkozunk majd a színátmenetek helyett.

Forrás

10. Letisztult és olvasható betűk, régóta vártunk rátok

Végre eljött az ideje, hogy az olvasható és letisztult betűtípusok trenddé váljanak. Nagy kedvencek ezek az Ananász Design berkein belül, és szinte minden weboldalnál használjuk őket.

És habár a félkövér betűk továbbra is hódítanak, 2023-ban a “Sans Serif” betűtípusok beállnak a sorba megérdemelt pozíciójukért. És habár közhelyesnek tűnhetnek, ha jobban megfigyeljük őket, 1-1 apróbb kis csavar a megjelenésben igazán különleges megjelenést tud adni néha úgy, hogy észre sem vesszük. Hisz nem tolakodó, csupán az összkép lesz klassz tőle.

A retro betűtípusokat, mint az Arial, Comic Sans, Times New Roman, továbbra sem javasolt használni.

Irány 2023

2023-ban webdesign terén érdemes formabontónak lenni egy kicsit. Beletenni egy kis plusz extrát a honlap megjelenésébe, ám mindig figyelni kell, hogy tényleg van-e annak helye az adott témában, illetve hogy az arany középúton tudunk-e maradni. Egy egészségügyi honlap például nem biztos, hogy elbírná az art deco-t, vagy az absztrakt, művészi elemeket.

De ami a legfontosabb, hogy a látogató kényelme legyen az első: egy gyors és mobilbarát weboldal, ami tartalmi szempontból áttekinthető, és jól olvasható. Megfelelőek a kontrasztok, és nincsen túl sok animáció, ami már-már idegesítővé válhat. Gondolkodjuk mindig a látogató fejével, hiszen sokszor még a süti tájékoztatón, és pop-up ablakokon is át kell verekednie magát az olvasónak, mire érdemi tartalomhoz jut. Kényeztessük el hogy úgy érezze, megéri a weboldalunkon lennie.

Tetszett a cikk? Oszd meg bátran! A kérdéseidet pedig nyugodtan tedd fel a komment mezőben.

Sharing is caring...

Kérdésed adódott? Vagy hozzászólnál a témához?
Írd meg nekünk bátran!

A hozzászólásod adminisztrátori jóváhagyást követően jelenik majd meg.

Szólj hozzá!

Az e-mail címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük