Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2017-12-200 komment

Merre tart a webdesign 2018-ban? Trendek, irányok

Nagy meglepetésekre természetesen nem kell számítani, hiszen a folyamatok jelenleg is láthatók, mindössze a hangsúlyok tolódnak el. A 2018-as webdesign trendek általában korábbi években már megfigyelt folyamatok erősödéséből – mint például az élénk színek és az animációk -, illetve gyengüléséből – például a flat és a szellemgombok – állnak össze.

Osztott weboldalak

2015 óta velünk vannak, de a kettéosztott weboldalak még mindig nagyon felkapottak, és úgy tűnik a trend az elkövetkező években is maradni fog. A kettéosztott weboldal felszámolta a megszokott weboldal-hierarchiát. A tekintet ahelyett, hogy felülről lefelé mozogna, kissé bizonytalanul csapong az oldalon, mivel az emberek nem tudják, hová is nézzenek.

Ugyanakkor több más előnye is van, így a jó kompatibilitás a mobilokkal és a felhasználóbarát használat. Ráadásul jól is néz ki, eredeti, nincs még túl sok belőlük. Nem véletlen tehát, hogy egyre növekszik a népszerűsége.

Nagyon jól használhatók olyan weboldalakon, ahol két vagy három, jelentősen különböző vagy megkülönböztethető tartalom van, melyekre egyaránt kíváncsiak lehetnek a cég ügyfelei. Ugyanúgy működik a dolog, mint azoknál a tartalmaknál, ahol előre el kell dönteni, melyik úton induljunk el.

Emellett jól használhatók reszponzív megoldásként, hiszen míg desktopon egymás mellé kerülnek a blokkok, addig mobilon egymás alá. A felhasználók így nem érzik, hogy bármivel is kevesebbet kapnának egy kisebb kijelzős megjelenésnél.

Több megoldás is létezik azonban az osztott weboldalak kialakítására.

Klasszikus osztott weboldal design

Ebben az esetben két szimmetrikus panelről beszélhetünk, melyek egyszerűvé teszik a moduláris kialakítást.

Aszimmetrikus osztott weboldal

Egyre több esetben azonban most már nem fele-fele arányban osztják meg a designerek a kijelzőt, hanem aszimmetrikusan. Ehhez persze nagyon finoman kell kialakítani az egyensúlyt a weboldal két fele között, hogy egyik se kerüljön túlsúlyba. Jellemző, hogy a weboldal egyik felét a szöveg és a whitespace határozza meg, míg a másikat egy figyelem-felhívó kép. Ezen megjelenés mögött persze továbbra is a rácsszerkezet áll, mely rendezettséget biztosít a weboldalnak.

Minimalista irány

Míg az első osztott weboldalak viszonylag egyszerűek és szimmetrikusak voltak, itt nem állt meg a fejlődés. Egyes weboldalaknál megmaradt a szimmetria, másoknál változatos felosztások jelentek meg. Néhányan cikk-cakk mintában választották el a két részt, sokan minimalista irányba mozdultak tovább.

Az eredeti kettéosztott weboldalak egy kicsit súlyosak voltak, mivel arra lettek tervezve, hogy egy tartalmi csatornán elindítsák a felhasználók. Ehhez pedig kellett a tartalom segítsége. A választás lehetőségét azonban lehet egyszerűsíteni. Megjelentek az olyan osztott weboldalak, ahol már nincs is egyértelműen elmagyarázva a választási lehetőség.

Kettéosztott weboldal példa

Osztott weboldal több kattintható területtel

Az egyik érdekes irány az osztott weboldalaknál, amikor ugyan szimmetrikusan ketté van osztva a weboldal, az egyik felén azonban nem egy CTA, hanem több kattintható elem is található.

Nem nyilvánvaló osztott megjelenés

Ma már nem minden osztott weboldalon válik egyből nyilvánvalóvá, hogy osztott weboldalról van szó. Ha annyira minimalista a megjelenés, hogy nincsenek különböző színek vagy képek a két részen, akkor nem egyértelmű az elválasztás. Ilyenkor a két rész, akár egynek is tűnhet elsőre. Mobilon, illetve desktopon a görgetés során válik csak láthatóvá, hogy miként is gondolják az alkotók a felosztást. Erre lehet példa ez a weboldal.

De jöjjenek a további designtrendek!

Még több élénk szín

Úgy tűnik, hogy az élénk színek kitartanak, sőt egyre többet láthatunk belőlük. Az erőteljes színek magukra vonják a figyelmet, és segítenek bevonzani a felhasználókat. Friss érzetet keltenek, és különösen a fiatalabbak számára vonzóak. Ezáltal olyan cégek is használni kezdik, akiktől meglepőnek fog tűnni ez a vidám hangulat. Mint például a Ford, mely a Make it Driveable landing oldalán rendkívül élénk színeket használ.

Ragadós elemek a weboldal tetején is alján

Semmi új nincs abban, hogy egy menü végig követi a felhasználót az oldal tetejére ragadva, miközben legörget rajta. Mégis, egyre tovább nő a ragadós navigációt használó oldalak száma.

Ugyanígy reklámok, chatablak, felugrók, üzenetek ragadnak egyre nagyobb számban a weboldalak aljára. Elsősorban azért ide, mert ez a legkevésbé zavaró, és mobilon is elfogadható elhelyezés, miközben a weboldaltulajdonosok szeretnék valamire felhívni a figyelmet.

Ívelt formák

A határozott, geometrikus, éles kontúrú formák helyett egyre jellemzőbbé válnak a puhább és rugalmasabb formák. Leginkább a lágy vonalak határozzák meg a megjelenést, melyekben kevés a törés és az él. Bárhová nézel, egyre több íves vonalat látsz. Ez történik a közösségi oldalakon, ahol a profilfotók már kör alakúak, de a Google mobilos oldalán is lekerekített sarkokkal és körökkel találkozol.

Finom animációk

Az apró és egyszerű animációkat szeretik az emberek. Ha jól vannak megtervezve, akkor segíti őket a weboldal használatában. Nem csak arra valók, hogy valamiképpen átvészeljük azt az időszakot, amíg a betöltődésre várunk. Beletartoznak nem csak az életre kelt illusztrációk, hanem akár a cinemagraph is.

Utóbbi elterjedése még várat magára, pedig nem 2017-ben hallottunk róla először. A cinemagraph egyfajta kombinációja a videónak és a fotónak, ahol a kiváló minőségű fotó kap egy loopolt videó-effektet, melynek révén azt az illúziót kelti az emberekben, hogy életre kel a fotó. Nem statikus a kép, mint egy fotón, ugyanakkor nem igényel annyi figyelmet és helyet sem, mint egy videó. Képes felkelteni a figyelmet, érzelmeket vált ki, és van egyfajta megnyugtató, sőt inkább hipnotikus hatása. Annak ellenére, hogy nem történik semmi a képen, az embereket megragadja.

Parallax görgetés

Habár sokan panaszkodnak amiatt, hogy lassul a betöltési idő és romlik a használhatóság miatta, már évek óta találkozhatunk a parallax effektekkel a weboldalakon, melyek görgetéskor jelennek meg. És úgy tűnik, hogy egy darabig még velünk maradnak. Igaz kicsit finomabb, kevésbé túlhajtott formában, hiszen a felhasználók felfigyelnek rá és szeretik a velük való játékot.

Eltűnő flat design és szellemgombok

A Nielsen Norman Group 2017 végén közzétett vizsgálata már jelezte, hogy a felhasználók számára problémát okoz, ha tiszta flat design keretek között kell navigálniuk: 22 százalékkal tart tovább egy feladat végrehajtása.

Az NNG a vizsgálatai egy részénél szellemgombokat használt, melyek ugyanúgy problémát okoznak, mint a flat design, legalábbis az esetek egy részében. De nem csak ők, hanem a ConversionXL is 20 százalékos eltérést talált a szellemgombok kárára, amikor ezekkel kísérletezett a CTA-jánál.

Nem véletlen, hogy egyre többet hallhatunk a designerek részéről az újra megjelenő árnyékokról és színátmenetekről. De persze már a material design és a flat 2.0 is jelezte, hogy a UX-et tekintve komoly kihívásokkal küzd a flat.

Videók, háttérvideók

Habár lassíthatják a weboldalt, és adott esetben zavaróak is lehetnek a felhasználók számára – sokan úgy vélik, hogy egy kategóriába esnek a karuszelekkel -, mégis mivel mindenhol ott vannak, nem maradhatnak ki a webdesignból sem. Használhatóságuk jórészt attól függ, hogy milyen weboldalon alkalmazzák, mire és hogyan próbálják meg alkalmazni őket. Fontos, hogy elsősorban desktop felületeken lehet létjogosultságuk a videóknak. Különösen, hogy összetett információkat viszonylag könnyen és gyorsan át lehet velük adni.

Brutalizmus

Habár a brutalizmus egyelőre még alapvetően a kreatív emberek játékszere a weben, egyre több példát találunk arra, hogy betör a mainstreambe. Ilyen például a Balenciaga webáruháza, mely merészen belevágott a használatába. A Nielsen Norman is elemezte a brutalizmust – miközben elválasztotta az aintidesigntól -, valamint megtette ajánlásait a használatára vonatkozóan.

Egyelőre a legfőbb indok a használatára az, hogy eredeti, hiszen még kevesen vágtak bele, így felkelti a figyelmet. Pedig olyan előnyei is vannak, mint a gyorsabb betöltődés, az egyszerűbb navigáció és a kevesebb zavaró tényező. Nyilvánvalóan nem mindenki által alkalmazható irányzat, ennek ellenére egyre többször fogsz találkozni vele 2018-ban. Elsősorban olyan weboldalak részéről, akik a fiatalokat célozzák.

Kategória: Design | Címke:

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.