A 10 új elem, amire figyelned kell 2019-ben ha stílusos és trendi weboldalt szeretnél.
Összegyűjtöttük neked a TOP 10 elemet, amely 2019-ben trendi alkotóeleme lesz minden sikeres weboldalnak. Természetesen ez nem azt jelenti, hogy minden elemre szükséged lesz. Ahogy az UX tervező szakember, Aaron Walter az "Emotion Design for Emotion" című könyvében írta: "Ha minden elem felakarja kelteni a néző figyelmét, akkor valójában egyik sem fogja". Ez azt jelenti tehát, hogy ahelyett, hogy túl sok erős és figyelemfelkeltő elemet használnál, használj inkább kevesebbet, amely nagyobb szerepet töltenek be a branded és a vállalati identitásod erősítésében. Hogy mik ezek az elemek, azokat foglaltuk neked össze lentebb.
1. Micro-animációk
Az elmúlt évek során az animáció alkalmazása egyre növekvő tendenciát mutat. A siker titka az, hogy a látogatót sokkal jobban beveszi az oldal felhasználói élményébe, kissé játékos, érdekes élményt nyújt neki. Erre tökéletes példa a parallax görgetés, azaz mozgás és mélységérzékelős görgetési technika. 2019-ben az animáció egy más dimenziója fog megnyílni, amit úgynevezett micro-animációnak is neveznek.
Ezek olyan kisebb mozgások, amelyek akkor jelennek meg, amikor a webhely böngészői egy bizonyos műveletet hajtanak végre. Nem vonják el a látogatóid figyelmét a lényegről és lendületessé, dinamikussá teszik a weboldalad. Segítenek őket irányítani a fontosabb menüpontjaidra, és megnövelik a felhasználói élményt a weboldaladon. Ilyen lehet például egy gomb, amelyhez különböző betű és háttérszín párosul a hover effect során (hover effectnek nevezzük amikor a látogató az egeret elmozdítja a gomb előtt). Ide sorolhatók a videók, a gifek, egy-egy grafikai elem be és kilépő animációja.
Tehát a micro animációk mozgásdinamikát adnak az oldaladnak, és kiemelnek a tömegből. Adott igény esetén mi mindig odafigyelünk, hogy a megfelelő elemhez a megfelelő mozgásanimációt párosítsuk.
2. Mobil optimalizálás
A mobil optimalizálás fontossága a 2018 márciusban bevezetett új Google irányelvek alapján most már kulcsfontosságú. A Google kereső botjai elemzik a weboldal mobilra optimalizált tulajdonságait (pl. figyelembe veszik a weboldalak betöltési idejét telefonon), mielőtt a PC-ken döntene a rangsorolásról. Ráadásul a betöltési sebesség a mobil weboldalak rangsorolásánál is fontos tényezők lettek. Konklúzió: a villámgyors, kereső optimalizált reszponzív weboldal jelentősen elősegítheti a jó SEO rangsorolást.
Szerencsére, Mi minden esetben elkészítjük a weboldal mobilra optimalizált változatát is, amely tökéletesen megfelel a Google irányelveinek. A fölösleges elemeket eltávolítjuk, hogy a sebességgel ne legyen probléma a betöltés során.
3. Geometrikus elemek
2019-ben sokkal több figyelem fog összpontosulni a weboldalakon a geometriai alakokra. Az egyszerű formák, az oldal hátterében elhelyezve nagyon stílusosak tudnak lenni, ha ügyesen vannak felépítve. Ezek lehetnek formák, container-ek, vagy egyszerű képek, de geometriai formákban megvágva. Esztétikailag kellemes és egyenletes elrendezésben egy háromszög, hatszög, rombusz vagy más geometriai alak is egyensúlyba helyezheti weboldalad stílusát.
Egyensúlyba? Mi van?
Az egyensúlyi állapot egy weboldalnál azt jelöli, hogy milyen elrendezésben vannak az elemek elhelyezve. Ha rossz az oldal egyensúlyi állapota, az rontja a felhasználói élményt, és ezáltal a várt eredmények, konverziók is elmaradnak. Egy weboldal egyensúlyi állapotának háromféle típusa van: szimmetrikus, aszimmetrikus és radiális.
Szimmetrikus egyensúly: ebben a klasszikus megközelítésben a kompozíció egyik felében lévő elemek tökéletesen tükröződnek a másik oldalon elhelyezett elemekhez. Szimmetrikusan van tehát felépítve az oldal, jobb és baloldalt harmonikusan elhelyezve elemekkel.
Aszimmetrikus: aszimmetrikus weboldal elrendezésről akkor beszélünk, amikor bár az oldal két fele nem egyezik meg egymással, de mindkettő egyenlő vizuális "súlyt" hordoz. Ezt úgy érhetjük el, ha a megjelenített elemek színeivel, szövegeivel, formáival és pozícióival játszunk.
Radial balance: ezek a tervek egy központi pont körül helyezkednek el, így kifelé sugároznak. Képet készíthet egy színes kerékről.
2019-ben ha vizuálisan is egyedi megjelenést szeretnénk, akkor játszanunk kell valamilyen aszimmetriával. A modernizmus és a vitalitás kényes keverékét kell megjelenítenünk aszimmetrikus felépítésben. Tegyük fel, hogy az oldalunk baloldalán sok szöveg található. Ezt a baloldali nehéz súlyt kompenzálja tökéletesen jobboldalt egy háromszög. Ha egy geometriai elemmel stabilizálod az egyensúlyt a weboldalon ebben az esetben, akkor az oldalad továbbra is letisztult marad.
4. Színek okos használata
Nem hiába, hogy a merészebb színek évről évre meghódítják a trendi listát dizájn tekintetében. Az internet tele van már tartalommal, újabb és újabb, fantasztikus online megjelenéssel, innovatív ötletekkel. Egy megfelelő szín kiváló eszköz arra, hogy biztosítsd az állandóságod ebben a folyamatosan változó közegben. na persze ez közel sem azt jelenti, hogy rúgj fel minden szabályt a színek használatának pszichológiájáról, és a legvilágosabb és legkontrasztosabb színeket kezd le használni. Amikor branded számára választasz színt, egyben azt is kiválasztod, hogy milyen emóció az, amit sugallni akarsz. Ez lehet a piaci környezeted standardjai, a vállalati identitásod, az aktuális hangulat ami uralkodni szokott a cégednél stb.
Ha megtaláltad a megfelelő színeket amelyek jól kifejezik vállalati identitásod, akkor már csak ügyesen kell használnod őket, hogy a látogatókat az oldalad legfontosabb részeihez navigáld, hogy a legfontosabb információkat át add, és hogy nyomot hagyj magad után az emlékezetébe.
Jelenleg a merészebb színek a divatosabbak a webdizájn területén. Befestheted a headert az oldaladon valami merészebb színre, így a látogató még a görgetés előtt láthatja, és érezheti az emóciót amit a szín jelent. Ez ugyan úgy igaz a footer-re is. Emellett sokkal finomabb módok is vannak bizonyos színek használatára, például a call-to-action gombok hover effektje.
A komplementer színek alkalmazása is kiváló lehet. Ebben a megközelítésben két, egymástól elütő színt kell használnod (pl. zöld és piros, sárga és lila). Ezt a legegyszerűbben a színkerékkel tudod kiválasztani. A színkeréken a két egymással szemben elhelyezkedő színt kell kiválasztanod. Ez a kontraszt nagyon stílusos és effektív tud lenni. Ha szükséges, egy harmadik árnyaltabb semleges színnel érdemes kiegészíteni. Semleges színek azok, amelyeket nem látsz ezen a bizonyos színkeréken, mint például a bézs, világosbarna, fekete-fehér stb.
5. Lenyűgöző tipográfia
Tudjuk, hogy könnyű élni az Arial, a Times New Roman és a Calibri kényelmes betűkészletével, 2019-ben viszont ideje kilépni ebből a komfortos zónából. A betűtípusok külalakja a szavakon túl képesek valamilyen hangulatot átadni, amelyek a megfelelő szóval párosítva extra hatékonyak lehetnek. A külalak, a forma tükrözhet komorságot, lágyságot, játékosságot vagy durvaságot is. A Design for Emotion-ban írt, Aaron Walter szerint: "a kognitív és a vizuális kontrasztot alkalmazó nagyszerű dizájn nemcsak feltűnést biztosít, hanem befolyásolhatja, hogy az emberek hogyan használják az oldaladat." Valójában mindennek a márka identitásához kell igazodnia, ami pedig attól függ, hogy mit szándékozol kommunikálni a külvilág felé.
A tipográfia egyik pompázó tendenciája azok az egyedi betűk, amelyeket a kézírás betűinek készletéből a merész cölöpök és az ábécé kecses ívének forgatókönyvébe vittek. Ezek a stílusok már önmagukban művészi élmények, és segítenek a szavaidat a figyelem középpontjába terelni. Ha a merészebb irányba szeretnél elmenni, javasoljuk, hogy húzd meg a feltűnő hatást egy extrém betűtípussal, majd egyensúlyozd ki egy tradicionálisabbal. Ezáltal a hangsúly az extrém típusra irányozik, de mindezt úgy, hogy megmarad a lágy visszafogottság is, az egyensúly is az egyszerűbb betűtípus által.
6. Videó header
Az igazság az, ha ez neked újdonság, akkor igencsak nem követed a trendeket. Mára ez már alapkövetelménnyé vált, és egy megfelelő videó rendkívül ki tud emelni. Mi már régóta használjuk ezt a stílust (pl. a Jansen Display magyarországi exportértékesítési vezetőjének: https://www.newhorizonts-jansendisplay.com/), nem hiába. Ha alapból kicsit zavart, zajos az oldalad, akkor mindenképp jó ötlet lehet egy header videóval a helyére tenni a dolgokat. Ha azt gondolod, hogy mi értelme van egy ekkora adatmennyiségű videóval megterhelni az oldalad töltési sebességét, akkor gondolj bele, hogy a nagy adatmennyiségű videó az áldozata annak, hogy sokkal több látogatót vonz a weboldaladra. Persze választhatsz hogy melyik a fontosabb, de gondolj bele: nem a látogató szerzés és megtartás, a konverzió a lényeg?
És mi a helyzet a SEO-val? Ha lassabban tölt be az oldal akkor azt bünteti a Google?
Ha bevállalod a videó nagyobb adatmennyiségét, azzal rögtön felhívod és megtartod a figyelmét a látogatónak. És a lényeg: minél több időt töltenek az oldaladon a látogatók, a Google annál jobban fog pontozni a SEO skálán! Ebben az értelemben tehát nem hogy büntetni fogja, hanem egyenesen jutalmazni a Google a keresőoptimalizálásod, persze a megfelelő videóval.
Mi előszeretettel ajánljuk ügyfeleinknek a dinamikus háttérként használt videókat. A videókat be lehet takarni gombokkal, szöveggel, menüpontokkal, különböző layerekkel. Sőt, mi sokszor használjuk ezt a megoldást. A legjobb persze az, ha kollégánk forgat egy rövid videó snitt-et az üzletedről, vagy akár te magad is küldhetsz egyet, de ha erre nincs kapacitásod a megfelelő stock videóval is elérhetjük neked a kívánt hatást.
A videó hatását a betöltés sebességre mi úgy szoktuk minimalizálni, hogy egy rövidebb terjedelmű videót készítünk (persze tökéletes minőségben), és úgynevezett loop effektben játsszuk le. Ezzel spórolhatsz az adatmennyiség méretén, és a videóval elérheted a kívánt hatást is. Hangot sosem használunk, mert egy kellemesen csendes irodában rögtön az "X" gomb lesz a call-to-action szegmens ha kellemetlenül zajos videóval nyit az oldalad.
7. Lekerekített sarkok, lágy vonalak
2019 lesz az éve a lágy vonalak és baráti, kerekített sarkok elterjedésének. A természetes vonalak egy weboldal minden eleménél megjelenhetnek, mint például a szövegboxoknál, a képek vágásánál, gomboknál, az absztrakt háttér elemeknél. Ez óriási előrelépéseket hozhat a felhasználói élményben, hiszen olyan ez mint a puha matrac az éles, durva felülethez képest. A lekerekített elemek tudat alatt is komfort érzetet adnak a látogatónak.
De hogyan érjük ezt el? Nálunk a Black Corner-nél bevett szokás a képek alakjait lekerekíteni, amorf formájú tömböket hozzáadni az oldalhoz, a téglalapok éleinek lekerekíteni. A videók alkalmazása során, vagy a korábban tárgyalt mikro-animációk megjelenése során is rengeteg praktika van, amikkel az animált kódrészletek formázhatók.
8. Osztott képernyő
Ez egy igazán új trend, amivel érdemes óvatosan bánni, mert a megfelelő grafikai tudás nélkül nem biztos, hogy elérhető a kívánt eredmény. Az osztott képernyőjű weboldalak a tartalmaikat az oldal két részére osztják el.
Az osztás következtében az oldal minden egyes eleme levegőhöz jut, ahelyett, hogy egymás alá lennének helyezve az elemek. A látogató szemszögéből ez a stílus segít feldolgozni a látottakat, ahelyett, hogy egyszerre több minden próbálna lenyomni a torkán. A két oszlop ideális fókuszpontként egyesül.
9. Eltérni a megszokottól
Nem kell ahhoz egész nap az interneten olvasgatnod és weboldalakat elemezgetned hogy rájöjj, mi emberek mindenféle dolgot szeretünk. Gondolj csak a zenére, az íz ízekre, vagy a meme-kre az internetről. Az az inger, ami felkelti a figyelmünket nem más, mint az eltérő, nem megszokott webdizájn. Láttuk, hogy megmutatkozik a többi trendben is, például a geometriai alakzatokban, a merész háttérszínekben vagy a mikro animációkban. Amin azonban a hangsúly igazán van, az a szokatlan elemek alkalmazása.
A látogatók az interneten koncentrálatlan figyelmének megtöréséhez egy aszimmetrikus elrendezés pontosan elég, hiszen áttöri az internetes zavarodottságát, és meggyőzi őket, hogy tovább olvassanak. A kicsit kiegyensúlyozatlan megjelenéssel, egy jobbra tolással pontos el lehet érni azt ingerküszöböt, ami felkelti a figyelmet. A szervezett káosz egy szofisztikált módszere ez. Másik ilyen lehetőség egy nagy méretű, fehér tér ellensúlyozásként. Ez megadja a kép 40%-át, és megtartja a másik 60%-ot vizuális szünetként, hogy csak egy CTA-t, vagy egy vastag betűtípussal írt fejlécet töltsön ki.
10. Minimalizmus
Ha olyan vagy, mint Mi, akkor már alig várod hogy a weboldaladon bevesd ezeket a trükköket. Mégis, mi azt mondjuk, hogy mindezek ellenére amiket felsoroltunk a webdizájn kulcsa maga a stílus. Mert ha végül a weboldal nem közvetíti magát a legfontosabb információt, vagy terméket amit a látogató keres, akkor a legszuperebb mikro-animáció sem lesz képes megtartani az érdeklődőt. Az elhangzott 9 pont valójában az úgynevezett UX (user experience) faktor belső erősítői. Ez a felhasználói élményt jelenti.
A felhasználói élmény összesíti mind azokat az elemeket, amelyek a látogató weboldaladon maradását, és végső soron a CTA (call to action) konverziót segítik elő. A hosszú böngészési idő pedig a legjobb recept a SEO eredmények növelésére. Éppen ezért ha megvan a megfelelő dizájn, ügyelni kell arra, hogy a weboldal szerkezeti struktúráját légmentesen tartsuk, és elegendő helyet adjunk minden dizájn elemnek hogy levegőhöz jussanak.
