I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno

Indice dei Contenuti

I trend del web design sono in costante cambiamento in quanto seguono di pari passo le evoluzioni tecnologiche e i mutamenti culturali.

Ad oggi le possibilità tecniche e creative sono praticamente infinite e i designer possono giocare con gli estremi, reinventare stili precedenti e sperimentare nuove tecniche.

Allo stesso tempo, ci sono alcuni trend popolari che continuano ad essere presenti, come il minimalismo e le illustrazioni piatte e colorate che stiamo vedendo da un po’ di tempo.

Diamo un’occhiata ai trend di Web Design del 2020

1) Elementi e Rendering 3D

Sebbene non sia proprio una novità, nel 2020 potemmo vedere molti più rendering e modelli in 3D.

La crescita di questo trend è favorita dalle evoluzioni tecnologiche e dal miglioramento dei software di grafica che permettono ai designer di lavorare sul 3D in modo molto più semplice (ed economico).

Gli elementi in 3D spingono gli utenti a rimanere più a lungo su una pagina, risultano più immersivi e riducono visivamente i confini tra il mondo digitale e la realtà.

Alcuni grandi brand di articoli sportivi come Adidas utilizzano già elementi 3D statici, animati o interattivi.

Alcuni esempi di questo trend:

Elementi 3D Statici

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 1

Stuart.com

Elementi 3D Animati

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 2

Drinkdefy.com

Elementi 3D Interattivi

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 3

Interview.ueno.co

2) Dark Mode (modalità scura)

Uno dei trend di design più in crescita nel 2020 probabilmente è la dark mode, cioè offrire agli utenti la possibilità di abilitare un tema scuro.

La dark mode è un’interfaccia utente a bassa luminosità caratterizzata principalmente da sfondi scuri che oltre a conferire un look ultramoderno ha due principali benefici:

  1. Aiuta a ridurre il fastidio agli occhi modificando la luminosità dello schermo in base alle condizioni di illuminazione esterne.
  2. Prolungare la carica della batteria dei dispositivi riducendo l’uso di pixel bianchi.

Inoltre un tema scuro permette di ottenere un contrasto maggiore sugli schermi (sopratutto gli Oled) e migliora la visibilità degli altri colori e degli elementi di design che devono essere più evidenti (per esempio link e pulsanti).

Ti sarai probabilmente accorto/a che molte aziende come Apple hanno aggiunto la modalità chiara e scura ai loro prodotti.

Alcuni esempi di dark mode:

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 4

Un design che ho realizzato per un’azienda di exchange.

Awwards.com

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 5
iOS by Apple

3) Tipografia in grassetto e sovradimensionata

Per comunicare in modo chiaro e immediato, moltissimi siti web adottano immagini e video molto grandi (fullscreen), tipografia in grassetto e icone del menu sovradimensionate.

Questo trend è in costante crescita nel 2020 principalmente perchè offre alcuni vantaggi:

  • Catturano l’attenzione
  • Riducono il numero degli elementi presenti nella pagina e lo sforzo cognitivo nella fruizione dei contenuti
  • Aumentano il contrasto e migliorano la leggibilità del testo
  • Creano una gerarchia visiva che aiuta i visitatori del sito a comprendere i contenuti
  • Aumentano l’impatto visivo, sopratutto su sfondi neutri

Alcuni esempi di questo trend:

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 6

Finsweet.com

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 7

Cowboy.com

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 8

Samsung.com

4) Accessibilità per visitatori con disabilità

Una tendenza che potrebbe non essere particolarmente sexy – ma è molto importante – è l’accessibilità.

Rendere un sito web accessibile significa permettere l’accesso alle informazioni contenute nel sito anche a persone con disabilità fisiche e a chi dispone di strumenti hardware e software limitati.

Per maggiori dettagli sulle linee guida per rendere un sito accessibile, puoi consultare la documentazione ufficiale del W3C.

Ecco alcuni motivi per non sottovalutare questo trend:

  • Diversi siti web e proprietari di aziende sono stati citati in giudizio perchè non fornivano siti web accessibili, in particolare nei settori come la vendita al dettaglio, i servizi di ristorazione, alberghi, viaggi aerei.
  • C’è stato un aumento nel web design responsabile e nella responsabilità sociale d’impresa. Le persone stanno vedendo un buon ROI e commercializzabilità dell’accessibilità, ed è una cosa bella da pubblicizzare.

Possiamo dire che questo trend di Web Design non è molto alla moda ed elegante ma è sicuramente una responsabilità importante dei designer durante la progettazione di interfacce web.

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 9

5) Micro animazioni e micro interazioni

Le micro interazioni, comunemente chiamate UI Animations, vengono applicate a piccoli elementi di una pagina web ma ricoprono un ruolo significativo nel creare siti web più “umani”.

Quando carichi un file, cliccando il pulsante di upload e vedi che la barra di stato passa da 0% a 100%, ecco quella è una micro interazione.

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 10

Le micro interazioni fanno “sentire” all’utente cosa sta facendo.

Lasciano interagire l’utente su un livello che si sente tangibile e palpabile.

L’utente riceve un feedback istantaneo e una convalida emotiva.

A primo impatto, questi aspetti non sembrano poi così significativi.

Ma nel complesso, all’interno di un sito web, aggiungono davvero un’esperienza immersiva e coinvolgente, trasformando delle banali funzioni in qualcosa di veramente memorabile – e contribuiscono enormemente a migliorare l’esperienza utente.

Per far funzionare questa tendenza, pensa su quali aree del sito vorresti attirare l’attenzione.

Tieni presente che può essere una distrazione quando ne abusi, quindi assicurati di applicarle solo in punti strategici, in modo da supportare lo storytelling del tuo sito.

6) Design Minimalista colorato

Per design minimalista si intende un ampio utilizzo degli spazi bianchi

rimuovendo i dettagli e le decorazioni inutili senza elementi di distrazione all’interno della gerarchia visiva.

Lo stile minimalista non è un nuovo trend del 2020 ma quest’anno potremmo vedere uno stile minimalista più colorato.

Un bell’esempio di design minimalista colorato è il sito di Shopify.

Ogni pagina del sito è caratterizzata da sfondi tenui, testi chiari ed elementi di design molto minimali per ottenere una pagina che cattura l’attenzione ma che allo stesso tempo non stanca gli occhi e non risulta noiosa.

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 11

Shopify.com

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 12

Envato Elements

7) Colori vividi e ben contrastati

Design e schemi di colore futuristici molto probabilmente saranno un altro dei trend in crescita quest’anno. Uniti a coraggiosi accostamenti di colore vengono usati strategicamente per rendere il web design più pungente.

Colori decisi, vividi e molto saturi aiutano ad uscire fuori dal coro e vanno in contrapposizione ai colori neutrali morbidi che molte aziende hanno scelto negli ultimi anni.

L’utilizzo di colori al neon in combinazione con con sfondi scuri conferiscono al design un effetto luminoso.

In particolare un design doppiotono (duotone) rende questo trend ancora più evidente.

Alcuni esempi di questo trend:

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 13

ddd.it

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 14

Credits: Mentorgram

8) Illustrazioni che combinano arte e design

Usare delle vere foto mischiate con illustrazioni o elementi grafici comunica un messaggio veramente personale.

Questo tipo di immagini supporta pienamente il brand e aiuta a distinguersi.

Sovrapporre degli elementi grafici a delle foto reali crea un impatto visivo indimenticabile che da la sensazione di una creatività un pò selvaggia.

Questo nuovo trend del 2020, molto simile ad un collage è anche molto versatile.

Puoi usarlo per aggiungere una particolare caratterizzazione e fascino alla foto di un prodotto oppure puoi utilizzare dei dettagli più seriosi per comunicare meglio concetti complessi come il tech o la finanza.

È un ottimo modo per personalizzare le immagini e aggiungere più personalità al tuo web design.

Per sfruttare al massimo la flessibilità di questo trend, assicurati di fondere bene lo stile delle illustrazioni e degli elementi grafici con la personalità del tuo brand.

Per esempio, potresti usare degli scarabocchi nei cartoon per ottenere un effetto più giocoso, oppure elementi geometrici e dettagliati per qualcosa di più sofisticato.

Alcuni esempi di questo trend:

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 15
I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 16

Credits: ashishrai977

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 17

Indnegev.co

9) Griglie e finestre a vista

Negli ultimi tempi il web design prende sempre più ispirazione dai sistemi operativi e dalle app, in questo modo i siti web posso assumere un aspetto sia contemporaneo che nativo.

Grazie a questo nuovo trend, le griglie e le linee guida che solitamente usiamo noi web designer per la progettazione di interfacce, adesso sono a vista.

Rettangoli e linee, dividono lo schermo in sezioni e guidano gli occhi nella giusta direzione di lettura.

Questo tipo di design può essere smussato, accennando delicatamente alla forma oppure più esplicito con un design che richiama i primi tempi dei computer.

Alcuni esempi di questo trend:

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 18

Stylenovels.com

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 19

Forwardyou.com

10) La Realtà Aumentata (Ar)

Questa innovazione tecnologica è già presente da un pò di tempo, però quest’anno forse ci troviamo ad un punto di svolta.

Molte persone credono che l’impatto maggiore si avrà nel settore eCommerce.

La realtà aumentata non è altro che un mix di realtà e realtà virtuale.

Un classico esempio è Pokèmon Go, il gioco per smartphone in cui i personaggi Pokèmon sono “sovrapposti” al mondo reale, quindi abbiamo una combinazione sensoriale di realtà e realtà virtuale.

Le possibilità di utilizzo di queste tecnologie possono essere ampie e variegate.

Molti eCommerce hanno già implementato nei loro siti web queste tecnologie che permettono ai clienti di provare virtualmente i prodotti, per esempio dei vestiti, dei gioielli, le scarpe e il make-up oppure permettono anche di vedere prima dell’acquisto come un certo prodotto starebbe nelle propria casa o ufficio.

L’esempio più calzante è Ikea che con la sua app Ikea Place permette di inquadrare la tua stanza tramite lo smartphone per provare i loro prodotti ed essere così più sicuri in fase di acquisto.

L’adozione di queste tecnologie porta un notevole vantaggio nel settore delle vendite online perchè permette ai consumatori di effettuare acquisti con sicurezza.

Un altro bell’esempio di utilizzo di questa tecnologia lo troviamo sul sito di ottica Specsavers. Cliccando sul pulsante Vitual Try On è possibile abilitare la scansione del volto e provare i vari modelli di occhiali.

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 20

11) Interfacce Vocali

Le tecnologie vocali sono un altro settore in forte crescita e l’impatto sui trend del web design per il 2020 riguarderà il modo in cui cerchiamo le informazioni online.

I controlli vocali, soprattutto in casa, stanno diventando parte integrante delle nostre abitudini e stanno cambiando totalmente le nostre esperienze digitali negli ultimi anni.

Le interfacce utente vocali (VUI), migliorano l’esperienza di utilizzo rendendo la navigazione dei siti web e gli acquisti online più semplici che mai.

Sempre più aziende iniziano ad ottimizzare i dati strutturati anche per le ricerche vocali in modo da renderli più efficaci da utilizzare con le tecnologie di intelligenza artificiale come la ricerca vocale di Google e Alexa.

Avere una “conversazione” con il sito web che stai visitando sicuramente è una cosa figa ma la cosa più importante è che sarà anche molto utile per aiutare le persone con disabilità ad interagire meglio con i siti web.

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 21

12) Navigazione in basso (stile App) a portata di pollice

Hai mai interagito con un sito da mobile che non funzionava bene tenendo lo smartphone con una mano?

Ti sarà capitato di doverti sforzare per riuscire a toccare il menu o qualche elemento importante della pagina con il pollice.

Questo accade quando nella progettazione del sito non si tiene conto della navigazione usando il pollice.

La cosidetta Thumb Zone è quella parte dello schermo che permette di navigare senza difficoltà un sito da mobile usando una sola mano.

Nell’immagine qua sotto puoi vedere come gli elementi più importanti di un sito sono facilmente raggiungibili col pollice se posizionati in basso e al centro.

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 22

Fonte: SmashingMagazine.com

L’esempio di una perfetta ottimizzazione “a prova di pollice” sono le App per smartphone.

Come puoi vedere nell’immagine le applicazioni nascono ottimizzate per l’utilizzo con una mano, infatti il menu con le voci più importanti si trova nella parte bassa dello schermo.

I trend di Web Design del 2020: le 12 tendenze da tenere d’occhio quest’anno 23

Considerazioni Finali

Come avrai capito nel 2020 il web design non sarà estremamente innovativo in termini di visual ma seguirà di pari passo le tecnologie più attuali.

Il tuo sito web è pronto per il 2020?

Ho scritto questo articolo per aiutarti a capire quali sono i trend più importanti da tenere d’occhio quest’anno, se vuoi suggerire altri trend da seguire, lascia un commento, rispondo sempre 😉

Tu cosa ne pensi? Sei d’accordo con questi trend?

Ti è stato utile questo articolo?

[Voti: 4    Media Voto: 5/5]

All’interno degli articoli potrebbero essere presenti dei link affiliati.
Ci tengo a precisare che tutti i link di affiliazione sono di prodotti e servizi che ho testato, che utilizzo e in cui credo veramente.
Nel momento in cui un prodotto risultasse non più il top, rimuoverei immediatamente tutti i relativi link.

foto gabriele iacovone

Gabriele Iacovone

Web Designer WordPress

Ciao, mi chiamo Gabriele e sono un Web Designer freelance e autore del blog.
La mia passione per WordPress mi spinge ad aiutare persone, aziende e professionisti nello sviluppo di Siti Web potenti e flessibili.

Ricevi i miei consigli e le guide su WordPress e il Web Design

  • Non preoccuparti, niente spam.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

 

Condividi su linkedin
Condividi su facebook
Condividi su twitter
Condividi su whatsapp
Condividi su telegram
Condividi su linkedin
Condividi su facebook
Condividi su twitter
Condividi su pinterest