Si vols estar al dia i començar l’any vinent amb bon peu, en aquest article repassem les tendències en disseny web per al 2020. Canvas, 3D, tipografies gegants, contrastos, intel·ligència artificial, machine learning, reconeixement de veu i molt més.
[superfeatured]7076[/superfeatured]
Un any més, aquí estem, preparant-nos pel que vindrà. Ja pràcticament a novembre, volem estar a punt per a l’any següent, i també volem que els nostres visitants ho estiguin. Com ja és habitual, hem preparat un article per parlar sobre el que marcarà tendència dins el món del disseny web el 2020.
Seguim l’evolució → les tendències de disseny web 2026 aposten pel minimalisme, la IA i experiències més humanes.
Aquest tipus d’article és un dels pilars del nostre blog i ens porta una gran quantitat de visites i fins i tot sol·licituds de pressupost durant tot l’any, de persones que arriben buscant les últimes tendències en disseny web, gràfic i màrqueting. Per això, cada any hi dediquem més esforç, atenció i cura que l’anterior. El nostre objectiu és oferir contingut de qualitat als nostres visitants, tant si són professionals del disseny gràfic/web com si són futurs clients buscant inspiració pel seu nou web. A més, crear contingut de qualitat ens ajuda a seguir posicionant als cercadors. Ja ho sabeu: Content is king!
WOWWW TIO! ja tenim el nou post de les tendències en disseny web per al 2021!!!
Articles d’anys anteriors que et poden interessar: Tendències en disseny web 2019 – Tendències en disseny web 2018 – Tendències en disseny web 2016
Tendències en disseny web per al 2020, avança’t
Tipografies encara més grans
Una de les tendències clau del 2020 serà, sens dubte, l’ús de tipografies de grans dimensions. No només als titulars, sinó també al cos de text general.
Amb la popularització de pantalles panoràmiques d’alta resolució i la baixada de preus d’aquest tipus de monitors, el tamany de la tipografia per als textos principals ja queda molt lluny dels 12 o 14 píxels que s’utilitzaven fa una dècada. Ara podem fer servir sense problemes mides de 20 píxels en amunt, sempre que el projecte i el web ho permetin.
Pel que fa als titulars, no hi ha límits més enllà del bon gust i el sentit comú: atreveix-te amb mides gegants que generin contrast. Apostar per titulars grans i ben treballats donarà molta personalitat a qualsevol web que vulgui destacar i estar preparat pel que vindrà, no només el 2020 sinó també els propers anys.
Com i quan aplicar-ho
Aplica aquesta tendència en webs que:
- Necessitin un disseny molt visual i impactant
- Tinguin poques imatges i necessitin reforç visual; utilitzar tipografies grans de manera descarada donarà el toc que busques
- No vagin dirigits a un públic massa conservador
- Tinguin un públic objectiu amb equips moderns, especialment pantalles grans
Tingues en compte que:
- Hauràs d’ajustar les mides segons la resolució de pantalla. Crea excepcions responsive, des de 2560px (pantalla gran) fins als més habituals 1330px (portàtil)
- Revisa especialment que les mides siguin coherents a la versió mòbil, ja que la majoria d’usuaris ja naveguen des del mòbil
Webs que incorporen la tendència
Rogue Studio
En aquest web pots veure clarament l’ús de tipografies no només grans… sinó EXTRA grans. I la veritat, queden espectaculars.
Estic convençut que aquest web serà un dels candidats pel nostre recull anual dels millors dissenys web.
Granyon Summer Party
Un altre gran exemple d’aquesta tendència aplicada a la perfecció. No només el titular principal i els secundaris, sinó que el cos de text també és gran per si sol.
Team Elite Kickboxing
Per acabar, un últim exemple on podem veure la tendència aplicada. A més, aquest web també fa servir a la perfecció la tendència de la qual parlarem tot seguit.
Contrast, colors negatius i tons vibrants
L’ús de contrastos i colors negatius és un recurs cada cop més habitual en disseny i desenvolupament web. El 2020 no serà una excepció i veurem webs d’impacte que utilitzen aquests recursos sense complexos.
Deixa’t portar pel teu costat més atrevit i juga amb contrastos i colors vius. Aplica filtres a les imatges, ja sigui prèviament amb Photoshop o eines similars, o bé amb eines de desenvolupament web més modernes, com els blending modes de CSS o fins i tot l’element canvas.
Com i quan aplicar-ho
Aplica aquesta tendència en webs que:
- Necessitin un disseny molt visual i impactant
- No vagin dirigits a un públic massa conservador
- Vulguis captar l’atenció i no deixar ningú indiferent
Tingues en compte que:
- En webs corporatius per a empreses més clàssiques, utilitza aquest recurs amb molta subtilesa
- Aplica els contrastos de manera coherent, tenint en compte la imatge corporativa i els colors de la marca
- Tot i buscar contrast, mantingues l’harmonia visual creant una paleta de colors coherent
Webs que incorporen la tendència
Ninja guru
En aquest web podem veure l’ús del contrast en la seva màxima expressió. Utilitzen tant colors negatius (blanc/negre) com contrastos vibrants (blau/taronja).
Festa da Francofonia 2019
Colors vius, contrastos, elements geomètrics en moviment… Un web que no deixa indiferent i un exemple perfecte d’una de les tendències clau per al 2020.
Kombu
En aquest web, el contrast es trasllada al packaging de cada refresc, representant el sabor de cada beguda. L’efecte “wavy” de les línies diagonals, que encaixa perfectament amb el packaging, és una autèntica genialitat. Un gran exemple de l’ús no només de contrastos sinó també d’efectes JS amb sentit, mantenint una línia comunicativa formal per al tipus de producte.
Experiència mobile, encara més rellevant
A hores d’ara tothom sap què és el disseny web responsive o adaptable, i potser ja no el consideraríem una tendència per al 2020, almenys en el seu format més bàsic.
Amb el gran volum d’usuaris navegant des de dispositius mòbils, és imprescindible pensar en ells i oferir una experiència totalment adaptada al dispositiu i la seva manera d’utilitzar-lo. Es tracta de portar el disseny responsive a un altre nivell.
Ja no n’hi ha prou amb adaptar el web i prou. Ara cal pensar més enllà i prendre com a referència la usabilitat de les apps. Si aconseguim que la navegació pel nostre web s’assembli al màxim a una app, ens acostarem molt més a l’usuari i a la seva manera de navegar.
Un altre aspecte fonamental per a usuaris mòbils és optimitzar al màxim els temps de càrrega.
Alguns consells
- Elements com els vídeos, millor no carregar-los amb autoplay, ja que consumeixen dades i si l’usuari no té wifi li podem fer una mala passada
- Optimitza les imatges, servint versions adaptades a l’amplada del dispositiu, per millorar els temps de càrrega
- Utilitza menús tipus burger per comprimir la navegació en un format similar a una app
Webs que incorporen la tendència
Nicholas Munt
Aquest web, en utilitzar ajax per carregar cada pàgina, resulta molt amigable per a mòbils, ja que s’assembla molt a la navegació d’una app.
Salmoon & Sons
En la versió mòbil d’aquest web, destaca el slider amb funcionalitat swipe totalment adaptada, ja que la imatge es desplaça seguint el dit a la perfecció. També té un menú burger molt ben resolt, que es desplega des d’un lateral.
Volia
Com podeu veure, aquest web utilitza tipografies força grans, però fins i tot a la versió mòbil estan molt ben treballades. El menú burger també està molt ben implementat i ofereix una transició molt atractiva.
WOWWW TIO! ja tenim el nou post dels millors dissenys web 2019-2020!!!! Fes clic ara!!
Cursores i scrolls personalitzats
Una de les tendències que més estem veient i que guanya popularitat és la creació de cursores personalitzats en lloc del cursor per defecte del navegador.
Aquests cursores solen incorporar certa interacció amb els elements del web, canviant per exemple de mida, color, etc. És una de les tendències més recents i segur que continuarà creixent aquest 2020.
El mateix passa amb les scrollbars. Cada cop és més habitual utilitzar scrollbars completament personalitzades, obviant les del navegador. A més, solen incorporar desplaçament suau o smooth scrolling.
També veiem cada cop més webs que opten per no mostrar scrollbar, tot i que hi hagi més contingut a sota. Aquesta tendència, cada cop més present, segur que serà una de les protagonistes del 2020. La realitat és que l’usuari ja està tan acostumat a fer scroll que podem plantejar-nos eliminar la scrollbar per crear una interfície més minimalista. Si prescindir-ne et fa respecte, pots optar per no mostrar la barra però guiar l’usuari amb la típica icona de “scroll down”.
Com i quan aplicar-ho
Aplica aquesta tendència en webs que:
- Vulguis aportar un extra de personalitat
- L’usuari sigui avançat o acostumat a l’entorn digital
Tingues en compte que:
- Comprova que el scroll funcioni correctament en tots els navegadors
- En dispositius mòbils, el scroll pot donar problemes, així que el millor és ocultar-lo completament
Webs que incorporen la tendència
Aluxion
Aquí tenim un scroll personalitzat format per dues circumferències, una gran i una petita. Es mou seguint el cursor amb un petit retard i, a més, ofereix un efecte hover molt atractiu. També incorpora una scrollbar personalitzada, integrant tot el disseny.
Joseph Berry
