2017-ben az e-kereskedelmi oldalak elsődlegesen mobil nézetre optimalizált oldalak lesznek. Így egyre nagyobb igény lesz arra vonatkozóan, hogy a designerek elkezdjenek azon gondolkodni, hogy hogyan lehetne a weboldal asztali nézetét minden funkciójával maradéktalanul adaptálni a mobil nézetre. Készüljünk fel mielőbb a 2017-es év meghatározó trendjeire!

A webdesign trendek viszonylag lassan változó folyamatok. A trendeket meghatározó nagy cégek, mint a Google, Apple vagy az Amazon vezetnek be új dizájn-koncepciókat, amiket nem sokkal utánuk a többi webdesigner is alkalmazni kezd a saját felületükön.

Ahhoz, hogy a 2017-es év webdesign trend folyamatait előre meg lehessen jósolni, Armando Roggio készített egy látleletet a jelenlegi állapotról, amik alapján következtetéseket lehet levonni a jövőre nézve is.

A legjelentősebb változás abban mutatkozhat meg, hogy a dizájnerek hogyan gondolkoznak a tervezési folyamat kezdetekor. Korábban, ha egy weboldalról beszéltem, akkor az a képzeletemben inkább asztali nézetben jelent meg, azonban a mobilos reszponzív nézet változásának hatására már sokkal inkább egy mobil nézetre gondolok, ha weboldalról beszélünk.

1. Mobil webdesign = A webdesign

Az e-kereskedelmi oldalak webdesign szempontból is fejlődtek. Ha pár évvel ezelőtti cikket olvasol, ami az akkori dizájn trendekről szól, talán azokban már említésre kerültek a reszponzív és adaptív megjelenés közti eltérések.

Az asztali nézetet átalakításának szükségességére a mobil használat erősödése szolgál magyarázatul. A dizájnerek néha a mobil CSS tanúsítvány prioritását magasabbra állítják, de valószínűleg azt gondolják, hogy az oldal elsősorban asztali verzióra készül.

2017-ben ez a folyamat megfordul. Statisztikák alapján egyre többen látogatnak e-kereskedelmi oldalakat mobil eszközről. Ez azt fogja eredményezni, hogy a weboldalakat eleve mobil nézetre fejlesztik és reszponzívként lesznek használhatóak desktopon, de készül hozzájuk adaptív megjelenés is a nagyobb kijelzőkre szabva. Szóval a prioritás mindenképpen a mobil nézeten fog alapulni.

Lássunk pár példát arra, hogy ez a trend milyen hatással lehet az asztali megjelenítésre:

• Több oldalon fognak összecsukott (hamburger) menüt használni. Ez régóta népszerű és várhatóan tovább fog erősödni.
• Az oldalak a képernyő teljes szélességében jelennek meg (jóval kisebb margóval), úgy ahogy azt a mobil nézetben már megszokhattuk.
• Nagyobb képek, gombok, ikonok, amik okoseszközön jól kattinthatóak az ujjunkkal, bár valószínűleg az asztali nézetben hatalmasnak fognak tűnni.

2. Material design

A Google material design sablonjait 2014-ben bocsátotta a dizájnerek rendelkezésére. A cég, a material design által, hatással tudott lenni az app fejlesztőkre annak érdekében, hogy az Android arculatával egységes dizájnt használjanak.

Számtalan webshop már használja a kártyaszerű megjelenítést is, ami a material design esszenciáját képezi, akárcsak a reszponzív animációk és átmenetek. Ez a trend továbbra is meghatározó lesz 2017-ben!

3. Lassú görgetés és betöltés

Mobil eszközöknél érdemes összehangolni az animációkat és átmeneteket a háttérben futó folyamatokkal. Például, ha átnavigálunk egy új oldalra, akkor a háttérben elkezdődik az új oldal betöltése, addig pedig valamilyen animációs átúsztatást láthatunk a két oldal átvezetéseként. Ezzel a felhasználó nem érzi az esetleges lassú betöltési időt, és látvány szempontjából a felhasználói élményen is mindenképpen javít.

A termékkategória oldalakon pl. gyakran láthatunk olyat, hogy egyszerre csak 10 termék elem töltődik be, de ha legörgettünk az oldal aljára, akkor betölt további 10-et, és így tovább.

4. Hamburgerek bal oldalt

A hamburger menü régóta töretlenül népszerű, jó pár weboldalnál és appnál láthatjuk. Azonban csak egy ideje figyelhetjük meg azt a trendet, hogy már szinte csak a bal oldalon jelenik meg. Ennek magyarázata az, hogy a felhasználók számára ez az első, amit észrevesznek egy oldalon.

5. Cinemagraphs, avagy visszatérés a GIF-hez

Az animált gifek várhatóan ismét népszerűek lesznek 2017-ben, azonban egy finomabb formában, aminek nem tudom, hogy létezik-e magyar megnevezése, ezért hívjuk az eredeti nevén: cinemagraph.

A cinemagraph egy olyan gif, aminek a nagy része állókép, és csak egy-két részlet mozdul meg rajta. Kiválthat akár háttérképet, kategória fejlécet, főoldal bannert, vagy akár termékképeket is. Persze majd csak idővel derül ki, hogy a cinemagraph-ok hozzájárulnak-e valamilyen módon a konverziók számának növeléséhez, vagy csak egy jópofa látványelemen kívül semmi többet nem jelent.

Platformok közti eltérések összemosása és világosabb színek

Több e-kereskedelmi dizájn-trend került eddig említésre a fentiekben, de a két legmeghatározóbb egyértelműen közülük:

• egyrészt az oldal tartalmi elemei jobban fognak igazodni a képernyő szélességéhez,
• másrészt a minimalista design (ami több éve meghatározó arculati trend) várhatóan a színekre is hatással lesz és némileg világosodni fog a megjelenés.