Akadnak, akik úgy vélik, hogy a webdesign is egyre inkább elkezdett meríteni a web első éveiből, ahogy a divat is visszanyúlt mostanában a ’90-es évekhez. A designerek az egyre megszokottabbá váló fotó-központú megjelenés helyett máshonnan próbálnak inspirációt meríteni. Ez azonban nem jelent retrohullámot, mivel a színek, a kifinomult minták, a serif betűtípusok révén egy új stílus alakul ki. Annál is inkább, mert közben a webdesign a jövőbe is tekint, és olyan új technikákat használ, mint a kifinomult animációk vagy olyan effekteket, mint a glassmorfizmus. De lássuk akkor a trendeket!

Egyoldalas weboldalak

Már évekkel korábban is írtunk az egyoldalas weboldalak kialakításáról. A trend az olyan egyoldalas webdesignokkal kezdett terjedni, mint amelyet a közösségi média csatornák kínáltak. Úgy tűnik azonban, hogy az egyszerűség, amit egy egyoldalas weboldal tud kínálni, továbbra is vonzó a weboldaltulajdonosok számára, így egyre több ilyen oldallal lehet találkozni a weben.

Ezek a weboldalak lemondanak a navigációs menüről az egyszerű görgetésalapú navigáció kedvéért. Ugyanakkor, ahogy korábban is utaltunk rá, az egyoldalas weboldalak csak akkor tudnak működni, ha nem próbálnak meg sokat fogni, nem akarják témák széles körét bemutatni. Ezek a weboldalak olyanok, mint egy plakát vagy poszter: minden információ, ami adott témában fontos, az a navigációs menü és a sok oldal zavaró hatása nélkül jelenik meg. Ilyen lehet például egy portfólió-oldal.

App-szerű élmény

Vannak, akik szerint a jövőt a kisebb, élmény-központú weboldalak jelentik. Jeremy Beyt, a ThreeSixtyEight társalapítója szerint például egy teljesen új módon fogjuk használni hamarosan a webet, úgy, ahogy azt korábban sohasem: ez az alkalmazás-szerű élmény.

Az emberek az okostelefonjaik által egyre több applikációt használnak, melyeknél az interakciók, az animációk és a dinamikus élmény vált alapvető jellemzővé. Logikus lépés, hogy ugyanez az élmény jelenjen meg a weboldalakon is, egy korábbinál egyedibb élményt kínálva.

Kevesebb kép a hajtás felett

Mi is foglalkoztunk nemrég azzal a trenddel, hogy míg az elmúlt éveket a hajtás feletti hero image-ek uralták, addig az utóbbi időben egyre inkább megjelennek a kép nélküli weboldalak. Ennek a megoldásnak több előnye is van. Az egyik az, hogy könnyebben irányítható a fókusz a fontos szöveges információkra, a másik pedig, hogy a nagy képek nélkül gyorsabbá válik az oldal betöltése.

Mivel nincs kép, így jóval nagyobb hangsúly helyeződik a vizuális design egyéb elemeire, így a tipográfiára, a színekre és a formákra, melyekkel kommunikálni kell a márka identitását. Akadnak, akik szerint a felső részen elhelyezett kép hiánya miatt rejtélyesebbé válik az oldal, mely arra ösztönzi az embereket, hogy lejjebb görgessenek a weboldalon, jobban megismerve azt.

Túlméretezett tipográfia

Az előbbi trendhez kapcsolódhat a szokatlan méretben megjelenő szöveg, mely egyre több weboldal jellemez. Egy bizonyos méret felett a szavak már nem csak egy szöveg részei, hanem grafikus elemmé válnak. Egy sokoldalú technikáról van szó, mely minimimalista weboldalak számára ideális, de sokféle stílushoz jól illeszkedik.

Interaktív betűk

Van, akik a betűkkel való játékot még tovább viszi, és interaktívvá teszi a szövegeik egy részét, vagyis a felhasználók az egerük segítségével tudnak játszani a szöveggel. Ennek legegyszerűbb módja egy hover-állapotú átváltozás, mint például egy gombnál. Ezek kialakítását a gyorsan terjedő, úgynevezett kódolás nélküli platformok egyre egyszerűbbé teszik, hiszen manuális kódolással azért meglehetősen bonyolult összehozni interaktív szöveg-animációkat.

Amire az ilyen szövegeknél is figyelni kell, az az olvashatóság, mivel lesz néhány látogató, akiket megzavarnak a mozgó karakterek. Itt egy példa rá:

Helyek bemutatása

Talán a járvány miatti kevesebb utazást próbálják meg egyesek kompenzálni, de úgy tűnik, egyre több weboldal jelenít meg fizikailag létező helyeket fotókon, vagy aloldalaikon hívják fel a figyelmet városokra, helyekre, ahol az alkotóik élnek.

A web egy olyan önálló hely, melynek gyakran nincs kapcsolata azzal, ahonnan böngészünk. Ugyanakkor egy földrajzi hely említése, vagy erről készült fotók közzététele segít abban, hogy a látogatók a weboldal tulajdonosát elhelyezzék valahol a fizikai térben, így valósabb kapcsolat alakul ki közöttük.

Art deco motívumok

Nem csak a ’90-es évek hat a webdesignra, hanem régebbi korok is. Az art deco motívumok pedig jól passzolnak a geometrikus megjelenésekhez, melyek az elmúlt években egyre inkább elterjedtek a weben. Ezek egyre inkább ihletet merítenek az art deco letisztult, íves vonalaiból, az ismétlődő grafikai formákból, melyek a múlt század ’20-as éveiben az illusztrációkat és az építészetet jellemezték.

Kollázs és absztrakt illusztráció

Illusztrációs trendekről egy külön bejegyzést is lehetne írni, azonban érdemes egy pillantást vetni a határozottabban kirajzolódó technikákra. Az egyik ilyen a kollázs, mely tapintható érzést adnak az illusztrációnak, és amelynek segítségével úgy helyezhetsz el képeket a weboldaladon, hogy az egész designt egy fotó köré szervezed.

Arra figyelni kell, hogy eltérő formákat, mintákat, színeket tegyél a kollázsba. Adhatsz neki monokróm megjelenést, alkalmazhatsz valamilyen szűrőt, így jobban beilleszthető a designba.

A másik illusztrációs trend az absztrakt illusztrációké, melyek olyan hatást keltenek, mintha természetesek lennének, emberi kéz alkotta volna őket. Az emberek ugyanis a sok vektorgrafika után olyan illusztrációkat látnak szívesen, melyek némileg kifinomultabbak, emberibbek.

Az ilyen illusztrációk létrehozhatók ceruza és papír alkalmazásával, de persze szoftveres úton is. A lényeg a textúra és a természetes szabálytalanságok, amit például vízfestékkel, tollal, ceruzával elő lehet állítani. A vonalak is puhábbak, vastagságuk változó, ahogy egy kézi rajznál is.

Szemcsés színátmenetek

Az évek óta oly népszerű színátmenetek sem tűnnek el, csak szemcsézettségük révén már egy kicsit más hatást keltenek. Ezek által az eddigi sima gradiensek textúrát kapnak és így sokkal természetesebbnek néznek ki. A szemcsézettség utánozhatja a filmeket, a régi fotókat vagy akár a nyomtatott médiát. Használható a teljes weboldalon – például háttérként -, vagy akár csak a egyes részeknél. De hogy miről is van szó? Itt látható:

Még több glassmorfizmus, kevesebb neumorfizmus

A neumorfizmusról szóló bejegyzésünkben már körüljártuk a nagyjából az idei évben elterjedő glassmorfizmus jelenségét a webdesignban. Úgy néz ki azonban, hogy ez nem csak egy kósza, rövid életű trend, mert az előrejelzések szerint jövőre még inkább ki fog bontakozni. Lényege, hogy a mattüveg-hatás révén kap 3D-érzést a weboldal, ha alkalmazzuk a glassmorfizmust egyes elemeinél.

Ugyanakkor a neumorfizmus visszaszorulóban van, aminek oka az, hogy az elmúlt egy-két évben bebizonyosodott, hogy nehezebben használhatóvá teszi a weboldalt, mint egy minimalista megoldás. A kontraszt hiánya sokak számára tett használhatatlanná oldalakat vagy alkalmazásokat, míg az árnyékolt elemek nem mutatták egyértelműen, hogy mi az, ami kattintható és, mi az, ami nem.

Weboldalsebesség a fókuszban

Végül érdemes megemlíteni, hogy a Google 2021-es algoritmus-változtatásai révén a korábbiaknál is nagyobb hangsúly helyeződött a weboldalsebességre. Mint azzal mi is sokat foglalkoztunk, az „oldalélmény” és azon belül a webes vitals mutatók rangsorolási tényezővé váltak, ami összhangban van a felhasználók sebességre vonatkozó egyre komolyabb várakozásaival. Elmúltak azok az idők, amikor az emberek hosszú másodperceket voltak hajlandóak egy-egy weboldal megjelenésére várni. Ráadásul megújult a Google PageSpeed Insights is 2021-ben, így gyakorlatilag egy új eszközzel vizsgálgathatjuk weboldalunk teljesítményét, illetve azt, hogy megfelel-e 2022 követelményeinek.

The post Milyen webdesign-trendekre számíthatunk 2022-ben? appeared first on Webshark Blog.

A 2020-as év nem volt könnyű, elég, ha csak arra gondolunk, hogy mennyire megváltoztatta az életünket a járvány, és hát 2021 sem lesz könnyű. Mindez azonban nem akasztja meg a webdesign változását. Lássuk a trendeket! 

Retro betűtípusok 

A régi dolgok újbóli megjelenése, majd ismét feledésbe merülése egy állandó jelenség, és életünk minden területén felbukkan. Így van ez a webdesignban is, ahol mostanában az úgynevezett retro betűtípusok tűntek fel. De nem csak egyszerűen újra megjelennek a weboldalakon a korábban trendi fontok, hanem kapnak egy kis csavart is. Erre lehet példa a Spotify Carnival oldala, ahol az elavult és közhelyesnek tűnő ismételgetés helyett új életet leheltek hagyományos betűtípusokba. De talán még jobban átjön a trend ezen az oldalon: 

Vízszintes görgetés 

Habár korábban nem igazán volt javasolt a vízszintes görgetés használata, egyre több weboldalon bukkan fel. És nem feltétlenül azért, mert a weboldal nagyon különbözni akarna a többiektől, inkább olyan praktikus ok miatt, hogy további információkat ezáltal egy jobb megoldással juttathat el a felhasználókhoz. Ilyen lehet például az alkalmazása egy képgalériában, ahol természetesebbnek tűnik a vízszintes, mint a függőleges mozgás. 

Ugyanakkor, ha Te is kipróbálnád, van néhány dolog, amire nem árt figyelni a vízszintes görgetésnél. Az egyik ilyen, hogy ne erőltesd a felhasználóknál a vízszintes görgetést, tegyél elérhetővé számukra alternatív útvonalakat, például nyilat formázó gombokkal. Világosan jelezned kell azt is, hogy hol használsz a tartalmadnál vízszintes görgetést. És persze azt is gondold át alaposan, hogy milyen típusú tartalom számára előnyös, mert nem minden esetben állja meg a helyét, így például szövegeknél érdemes tartózkodni tőle. Egy jó példa a megoldásra a Momento oldala, ahol egy nyíl jelzi az irányt, illetve a kép félbevágása is mutatja, hogy merre található további tartalom.

Parallax animáció 

Habár már évek óta velünk vannak a parallax weboldalak, nem lehet őket megunni. 2021-ben várhatóan még bonyolultabbak lesznek a parallax animációk, ezáltal még inkább magukkal ragadja majd a felhasználókat a háttér és az előtérben lévő elemek különválasztásával. 

3D-grafikák 

A nagyobb felbontású kijelzők megjelenése lehetővé tette, hogy a korábbi, kissé darabos megjelenés után kiváló minőségű 3D-grafikákkal találkozzunk, melyek aztán zökkenő nélkül simulnak be a weboldalakba. Ezek már nem zavaró tényezőként jelennek meg, hanem javítanak a felhasználói élményen. A 3D elemek pedig egyediséget adnak a weboldalakhoz. 

Neumorfizmus 

A neumorfizmus egy viszonylag új design-irányzat, melyről már írtunk az év elején, és várhatóan 2021-ben is velünk marad. Nem szakad el teljesen az előző években uralkodó minimalizmustól, ugyanakkor merít elődjéből, a szkeuomorfizmusból is. Árnyékokat és flat színeket használva imitálja a fizikai világot, domborúnak és homorúnak tűnő elemeket alakítva ki. Ezzel a designtrenddel próbálják visszahozni a designerek az tapintás érzését, ami a flat világában elveszett. 

Multimédia-élmények 

A növekvő sávszélesség most már lehetővé teszi, hogy vizuális elemek, szövegek, videó és audió fonódjon össze a weboldalakon, fokozva a felhasználói élményt. Ha Te is ilyesmivel próbálkoznál, akkor figyelj arra, hogy törekedj az egyszerűségre, mert ha túl sok lesz a mozgás és a hang, az zavaró a felhasználók számára. 

Az is fontos, hogy elsősorban a tartalom hozzáférhetőségének javítására használd a különböző médiaformátumokat, ne pedig öncélúan! Végül pedig kerüld az automatikusan induló videókat, hangokat, inkább helyezz el egy jól látható “lejátszás” gombot, amivel elindíthatják azt! Itt találsz rá egy jó példát. 

Szemcsés textúrák 

Miközben a merev rácsok és a flat-színek tömbjei elszívják az egyéniséget a weboldalakból, addig némi szemcsés textúra alkalmazása részben visszahozhatja azt. Ezek olyan lo-fi elemek, melyek durvábbá teszik a felhasználói élményt, így pedig valóságosabbá, mint a végletekig csiszolt tökéletesség, amit sok weboldalon látunk. 

Visszafogott színek 

Ahogy a szemcsésség a természetesség érzéséhez viszi közelebb a weboldalakat, úgy a visszafogott színek is. Ráadásul az ilyen tompább színek nem terhelik annyira a felhasználók szemét, mint az erős vagy nagyon kontrasztos színek. A webdesignerek egyre inkább azt érzik, hogy sem a korábbi évek fehérség-mániája, sem az arra reagáló sötét mód őrület nem igazán jó, ezért az arany középutat kezdik keresni, és a pasztellszínek közül válogatnak. 

Gauss-féle elmosódás 

A Gauss-féle elmosódás remek eszköz arra, hogy tompítsuk a fókuszt és a gradienseket. Nem új effektről van szó, de a designerek csak most kezdték el komolyabb weboldalakon is használni.  

Rajzolt illusztrációk 

Nem is olyan régen a weboldalak még szövegekből és fotókból álltak össze. Ez volt a bevett séma, ami néhány éve elkezdett változni azáltal, hogy megjelentek a rajzolt illusztrációk, és emberibbé tették a weboldalakat. Úgy tűnik, hogy jövőre is velünk maradnak. 

Kézzel rajzolt elemek 

A rajzolt illusztrációk már nem csak különálló képként jelennek meg a weboldalakon, hanem az egyes elemek, például gombok is rajzként tűnnek fel. Ezek egyedivé és még emberibbé tudják tenni a weboldalt azáltal, hogy kitörnek a weboldalak merev struktúrájából.  

Grafika és fotók keveredése 

2021-ben már nem elég egy egyszerű, nagy fotó a weboldalak főoldalára. Egyre inkább kombinálni kell grafikai elemekkel, melyek valamiképpen kiegészítik azt és megmutatják a weboldal kreatív oldalát, nem mellékesen pedig látványosak. A fotókra helyezett grafikák emellett személyiséget adnak a designnak, erősítik a márka megjelenését, hiszen a logóban megjelenő színeket és formákat használhatod a grafikában.  

Geometrikus rácsok 

A rácsoknak nem muszáj a laikus szemlélő számára láthatatlannak maradniuk. Ha megjelenítjük a rácsot vonalakkal, akkor az még inkább képes strukturálni a weboldalt, megjelennek a blokkok mind a navigációs elemeknél, mind a fő tartalomnál, a kialakuló nagy, színes négyzetek pedig felkeltik a figyelmet. A rácsnak azonban nem kell szimmetrikusnak vagy szabályosnak lenni. Aszimmetrikusan megjelenített, keretnek ható rács is egyedi megjelenés kölcsönöz a weboldalnak. 

Egyedi kurzorok 

A kurzorok eddig nem kaptak különösebb figyelmet a webdesignban, és a mindenhol maradt az alapértelmezett nyíl. Ugyanakkor a nyíl a weboldalakon megváltoztatható, ami hirtelen érdekessé teheti a weboldalt. Nézd meg például ezt az oldalt monitoron, és meglátod, miről beszélünk. 

Görgethető kártyák 

Úgy tűnik, hogy egyre több weboldalnak válnak részeivé a görgethető kártyák, legyen szó függőleges vagy vízszintes görgetésről. Izgalmas mozgást jelenítenek meg, miközben remekül adják át az információkat. Itt láthatsz rá egy példát. 

The post Milyen webdesign-trendek határozzák meg 2021-et? appeared first on Webshark Blog.

Miközben ezek a trendek általában nem szolgáltnak senkinek túl nagy meglepetéssel, hiszen a csírájuk már akár évekkel korábban kibontakozott, azért érdemes tudatosítani a helyzetet.

Egyszerűség

Talán már mindenki unja, de az egyszerűség, a minimalizmus irányába való törekvés továbbra is erős trend. Még mindig nem jutott el ugyanis mindenhová az a megközelítés a webdesignban, hogy a kevesebb néha több. Az embereknek egyre kevésbé van idejük arra, hogy bonyolult és zsúfolt weboldalak érelmét próbálják meg kibogozni, ahogy azt sem várják meg, hogy egy nehéz weboldal betöltődjön. Pont emiatt nemigen számíthatunk arra, hogy ismét elindulnánk weboldalak a bonyolultság és súlyosság irányába. 

Aszimmetrikus elrendezés és osztott kijelző

A következő régóta velünk élő, de még mindig trendinek ható designelem az aszimmetrikus elrendezés, mely tavalyi listánk első helyén szerepelt. Úgy tűnik, hogy egyre merészebben távolodnak el a designerek a szimmetrikus, szigorúan rácshoz kötött elrendezésektől, és ez csak tovább fokozódik a jövőben – hiszen jól lehet vele hangsúlyozni bizonyos elemeket az oldalon -, annak ellenére, hogy jóval nagyobb hozzáértést igényel, mint egy szimmetrikus design elkészítése. Az aszimmetrikus egyensúlyról, annak előnyeiről itt írtunk bővebben. 

Az osztott kijelző korábban olyan weboldalakon jelent meg elsősorban, melyek eltérő információs egységeket tartalmaztak, és ezeket egy oldalon kívánták bemutatni. Mára azonban már bármilyen weboldalon megjelennek a vizuálisan rendhagyó megjelenés miatt.

Színátmenetek használata

Nem is tudjuk, hogy ezzel érdemes-e még előállni, hiszen ezen bejegyzésünk eredeti dátumát nézve, már másfél éve írtunk a színátmenetekről, azaz gradiensekről, ennek ellenére még mindig úgy tekinthetünk a színátmenetekre, mint amelyek meghatározzák a vizuális design világát. Nagyon nem ragoznánk a témát, hiszen már elég sokat írtunk róla, elég annyi, hogy 2020-ban várhatóan még több gradiensbe fogunk belefutni, különösen ami az illusztrációkat illeti. Ugyanakkor ezek a gradiensek a színeiket tekintve egyre kifinomultabbak, halványabbak lesznek. 

Látványos tipográfia

A másik elég nyilvánvaló trend, mely már évek óta tartja magát és válik egyre hangsúlyosabbá, az a látványos tipográfia megjelenése a weboldalakon. Persze betűk a kezdetek óta vannak a weben, ugyanakkor a túlhangsúlyozott, hatalmasra növelt, többnyire sans serif betűk az elmúlt évek termékei. Ezek a betűk már annyira látványosak, hogy sokszor még képre sincs szükség a weboldalon, mert átveszik a helyüket. A betűkről szóló bejegyzésünket itt találod.

Illusztrációk

Tovább hódítanak az illusztrációk is, melyekkel már rengetegszer foglalkoztunk egy korábbi bejegyzésünkben. Az illusztrációk ugyanis nem csak modern megjelenésűvé tudnak tenni egy weboldalt, hanem egyedivé is. 

Nagyon úgy tűnik, hogy egyre több nagy márka találja meg saját illusztrációs stílusát, és jeleníti azt meg a felületein. Talán azért, mert ezekkel az egyedi illusztrációkkal sokkal erősebben ki tudják fejezni a márka személyiségét, különbözőségét a többiektől. Tény ugyanakkor, hogy jóval drágább és nagyobb erőfeszítést igényel, így csak a nagyobb márkák engedhetik meg maguknak.

3D-s illusztrációk

Szintén szerepelt a tavalyi listánkban a 3D-s illusztrációk előretörése, úgyhogy úgy tűnik helyénvaló volt megemlíteni, ha idén is azt látjuk, hogy a trend egyre fejlődik. A lényege, hogy a sok flat után valamiféle realizmust, mélységet csempésznek a designba. A felületek lehetnek olyanok, mint üveg, fém vagy műanyag, ugyanakkor olyan dolgok jelennek meg valószerűen ábrázolva, melyek egyébként nem léteznek a valóságban. 

Izometrikus képek

Izometrikus képről akkor beszélünk, amikor a 2D grafikák 3D formákká alakulnak, így pedig egy sajátos, realisztikus megjelenést kapnak az illusztrációk. Habár ezek ágyaztak meg a 3D-s képeknek, továbbra is gyakran találkozunk ezzel a megoldással, főleg infografikákban.

Animációk

Egy szintén nagyon erős trend, a mikro– és makroanimációké, melyek kapcsán ugyanakkor sokan már túlzásokba esnek, és a sok, illetve túl erőteljes animáció a használhatóság rovására megy. Mindenesetre az animációkkal hatékonyan fel lehet hívni a figyelmet bizonyos dolgokra a weboldalon, miközben a használhatóság is javítható velük. 

Az átlagos weboldalakon persze még nem túl gyakran találkozunk velük, így van hová erősödnie a trendnek. Ha Te is vinnél egy kis életet a weboldaladba, akkor érdemes animációkkal kísérletezni. Az animációkról bő egy év itt írtunk.

Üres tér

Igen, a jól ismert whitespace vagy negatív tér, ami továbbra is tartja magát. Hiszen, ha sok elemnek kell megküzdenie a figyelemért egy weboldalon, akkor egyik sem fogja magára vonni az áhított figyelmet. Ezért a legfontosabbat kell kiválasztani, és adni neki egy kis teret, hogy észrevegyék a látogatók. 

Retro

Ahogy a tavalyi évben is már emlegettük a retrót, úgy az idén is ezt kell tennünk, mert a múltidézés egy modernizált, átértelmezett formában egyre több felületen jelenik meg, nem csak a webdesignban. És ebbe beletartozik a régmúlt illusztrációs technikáinak használata, valamint a színek és a régies betűtípusok.

Melyek a trendi színek 2020-ban a weboldalakon?

Habár tudjuk, hogy egy weboldal színeit a márka színei határozzák meg, de ez nem zárja ki, hogy figyelembe vegyük az új trendeket. Ezért érdemes egy pillantást vetni arra, hogy milyen irányzatok jelentek meg, váltak uralkodóvá a színeknél az idei évben.

Monokróm paletta

Ahogy tavaly is, idén is meg kell emlékeznünk a monokróm oldalak terjedéséről. Ezek lényege nevükben rejlik: egy szín jelenik meg a semleges színek mellett a weboldalon. A monokróm palettánál megmaradhatunk a márka fő színénél, ennek árnyalatait lehet használni a weboldalon, így erősítve a márkát.

Mivel egy szín jelenik meg, így nem hibázhatunk a színek válogatásánál, mindenképpen egy harmonikus designt kapunk a színeket tekintve. Ugyanakkor egy-egy elem kiemelésénél korlátozottabbak az eszközeink, de persze ez sem megoldhatatlan feladat.

Halványabb, természetesebb színek

Egy trend, mely szembe megy az élénk színű gradiensekkel, a halvány és természetes színek használata, melyek jól mutatnak a semleges színek mellett, illetve az ilyen háttereken, legyenek azok sötétek vagy világosak. Az erős színek évei után jellemzőbbé válnak ezek a kifinomultabb, tompább, természetes színek.

Habár erős színekkel jobban ki lehet emelni valamit, néha jobb választás kevésbé erős, halványabb, kellemesebb színeket használni. Ezek mellett ráadásul nagyobb figyelmet kaphat a termékünk fotója, hiszen a színek nem vonják el róla a figyelmet.

Földszínek

Hasonló az előzőhöz, hiszen a földszínek is természetesként ható színek. Különösen olyan weboldalakon jó választás, ahol figyelnek a környezetvédelemre. A színek által is nagyobb bizalmat kell így a weboldal a szándékát, céljait illetően, mint harsány, élénk színekkel tenné.

A földszínek megnyugtatóak és pihentetőek, ha rájuk tekintünk, és azt az érzést keltik, mintha valamiképpen kapcsolódnánk a természethez.

Korall és türkiz

Igaz, hogy a korall a 2019-es év színe volt a pantone szerint, de még mindig trendi. Különösen a türkizzel kombinálva, hiszen a kettő között jó a kontraszt, és nagyon eredetinek hat együtt. Ugyanakkor a korall mellé a kék más árnyalatai is elhelyezhetők.

Neon színek

De az élénk színek kedvelői sem maradnak lehetőségek nélkül, hiszen a neon színek még mindig népszerűek. Persze merész húzás egy weboldalon neon színeket használni, ugyanakkor figyelemfelkeltő és megkülönböztet a többiektől, akik megmaradnak a hagyományos színválasztásnál.

The post Merre tartanak a webdesign trendek 2020-ban? appeared first on Webshark Blog.

Miközben azt nem nehéz megmondani, hogy épp milyen trendek uralkodók a webdesignban, azt már nehezebb, hogy miért ezek bukkantak fel és miként használhatók fel. A trendek megmutatják, hogy mit szeretünk, mit utálunk, és merre tartunk. És minél pontosabban tudjuk, annál jobban megértjük a közönségünk igényeit is.

Megtört rácsok és aszimmetrikus elrendezés

Igazából semmi új nincs benne, évek óta jelen van a webdesignban, de úgy tűnik, hogy mind gyakrabban fogunk találkozni vele a weboldalakon 2019-ben. A megtört rács abban különbözik a szabályos rácstól, hogy nem a megszokott rendet követik a weboldal egyes elemei. Ezáltal különbözni tudnak a többiektől az ezt alkalmazó weboldalak, könnyebben felhívják magukra a figyelmet.

Szabálytalan elemek a designban

Egyre jobban távolodunk az egyenes vonalaktól és szabályos formáktól, helyüket átveszik a nem mértani formák. Ezek nem a megszokott négyszögek, körök vagy háromszögek, vagy bármilyen egyenes körvonalakkal behatárolható elemek, hanem szervesnek tűnő alakzatok. És hogy ez miért jó? Mert az ilyen formák által megközelíthetőbbé válik a weboldal, közelebb kerül az emberhez.

Retró

Ahogy túlléptünk a flat designon, sokan az azt megelőző korok forma- és színvilágához nyúltak vissza. A jelenlegi designtrendekkel keverve egész érdekes összhatás alakul ki.

Színek nélküli, monokróm weboldalak

Erről is már évek óta írunk, ennek ellenére terjednek az ilyen weboldalak, mert hatékonyabban felhívják magukra a figyelmet, mint ha a megszokott módon 2-5 szín felhasználásával épülnének fel. Ráadásul, ha mindössze egy fő színt használsz a designban, akkor azzal még inkább erősítheted a márkád. Tovább is egyszerűsítheted a dolgot, ha elhagyod valamennyi színt (a fekete, fehér és szürke semleges színek, nem számítanak színnek a designban) a weboldaladról.

Megváltozó hajtás feletti rész

Az unalomig ismert nagy kép, címsor, alcím, menüsor elrendezés helyett más kialakításokkal kezdenek kísérletezni a weboldalak. Itt nincs meghatározott irány, csak annyi, hogy elhagyják a megszokott, unalmas – és persze jól használható – sémát. Erre mindig is láttunk példákat, de mivel egyre inkább uniformizálódnak a weboldalak, így sokkal szembetűnőbb, ha valaki kilóg a sorból.

Óriási navigációs menü

Sok új ebben sincs, már évek óta láthatunk próbálkozásokat egész oldalt betöltő vagy más módon szokatlan navigációs menükre. Ezekből is egyre több lesz, annál is inkább, mert nem nehéz megoldani. Ugyanakkor arra figyelni kell, hogy ne csak jól nézzen ki, hanem használható is maradjon a navigációs menü.

Feleslegesen naggyá váló whitespace

Hosszú évek óta megfigyelhető a whitespace egyre fontosabbá válása és folyamatos növekedése. A whitespace-nek ugyanis funkciója van a designban. Ugyanakkor sokan azzal kísérleteznek, hogy a funkcióra fittyet hányva, önmagáért, designelemként kezdik alkalmazni a hatalmasra növelt negatív teret. Ezáltal a whiespace nem valami másra hívja fel a figyelmet, hanem önmagára. A használhatóságot tekintve nincs szükség ilyen méretekre, mindössze a különbözni vágyás indokolja.

3D-s illusztrációk

Sokaknak még a flat design is új, máris akadnak akik továbblépnek, és újra a 3d-s illusztrációkkal kísérleteznek. A designerek megpróbálnak minél több mélységet és valóságosságot belecsempészni a megjelenésbe, elmosva a határt a digitális és a fizikai világ között.

A flatből is deep flat lesz, amelyben több réteg rakódik egymásra, ami már majdnem 3d-s megjelenés. Megmaradnak a flat jellegzetességei, de áthatja a szkeuomorfizmus.

Szürreális design

A rajzfilmszerű illusztrációknak és felhasználói felületeknek egy célja van: ne legyen unalmas, újszerűnek hasson. Nem számít, hogy kit szólítanak meg ezek a grafikák, a lényeg, hogy érdekes legyen, vagy akár kifejezetten ronda. Ezt persze nem minden cég engedheti meg magának. Minél szélesebb a közönségük, annál semlegesebbnek kell lennie a designnak.

Egyre komolyabbá váló logók

Ez látszik abból is, hogy jó pár olyan céggel találkozhattunk 2018-ban, amelyik komolyabbá vált a logóját tekintve is. Váltottak a könnyen felismerhető, karakteres, de kicsit furcsa vizuális megjelenéstől a konformista, unalmasabb, nagyvállalati irányba. Ezzel jelezve, hogy a cég felnőtt, éretté vált. És valószínű, hogy a következő években is találkozunk hasonló átalakulásokkal.

2.0-ás gradiensek

Már a gradiensek sem a régiek. Az egyre jobb kijelzőket kihasználva a designerek feszegetik a határokat a gradienseknél is. Már nem csak a figyelmet keltik fel, hanem mélységet és egy új dimenziót adnak a felületnek. A 2.0-ás gradiensek finomak és egyszerűek. Nem ütköznek a színek, a formákhoz igazodnak.

Sötét hátterek

A vibráló színek és a jelentőségteljes gradiensek persze a sötét felületeken mutatnak a legjobban. A sötét témák maradnak velünk, csak egyre kifinomultabbá válnak. Mindez persze a felhasználói élmény rovására válhat, hiszen, ha minden színes, akkor hogyan emelünk ki elemeket a weboldalon? És persze nem mindenki használ OLED kijelzős mobilt, így sokaknál elvesznek a gradiensek. De aki megoldja ezeket a problémákat, nagyon előremutató weboldallal áll elő.

Továbbra is brutalizmus

Valami vonzó mégiscsak lehet a brutalizmusban. Lehet persze, hogy csak egy reakció a minimalizmus letisztultságára vagy a barátságos, bensőséges, hívogató grafikákkal készült weboldalakra. És már nem csak egy szűk csoport használja, hanem nagy márkák is.

Még merészebb és retróbb betűtípusok

Elég, ha ránézel a Mailchimp által választott Cooper Black betűtípusra. Egyre több serif fontot láthattál 2018-ban, és valószínűleg még többel találkozol 2019-ben. Legalábbis, ami a címsorokat illeti.

Egyre több animáció

A trend továbbra is az animált és interaktív elemek irányába mutat. Nincs is ezzel semmi baj, egészen addig, amíg az animációk segítik az embereket a weboldalak használatában, nem pedig akadályozzák őket. Csak a trend kedvéért viszont nincs értelme animációkat használni, mert csak rontja a weboldal használhatóságát.

Óriási, egész kijelzőt betöltő szövegek

Úgy tűnik, hogy most már egyre többen rájönnek: a tartalom a legfontosabb a designban. Így vannak ezzel a vizuális designerek is, akik egyre inkább középpontba helyezik a szövegeket. Láttál már ekkora kosárba gombot?

De ma már egy hírsite is így néz ki:

És nem csak a CTA-k vagy a címsorok nőnek nagyra, hanem a menü is.

Egymásra helyezett elemek

Eddig a whitespace kialakítása volt hivatott arra, hogy jelezze a kapcsolatot egyes elemek között a weboldalon. Most már azonban nem egyszerűen közel kerülnek egymáshoz az összetartozó dolgok, hanem egymásra helyezik őket a designerek.

The post Milyen webdesign trendek jönnek 2019-ben? appeared first on Webshark Blog.

Osztott weboldalak

2015 óta velünk vannak, de a kettéosztott weboldalak még mindig nagyon felkapottak, és úgy tűnik a trend az elkövetkező években is maradni fog. A kettéosztott weboldal felszámolta a megszokott weboldal-hierarchiát. A tekintet ahelyett, hogy felülről lefelé mozogna, kissé bizonytalanul csapong az oldalon, mivel az emberek nem tudják, hová is nézzenek.

Ugyanakkor több más előnye is van, így a jó kompatibilitás a mobilokkal és a felhasználóbarát használat. Ráadásul jól is néz ki, eredeti, nincs még túl sok belőlük. Nem véletlen tehát, hogy egyre növekszik a népszerűsége.

Nagyon jól használhatók olyan weboldalakon, ahol két vagy három, jelentősen különböző vagy megkülönböztethető tartalom van, melyekre egyaránt kíváncsiak lehetnek a cég ügyfelei. Ugyanúgy működik a dolog, mint azoknál a tartalmaknál, ahol előre el kell dönteni, melyik úton induljunk el.

Emellett jól használhatók reszponzív megoldásként, hiszen míg desktopon egymás mellé kerülnek a blokkok, addig mobilon egymás alá. A felhasználók így nem érzik, hogy bármivel is kevesebbet kapnának egy kisebb kijelzős megjelenésnél.

Még több élénk szín

Úgy tűnik, hogy az élénk színek kitartanak, sőt egyre többet láthatunk belőlük. Az erőteljes színek magukra vonják a figyelmet, és segítenek bevonzani a felhasználókat. Friss érzetet keltenek, és különösen a fiatalabbak számára vonzóak. Ezáltal olyan cégek is használni kezdik, akiktől meglepőnek fog tűnni ez a vidám hangulat. Mint például a Ford, mely a Make it Driveable landing oldalán rendkívül élénk színeket használ.

Ragadós elemek a weboldal tetején is alján

Semmi új nincs abban, hogy egy menü végig követi a felhasználót az oldal tetejére ragadva, miközben legörget rajta. Mégis, egyre tovább nő a ragadós navigációt használó oldalak száma.

Ugyanígy reklámok, chatablak, felugrók, üzenetek ragadnak egyre nagyobb számban a weboldalak aljára. Elsősorban azért ide, mert ez a legkevésbé zavaró, és mobilon is elfogadható elhelyezés, miközben a weboldaltulajdonosok szeretnék valamire felhívni a figyelmet.

Ívelt formák

A határozott, geometrikus, éles kontúrú formák helyett egyre jellemzőbbé válnak a puhább és rugalmasabb formák. Leginkább a lágy vonalak határozzák meg a megjelenést, melyekben kevés a törés és az él. Bárhová nézel, egyre több íves vonalat látsz. Ez történik a közösségi oldalakon, ahol a profilfotók már kör alakúak, de a Google mobilos oldalán is lekerekített sarkokkal és körökkel találkozol.

Finom animációk

Az apró és egyszerű animációkat szeretik az emberek. Ha jól vannak megtervezve, akkor segíti őket a weboldal használatában. Nem csak arra valók, hogy valamiképpen átvészeljük azt az időszakot, amíg a betöltődésre várunk. Beletartoznak nem csak az életre kelt illusztrációk, hanem akár a cinemagraph is.

Utóbbi elterjedése még várat magára, pedig nem 2017-ben hallottunk róla először. A cinemagraph egyfajta kombinációja a videónak és a fotónak, ahol a kiváló minőségű fotó kap egy loopolt videó-effektet, melynek révén azt az illúziót kelti az emberekben, hogy életre kel a fotó. Nem statikus a kép, mint egy fotón, ugyanakkor nem igényel annyi figyelmet és helyet sem, mint egy videó. Képes felkelteni a figyelmet, érzelmeket vált ki, és van egyfajta megnyugtató, sőt inkább hipnotikus hatása. Annak ellenére, hogy nem történik semmi a képen, az embereket megragadja.

Parallax görgetés

Habár sokan panaszkodnak amiatt, hogy lassul a betöltési idő és romlik a használhatóság miatta, már évek óta találkozhatunk a parallax effektekkel a weboldalakon, melyek görgetéskor jelennek meg. És úgy tűnik, hogy egy darabig még velünk maradnak. Igaz kicsit finomabb, kevésbé túlhajtott formában, hiszen a felhasználók felfigyelnek rá és szeretik a velük való játékot.

Eltűnő flat design és szellemgombok

A Nielsen Norman Group 2017 végén közzétett vizsgálata már jelezte, hogy a felhasználók számára problémát okoz, ha tiszta flat design keretek között kell navigálniuk: 22 százalékkal tart tovább egy feladat végrehajtása.

Az NNG a vizsgálatai egy részénél szellemgombokat használt, melyek ugyanúgy problémát okoznak, mint a flat design, legalábbis az esetek egy részében. De nem csak ők, hanem a ConversionXL is 20 százalékos eltérést talált a szellemgombok kárára, amikor ezekkel kísérletezett a CTA-jánál.

Nem véletlen, hogy egyre többet hallhatunk a designerek részéről az újra megjelenő árnyékokról és színátmenetekről. De persze már a material design és a flat 2.0 is jelezte, hogy a UX-et tekintve komoly kihívásokkal küzd a flat.

Videók, háttérvideók

Habár lassíthatják a weboldalt, és adott esetben zavaróak is lehetnek a felhasználók számára – sokan úgy vélik, hogy egy kategóriába esnek a karuszelekkel -, mégis mivel mindenhol ott vannak, nem maradhatnak ki a webdesignból sem. Használhatóságuk jórészt attól függ, hogy milyen weboldalon alkalmazzák, mire és hogyan próbálják meg alkalmazni őket. Fontos, hogy elsősorban desktop felületeken lehet létjogosultságuk a videóknak. Különösen, hogy összetett információkat viszonylag könnyen és gyorsan át lehet velük adni.

Brutalizmus

Habár a brutalizmus egyelőre még alapvetően a kreatív emberek játékszere a weben, egyre több példát találunk arra, hogy betör a mainstreambe. Ilyen például a Balenciaga webáruháza, mely merészen belevágott a használatába. A Nielsen Norman is elemezte a brutalizmust – miközben elválasztotta az aintidesigntól -, valamint megtette ajánlásait a használatára vonatkozóan.

Egyelőre a legfőbb indok a használatára az, hogy eredeti, hiszen még kevesen vágtak bele, így felkelti a figyelmet. Pedig olyan előnyei is vannak, mint a gyorsabb betöltődés, az egyszerűbb navigáció és a kevesebb zavaró tényező. Nyilvánvalóan nem mindenki által alkalmazható irányzat, ennek ellenére egyre többször fogsz találkozni vele 2018-ban. Elsősorban olyan weboldalak részéről, akik a fiatalokat célozzák.

The post Merre tart a webdesign 2018-ban? Trendek, irányok appeared first on Webshark Blog.

Megpróbálunk most egy viszonylag széles spektrumot felölelni – válogatva a legkülönfélébb előrejelzésekből -, így nem pusztán weboldalak designjával foglalkozunk, hanem, logó-designnal, mobillal, webáruházakkal, tipográfiával is. Vágjunk bele!

Webdesign trendek 2017-ben

2016-ban elsősorban az volt jellemző, hogy az előző évek egyszerűsítése és minimalizmusa ugyan megmaradt, azonban a tervezők megpróbáltak egy kicsit elmozdulni erről az alapról. 2017-ben várhatóan marad ez az irány, a webdesign valamivel bonyolultabb lesz, mint eddig volt. Induljunk el az alapvető dolgok felől az apróbb trendek felé!

Nagyobb hangsúly a UX-en

Az esztétikáról még inkább tolódik el a hangsúly a használhatóság irányába. Egyre több weboldal ismeri fel a fontosságát a design-gondolkodásnak és a UX kutatásoknak. A designerek a látvány helyett egyre inkább stratégiában kezdenek gondolkodni. Mindez persze azzal jár, hogy lesz néhány olyan digitális termék, amely elveszíti karakterét, miközben egyre jobb élményt kínál az embereknek.

Mobile-first design

Ez nem egy újdonság, hiszen már évek óta a legfontosabb trendek között szerepel. Ugyanakkor még mindig ez a legfontosabb: míg néhány éve a tervezők még a számítógép monitorából indultak ki egy weboldal megtervezése során, most már a mobil áll az első helyen. Korábban teljesen rendben volt, hogy a látvány először desktopra készült el, majd amikor ezt az ügyfél leokézta, akkor ebből kiindulva hozzácsaptak egy mobilmegjelenést is.

2017-ben ez azonban már nem működik, az ügyfelek is tudják, hogy a mobil vált a legfontosabbá. Elég csak arra gondolni, hogy a Google átáll a mobil indexre és, hogy már régóta működik a mobilbarát algoritmus. Így ha valaki jó helyen akar szerepelni a keresőben, akkor figyelnie kell a mobilos megjelenésre. Sőt, abból kell kiindulnia.

Flat design 2.0

Nem egy újdonság a flat 2.0, egy korábbi cikkünkben már találkozhattatok vele. Úgy néz ki azonban, hogy továbbra is meghatározó designtrend marad. A modern vizuális esztétika a korábbi flat és a material design keveréke, ahol egy egyszerű minimalista felhasználói felületen kifinomult betűtípusok, feltűnő színek és nagy felbontású képek jelennek meg.

Absztrakció

Ha azt hiszed, hogy a webdesign egyre uniformizáltabb lesz, akkor tévedsz. Számtalan olyan weboldal van, mely szakít a hagyományokkal, és valami egészen eredetivel próbálkozik. Megtehetik, hiszen a webdesign mára sokkal rugalmasabbá vált, mint eddig bármikor. A webdesignerek sokszor a printből vett ötletekkel feszegetik a határokat, így kialakítva érdekes és művészi megoldásokat.

Emocionális design

Mivel az emberek érzelmes lények, az érzelmek meghatározó szerepet játszanak a döntéseikben. Minden egyes weboldal meglátogatása valamiféle érzelmet vált ki belőlük, még akkor is, ha ezt nem vették figyelembe a tervezés során. Az emocionális design csak annyiban különbözik a hagyományos webdesingtől, hogy megpróbál érzelmi kapcsolatot kialakítani az emberekkel.

Az ilyen designnál gyakran találkozunk egy kedves lénnyel, aki segít minket a weboldalon vagy applikációban. Ilyen a bagoly a Duolingonál vagy a majom a Mailchimpnél. Nekik egyedi személyiségük van, így könnyebben kapcsolatba tudnak kerülni a látogatókkal. A pozitív hozzáállásuk hatására az emberek szívesebben hozzák nyilvánosságra, például egy megosztással, hogy kapcsolatba kerültek velük.

Nagyfelbontású képek

A hero képek és a teljes-kijelzős intrók korát éljük, és ez várhatóan még sokáig így is marad. A látványos képek most már mindenféle weboldalon megjelennek, ott is, ahol eddig talán nem gondoltunk a használatukra. Nem véletlen a népszerűség, hiszen ezek a teljes kijelzős nyitóképek mélyebb benyomást keltenek a látogatóban, mélyebben beleégetik a retinájába a márkát. Ezek a képek sokak számára annyira lényeges elemmé válnak, hogy olykor még a navigációs elemeket vagy a call to action gombokat is kiszorítják a weboldalról. Ami tovább fokozhatja a hatásukat, az a cinemagraph, az animációk vagy a háttérvideók alkalmazása.

Retro

A ’70-es, ’80-as évek köszönnek vissza a színek és a betűtípusok választásánál, a geometrikus formák alkalmazásánál, a duotone szín-kialakításnál.

Tartalom alapú navigáció és hosszú görgetés

A tartalom alapú navigáció a zavaró tényezők eltávolítására épül, hogy azok ne vonják el a felhasználó figyelmét az információkról. Ez a típusú navigáció különösen jól működik együtt a kártya alapú webdesignnal, mert a kártyák segítenek abban, hogy emészthető formában mutassunk meg nagy mennyiségű tartalmat a felhasználóknak.

A tartalom alapú navigációt kiegészíti a hosszú görgetés, mely egy elég jó megoldás egyes tartalmak áttekitésére. Míg korábban problémák voltak a felhasználók görgetési hajlandóságával, a mobilok egyre inkább elfogadottá teszik. A hosszú görgetés leegyszerűsíti a navigációt azzal, hogy csökkenti a kattintások számát.

Tovább gyorsuló weboldalak

Talán meglepő lesz, de az is egy webdesign trend, hogy extrém gyors weboldalak készülnek. Különösen, hogy olyan nagy a népszerűsége az AMP-nek, melye által villámgyorsan töltődnek be a weboldal-tartalmak. Ezekkel kell versenyezni a mobil találati listákon, már ha nincs külön AMP-s oldalad.

A weboldalsebességet illetően van min javítani a vizsgálatok szerint, és érdemes megcélozni a Google által korábban javasolt 1,5, de inkább az 1 másodperc alatti értékeket, melyek persze elsőre lehetetlennek tűnnek egy átlagos oldal számára.

Mikrointerakciók és funkcionális animációk

A mikrointerakciókban ma már semmi újdonság nincs, azonban a designerek egyre jobban megtanulják, hogyan használják a mikrointerakciókat. Ezáltal javul a weboldalak hatékonysága és kevésbé vonják el a figyelmet a tartalomról. Egy villanykapcsoló megnyomásától egy Facebook-lájkig számtalan mikrointerakció vesz körül minket, melyeket észre sem veszünk. Egy jól megtervezett mikrointerakció meghatározó lehet a weboldaladon, mert bár egyszerű, nagyon hatékony. Egy gomb színének a változása mutatja, hogy lenyomtad, egy hang jelzi, hogy üzeneted érkezett. Az egyre kifonomultabbá váló mikrointerakciók kiteljesítik a felhasználói élményt és felkeltik az érdeklődésünket.

Interaktív navigáció

A minimalista megjelenéssel együtt tovább terjedt 2016-ban a hamburger menü, és habár sok UX-designer gyűlölete tárgya, ennek ellenére még velünk marad egy darabig. Ugyanakkor egyre több olyan weboldallal találkozunk majd, amely más megoldást ad a minimalista navigáció megjelenésére: terjednek a függőleges szöveges menük a weboldalak szélén (mint itt, asztali megjelenésnél), a ragadós menük az kijelző alján és az interaktivitás (ahogy például megjelenik ezen az oldalon).

Interaktív történetmesélés

Egyre többen ismerik fel a történetekben rejlő potenciált az online marketingben. Ami a webdesignt illeti, akadnak már olyan landing oldalak, melyek teljes egészében egy-egy történetet mesélnek el. Egy jó történetnek vizuálisan és érzelmileg is vonzónak kell lenni az emberek számára, hogy megalapozza a kapcsolatot vele, és azt, hogy miként érezzen az adott termék iránt. Számos ilyen weboldalba futhattunk bele az elmúlt hónapok során, nem is akarjuk sorolni őket, szinte kikerülhetetlenek és várhatóan egyre több lesz belőlük. Ezek interaktív utazásba rántják be a látogatót, aki ezáltal mélyebben megérti a cég üzenetét.

A felhasználói igények előrejelzése

Ha sok döntést kell hozniuk, akkor az emberek belefáradnak a döntésekbe, így nem képesek feldolgozni megfelelően az információkat, nő a hibázás lehetősége és a csalódottság. A designnak ezért a döntés terhét le kell venni a felhasználó válláról, és mintegy előre megjósolva az igényeit csökkentenie kell a kognitív terhelését. Az előrelátó rendszerek a felhasználói élményt a látogató preferenciái és múltbeli viselkedése alapján építik fel. A gyakorlatban ez úgy néz ki, hogy ha valaki valamit vásárolt egy webáruházban korábban, akkor annak alapján javasol a rendszer számára további termékeket, amikor újra a webáruházban jár.

Rajzolt illusztrációk

A netet mára eluralták azok az úgynevezett “hero” képek, melyek beborítják az egész kijelzőt a weboldalra érkezéskor. Mivel egyre fontosabbá válik az egyéni megjelenés és a megkülönböztethetőség, ezért a stock vagy csak sablonos fotókat leváltják az egyedi látásmódot tükröző grafikák. Az ilyen kézzel rajzolt illusztrációk sokkal jobban megragadnak a látogatókban, akik általuk mélyebb benyomásokat szereznek a weboldalról. Érdemes tehát ebbe az irányba mozdulni, még ha elsőre furcsának is tűnik a fotók lecserélése.

Kézzel rajzolt ikonok

A kézzel rajzolt ikonok azért nagyszerűek, mert megjelenésük éles kontrasztot képez egy tiszta és szabályos tipográfiával. Nagyon jól használhatók call to action gomboknál, hiszen feltűnő megjelenésük révén javíthatják a weboldalakon a konverziós arányt.

Lazy loading

A lazy loading lényege, hogy nem egyszerre töltődik be egy weboldal minden eleme, hanem fokozatosan, ahogy a felhasználó görget lefelé az oldalon. Az előnyei nyilvánvalók, különösen az olyan oldalak számára, melyeken sok a tartalom. Mivel egyre fontosabb lesz a weboldalak sebessége, és ebbe beletartozik a sebesség élményének fokozása is, így várhatóan egyre több olyan oldalt láthatunk majd, mely ezt a technológiát felhasználva épül fel.

Középre rendezett vagy kettéosztott tartalmak

Egyre több szimetrikusan elrendezett weboldallal találkozhatunk a weben, ahol a lényeg középen kap helyet. Ha sikerül jól kialakítani egy ilyen designt, akkor a hatás drámai lehet. Természetesen ez a megoldás nem működik minden weboldal esetében, kevesebb tartalom esetén lehet jobban alkalmazni.

Egy másik népszerű megjelenés, ha kettéosztjuk a weboldalunkat. Ezzel a megoldással már 2015 legelején foglalkoztunk, úgyhogy nem mondható rendkívüli újdonságnak, ennek ellenére kétségtelen, hogy trend lett belőle, és marad is 2017-ben. Ezek a legjobban akkor működnek, amikor a jelentős whitespace-t látványos színekkel és tipográfiával kombináljuk.

Egymásra helyezett síkok

A material design indította útjára az egymást átfedő síkok trendjét, melyek a mélységet hivatottak kifejezni. Nem most kezdődött tehát a diadalút, azonban ez a megjelenés népszerűbb, mint valaha. Nem véletlen, hiszen hatékonyan használható, különösen, ha kontrasztos színeket és mély árnyékokat is bevetünk mellé.

Formák + színátmenetek

Eddig is népszerűek voltak a színátmenetek a weboldalakon, azonban ezen sikerült mostanra egy kicsit csavarni, és már nem egyszerű színátmenetekről beszélünk, hanem ezen belül kölönböző formák megjelenéséről. Hogy mire is gondolunk? Valami ilyesmire:

Nagy, színes árnyékok

A flat és a minimalizmus évei után megjelentek ismét az árnyékok a webdesignban, és úgy tűnik, hogy népszerűségük csak fokozódik. Ugyanakkor a designerek megpróbálnak mindig új és eredeti megjelenésekkel kísérletezni, így most már nem egyszerű árnyékokról van szó, hanem ezeket színekkel vegyítik és óriásira nyújtják. Ezáltal kiemelkedőbbé válnak az árnyékoló elemek, és maga a design is feltűnőbbé válik.

Chatbotok

Habár chatbotok már régóta léteznek, jelentős fejlődésen mentek keresztül. Egyre több weboldalon lehet találkozni chatbotokkal vagy olyan appokkal, melyek különféle feladatokat hajtanak végre. Például felhasználói támogatást kínálnak, esetleg rendelni lehet valamit a segítségükkel.

Miért váltak olyan népszerűvé? Mert a velük folytatott interakció hasonlít a valódi beszélgetésekhez. A beszélgetés pedig egy nagyon természetes kommunikációs forma az emberek számára. Ezáltal a chatbotok használata is ösztönös és könnyű számukra. Legalábbis könnyebb lehet, mint gombokat nyomogatni, vagy összetett menükben kiigazodni egy felhasználói felületen.

A chatbotokban rejlő lehetsőgekről itt írtunk korábban, míg a chatbotok kommunikációjának kialakításáról itt olvashatod bejegyzésünket.

Trendek a tipográfiában

Ahogy a webdesignban, úgy a tipográfia területén is állandóak a változások. Nehéz is követni őket az állandó médiazajban. De lássuk, hogy milyen fő irányok rajzolódtak ki mostanában!

Geometrikus betűtípusok

Láthatóan egyre nő a népszerűségük a geometrikus betűtípusoknak. Olyan nagy nevek használják, mint a Pepsi, a Virgin Atlantic és az Adidas. Ezzel az egyszerű megjelenéssel közvetítik az őszinteség érzését és megbízhatóságot a márkával kapcsolatban. Olyan új fontok jelentek meg ebben az évben, mint az FS Lucas, a Publica Sans vagy az ESPN saját fontja. De mint minden esetben, itt is fontos, hogy a megfelelő betűtípust a megfelelő kontextusban alkalmazzuk. Ahogy például a Jova.

Egyéni betűtípusok

Ahogy nő a különböző mobileszközök száma, úgy igyekszik a legtöbb tech cég saját betűtípusokat kialakítani. Ilyen volt az Amazon Bookerly-je, mely azért született, hogy csökkentse a szem fáradtságát olvasás közben. Az Apple előállt a San Franciscóval, míg a Google folytatta a Product Sans terjesztését. De nem csak a tech cégek alkottak maguknak saját betűtípusokat, hanem például Hillary Clinton számára is létrehozták a Unityt, míg a Buzzfeed és a Font Bureau a BF Tiny Handet, ami Donald Trump jellegzetes kézírását utánozza.

Aki ezek után nekiállna saját betűtípust gyártani, könnyebb helyzetben van, mint néhány éve, hiszen olyan új és alapvető eszközök jelentek meg, mint a Prototypo vagy a FontArk. Az egyedi betűtípusok trendje várhatóan 2017-ben is folytatódik, különösen akkor, ha az Adobe Project Faces is végre kilép a fejlesztési szakaszból.

Reszponzív tipográfia

A reszponzív design már nyilván senkinek sem újdonság, az azonban talán igen, hogy bekerült a mainstreambe a reszponzív tipográfia is. A lényege, hogy biztosítani kell az olvashatóságot az eszközök és kijelzőméretek széles skáláján. Hogy ez hogy működik a gyakorlatban? A Benton Modern oldalán megtekinthető a böngészőablak méretének változtatásával.

A reszponzív tipográfia azonban még gyerekcipőben jár, egy fejlődő terület, így nincsenek is olyan szabályai még, melyeket követni lehetne. Tovább nehezíti a helyzetet, hogy nem csak arról szól, hogy alkalmazkodni kell mindenféle kijelzőméretekhez, hanem más módokon is befogadhatóvá kell tenni a szövegeket. További részletek itt találhatók.

Változtatható fontok

Amikor a Google, az Apple, a Microsoft és az Adobe együtt dolgozik valamin, akkor biztosak lehetünk benne, hogy nagy dolog készül. Az úgynevezett variable fontokat idén szeptemberben mutatták be Varsóban, az ATypl konferencián. Ez jelenti a webes betűtípusok jövőjét. Persze, egy kis időnek még el kell telnie, mire valóban tervezhetünk a változtatható fontokkal, ugyanakkor ez egy rendkívül izgalmas fejlesztés, melynek során elmozdulunk a rendszer fontoktól a web fontok irányába. Ha többet szeretnél tudni a témáról, itt olvashatsz róla.

Trendek a logódesignban

A logók továbbra is a legfontosabb kifejezői egy cég imidzsének. A logó révén különbözteted meg magad a többeiktől, alakítasz ki egy vizuális képet magadról, és teszed könnyebben azonosíthatóvá a márkádat. A trendek természetesen a logóknál is folyamatos változásban vannak.

Egyszerű, flat

Ez az egyik legrégebb óta létező logostílus, mely az elmúlt években veszített ugyan népszerűségéből, de 2016-ban több nagy márka is felfedezte magának. Legfőbb előnye az, hogy könnyen alkalmazkodik a logó a legkülönfélébb eszközökhöz mobiltól kezdve a táblagépeken keresztül a VR-eszközökig.

Alkalmazkodó fontok

A betűtípus rendkívül fontos egy logó esetében is. Annak érdekében, hogy jól nézzen ki a logód mindenféle eszközön, figyelned kell arra, hogy a betűid ne essenek szét a különböző kijelzőméreteknél. Ha a betűid nem néznek ki professzionálisnak, azzal veszítesz a hitelességedből. Ma már minden cég számára fontos tehát egy bizonyos fokú reszponzivitás.

Minimalizmus

A minimalizmus népszerűsége 2014 óta folyamatosan növekszik, és az elmúlt két évben egyre több cég kezdte bevetni a logóknál is. A lényege a flat design, mely olyan kevés színt használ, amennyit csak lehetséges. A cél pedig a figyelem ráirányítása erre a néhány színre. Tulajdonképpen egy figyelem-megszerző stratégiáról van szó, mely gyakran valóban remekül működik, és hozza az eredményeket.

Kézzel rajzolt logók

Ahogy a webdesignban is egyre népszerűbbek a kézzel készült grafikák és ikonok, úgy a logóknál is hangsúlyosabban megjelent ez az irányzat. Ugyanakkor azon néhány trend közé tartozik, melyek gyakorlatilag állandóan jelen voltak a logó-designban. Egy finom, kézzel készült rajz mindig közelebb hozza a márkát a felhasználóhoz, és fokozza iránta a bizalmat.

Két színből álló logók

Egyre több cég használja, mivel képes egyedi megjelenést kölcsönözni a logónak. Egy jó színkombináció nagyon hatékony lehet a tekintetek odavonzására. Arra kell csak figyelni, hogy a két szín használata által ne tűnjön túlzsúfoltnak a logó, és hogy az egyszerű megoldások mindig jobban sikerülnek.

Retro logók

Ez a stílus már 2015 eleje óta jelen van, de továbbra is erőteljes a hatása a logódesignra. Visszahozta a régi elemeket és szimbólumokat, és egy erős kapcsolatot alakít ki a társadalom modern vetületeivel. A lényege a hagyományos stílus kombinálása a friss elemekkel. Már első pillantásra erős hatást gyakorolnak a nézőre, gyorsan felkeltik a figyelmét.

Mobil design trendek

Egyelőre még külön beszélünk mobil design trendekről, de lehet, hogy jövőre erről már szó sem lesz. Egyre kevésbé indokolt ugyanis a szétválasztás. De lássuk, melyek a trendek a mobiloknál!

Intuitív felhasználói felületek

A mobilos operációs rendszerek és az alkalmazások egyre könnyebbé teszik az emberek dolgát. A felhasználói felületek tervezői egyre újabb funkciókkal állnak elő, melyek egyszerűbbé, könnyebben kezelhetővé teszik a mobilokat, miközben egyre javul a funkcionalitásuk a kisebb kijelzők ellenére. Emellett a felületek jobban képesek reagálni a felhasználói gesztusokra, és értik a használóik viselkedését.

Funkcionális animáció

Az animációk egyre kevésbé öncélúak, nem csak a felhasználói felület megjelenését teszik vonzóbbá, hanem annak funkcionalitásán is javítanak. Sok esetben akár a navigációt is könnyebbé tehetik.

Overlay használata

Terjed a használatuk a mobilappoknál, mivel jó megoldást jelentenek arra, hogy a felhasználót egy pillanatra kiszakítsák a megszokott folyamatokból. Tökéletes megjelenést jelentenek a push üzenetek számára, mert nem gátolják közben az applikációk működését.

Új utak a navigációban

Az idei évben már egyre több parallax megoldással, rejtett navigációval, vízszintes görgetéssel találkozhatunk. Mivel nem rontják a felületek ösztönös használatát, ezért egyre népszerűbbé válnak a designerek és persze a felhasználók körében. A végeredmény pedig egy jobb felhasználói élmény.

Történetmesélés az appokban

Nemcsak a weboldalakon, de az alkalmazásokban is egyre gyakrabban találkozhatunk a történetmeséléssel. Az emberek ugyanis sokkal könnyebben megkedvelnek egy márkát, ha történeteken keresztül találkoznak vele. Úgy tűnik, hogy egyre erősödik ez a trend, és még jó sokáig velünk marad.

Élénkebb színpaletták

A flat design és az élénk színek a mobil felhasználói felületeket is elérték. Az alkalmazások fejlesztői és a mobiltelefonok gyártói is egyszerűbb, de feltűnőbb színeket kezdtek használni, melyek kiragyognak az általában sötét hátterekből.

Erőteljes tipográfia

Ahogy a webdesignban az appoknál is egyre jobban figyelnek a tipográfiára a designerek. Ezért láthatunk egyre több nagyméretű, kifinomult, erőteljes betűtípust megjelenni a mobilunk kijlezőjén is.

Trendek a webáruházaknál

Ilyenkor a karácsony közeledtével kevés idő jut arra, hogy a távlati terveket szövögessük a webáruházaknál, ugyanakkor mivel mindjárt itt az új év, fontos megismerkedni a webáruház-tulajdonosoknak is azokkal az irányokkal, melyek felé jövő évben elmozdulhatnak.

Képek és videók mindenhol

Elolvasod egyáltalán a szöveget, ha egy óriási képen mutatják be e keresett terméket? Sőt, ha egy videón nézheted meg minden szögből? Egyre jellemzőbbé válnak a webáruházakban a minden mást kiszorító képek és videók, melyek fokozzák a vásárlás élményét. És ma már nem csak a főoldalakon van helyük, hanem minden egyes termékoldalon.

Kisebb kijelzők, hosszabb görgetés

Mivel a mobilos netezés egyre természetesebbé válik az emberek számára, miközben a webáruházak kínálata egyre nagyobb, így nem marad más, mint a sok-sok görgetés. Ez ugyanis egy sokkal jobb megoldás, mint ha sok kis oldalra bontanánk egy-egy kategróiánkat, és nyomgatniuk kellene a felhasználóknak a következő oldalra mutató gombokat.

Jó hátteret ad a görgetés a történetmesélésnek – mely bármely meglepő, a webáruházaknál is egyre dominánsabban jelenik meg. Fokozzák az élmény a parallax effektek és az animációk, melyeket a görgetés aktivál automatikusan. A görgetés révén meghatározhatod a felhasználónak az útját, aki így rövidebb idő alatt sokkal több tartalomhoz jut hozzá.

Mobile first

A webshopok esetében is egyre több ember választja a mobilt az asztali gép helyett. Sokan alkalmazkodtak is már ehhez és a mobilt helyezik az első helyre a design kialakításánál. Itt egyszerűen annyi a feladat, hogy a mobil kijelzőjére tervezd meg a webáruházad, majd ha ezt reszponzívan jeleníted meg, akkor nagyobb kijelzőkön is használható lesz. Ne lepődj meg, ha egyre több hamburger ikonnal találkozol a monitorodon is.

Dinamikus keresés

A JavaScripten és az Ajaxon alapuló dinamikus keresés révén azonnal megjelenik a keresett termék. Ez egy jó megoldás az olyan webáruházak számára, melyeknek nagy a készletük, és így a felhasználók könnyen áttekintik a kínálatot, anélkül, hogy minden egyes keresést külön be kellene tölteni.

Emellett megjelenik a hangkeresés, illetve a digitális asszisztensek, egyre nagyobb teret nyernek a chatbotok, és a cégek egyre innovatívabb megoldásokkal szolgálják ki a vevőiket. Így pedig az online vásárlás egyre személyre szabottabb és interaktívabb lesz.

Material design, kártyák és animációk

Az élénk színek, árnyékok, mozgások és tartalomközpontúság miatt a material design a webáruházak számára is a legjobb megoldás. 2017-ben egyre több kártya alapú elrendezést, reszponzív animációkat és interakciókat láthatunk az online kereskedelemben is. A kártyák leegyszerűsítik a navigációt a reszponzív designban, így a felhasználóknak is könnyebb lesz befogadni a termékeket és kategóriákat.

A mozgások lesznek jellemzők a gombokra, ikonokra, üzenetekre, melyek így sokkal jobban megragadják a felhasználók figyelmét. A gombok görgetés révén aktiválódnak, így egyből rájuk vándorol az emberek tekintete. A kosár gomb is változtatni fogja a színét, és egyből a rendelés oldalra viszi a felhasználót.

Személyre szabottság

A big data sok üzletágat megváltoztatott, és ez lesz az online kereskedelemmel is. A webáruházak arra használják a felhasználókról gyűjtött adatokat, hogy személyre szabott árukínálatot mutassanak nekik. A jövőben minden vevő egyéni webáruházzal találkozik majd, mely az ő igényei alapján épül fel. Az analitika 2017-ben már valós idejű lesz, és a webáruházak ugyancsak valós időben a korábbi vásárlásokat figyelembe véve alakítják áraikat.

Virtuális üzletek

Akad már néhány olyan webáruház, ahol virtuális próbafülkében próbálhatjuk fel a ruhákat. Ehhez csak egy webcamre van szükség. Az AR és a virtuális valóság azonban ennél is erősebben nyomul be az életünkbe, akár van hozzá való eszközünk, akár nincs. A téma alapú webshopok révén egészen magával ragadóvá válik az online vásárlás élménye, hiszen ennek révén a valóság és a fantázia keveredik. A képeket és a videókat maga mögött hagyva pedig hamarosan már virtuális üzletekbe léphetünk be a VR segítségével. Így pedig a vevők érzelmileg is képesek lesznek kapcsolódni a termékekhez.

Mit szólsz ehhez a jövőhöz? Valami mást vársz?

The post Webdesign trendek 2017: weboldalak, webáruházak, mobil, tipográfia, logó appeared first on Webshark Blog.