Webdesign trendek – második rész

Friss irányzatok, trendek, inspirációk

Nézd végig a példa honlapokat és figyeld meg hogy milyen trendek keverednek a weboldalakon belül. Az előző trend lecke irányzatait is vedd bele az elemzésbe.

8. Interaktív görgetés (Scrolllytelling)

A görgetéssel generált weboldalak, lélegzetelállító képi megjelenést tudnak nyújtani. (Haladó szintű honlapépítés, bizonyos dolgokat csak kódolással lehet elérni. )

Az adott weboldal tartalma, görgetés során áttűnésekkel, effektekkel, egymásból átalakulva tűnik fel. A látogatót lebilincseli a látvány.

A trend arra ösztönzi a felhasználót, hogy még többet olvasson a termékünkről/szolgáltatásunkról.

A képi és vizuális elemek segítenek, hogy ahhoz is eljusson a fő üzenet, aki csak gyorsan végig akarta görgetni az oldalt.

Tovább fejlesztett változata a Storytelling, a történetmesélő weboldal. Ugyanúgy interaktív görgetéssel a webdseign előnyeit felhasználva erős képi, vizuális elemek használatával elmesélünk valamit.

Hátrányai:

Ha a látogatónak nincs elég sávszélessége, akkor a weboldal lassan tölthet be, akadozhat sőt össze is omolhat a böngészője.

Az is lehet, hogy meg akar nézni valamilyen információt pl. egy termékről, de útközben elfogy a türelme a sok görgetésben.

Tehát mérlegelnünk kell, hogy mit nyerhetünk és veszíthetünk ezzel a trend típussal.

https://kirifuda.co.jp/works/

https://www.apple.com/il/airpods-pro/

https://the-goonies.webflow.io/

https://infraredmindbody.com/

http://www.inception-explained.com/

http://everylastdrop.co.uk/

https://www.kalso.com/

https://slaveryfootprint.org/

https://www.a2a.eu/luce/

https://www.atterwasch.net/#folge-01

https://zoomanity.land/en/

9. Parallax animációk

A parallax animációk évről évre egyre nagyobb hangsúlyt kapnak. Jelentése: Az elemek előtérbeli és háttérbeli mozgásának a szétválasztása.

https://dribbble.com/shots/4949875-Alpine-concept

http://altosodyssey.com/?ref=onepagelove

https://chroniclehq.com/?ref=onepagelove 

 

10. 3D hatás

A virtuális valóság (VR) és a kibővített valóság (AR) technológia fejlődésével egyre több fejlesztő valósítja meg a 3D-s effektusokat.

A 3D-s grafikának viszont vannak követelményei, főleg ha effektek is társulnak hozzá. A legfontosabb, hogy figyelni kell arra, hogy a weboldal gyorsan töltődjön be, máskülönben az ilyen, úgynevezett nehéz tartalmak tényleg nagyon nehezen fognak megjelenni és a különleges felhasználói élmény helyett a lassúság és a látogató elvesztése várhat ránk.

https://circa.so/?ref=onepagelove

Chronicle – Future of storytelling (chroniclehq.com)

https://dala.craftedbygc.com/?ref=onepagelove

bersusdesign

11. Szemcsés/zajos hátterek és színátmenetek

Az Instagram megjelenése óta töretlen trend a színátmenet használata.

Szuperül feldobhatja a honlapunkat, de vigyázni kell, hogy ne essünk túlzásba! Pasztelesebb és erősebb színekhez is nyúlhatunk.

2022-ben pedig megérkezett a trend továbbgondolása. A tökéletességet megtörve, szemcsés/ zajos formában jelenítik meg a tervezők a színátmeneteket. Ezáltal sokkal természetesebb hatást keltenek.

A zajosság használatához nem kell feltétlen színátmenetet használnunk. Sima egyszínű háttereknél is alkalmazhatjuk vagy képeknél. Képszerkesztős videóban meg fogom mutatni, hogy hogyan lehet létrehozni.

Sima színátmenet:

https://stripe.com/en-hu

https://flouxdesign.com/

https://vitaarchitecture.com/

https://www.monographcomms.ca/

Szemcsés színátmenet:

https://3dmade.design/?ref=onepagelove

https://monopo.vn/

https://zeusjones.com/

https://www.richardsancho.com/

https://webflow.com/nocodeconf

Itt további színátmenetes honlapokat találsz és bővebb információkat a színátmenetekről:

https://www.awwwards.com/gradients-in-web-design-elements.html

 

12. Rácsok, vonalak megjelenítése

A weboldal készítők grid/rácsrendszert használnak a tervezés során. A szakaszok, fejlécek, bekezdések, termékgalériák, stb körülhatárolására, vonalas rácsokat hozhatunk létre a teljes weboldalunk számára, így egy új stílust kapunk. A vonalvastagság kiválasztása nagy hatással van a végeredményre.

https://www.appart.agency/

https://www.breef.com/

https://www.cpgd.xyz/

https://www.physioasten.at/

https://gumroad.com/

 

13. Ki a rácsról

Amikor weboldalt tervezünk, rácsszerkezetben szoktunk gondolkozni. Ha kilépünk a komfortzónából és elmozdulunk a központtól, webhelyünk kiemelkedhet a többi konkurens honlap közül. Ez már egy haladó szint!

https://arrowww.space/

 

14. 90-es évek

2021-ben visszatért a 90-es évek hangulata a webtervezésbe, de 2022-ben is ugyanúgy hódít és bátran nyúlhatunk hozzá.

Ennek a stílusnak a vonásait a retro magazinok példája ihlette. A vintage stílus magában foglalja a világos és pasztell színek, vonalas grafikai elemek, árnyékok, lekerekített és egyben éles formák, elegáns serif betűtípusok és kerek szövegelemek kombinációját. 

https://cleanwith.plus/

https://solace-store.com/

15. 80-as évek, Memphis design

A 80-as évek stílusához is visszanyúlhatunk a tervezésünk során. Régen a memphis design, a minimalizmus és a művészeti kritikusok ízlésének elutasítása volt. Színesebbé és kalandosabbá tette a tervezést.

A Memphis formatervezési irányzat, megtöri a tipikus normákat és a grafikai design frissességet, kreativitást és egyediséget ad a honlapoknak. Nagyon fel lehet dobni vele egy weblapot! 1-2 grafikai elemet belecsempészünk a tervünkbe és máris egyediek vagyunk. Ezeket animálhatjuk is és máris élő, lélegző eredményt kapunk.

https://www.playup.com.ar/

https://www.engine.xyz/

http://riccardozanutta.com/

https://doze.studio/

https://shapefarm.net/

https://www.cartoonnetworkstudios.com/

https://upperquad.com/

https://www.raoul-gaillard.com/

Freepikről sokféle memphis grafikát le tudunk tölteni a tervezéshez, vektoros formában:

https://www.freepik.com/search?format=search&query=memphis

16. Neumorfizmus

A neomorfizmus letisztult, visszafogott kinézetet kölcsönöz a weboldalnak. Inkább a telefonos alkalmazásoknál terjedt el. Főleg árnyékokat és nem túl szembetűnő színeket alkalmazunk.

A kontraszt és az egyértelmű megkülönböztetés hiánya miatt az ilyen stílusú webhelyek nagyon nehezen navigálhatóak a csökkent látóképességűek számára. Ezen kívül az árnyékolt elemek megnehezíthetik a felhasználó számára annak eldöntését, hogy melyik gombot nyomja meg. Tehát az alkalmazása a felhasználói élmény kárára mehet.

A fő célunk nem csak a látogatók vonzása, hanem az egyszerű böngészési élmény biztosítása is. Így a neumorfizmus alkalmazása nem rossz ötlet, de ügyesen kell használni. Ezen okok miatt egyre kevesebb weboldalon találkozhatunk vele.

https://www.reddelacruz.net/

https://neumorphism-day-and-night.webflow.io/

https://dribbble.com/shots/8223539-Design-Experiment-Creativity-Bad-UX/attachments/594283?mode=media

https://neomorphism-elements.webflow.io/

https://www.behance.net/gallery/96163545/Neumorphism-Landing-page

17. Glassmorfizmus/ Üvegmorfizmus

Az üvegmorfózis az átlátszóság, elmosódás és a mozgás kombinációja. A stílus kulcsa a tükröződés és az árnyék, amelyek létrehozzák az optikai csalódást. Finom mozgással kombinálva a mattüvegeffektus 3D-s érzetet kelt a látogatókban.

Az üvegalakú elemek jól működnek, ha élénk hátterekre, színes formákra és képekre helyezzük őket. Nagyon gazdag megjelenést kölcsönöz weblapunknak.

https://www.galp.in/

https://weareodyssey.com/

https://ventus.health/

https://digital.vtb.ru/digest/2021-jul/

https://decimalchain.com/

Hozzászólások küldése

Hozzászólás

Az e-mail címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük

0
    0
    Kosaram
    Üres a kosaradVissza a termékekhez
      Kupon felhasználása