fbpx

IncursionMedia

2019-es Webdizájn trendek

Laszlo Kulman, CEO, Magyarország

2018. november 7.

Tudd meg, mi lesz a legnagyobb durranás 2019-ben

A webes megjelenés trendjeinek fenntartása kulcsfontosságú egy weboldal sikerének szempontjából. Sok minden változik évente, mint például a látvány, az algoritmus frissítések és a bevált gyakorlatok népszerűsége szempontjából is.

A mai modern és elegáns weboldal néhány hónap múlva elavultnak és egyszerűnek tűnhet, ezért az iparági trend és a múló fellángolások közötti különbség ismerete nagyon fontos egy weboldal tervezésénél, hogy biztosítsa, a formatervezés több évig jól nézzen ki, és ne emlékeztessen a Geocities üzenőfalra 1996-ból.

A 2019-es év a felhasználói élményekről fog szólni; a webdizájn trendek között szerepel a sebesség, a mobilbarát verzió, a szemet gyönyörködtető egyszerű minták vagy az aszimmetrikus elrendezés, illetve a videó háttér is.

Sebesség

Mennyi idő alatt kellene, hogy weboldalad betöltsön, hogy jó benyomást kelts egy potenciális ügyfél számára? Ha az interneten való kapcsolattartásról beszélünk, akkor kevesebb, mint három másodperc az elvárt érték.

PageSpeed Insights

Az emberek lendületesek és türelmetlenek. Ha az internet valóban egy idegen összeesküvés, amely megfigyeli az emberi természetet, az idegen tanulmányok azt mutatják, hogy nem szeretünk várakozni. Az Akamai és a Gomez.com által készített tanulmányok szerint a felhasználók 50%-a azt várja el, hogy amikor egy weboldalra kattintanak, akkor két másodperc alatt vagy annál kevesebb legyen a betöltési idő, ha ez három vagy több másodperc felett teljesül, akkor elhagyják a weboldalt.

Ahogy láthatod, egy gyönyörű weboldal az csak egy gyönyörű weboldal, de ha a formatervezés adatigényes, amely hosszú betöltési időt eredményez, akkor nagy mennyiségű bevételt veszíthetsz el, mivel senki nem marad a weboldaladon. Még ennél is rosszabb, amikor 2018 júliusában hatályba lépő Google Speed frissítéssel a Google elkezdte előrébb helyezni azokat a weboldalakat a találati listán, amelyek gyorsabban töltődtek be a többinél. Ezt valószínűleg más keresőmotorok is hamarosan követni fogják.

Ez azt jelenti, hogy a weboldalak gyorsabb betöltése érdekében a webdizájnnak a tervezési folyamatok során prioritást kell élveznie. A webes tervezők egyszerűen nem támaszkodhatnak a fejlesztőre, hogy munkájukat olyan formában alakítsák egymáshoz, amely valami olyat ad végeredménynek, amely jól is néz ki és jó rangot ér el. A sebességnek tervezési paraméternek kell lennie!

A gigantikus fotók, a tömörítetlen videók és a hatalmas terjedelmű javascriptek ideje lejárt. A nagy képek és videók nem tűnnek el a webdizájn területéről, csak 2019-ben oly módon épülnek be, hogy nem lassítják a betöltési időt.

Egyszerű kialakítás

2017-ben a tervezők és fejlesztők megkezdték a letisztult és egyszerű weboldalak létrehozását a jobb mobilteljesítmény érdekében. Azóta a mobilkeresések száma csak növekszik, és a weboldalak mobilbarát dizájnja most már szükségszerűség, nem csak egy lehetőség. A nagy méretű weboldalak lassan töltődnek be, és zavarja a mobil felhasználókat, ahogy azt már korábban tárgyaltuk.

A letisztult, minimalista vagy egyszerű kialakításokat a gyors betöltés jellemzi, és két fontos okból jelenleg is divatos és keresett. Először is, mind a mobilfelhasználók, mind az asztali böngészők gyorsan betöltő weboldalakat tapasztalhatnak. Másodszor, magas SEO értéket adhatnak. Az egyszerű dizájn segít az oldal teljesítményében a gyorsaság követelmények szempontjából, amelyeket a keresőmotorok megkövetelnek. Ezért kezdett népszerűvé válni az egyszerű dizájn, és továbbra is trend lesz 2019-ben is.

Az egyszerű kialakítás nem azt jelenti, hogy mindent két dimenzióra kell csökkenteni – ez a minimalizmusról és a használhatóságról szól. Ez egy olyan esztétikai terv, amely megszünteti a rendetlenséget, és a weboldal fontos részeire koncentrál. Az élénk színek, a tiszta és éles szélek, valamint sok nyitott tér kihasználtsága miatt az egyszerű dizájn frissítő változást jelent a zavaró és lassú betöltésű hi-res képalapú dizájnoktól.

Annak ellenére, hogy minimalista, ez nem jelenti azt, hogy az egyszerű kialakítás unalmas. A kontrasztos élénk színek, az egyszerű képek és a sans-serif betűkészletek illusztrálása révén az egyszerű formatervezés részei együttesen kiváló felhasználói élményt nyújtanak, amely szemet gyönyörködtető és vonzó.  

Mobile First

A sebesség nem csak az egyetlen uralkodó tényező, amelyet a Google a weboldalak mérésére használ. 2015-ben a mobilkeresések összességében meghaladták az asztali kereséseket, így a mobilkeresés világszerte a legmagasabb keresési forma. Ennek megfelelően a Google megváltoztatta, hogy mely oldalakat indexeli elsőnek – most már a mobilbarát weboldalak prioritást élveznek a nem mobilbarát weboldalakkal szemben.

Mióta a mobilbarát weboldalak elvették az elsődleges prioritást a nem mobilbarát weboldalaktól, nem csoda, hogy a mobilbarát formatervezés trendé vált. A mobilbarát tervezés arról szól, hogy megváltozik a weboldal alapvető kinézete. A szabvány az volt, hogy egy weboldalt csak asztali vagy hordozható számítógépre terveztek és a mobilbarát dizájn külön hozzá lett csatolva. A mobilbarát formatervezés éppen az ellenkezőjét jelenti: először a mobilfelhasználó weboldalának megtervezésével kezdődik, mielőtt létrejönne egy olyan verzió, amely az asztali felhasználók számára is működik.

Ez a mobilbarát dizájn, nem csak a rangsorolási tényezőkön vagy a SEO-n alapul. A vizuális eredmény olyan dolog, amely először és mindenekelőtt növeli a felhasználói élményt azon az eszközön, amelyen a weboldalt böngészve valószínűleg keresni fognak. Ez a tervezési trend megfelel a keresletnek, amelyet a mobilfelhasználók igényelnek, és valószínűleg hosszú ideig lesz is rá igény.

 

Elcsúsztatott rácsok / aszimmetrikus elrendezések

Elcsúsztatott rácsok

2019-ben a webdizájn trendje a dobozon kívüli gondolkodásról szól, vagy inkább a rácsokról. Az elcsúsztatott rácsok és az aszimmetrikus formatervek nagy vonalakban hagyják itt a védjegyüket a webdizájn iparban. Annak ellenére, hogy sok webes tervező az egyszerű, gyors, minimalista dizájn felé hajlik, a tervezőknek van egy nagy kontingense, akik az elcsúszott feltűnő elrendezéseket támogatják.

Amikor az elcsúsztatott rácsokról vagy az aszimmetrikus elrendezésről beszélünk, ez a rácsrendszerre vonatkozik, amelyet évtizedek óta használnak mindenféle elrendezésre, a weboldalaktól az újságokig, nyomtatásra és kültéri hirdetésekre is. A rácsrendszer segít a tervezőnek az összehangolás és a következetesség egyszerűsítésében, amikor tartalmat – képeket, címsorokat, cselekvésre ösztönzést – ad hozzá valamilyen médiumhoz, amelyen dolgozik, fenntartva a rács szerkezetét az alap elrendezésben, miközben általában fenntartja a szimmetriát is.

Történelmileg, ha nem a rácsos vagy „szárnyas” elrendezést alkalmazták akkor hanyag vagy zavaró mintának nevezték, mert zavarta a látogatót, hogy a legfontosabb részére fókuszáljon az oldalnak. Az aszimmetria és a csúsztatott rácsok egyre népszerűbbek, valószínűleg azért, mert olyan módon mutatja be a tartalmat, amely nem hasonlít más weboldal tartalmához, ugyanakkor nem zavaró vagy hanyag az elrendezése.

A tervezők ezt eltudják érni a rácsmintázat megtörésével, valamint a tervezett aszimmetriával. A szokatlan elhelyezések használata, különböző színű és textúrájú rétegezés, szabálytalan minták megismétlése, fehér térhasználat és a tipográfia kreatív használata olyan mélységérzetet eredményez, amelyek általában nem találhatóak meg a rácsalapú elrendezésekben.

Ezek a dizájn elemek feltűnőek, segítenek a látogatók elérésében és a weboldal legfontosabb részei felé irányítja őket. A színek, az alakzatok, a textúrák és a dinamikus képek felhasználásával a tervező új, vonzó módon irányíthatja a látogató figyelmét a tartalomra vagy a CTA-kra, amelyeket a látogatóknak meg kell találniuk.

Alakzatok

Mint egy középút az egyszerű, a minimalista és az elcsúsztatott rács kialakítások között. Ha úgy gondolod, hogy ez az olyan egyszerű euklideszi geometriai formákra vonatkozik, amelyeket a középiskolában tanultál, mint a háromszögek, hatszögek és a körök, akkor teljesen igazad van.

 

Alakzatok

Az alakzatok áthidalhatják a rést a sík és az elcsúsztatott rácsok között, mivel könnyen integrálhatók egy dizájnba. Az egyszerű geometrikus alakzatok élénk színekkel, érdekes élekkel gyors betöltést eredményezhetnek, miközben mindig kapcsolódnak egymáshoz. Az olyan alakzatokkal vagy mintákkal, amelyek ismétlődő mintázatokat hoznak létre, dinamikus és mélységi megjelenést lehet elérni az elcsúsztatott rácsokban vagy az aszimmetrikus elrendezésekben.

Ez a sokoldalúság nagy része annak, hogy miért alakulnak ki az alakzatok 2019-ben. A geometria mögött álló matematika segít megteremteni az egyensúlyi érzést a weboldalon, még akkor is, ha képi aszimmetriát tartalmaz. A geometriai alakzatok gyakran könnyen illeszkednek egymásba vagy egymás mellé, gyorsan létrehozva a szervezettséget vagy a hierarchiát.

Az alakzatok olyanok, mint a színek, gondolatokat vagy érzelmeket válthatnak ki, amelyeket az emberek természetesen társítanak össze egymással. A téglalapok stabilitást, a körök egységet, a háromszögek és a rombuszok a dinamizmust jelentik. Az alakzatok vagy formavilág kombinációinak kreatív használata arra szolgálhat, hogy érzelmeket váltson ki a weboldal látogatóiban.

Bármilyen mértékben használhatók – egyszerűen a márka esztétikájától függ. Az alakzatok könnyen segítenek a vizuális hierarchiák létrehozásában, és felhívják a figyelmet azokra az oldalrészekre, amelyeket a látogatónak észre kell vennie, még akkor is, ha weboldalad elhagyta a hagyományos rácstervezést. Ezért fogunk geometriai formákat látni a 2019-es webdizájn trendekben.

Egyoldalas tervezés

A sebesség és a minimalizmus, amelyek újra és újra felmerülnek, amikor 2019-ben a webdizájnról beszélünk majd, ami az egyik legfontosabb oka lesz annak, hogy az egyoldalas tervezés más néven oldalfüggetlen tervezés, 2019-es webdizájn trendé fog válni. Az egyoldalas tervezés leírja, hogy miről is van szó – olyan weboldalakra utal, amelyeknek csak egy oldala van, nem pedig több szolgáltatást leíró oldalak vagy blogbejegyzések, amelyek mindegyike szépen rendezett hierarchiában helyezkedik el.

A hagyományos SEO szempontjából ez valószínűleg hiba lesz – sokkal nehezebb lesz rangsorolni bizonyos kulcsszavakat azok nélkül az oldalak nélkül, ahol normális esetben a tartalom el lenne helyezve. Igen, bizonyos SEO taktikákat nehezebben lehet majd használni, ez lesz az, ahol a hátrányok elkezdenek csökkenni.

Ahogyan azt a gyors és egyszerű dizájnnál tárgyaltuk, a keresőmotorok kedvelik az egyszerű weboldalakat, mivel gyorsan és egyszerűen letölthetők a mobileszközökön. Az egyoldalas dizájn ezt úgy érheti el, hogy kevésbé tartalmaz olyat, amely lassíthatja a weboldalt (CSS, javascript), így elsőbbséget biztosítanak a keresőmotorokban.

Ez az egyszerűség kétszeresen is jó az egyoldalas weboldalak számára, mivel minden böngészőeszközön jól néz ki, és automatikusan mobilbarát stílusú weboldalakká válnak. Annyira egyszerű, hogy könnyebben kezelhető. A weboldal frissítései gyorsabban megvalósulnak, mivel olyan kevés dolgot kell megváltoztatni vagy frissíteni. Ami azt jelenti, hogy a vállalkozásod számára továbbra is naprakész marad a weboldala.

A vállalatok szeretik az egyoldalas weboldalakat az egyszerű használhatóság miatt: általában magas konverziós rátával. Egy hagyományos hierarchikus weboldalon, arról szól az egész, hogy elkapjunk egy látogatót a keresett kulcsszóval és a weboldalunkra irányítsuk majd arra ösztönözzük, hogy kapcsolatba lépjen velünk így tovább lépve egy másik oldalra. Az egyoldalas weboldalak esetében a látogatónak nem terelődik el a figyelme – az oldal minden része a konverziós pont felé irányítja a látogatót, így több üzleti megkeresési lehetőséggel.

Bár az egyoldalas tervezés valószínűleg nem fogja átvenni a webdizájn jövőjét, de valószínűleg lerakja a névjegyét 2019-ben is.

Videó háttér

A minimalista, gyors-betöltésű, egyszerű dizájn tervezési trendek ellenére a videó háttér még mindig népszerű és az is lesz 2019-ben is. Úgy gondolhatod, hogy a sebesség olyan óriási tényező az idén, hogy a videók lehúzzák az oldal értékét, de érdekes módon kimutatták, hogy a videó hátterek növelik a konverziót.

 

A videók egyszerűen csak lenyűgözőbbek, mint a szövegek vagy a képek. Valószínűleg ezt a tendenciát az elmúlt években a közösségi médiaplatformokon, például a Facebookon már Te is láthattad. A videó bejegyzések elsőbbséget élveznek más típusú bejegyzésekkel szemben. Az pedig, hogy automatikusan némítva indul el a videó még könnyebbé tette a videók megnézését miközben az idővonalat böngészed.

Amikor egy látogató az oldaladon landol, és egy videó játszódik le a háttérben, akkor valószínűleg ott marad, hogy megnézze azt, mivel a videók figyelemfelhívó jellegűek. Minél többet marad a látogató a weboldaladon, annál valószínűbb, hogy konverzió jön létre. Ez viszont növeli a helyszíni metrikus időtartamot, és minél magasabb az átlagosan eltöltött idő a weboldaladon annál jobb a SEO.

A videó hatalma nem írható le szavakkal – gyorsan és hatékonyan közvetítik üzeneteidet, amit csak több száz szavas bekezdésekkel érhetnél el. Ezt a videó megteszi másodpercek alatt. Ez különösen akkor hasznos, ha bonyolult üzenetet akarsz átadni a látogatóid számára.

Mikro animációk

Egy finom, de észrevehető 2019-es trend a webes tervezésben a mikro-animációk. A mikro-animáció hatékony módja annak, hogy intuitív és kielégítő élményt nyújts a látogatóid számára, amikor böngészik a weboldalad. Ez olyan kis animációk révén valósul meg, amelyek segítenek a látogatóknak megérteni a weboldalad, és akkor indulnak el, amikor egérrel az elemre kattintanak, például egy gomb színének megváltozása amikor az egér kurzort rávisszük, vagy előugrik a menüben egy almenü amikor a menüpont fölé visszük az egeret.

 

A legtöbb látogató ezeket a mikro-animációkat mind az asztali, mind a mobil böngésző platformokon tapasztalja. Annyira átlátható a böngészés során, hogy meglepőbb az amikor nincs animáció. Ezek az animációk segítenek a látogatónak abban, hogy megtegye a megfelelő lépéseket, ahogyan halad a weboldaladon. Megnyomtad az elküldés gombot az űrlapnál? Ööö… A szín megváltozott, amikor rányomtam. Akkor igen! Hogyan frissítheted gyorsan az oldalad? A ranglistán való visszaesés egy húzó mozgást hoz létre, hogy tudassa Veled, hogy megfelelően indítottad el a frissítési műveletet.

Emlékszel arra, hogy a mozgó dolgok, például a videók hogyan segítenek a látogatók megtartásában? Ezek a mozgások, bár kicsi animációk, segítik elkapni a látogató figyelmét és hozzásegíti őket egy plusz élményhez, amikor a weboldaladon navigálnak. A mikro-animációk helyes használata vizuális hierarchiát hoz létre egy weboldalon, a látogatókat a konverziós pontok felé irányítja, majd juttatja el őket a kapcsolatfelvételhez.

Talán túl egyszerű vagy buta gondolkodásnak tűnik, hogy egy mikro-animáció „megajándékozhat” egy látogatót, ha egy űrlapon kattint, de gondolj arra, hogy ez olyan sokoldalú mint a Captcha, amit sokféle formában használnak. Ha szerencséd van, mindössze annyit kell tenni, hogy rákattintasz a jelölőnégyzetre, de ha át kell menni a képek kiválasztásán, vagy be kell írni egy szám- és betűsorrendet, már nem biztos, hogy tetszetős. A 2019-es megközelítések szerint a mikro-animációk  maradnak a webdizájn iparban.

Csetbotok / gépi tanulás

Az utóbbi néhány évben egyre gyakoribbá vált a robotokkal való interakció és kommunikáció. A botok vagy a csetbotok egyre elterjedtebbé válnak a weboldalakon és a mikro médiumok közötti mikrointerakciókban. Valószínűleg beszéltél már velük, amikor utoljára hívtad a mobilszolgáltatódat.

 

Amikor 20 évvel ezelőtt elkezdtek elindulni, ezek a botok nehezebbé tették a problémák megoldását (emlékezz vissza, hogy hangos, határozott hangon teljesítette a parancsaidat), de az évek során egyre kifinomultabbak lettek köszönhetően a javított mesterséges intelligenciának (AI) és a gépi tanulásnak. Ezek segítenek abban, hogy a Google automatikus kitöltést javasol amikor rákeresel valamire a keresőben. Ez az oka annak, hogy a Facebook annyira jól ismer minket. Segít nekünk abban, hogy megakarjuk-e magunkat jelölni egy képen. Helyadatokat is használ, és megtanulta az olvasási szokásainkat is, hogy pontosan tudja, milyen hirdetések, események és információk jelenjenek meg nekünk, hogy elérhessük azokat egy „tetszik” gombbal.

A csetbotok és a gépi tanulás továbbra is növeli a weboldalakkal való látogatói interakciókat, különösen, mivel a legtöbb csetbotban rejlő automatikus válaszfunkciók zökkenőmentesen kölcsönhatásba léphetnek a látogatókkal és kiváló ügyfélszolgálatot biztosítanak. Ez indítja el a kapcsolatot a potenciális ügyfelekkel a jobb oldalon, miközben egyidejűleg összegyűjti az értékesítési csapatnak az adatokat, mielőtt valóban megkezdené a kapcsolatot a látogatóval.

2019-ben ez a technológia tovább tökéletesíthető és beépül a cégek weboldalaiba. Hamarosan a webes interakciók zökkenőmentessé válnak. Képzelj el egy olyan weboldalt, amely már pontosan tudja, hogy az ügyfeled mit keres, egyszerűen elemezve a vállalkozásoddal kapcsolatos korábbi interakcióit. Az interneten keresztül történő ügyfélszolgálat napról napra gyorsabbá és hatékonyabbá válik az új technológiáknak köszönhetően.

Webdizájn 2019 – Minimalizmus vagy figyelemfelkeltő vizualizációk?

A 2019-es év érdekes év lehet a webdizájnerek számára: az egyik oldalon az elcsúsztatott rácsos elrendezések és videó hátterek csábító élvezetei. A másik oldalon az egyszerű dizájn és az egyoldalas elrendezések gyönyörű, de praktikus dolgai. Ahogy a trendek változnak, úgy az ipar is.