A következő tanfolyam indul

2018. május 10.

Így legyél toppon a weboldaladdal 2018-ban!

A 2018-as (web)design trendeket bemutató bejegyzésünkben olvashatod/láthatod, hogy milyen újdonságok és visszatérő trendek lesznek terítéken a weboldalak világában. Ebben a bejegyzésünkben azt nézzük meg, hogy ezeket a trendeket hogyan tudod konverziógyűjtésre fordítani, milyen extrákkal kell ehhez felvértezned a weboldalad megjelenését, dizájnját.

A webdesign ugyanis nem egyenlő a díszítéssel. A webdesign amellett, hogy hűen prezentálja az adott márkát/vállalkozást az arculati elemek következetes felvonultatásával, 100%-osan támogatja az oldal konverziós céljainak (pl. megrendelés, feliratkozás) megvalósulását. A szemrevaló dizájn elemek megragadják az oldalra érkező látogató figyelmet, és a látogatót szinte észrevétlenül végigvezetik egy képzeletbeli úton, egy konverziós csatornában, melynek végén megtörténik a konverzió (pl. megrendelés).

Gondoljunk csak a hőtérképes tesztekre – remekül mutatják, hogy mire irányul a látogató figyelme, hol időzik el, mire kattint, milyen utat jár be az oldalon. A célba éréshez, azaz a konverzió megvalósulásához azonban az kell, hogy pontosan lefektetett célok és elképzelések mentén tervezzük meg az egész oldalt, ezeknek rendeljük alá mind a struktúrát, mind a tartalmakat, mind a megjelenést.

6

 

Nézzük is meg, hogy mikre kell odafigyelnünk a webdesignban, ha toppon szeretnénk lenni a weboldalunkkal 2018-ban (is)!

Ehhez egy jó példát veszünk alapul: a zeneletöltő oldal, a Spotify a szemünk előtt vonultatja fel a 2018 legfőbb webdesign trendjeit – Kattints a fotóra és bemelegítésként nézd meg élőben is! 🙂

spotify-gradients

 

 

A kevesebb több – ez manapság hatványozottan érvényesül a webdesignban is. A mai trendeknek és igényeknek az egyszerű, letisztult megjelenés dukál. Természetesen adott témától, vállalkozástól, brandtől is függ, hogy milyen dizájnt kíván meg a weboldal, de a csilivili, izgő-mozgó és hasonló figyelemelterelő elemekkel, linkekkel megtűzdelt, zsúfolt, rendezetlen weboldalaknak ma már lecsengett.

 

spotify_egyszeruseg

spotify_felepites

Igazából nem is kérdés, hogy egy következetesen felépülő, letisztult, könnyen áttekinthető weboldalon a felhasználó is könnyebben elboldogul, mi pedig könnyebben tudjuk a számunkra fontos konverziók felé terelni.

Ez nem jelenti azt, hogy mindent élére kell állítanunk a weboldalon, de jó, ha rácsszerkezetben gondolkodunk, a szimmetria vagy az aszimmetria elvét követve rendezzük el a legfőbb design elemeket a weboldalon, mintegy „egyenes” és szabad utat adva a látogatóknak ahhoz vagy azokhoz a bizonyos CTA (call-to-action), azaz cselekvésre ösztönző gombokhoz (Igen, ez kell nekem! Megrendelem!; Feliratkozom! Kérem a tuti tippeket!).

 

spotify_elrendezes

 

spotify_konverzio_2

 

 

 

És ha már a felépítés szóba került: a honlapon sok információt kell megjelenítenünk, azonban mindezt könnyen áttekinthető formában kell megtennünk, hiszen a látogató siet, csak a lényegi információra kíváncsi. Ehhez arra van szükség, hogy az információkat, a szöveges tartalmakat rendszerezzük, hierarchikus rendszerbe foglaljuk. A hierarchia a figyelem terelésében segít, hiszen a vizuálisan kiemelt (a konverziók szempontjából fontos) információk kerülnek a szemlélő figyelmének középpontjába.

Az, hogy mi kerüljön a felhasználó központi látóterébe, milyen sorrendben vegye észre az információkat, mikor mire akarjuk felhívni a figyelmét, mi döntjük el, és ehhez ajánlott, hogy a weboldal elemei, valamint az információk közötti hierarchiát tudatosan állítsuk fel. A fontosabb részeket nagyítással, erősítésekkel, hangsúlyos színek alkalmazásával, kontrasztokkal, megfelelő pozicionálással, tördelt szövegek esetében alcímekkel emelhetjük ki, a kevésbé fontosakat méretcsökkentéssel, halványításokkal, másfajta effektekkel „rejthetjük el”. A hierarchia kialakításával nemcsak az információk feldolgozását „szabályozzuk”, de a látogatót folyamatosan a konverzió felé is tereljük.

 

spotify_tipografia

 

spotify_konverzio

 

A mai trendek között szerepel a „big&bold” tipográfia – szinte kézenfekvő, hogy a nagyméretű, kiemelt karaktereket, hangsúlyos szedéseket is hasznosítsuk a hierarchia kialakításában.  A színekhez hasonlóan a betűtípusok is hangulatokat, stílusokat tükröznek, érzelmeket váltanak ki, vizuális-esztétikai értékkel is bírnak. Ha nagyobbak, hangsúlyosabbak a betűk, és még merész kontrasztban is állnak a háttérrel, akkor a hatásuk is nagyobb, nemde? 🙂

 

spotify_tipografia_3

 

 

A hierarchia mellett maguk a dizájn elemek is segítenek a látogató figyelmének fenntartásában és terelésében. Gondoljunk egy bizonyos feliratra vagy gombra mutató nyílra, egy-egy színes boxba foglalt információra, stb. Ezek elsődleges funkciója tehát ismételten csak a konverziók elősegítése.

És hogy hogyan lesznek ezek még hatékonyabbak a konverziók elősegítésében?

Jöhetnek a szintén igen trendinek számító élénk, szinte már vibráló színek, dinamikus színátmenetek. Az erős, túltelített színek merész párosításával látványos, figyelmet megragadó kontrasztok születhetnek, a szemrevaló színátmenetekkel felturbózhatjuk, élettel telivé varázsolhatjuk még a legegyszerűbb elemeket is.

 

spotify_kontaszt_1

 

spotify_szinek

Például még egy minimál stílusú CTA gomb is ki tud emelkedni egy hangsúlyos környezetből a kontrasztnak köszönhetően, éppen úgy, ahogyan egy egyszínű, letisztult háttérből – szintén a kontrasztnak köszönhetően.

duotone-cta

spotify_tipografia_2

 

spotify_kontraszt_2

 

A színek mellett finom árnyékeffekttel is felvértezhetjük a kattintható design elemeket, hogy még inkább választásra, kattintásra ösztönözzük a látogatókat. Ezekkel a lágy, finom, szinte láthatatlan árnyékokkal éppen annyira finom mélységet lehet kelteni egy-egy elem (ikonok, gombok, appok ikonja) esetében, hogy az a szemnek kellemes legyen, ugyanakkor a felhasználói interakciókat is segíti (pl. a lekattintható elemre egy kis árnyék vetül).

 

spotify_arnyek

 

 

És ha már a látványnál tartunk: érdemes külön is szót ejtetnünk a fotókról. Akármilyen témáról, vállalkozásról is legyen szó, a weboldalról nem hiányozhatnak a szemrevaló, beszédes, izgalmas fotók. Egy kép többet mond ezer szónál – ez weboldal esetében is hatványozottan igaz. A fotók sohasem díszítőelemként szolgálnak, feladatuk a szöveges információk kiegészítése, illusztrálása, a figyelemfelkeltés és a konverziók elősegítése – gondoljunk egy remek termékfotóra, a termék használatát bemutató fotóra.

 

spotify_foto2

 

És mindezeket még megspékelhetjük kéttónusú effekttel, mely új trendként jelent meg a színtéren. A technika lényege, hogy az adott fotói színeit “levesszük”, majd egy kéttónusú hatást “húzunk” rá, melynek színeit (két szín – ezek lehetnek egy szín különböző árnyalatai vagy lehetnek egymással kontrasztosban is), majd azok tónusát (sötétebb-világosabb) tetszés szerint megadjuk, szabályozzuk. A végeredmény magáért beszél. 🙂

 

spotify-colour2

spotify_foto

 

Ha pedig még több élményt szeretnénk adni a felhasználónak, a „wow” hatást még inkább szeretnénk fokozni, akkor akár izgalmas animációkat is bevethetünk a weboldalon. Az animációkkal is bemutathatjuk a terméket, annak használatát, történetet mesélhetünk, az adott tartalmat fogyaszthatóbbá, érthetőbbé tehetjük. Az animációkkal az élményadás, a „nézők” bevonása a cél, így hatékonyabbá tehetjük a látogatóval való kommunikációt, cselekvésre ösztönözhetjük, konverzióra bírhatjuk.

 

spotify_animacio

Kattints a fotóra, és tekints meg élőben is az animált használati útmutatót! 🙂

 

 

Mindez nem azt jelenti, hogy holnaptól Te is “spotify-os” weboldalakat készíts, úton-útfélen a legtrendibb webdesign trendekkel állj elő,  de ízelítőnek, inspirációnak, ötletadónak hasznos lehet – mindezt a saját stílusodhoz és konverzióidhoz szabva.

 

Illusztrációk forrása: Spotify

 

Hozzászólások