Szia kedves olvasó! Szuper, hogy itt vagy, hiszen az idei év legfontosabb blogbejegyzését olvasod most nálunk. Lerántjuk a leplet a WEBDESIGN TRENDEK 2022 toplistájáról, melyekhez a forrásokat worldwide keresgéltük, fordítottuk magyarra és tettük mellé a saját tapasztalatunkat, valamint azokat a példákat, amiket a legmegfelelőbbnek találtunk.
És mivel tudom, hogy „két koponya több, mint egy”*, ezért idén sem egyedül, a magam relatíve szubjektivitásával estem neki a témának.
*idézet a Mi kell a nőnek? című filmből
Ananász design ft. Heurékás!
A 2021-es webdesign trendeket Decsi Dani grafikussal térképeztem fel, idén pedig Tokai Réka kolleginával mélyültünk el abban, hogy mik lesznek a weblapkészítés irányelvei, sztenderdjei 2022-ben!
Réka 2014-ben ismerkedett meg a grafika világával, 2020 őszén végezte el a webdesign sulit, és 2021 júniusa óta kreatív és lelkes tagja az Ananász design csapatnak. Saját (szerintem zseniális) brandje a Heurékás! Nomen est omen 🙂 Kezdjük is el! Máris mutatjuk a mi TOP 10-es listánkat 2022-re.
A tartalomból...
A weboldal arculatáról
#1 Minimalizmus és flat design - avagy egyszerű, de nagyszerű weboldalak
#flatdesign #minimalizmus #whitespace
Az utóbbi években igen nagy teret hódított magának a minimalizmus, legyen szó lakberendezésről, vagy egy vizuális kommunikációs anyagról. Nem meglepő módon ez a webdesign világban sincs másként.
A minimalista stílus részét képezi a sok fehér/egyszínű, vagy üres tér, melynek áldásos hatásait még ha nem is tudatosan, de biztos érezzük egy-egy olyan weboldalnál, mely nincsen telezsúfolva mindenféle vizuális elemmel.
Egy egyszerű, letisztult felület is lehet izgalmas, ráadásul a zavaró tényezőket mellőzi, egyértelműbbé és követhetőbbé teszi a honlap legfontosabb üzeneteit, információit.
Ezt segítik az egyszerű színek, fehér terek, letisztult betűtípusok, és az ezekkel összhangban álló illusztrációk.
Mindezeken felül a vizuális sokkot mellőző, esztétikus megjelenés elősegíti a gyorsabb oldalbetöltődést.
A flat designt bár gyakran nevezik „lapos dizájnnak”, a direkt fordítás ne zavarjon meg minket, mert abszolút nem azt jelenti, hogy unalmas a honlap megjelenése!
Mindinkább azt, hogy kerüli az olyan felesleges elemeket, mint a 3D, az árnyékok, a layerek, és a színátmenetek.
Kéz a kézben jár a minimalista stílussal. Máris jön a példa:
forrás: http://duftandco.com/
A bannerről, és az első benyomásról
#2 Videók elhelyezése banner térben vagy a weboldal egyéb részein
#video #animáció #betöltődés
Ugyan a videók a korábbi években kritikus pontnak számítottak SEO, azon belül pedig a weboldal betöltési idejének szempontjából, de úgy látszik ez a trend most mégis változásnak indul.
Számok és mérések szempontjából fontos, hogy minél több időt töltsön a látogató az adott oldalon. A látogatók 88% -kal több időt töltenek videókkal rendelkező webhelyeken (Home Business, 2020). Ebben segítenek az okos, rövid videók.
Videós tartalmakkal kapcsolatos javaslatok
- Figyelj a hosszára! Javasolt 30 másodperc és 2 perc között tartani a hosszát.
- Tucat animáció helyett válaszd a látványosabbakat, amelyek kapcsolódnak a márkádhoz, esetleg üzenetet hordoznak magukban.
- Optimalizáld a videó méretét minőségromlás nélkül. Így nem terheli annyira a weboldalad betöltődéskor.
- Válaszd a "lusta betöltést", azaz "lazy loading" opciót, melynek az a lényege, hogy csak akkor töltődik be a tartalom, amikor a látogató az oldal már azon részén jár, ahol az elérhető.
U.i. éljenek a drónok!
forrás: https://mezohegyesbirtok.hu/
#3 Bannerkép helyett csak szöveg? Naná!
#heroimage #textbanner
Ha egy magazint nézünk, akkor mi az, ami miatt levesszük a polcról? A címlapja! A figyelem felkeltésére szolgál, valamint a legfontosabb információk feltüntetésére. Röviden ez „add el” része a dolognak.
Ha ezt a gyakorlatot átültetjük a digitális világba, akkor az eredmény a következőképpen alakul:
Egy weboldal „címlapja” az úgynevett „hero”, vagyis hajtás feletti rész. Ez a honlap azon része, amit görgetés nélkül láthatunk az adott oldalból betöltéskor. Erre a részre kerülnek azok a szöveges tartalmak, amik felkeltik a figyelmet, és inspirálják a látogatót a további böngészésre. Persze a szövegekkel csínján kell bánni, hiszen a túl sok és zsúfolt szöveg riasztó lehet. Hogy ezt elkerüljük, ezen a részen az illusztrációk használatát minimálisra kell csökkenteni. Ez az irányzat főként akkor működik igazán jól, ha figyelemfelkeltésnek modern betűtípusokat használunk az említett korábbi illusztrációk helyett. Jöjjön is egy példa a „text only hero image” irányzatra a lenti videóban.
forrás: https://www.verticalloop.com/
A tartalomról
#4 Infografikák, mindenféle ábrák, avagy adatvizualizáció
#infografika #diagram #grafikon
Manapság már olyan világot élünk, ahol mindent mérnek, ebből kifolyólag rengeteg adatot kapunk.
Az adatok haszontalanok, amennyiben nem tudjuk megfelelően értelmezni őket. Ahhoz, hogy ezeket be tudjuk fogadni, vagy meg tudjuk érteni, különböző módon kell feldolgozni, vizualizálni azokat.
Nem beszélve arról, hogy az internetezők ingerküszöbe is feljebb kúszott…kevesebbeket kötnek már le a számok, betűk sokasága.
Az ember vizuális lény, és könnyebben dolgoz fel olyan adatokat, melyek vizuális ingerként landolnak a szeme előtt – akár infografika, akár csak egy grafikon formájában kapja.
A webdesign területén is egyre elterjedtebb ez a fajta közlés, így az oldalak látogatói pár másodperc alatt megértik, vagy elsajátítják az információkat: egy statisztikai adatot, egy folyamatot, vagy bármi mást.
Az, hogy az adatok nem csak szöveges, hanem egy izgalmasabb módon is tálalásra kerülnek, élményként szolgálhatnak, mely a honlap viszont-látogatását segíti elő.
forrás: Lemonly.com
#5 Scrollytelling és vizuális történetmesélés a webdesign trendek 2022 listában
#storytelling #történetekereje #mindenkiszereti #csakgörgess
A történeteket mindenki szereti. Számos cikk zeng ódákat ma, 2021-ben a storytelling hatékonyságáról. Én még egy egész napos workshopon is voltam a téma kapcsán. Szóval annyit kijelenthetünk, hogy a történetmesélés – mint eszköz – nem egy múló szeszély.
Na de hogy jön ez a webdesign trendekhez és a weboldalak felépítéséhez?
A scrollytelling nem más, mint a görgetés és a történetmesélés, avagy a storytelling fúziója: egy tökéletes módja annak, hogy az információkat történet formájában adjuk át az olvasónak úgy, hogy közben neki csupán annyi dolga van, hogy görget.
A scrollytelling szemlélettel felépített honlapok esetén a felhasználói tevékenység váltja ki az elemek közötti átmeneteket és mindenféle stílusmódszert: váltakozó szövegeket, változó képeket, interaktív háttereket, animációs effektusokat, méretváltozásokat stb. Együtt minden egyes elem összeolvad egyetlen cél érdekében: hogy egy csábító, mozgásban lévő történetet alkossanak.
Ezek a vizuális effektusok arra hivatottak, hogy elbűvöljék a közönséget, és hogy ezüsttálcán szolgálják fel számukra a vonzó tartalmat. A scrollytelling-et „narratív vizualizációnak” is nevezik, mely olyan vizuális elemek sorozata, amelyek egy logika szerint vannak egymás után felsorakoztatva. Céljuk egy, vagy több konkrét üzenet közvetítése a látogatók felé.
forrás: https://katherinemaslen.com/
A színekről
#6 Még mindig a sötét (DARK) mód
#darkmode #menő
Ahogy a 2021-es évben, 2022-ben is tovább hódít majd a sötét mód, amely nem csak esztétikus, de segíti a kiemeléseket, kíméli a szemet és az eszközök akkumulátorát is.
Ezenfelül ultramodern! Viszont nagyon kötött. Akinek a cégprofiljához passzol, annak viszont szinte elengedhetetlen. Lásd a példát, és figyeld meg, mennyire klasszul vannak vegyítve a fekete-fehér elemek a színesekkel, és milyen jól érvényesülnek a képek.
forrás: https://halottpenz.hu/
#7 Színátmenetek használata
#gradients #színátmenet
Színátmenetek tekintetében úttörőként tekinthetünk az Instagramra, ami szinte elsőként alkalmazta logójában a színek átmenetét. Ez egy látványos technika logó tervezésnél, de gombok, vagy más vizuális elemek kiemelésére, hangulatok felturbózására, valamint weboldalak komplett háttereként is jól használható.
Fontos megemlíteni, hogy az átmenetek között két fajtát különböztetünk meg; a monokróm, amikor egy darab színnek árnyalatait használjuk. Ez a módszer alkalmas címsorok vagy fontos blokkok kiemelésére.
Illetve a másik módszer, amikor a színkörön ellentétes helyen elhelyezkedő színeket használunk. A második lehetőség lehetővé teszi, hogy az oldalt két mezőre osszuk fel,amelyekbe az ellentétes vagy összehasonlított objektumok kerülnek.
Amennyiben a weboldal háttere kap színátmenetet, sokszor társul animációval.
A színátmeneteknél nem kell egyből erős színekre gondolni, rendkívül elegáns tud lenni diszkrétebb formában is, például így:
forrás: https://lifeinvogue.vogue.it
A betűkről
#8 Különleges betűtípusok és a félkövér verziók
#font #fontstyle #bold #special
A vizuális kommunikáció, megjelenés fontos eleme a betűtípus és ezt a tervezésnél sem hagyhatjuk figyelmen kívül. Hiába csak betűkről van szó, hihetetlen nagy szerepet kap, hiszen nem egyszerűen a szöveget jeleníti meg.
A betűtípusok feladatai a következők:
- az egyedi megjelenés létrehozása;
- a fontos információk kiemelése;
- az esztétikus megjelenés kialakítása;
- valamint a felhasználó figyelmének, érdeklődésének felkeltése a tartalom vonatkozásában.
Ez egész egyszerűnek tűnik, de ma már nem csak könyvet és újságot olvasunk, hanem a képernyőn lévő szövegeket is – ott is többféle méretű, felbontású kijelzőt használunk. Ezért figyelembe kell vegyük, hogy melyik felületen milyen betűtípust, annak is mely formáit, méreteit használjunk, hiszen nem ugyanúgy működnek. Egy telefon kis kijelzőjén nem esik jól a szemnek ugyanaz, ami egy nagy felbontású monitoron. A túlságosan díszített formák kis felületen kényelmetlenek lehetnek, ami akár a szöveg olvashatóságának rovására is mehet. Érdemes megfontolni, miket használunk.
Példánk, a „The New York Times” esetén a logó (magazin cím) esetén szinte kötelező volt ez a font, összekötve a klasszikus, nyomtatott formájú verziója miatt.
forrás: https://www.nytimes.com/
A betűtípusok esetén fontos megjegyezni, hogy a félkövér betűtípus továbbra sem ment ki a divatból! Erről a tavalyi, webdesign trendek 2021 című bejegyzésünkben olvashatsz több infót, és láthatsz példát ide kattintva >>>
További webdesign trendek a weboldalon
#9 Fotók grafikus elemekkel, rétegek, árnyékok, életre kelt objektumok
#fénykép #grafika #mix #layers #shadows #webdesign
Egy jól megkomponált kép többet mond ezer szónál. Hát még, mikor grafikai elemekkel vegyítjük őket.
MINDENT A SZEMNEK ÉS HATÁSVADÁSZAT FELSŐFOKON
Eleinte a közösségi hírcsatornák fényképeit “dekorálták” grafikai elemekkel; körök, háromszögek, pöttyök, nonfiguratív alakzatok.
Aztán egyre nagyobb teret hódított magának a webdesign eme bugyra…
A grafikával mixelt fotók kisvártatva megjelentek weboldalakon díszítőelemként, manapság pedig olyan népszerűségnek örvendenek, hogy használatuk akár egy márka arculatát is komolyan meghatározhatja.
Egy biztos: ez a technika nagyfokú kreativitást igényel, cserébe viszont szinte garantált élményt biztosít.
A 2021-es trendekből ezen felül átszivárognak az egyéb, extra megjelenést biztosító objektum kiemelések: képek, illusztrációk, betűk rétegezése, egymásra „húzása” és árnyékolása.
1-1 objektum mozgatása, életre keltése pedig növeli a felhasználói élményt, ami miatt szívesen időznek a látogatók az adott weboldalon.
forrás: https://crustac.fr
Technikai kiválóság és SEO
#10 Weboldal sebesség, "mobilefirst" megközelítés a webdesign trendek 2022 listában
#pagespeed #mobilefirst
Az a helyzet, hogy a látvány mellett a felhasználói élményben igencsak nagy szerepet játszik néhány technikai tényező. Most kettő olyat mutatunk be, melyek közvetlen hatással lehetnek weboldalunk használatára, böngészése közben keletkező benyomásokra.
Weboldal sebesség
Nem kell szerintem hatalmas érvekkel alátámasztani, miért fontos az, hogy weboldalunk (mondjuk) 3 másodpercen belül betöltődjön…felgyorsult világban élünk (akár tetszik nekünk, akár lázadunk ellene). A hosszú betöltési idő bosszúságot válthat ki a felhasználóból, és elképzelhető, hogy az előtt hagyják el a honlapunkat, mielőtt betöltődött volna. Ezért érdemes olyan technikai újításokat eszközölni a honlapunkon, melyek növelik a betöltési sebességet.
Mobilefirst, azaz a mobil nézet az első
A weboldalak mobil nézetének tökéletes megjelenése továbbra sem lesz kérdés. Sőt! Fontosabbá válik, mit az asztali nézet. Ha egy weboldal mindenféle típusú és méretű eszközön jól áttekinthető, és alkalmazkodik a keretekhez, akkor „reszponzív”. Az alkalmazkodás alatt értjük például azt, hogy a betűk olvasható méretűek, nem túl nagyok, nem túl kicsik, illetve a képek is szépen felveszik a kijelző méretét, vagy annak előre definiált arányos részét.
Az alábbi statisztika hűen tükrözi a böngészési szokásokat, mely alátámasztja, hogy igenis a mobilefirst megközelítés – habár technikai kérdés – joggal kap helyet a 2022-es webdesign trendek között (is).
Hiszen hiába a modern weboldal, ha lassan töltődik be, vagy nem mobilbarát.
forrás: https://gs.statcounter.com
Webdesign 2022: már nagyon várunk, hiszen annyi minden változott körülöttünk
A 2020-ban kitört koronavírus járvány számos vállalkozást „kényszerített” arra, hogy megjelenjen az Interneten, és több platformon népszerűsítse termékeit vagy szolgáltatásait.
Az utóbbi időben több új megkeresés érkezett felénk weboldal készítésre a következő indokkal:
„Szeretném, ha vállalkozásom egy magas színvonalat tükrözne egy komolyabb honlap képében.”
„Szeretném azt, hogy ha odaadom valakinek a névjegykártyám, ráírhassam a weboldalam címét, ahol egy igényes felületen tájékozódhat minden érdeklődő az amúgy kiváló minőségű szolgáltatásainkról.”
Mondhatod azt, hogy elég a Facebook, egy Google Cégem vagy egy Opten jelenlét. Néha amúgy ez igaz is. De ha szintet szeretnél lépni vállalkozásoddal, akkor egy weboldal igenis növeli a nívót és céged virtuális értékét.
Ugyanakkor légy résen! Sokan gondolkodnak így, és sokan jöttek erre már rá. Hogyan lehet mégis kitűnni? A keresőoptimalizálás mellett úgy, hogy a Te weboldalad más, mint a többi. Trendi, modern, letisztult és mondjuk 2023-ban is megállja majd a helyét.
Nálunk a webdesign trendek évről-évre történő áttekintése nem egy hóbort. Nem egy unalom kitöltő tevékenység és még csak nem is hobbi. Nekünk, az Ananász design-nál kötelezően választandó "tantárgy" - nem csak azért, hogy mi is a webdesign szakma kiválóságai között kapjunk helyet, hanem azért is, hogy az általunk készített és menedzselt weboldalak értéket teremtsenek, és értékállóak is maradjanak.
Irodalomjegyzék
- https://merehead.com/blog/10-unique-web-design-trends-follow-2022/
- https://elementor.com/blog/guide-to-scrollytelling/
- https://www.awwwards.com/
- https://qodeinteractive.com/magazine/beautiful-gradient-websites/
- https://financesonline.com/web-design-trends/
- https://www.theedigital.com/blog/web-design-trends
- https://www.socialmediatoday.com/news/10-web-design-trends-and-predictions-for-2022-and-beyond-infographic/606425/
- https://trendsdesignhugger.com/web-design-trends-2022/
- https://fastersolutions.com/top-10-design-trends-for-2022/
- https://mblagomarketing.medium.com/websites-of-the-future-web-design-trends-2021-2022-a38a5afea98d
- https://www.thestackgrp.com/the-rising-web-design-trends-for-2022
- https://www.taffinc.com/blog/top-ux-ui-design-trends-to-watch-out-for/
- https://www.creativeboom.com/features/six-web-design-trends-to-expect-in-2022/
