Benvinguts al nostre repàs anual de les tendències en disseny web 2022, un dels grans fonaments de la creació i desenvolupament de pàgines web. Aquí comencem un viatge per algunes de les tendències que marcaran el disseny web aquest 2022.
No esperis trobar un resum de les tendències a la primera línia: no siguis mandrós i dedica una estona a llegir i assimilar els conceptes que hem preparat perquè et serveixin d’inspiració i guia creativa.
A la nova edició analitzem les tendències de disseny web 2026 que definiran el futur visual d’Internet.
Anirem desgranant una a una les tendències en disseny web 2022: t’explicaré les seves particularitats, et donaré consells clau per aplicar-les, veurem quin resultat pots aconseguir i, per acabar, cada tendència es tanca amb tres exemples reals amb imatges, algun vídeo i l’enllaç per veure la web en directe.
Totes les webs que veurem són reals i ja estan publicades, així que parlem de dissenys molt avançats on ja s’han aplicat tendències que marcaran el pròxim any.
[superfeatured]10346[/superfeatured]
[nlform]
Posts d’anys anteriors que et poden interessar: Tendències en disseny web 2021 – Tendències en disseny web 2020 – Tendències en disseny web 2019 – Tendències en disseny web 2018 – Tendències en disseny web 2016
Tendències en disseny web 2022
Custom cursor i interacció
Una de les grans tendències en disseny web 2022 que veurem a pràcticament tots els projectes destacats és el custom cursor. Però, què és exactament?
El custom cursor representa un pas més cap a la personalització total d’una web. Els dissenyadors i desenvolupadors web fa temps que busquen el disseny web definitiu, la tendència perfecta i una experiència d’usuari memorable.
Per això, una de les tendències en disseny web per al 2022 seran els cursors personalitzats.
Aquests elements, que fins ara es deixaven amb un aspecte bàsic i sense gràcia, passen a ser únics per a cada web, adaptant-se a la identitat visual i a les sensacions que es volen transmetre.
A més, la personalització no només afecta l’aspecte, sinó també el comportament: el cursor pot canviar d’estil quan interactua amb diferents elements de la web.
I per tancar aquesta tendència, cal destacar la interacció entre el cursor i la resta d’elements de la pàgina. Si aconseguim que tot encaixi, l’efecte és espectacular.
Com i quan aplicar-ho
Aplica aquesta tendència en webs que:
- Vagin dirigides a tot tipus de públic
- Vulguin mostrar el potencial de l’empresa
- Busquin aquest extra de personalització per destacar-se
Recorda:
Cada projecte té les seves pròpies necessitats
El disseny i el desenvolupament han de ser impecables, sense perdre fluïdesa
Cal plantejar aquesta opció des de l’inici i anticipar possibles problemes
Webs que incorporen la tendència
AWDAGENCY by AWDAGENCY d’Itàlia
En aquest exemple veiem una aplicació impecable del cursor personalitzat i la seva interacció amb els elements de la pàgina.
LJCOM by 148-agency from France
Una altra web que figura entre les millors de l’any i que ja incorpora el cursor personalitzat i la interacció entre el cursor i els elements de la pàgina.
BEHORDE by Nextpage from Ukraine and Alex Seagull
I per acabar, un exemple de cursor interactiu molt més subtil i elegant, que reacciona de manera atractiva quan passa per sobre dels elements clau del disseny web.
Animacions amb Overflow
La segona tendència en disseny web del 2022 són les conegudes com a animacions amb overflow.
Aquest concepte fa referència als efectes visuals que es produeixen a la web a mesura que els elements apareixen i es carreguen.
Així, dissenyadors i desenvolupadors web treballen colze a colze per aconseguir que els elements no apareguin de manera estàtica, sinó que ho facin amb animacions: desplaçaments, retallades, aparicions progressives… tot el que la creativitat permeti.
Aquesta tècnica funciona especialment bé en webs amb grans titulars i una aposta clara per la tipografia de gran format.
Com i quan aplicar-ho
Aplica aquesta tendència en webs que:
- Disposin d’una hero home potent
- Donin protagonisme a la tipografia
- Vulguin mostrar el contingut de manera dinàmica
Recorda:
- El desenvolupament ha de ser perfecte per mantenir la fluïdesa
- Només apte per a maquetadors professionals
- Ha d’aportar valor real al projecte
Webs que incorporen la tendència
AVANTT TYPEFACE by Creative Nights from Czech Republic
Un dels millors dissenys web i desenvolupaments actuals, on la tendència d’animacions amb overflow està molt ben implementada, amb contingut dinàmic i una navegació que enganxa.
SIVIK ATELIER by Shaban Iddrisu™ from United Arab Emirates
Un altre gran exemple d’animacions overflow en un disseny molt actual i dinàmic. El desenvolupament tècnic és excel·lent, ja que només així s’aconsegueixen aquests resultats.
LEONID KOSTETSKYI by Emotion Agency from Ukraine
Les animacions amb overflow són part fonamental d’aquest disseny web. Ens trobem davant d’una altra obra d’art del disseny i desenvolupament web. Els textos i titulars emergeixen des del nucli del disseny i apareixen de manera molt atractiva.
[superfeatured]10346[/superfeatured]
Next level 3D
La potència dels nostres dispositius és brutal, l’ample de banda gairebé il·limitat, i això es nota en el disseny i desenvolupament web.
Una de les tendències en disseny web del 2022 seran les webs que freguen el nivell d’un videojoc o una pel·lícula d’animació digital.
L’any vinent, més que mai, els dissenyadors web buscaran sorprendre’ns amb projectes on la seva habilitat professional es posa al límit.
Com i quan aplicar-ho
Aplica aquesta tendència en webs que:
- Realment mereixin aquesta tècnica creativa i de desenvolupament
- No és apte per a tot el públic
- No és apte per a qualsevol projecte
Recorda:
- No t’hi posis si no ets un professional de veritat
- Disseny i desenvolupament han d’anar de la mà
- No es pot sacrificar cap altre aspecte del projecte
Webs que incorporen la tendència
PROMETHEUS FUELS by Active Theory from United States
