Web Design

Le 11 migliori tendenze di web design e del 2020

Nuovo anno, nuove tendenze del web design.

Pubblicato il 10.02.2020

Nuovo anno, nuove tendenze di Web Design.

Stiamo già iniziando a vedere alcuni elementi di design che saranno i trend 2020 (e forse oltre). La maggior parte di queste tendenze son l’evoluzione di progetti di design dell’anno precedente.

Troveremo gradientidesign tipografico e un sacco di minimalismo.  

Ma stanno emergendo anche nuove tendenze, progetti che presentano “modalità scure”, interfacce con elementi audio e template con immagini ed elementi 3D. 

Web Design 2020 e tendenze dell'interfaccia utente.

Minimalismo + Spazio bianco

Il minimalismo è una di quelle tendenze di design che non morirà mai!!

La peculiarità  di questa tendenza di design è che mentre rimane forte, continua ad evolversi. Il minimalismo nel 2020 è caratterizzato da ampie strisce di spazio bianco, disposte in modo asimmetrico.

Mentre la lavagna ha uno stile minimalista più classico – forse anche super minimalista – Soldo usa il nuovo minimalismo in modo magnifico. La foto semplice con dettagli bianchi, poggia su uno sfondo bianco asimmetrico per aiutare gli utenti a scorrere il contenuto.

Entrambi gli esempi mostrano perché il minimalismo funziona: sono eleganti, belli e rende l’esperienza utente altamente intuitiva.

Design "Dark Mode"

Con così tanti utenti che optano per la “modalità oscura” sulle app (vedi Instagram) e per le caselle di posta, non sorprende che anche altri siti web stiano creando progetti con un’estetica scura.

Ultime ricerche affermano che gli utenti preferiscono navigare su pagine web con sfondo nero.

Ciò che rende piacevoli questi progetti in modalità oscura – e probabilmente il motivo per cui sono di tendenza – è che le interfacce scure sono integrate con elementi di accento luminoso e tipografia di facile lettura per garantire che il design sia leggibile e piacevole.

CanneSeries lo fa con colori accesi andati quasi verso l’effetto neon e animazioni con scritte in grassetto, mentre Davenport utilizza lettere maiuscole bianche e un elegante colore dorato per inviti all’azione e altri elementi cliccabili.

Regole Tipografiche di Rottura

La chiave di questo nuovo trend mixa il minimalismo (sopra citato) con elementi poco intuitivi in moda da suscitare nel visitatore interesse. Più comunemente, la tipografia in questo stile è più un elemento artistico e meno informativo.

J Powers Events infrange le regole tipografiche, non pregiudicando la leggibilità, inserendo un titolo principale che attraversa lo spazio dello sfondo e l’immagine in primo piano. Ciò che è particolarmente interessante qui è che il titolo cambia colore con il posizionamento, creando un effetto di livello.

Makers & Dreamers usa un design tra i miei preferiti che incarna perfettamente il mood di questo trend. Scritte quasi illeggibili e design minimalista si fondono per creare un template omogeneo e pulito.

Illustrazioni artistiche

Le illustrazioni artistiche, in particolare elementi con disegni in stile matita e accenni di animazione, continuano a crescere di popolarità. Questa tendenza sembra aver guadagnato terreno perché da la percezione di autenticità, non è invasiva ma al tempo stesso rende l’esperienza utente unica ed intuitiva.

Absurd Illustration rappresenta questo stile con una collezione di elementi artistici, fantasiosi, creativi e un po “audaci”. Ogni illustrazione è fatta per apparire come se fosse stata disegnata sullo schermo.

Heschung utilizza semplici illustrazioni in stile matita per raccontare una storia con animata. Le illustrazioni sono ugualmente stravaganti e la semplicità del design aiuta a mantenere l’attenzione sulla storia.

 

Mix tra illustrazione e realismo

Questa tendenza 2020 combina elementi illustrativi o disegni con immagini o foto realistiche creando nell’utente confusione inconscia che genera un interesse spontaneo.

Un trend da tenere d’occhio che potrebbe essere il protagonista di molte operazioni di rebranding.

Il sito Web di Constance Burke non potrebbe rappresentare più chiaramente questo trend: un volto reale che indossa abiti illustrati.

Animazione Liquida

Quasi tutti i siti Web su cui approdi sembrano includere una qualche forma di animazione. Ciò che è veramente di tendenza è l’animazione in stile liquido con movimento che sembra simile all’acqua.

L’animazione liquida può funzionare per intere scene come un modo per trasferire elementi video, come uno stato al passaggio del mouse per attirare i clic o come animazione generale per attirare gli utenti a navigare all’interno del sito web. Il trucco per far funzionare questa tendenza è la velocità di movimento. Deve essere liscio, fluido e perfettamente sincronizzato per creare la sensazione più realistica possibile. (Vi garantisco che non è affatto semplice).

Toonami utilizza l’animazione liquida come uno stato al passaggio del mouse per dare ulteriore movimento agli elementi sullo schermo. Il video di sfondo “liquifica” così come il blocco di testo.

Ilya Kulbachny utilizza l’animazione liquida per il titolo del sito Web del suo portfolio. (Questo potrebbe essere uno dei migliori utilizzi di questa tendenza dI design.) Le parole fluttuano sullo schermo e hanno uno stato di passaggio del mouse aggiuntivo che sposta la sua immagine e le parole associate.

3D

L’aggiunta di profondità crea un maggiore senso di realismo del template. Le immagini tridimensionali sono un’estensione di quell’idea. È una tendenza che abbiamo iniziato a vedere molto verso la fine del decennio e prevediamo di vedere molto di più nel 2020.

I migliori progetti 3D offrono agli utenti qualcosa di inaspettato, come la maschera che si rompe sul sito Meetup Metaconf o lo scorrimento laterale per piccole scarpe sul sito Toke.

Esperienze Audio

Non sono mai stato un fan del suono con riproduzione automatica su un sito Web, lo trovo piuttosto invasivo, ma non si può negare che sia una delle nuove tendenze del 2020 se costruita rispettando l’utente. 

Ricorda di chiedere all’utente prima di far partire la musica all’interno del tuo sito web.

La Ofrenda Mas Grande de Mexico e IFly Magazine rispettano entrambe questa regola e usano il suono per migliorare la qualità dell’esperienza utente. 

Questa tecnologia viene spesso utilizzata nei progetti in cui esistono barriere linguistiche, perché la musica può essere un grande unificatore quando si tratta di narrazione basata sul web.

Strati che si sovrappongono

Livelli su livelli. I livelli e gli elementi sovrapposti non creano un effetto 3D, ma aggiungono un senso di profondità e dimensione ai progetti.

Mentre i livelli sovrapposti possono presentarsi sotto forma di un singolo elemento, questa tendenza spesso include più elementi sovrapposti. La parte migliore è che funziona con quasi ogni tipo di schema di progettazione.

È possibile sovrapporre caselle e sfondi, immagini o video, testo o elementi dell’interfaccia utente e icone. La parte più complicata potrebbe essere quella di garantire che l’aspetto sovrapposto non renda l’esperienza utente difficile e confusionaria.

Craft Kitchen utilizza più elementi sovrapposti: foto, testo all’interno delle foto e immagini che si sovrappongono su più livelli. Gli elementi continuano a sovrapporsi durante lo scorrimento dell’interfaccia utente.

Il sito di Curt Thompson MD lo fa con forme rettangolari e angoli arrotondati. Un modo semplice ma efficace di focalizzare la priorità degli elementi attraverso la loro sovrapposizione.

Gradienti che cambiano colore

Dagli sfondi audaci con sfumature multicolori a sfumature sottili, questa tendenza è ormai ovunque. 

Ciò che stiamo vedendo oggi, sono i gradienti che combinano colori con un contrasto netto tra loro, a differenza di gradienti più tenui e meno invasivi.

Bariskuran utilizza un gradiente netto per il design del portfolio che ha un grande impatto visivo.

Arjay Studio utilizza per il design del suo Sito Web gradiente per gli elementi di testo e per le “bolle” nel visual AR. 

Tale design è popolare soprattutto tra aziende che fanno della “grafica” il loro core business.

Navigazione ottimizzata

La tendenza di navigazione di quest’anno potrebbe essere la fine dei mega menu per sempre. Stili di navigazione ottimizzati stanno sicuramente prendendo il sopravvento.

Sebbene all’inizio possa sembrare un’idea rischiosa, in realtà ha molto senso. La maggior parte degli utenti accede al tuo sito Web tramite motore di ricerca e potrebbe non avviarsi sulla home page. Meno percorsi di navigazione creano un percorso più diretto verso il punto in cui desideri che gli utenti interagiscano maggiormente. Semplifica gli stili di navigazione offrendo più spazio alla creativita ma soprattutto accompagna l’utente verso il punto d’arrivo.

Quindi perché non provarci?

Bikebear utilizza la forma più comune di navigazione semplificata, con voci di menu all’interno di un’icona. L’icona si apre in un elenco di opzioni a schermo intero.

Uniel mette anche la navigazione in una piccola icona (menu hamburger). Si apre su desktop e dispositivi mobili allo stesso modo, creando un’esperienza coerente.

Morale della Favola

Hai notato guardando attraverso gli esempi, quante tendenze si sovrappongono?

Prendi nota dell’esempio sopra di Sony Music. Utilizza gradienti, uno stile minimalista, un’animazione liquida e infrange le regole tipografiche mentre l’animazione si interseca nello spazio del testo. (FANTASTICO !!!)

Molti elementi di design moderno lavorano tra loro, quindi puoi mescolare e abbinare tendenze e stili per creare qualcosa di trendy e sofisticato. Spesso siamo indirizzati ad utilizzare un unico stile di progettazione, ma con la giusta mescolanza di stili potremmo avere un risultato SENSAZIONALE !!!

Fin quando il design e le tendenze in ambito di progettazione web contribuiscono a migliorare l’esperienza utente puoi continuare a giocarci quanto vuoi ma RICORDA il tuo Sito Web deve essere un ambiente idele per i tuoi potenziali utenti.

Michele Natuzzi

Web Designer & Growth Hacker

Condividi l'articolo

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest
powered by Typeform

Mi hai preso

Ora potrai richiedere la tua consulenza, scegliere tra Web Design, Social Media e Growth Hacking