Webdesign trendek – második rész Copy
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://www.apple.com/il/airpods-pro/
https://the-goonies.webflow.io/
http://www.inception-explained.com/
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)
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://www.monographcomms.ca/
Szemcsés színátmenet:
https://3dmade.design/?ref=onepagelove
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.
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!
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.
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.cartoonnetworkstudios.com/
https://www.raoul-gaillard.com/
Freepikről sokféle memphis grafikát le tudunk tölteni a tervezéshez, vektoros formában:
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://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.