Webshark Blog

Nemrég felkapottá vált egy új design-irányzat: a neumorfizmus. Aki emlékszik még a szkeuomorfizmusra, az nyilván sejti, hogy miről lehet szó a flat és material design évei után. (Frissítés, 2021.11.02. – Hol használhatod a glassmorfizmust a weboldaladon?)

Korábban mi is megemlékeztünk a szkeuomorfizmus dicső éveiről, amikor átvette tőle a hatalmat a flat design és annak leágazásai. Most azonban úgy tűnik, hogy a designerek egy részének elege lett flatből és a materialból, mert már hónapok óta hallani lehet az új irányzatról a neumorfizmusról. 

Mi az a neumorfizmus?

Habár a material design köszöni szépen, jól van, egy designer, Alexander Plyuto létrehozott nem is olyan régen valamit, ami eléggé hasonlít a sok-sok évvel korábban minden felületet elborító szkeuomorfizmusra, de mégis valahogy modernebb köntösben jelent meg. Ez az új szkeuomorfizmus, mely meg is kapta a neuomorfizmus nevet, aztán ebből lett a neumorfizmus, egy kicsit leegyszerűsítve.

Habár a lavina csak 2019 novemberében indult el, mára már számtalan alkotás született ebben a stílusban. Láthatóan nagyon felkapta a designerek egy része. De miért lett ennyire népszerű? Alapvetően azért, mert végre valami új született, és az emberek imádják az újdonságokat. A neumorfizmus szakított a szabályos színátmenetekkel, árnyékokkal és lebegő elemekkel, melyekkel már mindenhol találkozhattunk a weben is.  
És ami talán még hozzájárult a sikeréhez, hogy valamiképpen kapcsolatban áll a való világgal, amitől a flat eléggé eltávolodott. Márpedig az emberek azt is szeretik, ha a digitális termékek valóságosnak néznek ki. 

Milyen előnyei és hátrányai vannak?

A kérdés most már csak az, hogy van-e tere, és meghatározó irányzattá válik-e a webdesignban? Ehhez érdemes számba venni az előnyeit és a hátrányait. Az előnyök közé leginkább az újdonság okán különlegesnek, eredetinek tűnő megjelenése tartozik. Viszont mást nem is igen találunk.

Van viszont két komoly hátránya: mivel a stílus a fény-árnyék játékán alapul, így kifejezetten rossz kontrasztarányt produkál. Ez egész egyszerűen azt jelenti, hogy a weboldal vagy alkalmazások elemei rosszul láthatók, ha a neumorfizmus alapjain állnak.

Gyakorlatilag az árnyékok és a fény megjelenése határozza meg a designstílust: egy világos és egy sötét rész utal egy elem jelenlétére. Kontrasztot persze lehet növelni, ezzel viszont elveszik a stílus egyediségének lényege, hirtelen harsánnyá és furcsává válik.

A másik gondot a tér jelenti, ugyanis, mivel árnyékot használ, így összességében nagyobb teret foglal egy elem, mint ha material stílusban készült volna el. Mindez pedig meglehetősen nehézzé teszi a stílus alkalmazását akkor, amikor több elemet is el kell rendezni a weboldalon vagy alkalmazásban. 

Tehát a neumorfizmus nem igazán működik a gyakorlatban, még ott sem, ahol a legizgalmasabb lenne: gomboknál, kapcsolóknál, folyamatjelzőknél. A kontraszt növelése segíthet, de ahogy nő a kontraszt, úgy veszik el a megoldás lényege, ami a szépségét adja. 

Hogyan használható a gyakorlatban?

Mi lehet a megoldás? Például az, hogy egy adott felületen nem minden elem készül neuformizmust használva, hanem csak egy-egy elemnél jelenik meg a stílus. Felbukkanhat olyan elemeknél is, melyek nem annyira fontosak, de a felület megjelenését ezáltal feldobja, eredetibbé teszi. Illetve meg lehet kockáztatni egy-egy olyan elemnél egy adott felületen, melyre fel akarod hívni a figyelmet. Azt persze ki kell tapasztalni, le kell tesztelni, hogy bármelyik megoldás működik-e, hatékony-e.

Kísérletezni viszont csak akkor érdemes vele, ha egyrészt van egy nagyon jól strukturált felületed, másrészt pedig rendkívül világos a hierarchiája. Ilyen esetekben a neumorfizmus alkalmazása feldobhat egy designt, sőt adott esetben akár ki is emelhet egy elemet, de azért alapvetően dekorációs szerep jut neki.

Ez azt jelenti, hogy a material és a neumorfizmus egy felületen párhuzamosan élhet, nem pedig azt, hogy a neumorfizmus átveszi az uralkodó trend szerepét. Egyszerűnek, könnyen tervezhetőnek persze nem nevezhető egy ilyen design, de lehetséges használni a két stílust együtt.

Frissítés, 2021.08.09.:

Mi az a glassmorfizmus?

Akár a neumorfizmushoz is kapcsolható 2021 egy új vizuális design irányzata, a glassmorfizmus vagy más néven a matt- vagy tejüveg-hatás. Egyre gyakrabban tűnik fel a felhasználói felületeken, anélkül, hogy az emberek egyáltalán tudatában lennének annak, hogy egy valami mást látnak, mint eddig.

A glassmorfizmus az átlátszóság és az elmosódás kombinációját használja, elhomályosítást és üveg-filtert tesz a háttér és a rá helyezett elem közé. Ezáltal egy puhább kontraszt jön létre a világosabb és a sötétebb elemek között. Márpedig általában arról van szó, hogy a színes, de világos háttérre rákerül egy sötétebb elem. A megoldásnak a felhasználók szempontjából az az előnye, hogy az elmosott, üvegszerű háttér miatt könnyebben befogadják a felületet, a rajta lévő szövegeket bármilyen háttér esetén.

Persze a glassmorfizmus azért egy kicsit bonyolultabb, mint hogy elmosódott hátteret használunk. Inkább úgy néz ki a felület, mintha matt- vagy tejüveg kerülne rá. Látod a háttér mintáját, színét, árnyékokat, minden elemet, de a formák már nem rajzolódnak ki határozottan. Ennyi lenne a lényeg:

Frissítés, 2021.11.02:

Hol használhatod a glassmorfizmust a weboldaladon?

Rétegek megjelenítése

Az olyan effektek használata, mint az elhomályosítás, az árnyékok vagy az átlászóság nagyon jól alkalmazható, ha különböző rétegeket akarsz megjeleníteni. Lehet szó akár egyetlen elemről vagy akár egymásra helyezett elemekről, egy finoman kifejezett mélységet tud adni neki a glassmorfizmus úgy, hogy a háttér elemei is felsejlenek. Az alábbi példán láthatod, miről is van szó:

Ezen a weboldalon az üvegréteg alatt láthatod a háttér sötét is világos részét is. Érdemes még megfigyelni a finom árnyékot a fehér perem körül, mely még határozottabbá teszi az elválasztást a háttértől. Ráadásul itt az üveghatás megjelenik a ragadós navigációs sávnál is.

Ikonok

A glassmorfizmus az ikonok designjánál is megjelent már, ugyanakkor a használata nem egyszerű. Ennek oka, hogy az ikonok kicsik, a tejüveg-hatás pedig vizuálisan bonyolultabbá teszi. Leginkább tehát olyan ikonoknál használható, melyek nagyobbak az átlagnál. Egy további lehetőség, ha nem használsz túl sok ikont, miközben minden forma és funkció könnyen érthető.

Színes hátterek

A mattüveg-hatás azonban a weboldalak hátterének alapját is jelentheti. A lényeg itt az, hogy elhomályosítod a háttérképet vagy háttérszíneket egészen addig, amíg a látogató már nem próbálja meg kitalálni, hogy mi lehet a háttérben.

Ezen a weboldalon több rétegben is megjelenik az üveg-hatás: egyrészt a háttérnél, majd egy ráhelyezett középső rétegnél, amire még a normál elemek rákerülnek.

Az elmosódott hátteret látjuk ezen a weboldalon is, kicsit kevesebb színnel, melyek az előtte látható szövegre hívják fel a figyelmet. Ez talán a legegyszerűbb alkalmazása a glassmorfizmusnak egy weboldalon, mivel csak a háttérre van ráhelyezve egy réteg, további rétegek nem bonyolítják.

Ugyanakkor nem biztos, hogy érdemes a teljes háttérnél mattüveg-hatást alkalmazni, mivel ilyenkor lehet, hogy nem látszik többnek egy gradiensnél.

Kártyáknál

A mattüveg-hatás nagyon jól használható kártyáknál, mivel elválasztást hoz létre az elemek között. A kártyára kerülhet akár egy blogbejegyzés is vagy akár csak egy gomb, a lehetőségek köre meglehetősen széles.

Forma vagy gomb kiemelése

A glassmorfizmus akkor is jól használható, ha csak egyes elemeknél alkalmazzuk a weboldalon. Az alábbi példán az űrlapra, illetve a CTA-ra hívja fel a figyelmet.

A világosabb, üveg-szerűen megjelenő beviteli mező a sötét háttéren odavonzza a tekintetet, sokkal inkább, mint csak egy keret lenne a mező körül.