Si el que vols és estar al dia i començar l’any amb els deures ben apresos, aquest article l’he escrit especialment per a tu. Desgranaré les tendències en disseny web per al 2020 que la petaran.
Si el llegeixes atentament és possible que et converteixis en un expert en tendències en disseny web, si més no per a l’any 2020.
Pots veure el post ampliat a Code Barcelona, on he analitzat amb més profunditat cadascun dels punts: Tendències en disseny web per al 2020
Tendències en disseny web per al 2020, be ahead
Tipografies encara més grans
Una de les principals tendències en disseny web per al 2020 serà sens dubte l’ús de tipografies de gran mida totalment integrades en el disseny web.
És un recurs que no només trobarem en titulars, sinó que serà present en tot el text.
Les pantalles de gran format són a tot arreu; amb les seves grans prestacions i el seu preu baix fan possible que alguns dissenys se’n puguin beneficiar.
En quin disseny web puc aplicar aquest recurs?
- Quan el disseny sigui molt visual i de gran impacte.
- Dissenys web amb poques imatges i on vulguis reforçar el missatge sense carregar de text el web.
- Dissenys web dirigits a públic atrevit.
- Dissenys web dirigits a públic amb pantalles grans.
Recorda que:
- Hauràs d’ajustar les mides a les diferents resolucions de pantalla creant excepcions de pantalla responsive.
- Hauràs de parar molta atenció a la versió de telèfon mòbil responsive.
Pàgines web que incorporen aquesta tendència
Rogue Studio
Disseny web en què veureu clarament l’ús d’aquesta tendència en disseny web: aquí l’autor ha fet servir tipografies que van de grans a gegants.
Granyon Summer Party
Un altre exemple de l’ús de tipografies extragrans en un disseny web amb un resultat perfecte.
Team Elite Kickboxing
Un últim exemple de l’ús de grans tipografies en un disseny web.
Contrastos, colors negatius i colors estridents
Aquest recurs, que té un llarg recorregut, fa uns quants anys que apareix a les tendències en disseny web i cada cop s’aplica millor.
Els contrastos i els colors i formes negatius pegaran fort durant l’any 2020, any en què veurem com s’ha polit aquest recurs de disseny web fins a la perfecció.
En quin disseny web puc aplicar aquest recurs?
- En dissenys web molt visuals.
- Dirigits al públic més atrevit.
- Quan vulguis deixar la gent amb la boca oberta.
Recorda que:
- Els projectes corporatius per a empreses conservadores encara no estan preparats per a això.
- Fes servir aquest recurs de manera coherent amb la imatge de l’empresa i els seus colors.
- Mantén l’harmonia visual del conjunt de colors.
Pàgines web que incorporen aquesta tendència
Ninja guru
En aquest disseny web podem apreciar aquest recurs de manera excel·lent. S’han utilitzat colors negatius i contrastos estridents per a un disseny web de 10.
Festa da Francofonia 2019
En aquest exemple hi ha colors vius, contrastos i elements geomètrics en moviment: un disseny web que perfectament podrà guanyar-se un lloc entre els millors dissenys web del 2020.
Kombu
En el disseny d’aquesta pàgina web podem veure el contrast del packaging de la marca; a més, hi podem veure l’efecte «wavy» per a les línies diagonals que coincideixen i guarden coherència amb tota la identitat del branding.
Experiència mòbil, encara més important
Ja ningú no dubta que el responsive web design ha de ser present en tots els nostres dissenys web, ja que el disseny web adaptable és un «must» de les tendències en disseny web des que es van adonar que la majoria dels usuaris entren a Internet a través dels seus dispositius mòbils o tauletes.
En quin disseny web puc aplicar aquest recurs?
- En tots sense excepció.
Recorda que:
- Cal cuidar la velocitat de càrrega del contingut a tots els dispositius.
- Les infraestructures encara no estan preparades per carregar vídeos en les versions mòbils.
- Hauràs d’optimitzar les imatges.
- Fes servir el menú burguer.
Websites que incorporen la tendència
Nicholas Munt
El disseny d’aquesta pàgina web utilitza ajax per carregar la pàgina i el resultat és molt mobile friendly, ja que té una navegació molt app like.
Salmoon & Sons
En aquest exemple, de la versió per a mòbil en destaquem el slider amb una funcionalitat swipe totalment mobile friendly.
Volia
Aquest exemple va molt bé per veure l’ús de grans tipografies en la versió mòbil i l’ús de menú burguer.
Cursors i scrolls personalitzats
Una altra tendència en disseny web que la petarà durant el 2020 és la incorporació, com a part del disseny, de cursors i scrolls personalitzats; el resultat és una experiència d’usuari molt més personal, ja que incorporen alguna interacció.
En quin disseny web puc aplicar aquest recurs?
- En un disseny web amb un extra de personalitat.
- Per a usuaris que tinguin moltes hores de vol en línia.
Recorda que:
- Abans de llançar el web en línia hauràs de comprovar que el scroll funcioni en diferents navegadors.
- Els dispositius mòbils acostumen a tenir problemes amb els scroll, així que tingues-ho en compte quan plantegis el disseny.
Websites que incorporen la tendència
Aluxion
Exemple en què veiem un punter personalitzat que forma dues circumferències; el cursor es desplaça amb un petit delay i amb un hover molt atractiu. A més, hi veiem la scrollbar personalitzada.
Joseph Berry
Un altre exemple d’aplicació d’aquesta tendència en disseny web 2020, similar a l’anterior.
Matt VBRG
En aquest disseny web el cursor interactua amb tot el contingut de la pàgina web, canvia de colors els elements i aplica efectes molt atractius a les imatges.
Canvas i elements 3D amb Three.js
L’ús de Canvas en els dissenys web més trendy és una tendència en disseny web que s’ha posicionat amb fermesa en aquest llistat. I és que amb Canvas podem crear, juntament amb OpenGL, experiències que literalment se surten del simple HTML.
En quin disseny web puc aplicar aquest recurs?
- Per a dissenys web en què vulguem crear un efecte de profunditat.
- En dissenys web amb objectes 3D amb què interactuar.
- En dissenys web de gran impacte.
- Públic atrevit.
Recorda que:
- Un gran poder requereix una gran responsabilitat.
- No tots els dispositius estan preparats per a aquest recurs, així que hi hauràs de parar especial atenció.
DMC2019
En aquest disseny web s’ha utilitzat Three.js per a la seva creació, amb un resultat molt especial.
Hack Wired
Utilització d’aquest recurs per crear un efecte de xiclet en moviment i canvi de forma que interactua amb el cursor.
Vladimir Gruev
Aquest desenvolupador web ha optat per fer servir la tecnologia Canvas per mostrar tot el seu potencial creatiu i oferir-nos una experiència de navegació totalment avantguardista.
Canvas i efectes de distorsió en imatges
Aquesta tendència en disseny web per al 2020 està niada dins de l’anterior, ja que aprofita la tecnologia Canvas per generar distorsions en les imatges que posem al disseny web. El resultat és molt transgressor.
En quin disseny web puc aplicar aquest recurs?
- Per a dissenys web molt creatius.
Recorda que:
- Igual que abans: un gran poder comporta una gran responsabilitat.
- Hauràs de parar atenció a les versions en diferents dispositius.
Websites que incorporen la tendència
Francesco Michelini
Aquest developer ens mostra com es fa servir aquest recurs tan trencador i quin és el seu resultat.
Julio Cesar
Un altre exemple de la utilització de Canvas per distorsionar les imatges amb un resultat de gran impacte i creativitat.
Violence
Últim exemple d’aquest llistat amb les tendències en disseny web del 2020, en què l’efecte de distorsió de les imatges és molt «grunge».
Conclusions i resum per a mandrosos
Tal com haureu endevinat, les tendències en disseny web del 2020 cada cop tenen més en compte la personalització dels dissenys i paren especial atenció a l’experiència dels usuaris.
Tots som especials i volem que ens ho facin sentir.
Post complet
Pots veure el post ampliat a Code Barcelona, on he analitzat amb més profunditat cadascun dels punts: Tendències en disseny web per al 2020
Sobre això treballo aquí
Aquesta edició és del 2020. L’actual i l’enfocament amb què ho aplico tot:
