Tendenze del web design-2021

Tendenze del web design 2021: effetti 3D, scrollytelling e più interazione

Dopo un anno come quello che abbiamo appena vissuto, azzardare una prospettiva sulle prossime tendenze assume proporzioni quasi utopiche. Dopo tutto, chi avrebbe pensato nel 2020 quanto velocemente il mondo può cambiare e cambierà? E quanto velocemente possiamo adattarci ai cambiamenti. Diamo uno sguardo alle tendenze del web design del 2021 insieme!

Lanuova normalità ci ha tutti in pugno: per noi la tecnologia è diventata più importante ed é più integrata nella nostra vita quotidiana. Di conseguenza la nostra tecnologia deve muoversi in una direzione, che permetta una maggiore personalizzazione, integrazione e interazione. E per tutti quanti noi. 

Lockdown, home office e simili hanno spostato la nostra attenzione più verso il digitale. Tuttavia questa tendenza ha provocato anche una rapida crescita dei prodotti digitali. Lo stesso vale per il settore dell'E-Commerce. Tutto questo richiede maggiore individualità e abilità, per essere in grado di posizionarsi bene contro un sempre maggiore numero di concorrenti.

In questo momento è particolarmente importante concentrarsi sugli utenti finali. Si tratta di stupirli, integrarli e personalizzare internet. E di mantenere la concentrazione sempre sulla massima funzionalità.

Tra dimensione e interazione

Per questo vediamo nel nuovo anno maggiori opportunità di personalizzazione. Vediamo sempre più spesso la possibilità di passare dalla modalità Dark/Light o anche di personalizzare i colori di uno stesso design.

Vediamo design più audaci e meno simmetrici. Rimane la controtendenza verso l'integrazione di colori ed elementi organici. Otteniamo maggiore personalità grazie a collage, media misti e l'integrazione di effetti di animazione. Diamo un'occhiata alle tendenze del web design 2021 in dettaglio!

Animazioni di parallasse e di scorrimento in parallasse

La parallasse, soprattutto con immagini semplici, la usiamo giá da diversi anni. Recentemente abbiamo aggiunto complesse animazioni di scorrimento in parallasse. Usate correttamente, trasformano il tuo sito web da uno sfondo piatto in 2D in un mondo digitale interattivo - paragonabile a un palcoscenico teatrale.

Cos'è l'effetto parallasse?

Gli effetti di parallasse si verificano quando gli elementi si trovano posizionati a distanze diverse l'uno dall'altro. Quando questi si muovono per scorrimento, percepiamo il loro movimento con velocità diverse.

Si prega di notare: Per gli utenti che soffrono di vertigini, troppo movimento sul sito web potrebbe causare disagio.

Alcuni consigli su come integrare con successo l'effetto di parallasse:

  • Assicurarsi che le informazioni importanti siano sempre presentate in modo chiaro e che non vengano sopraffatte dall'effetto.
  • Assicurarsi che la completa funzionalità del sito venga mantenuta su tutti i dispositivi - anche in condizioni non ottimali, come con una cattiva ricezione di Internet.
  • Ridurre al minimo l'uso di effetti di parallasse.
  • Considera di includere un'opzione per disabilitare l'effetto.
Tendenze del web design-2021

Il sito web per il gioco Firewatch usa otto diverse immagini PNG nell'intestazione, tutte animate insieme in modo da trasmettere la sensazione di essere in un paesaggio reale. Nella versione mobile, invece, l'effetto di parallasse è sostituito da un'immagine statica.

Animazioni di scorrimento

Anche le animazioni a scorrimento estensivo non sono del tutto nuove, ma hanno avuto finora poca attenzione - probabilmente anche perché la loro composizione richiede una certa abilità nel disegno. Come sempre vale la regola, meno è meglio. Se usate bene, le animazioni a scorrimento rendono il sito web piuttosto armonioso. 

Tendenze del web design-2021

ToyFight è un'agenzia creativa con sede a Manchester. Attraverso l'uso intelligente di animazioni a scorrimento, l'agenzia aggiunge vivacità e personalità al tuo sito web. Le animazioni funzionano anche sui dispositivi più piccoli - ma il tempo di caricamento ne risente un po'.

Tendenze del web design-2021

La società Prevint offre un concetto globale contro la violenza sessualizzata. Grazie all'uso minimo di animazioni a scorrimento vengono visualizzate le tre precauzioni più importanti per la prevenzione. Qui é particolare l'uso dello scorrimento verticale e orizzontale: La navigazione principale è su un livello verticale, mentre lo scorrimento orizzontale va più in profondità in un determinato argomento.

Le frecce di navigazione nella parte inferiore dello schermo forniscono un ulteriore orientamento. Sulla pagina mobile la navigazione avviene solo toccando i pulsanti.

Scorrimento orizzontale

Anche se in passato le opinioni sullo scorrimento orizzontale sono state molto contrastanti, oggi viene usato sempre piú spesso dai siti web. Soprattutto dal punto di vista dell'esperienza dell'utente il loro uso era precedentemente considerato piuttosto discutibile.

Tendenze del web design-2021

Il sito web di Home Société, costruito come un one pager, funziona completamente orientato orizzontalmente. La Sticky Navigation, che di solito si trova in alto, è invece sul lato sinistro. Funziona con gli Anchor Links allo stesso modo come in un one pager orientato verticalmente. Sul cellulare la pagina viene visualizzata verticalmente.

Tendenze del web design-2021

Il sito web di Kwok Yin Mak è un portfolio di design che scorre orizzontalmente attraverso tutte le pagine integrate. La differenza con la Home Société è l'uso delloscorrimento infinito: quando si arriva alla fine di una pagina, si viene riportati all'inizio senza alcun avviso. Anche questa pagina fa a meno dello scorrimento orizzontale sulla visione mobile.

Alcuni consigli su come integrare con successo lo scorrimento orizzontale:

  • Dai ai tuoi utenti un piano B, come le frecce o uno sticky menu, per navigare sul tuo sito.
  • Pensa a quale dei contenuti della tua pagina beneficerà dello scorrimento orizzontale.
  • Cerca di attenersi ad una direzione il più possibile. Passare troppo spesso da una direzione all'altra confonderà i tuoi utenti.
  • Fate attenzione al mix di testi lunghi e allo scorrimento orizzontale. Questo layout può rendere i tuoi testi meno leggibili.

Quale font è adatto al mio sito web?

Un font adatto non solo rende il tuo sito web molto più interessante dal punto di vista visivo. I caratteri hanno un'influenza decisiva sul fatto che sezioni di testo vengano ignorate o lette. In questo Articolo Ti mostro come trovare il font perfetto per il tuo sito web!

Scrollytelling

Scrollytelling significa narrazione visiva attraverso lo scorrimento animato. Questo dà al sito web una certa personalità e un senso di interattività. I contenuti lunghi sono presentati in modo facilmente digeribile. Le storie vengono costruite in modo piuttosto interessante e comunicate in modo più attraente. Internet è sempre più utilizzato come mezzo per la narrazione interattiva. 

Tendenze del web design-2021

IlNew York Times usa qui un approccio relativamente minimalista. L'immagine dell'intestazione consiste in un effetto di parallasse seguito da molto testo. Questo è racchiuso in paragrafi chiari ed è visivamente supportato da sezioni in parallasse in stile fumetto.

Migliori pratiche, consigli e linee guida nel web design

Cosa fa un buon web design? E cosa definiamo come standard design? Puoi trovare consigli importanti per siti web di successo nel mio articolo sulle Migliori pratiche nel web design.
Tendenze del web design-2021

Un esempio interessante è anche Webflow. Il sito invita a un viaggio attraverso la storia dell'arte alla ricerca delle tendenze del web design del futuro.

canals-amsterdam.nl combina lo scrollytelling con la navigazione orizzontale, l'animazione e il parallasse. Un dettaglio particolare: lo sticky menu cambia il colore dello sfondo a seconda del colore della posizione in cui si trova. Maggiori informazioni su questo argomento si possono trovare nella Guida allo Scrollytelling.

Schede di scrolling

Per schede di scrolling intendiamo lo scorrimento verticale o orizzontale, che passa alla finestra successiva prima di continuare a navigare. Tutto questo si può evidenziare visivamente, per esempio, grazie a separazioni di colore, che sembrano essere carte, come nell'esempio di Green Meadow.

Tendenze del web design-2021

Altre particolaritá sono le animazioni di testo, che continuano a ricaricarsi, e lo scorrimento infinito, che ci dà la sensazione di un sito web infinito.

Integrazione delle caratteristiche fisiche del prodotto da vendere

Tendenze del web design-2021

Ora London vende tra le altre cose smalto per unghie. Per il design del layout del loro sito web usano la texture del loro prodotto.

Tendenze del web design-2021

Sul sito web di Main Squeeze Juice ci sono macchie di colore, che potrebbero ricordare una versione slavata dei loro succhi di frutta. Questo effetto viene usato anche per alcune intestazioni.

Tendenze del web design-2021

Ora The Floral Agency ha messo in evidenza visivamente sul loro sito web i fiori della loro gamma. 

Neomorfismo

Il neomorfismo o nuovo morfismo giá da un po' di tempo è stato considerato una tendenza. Ma il motivo per cui i design minimalisti sono stati trattati con avversione nella scena creativa è dovuto principalmente a queste due ragioni:

  1. Il neumorfismo è difficile da riprodurre. Se non viene creato correttamente, il design appare subito poco professionale.
  2. Attraverso le ombre morbide e il basso contrasto gli elementi del design del nuovo morfismo possono causare problemi all'utente finale. 

Nel 2021 la tendenza del neomorfismo è destinata a decollare. Il modelloNuova tisione mostra un'integrazione di neomorfismo per tutti.

Tendenze del web design-2021

Tutorial: come creare elementi di neomorfismo

Con il tool Neumorphism.io puoi metterti alla prova con il neomorfismo. Il codice CSS corrispondente è incluso nel pacchetto. È possibile trovare maggiori informazioni sull'argomento qui in questo articolo.

Composizioni astratte, collage e media misti

Come giá detto, i siti web sono autorizzati a mostrare una maggiore personalità. Questo si puó ottenere attraverso composizioni astratte o collage. È anche possibile mescolare diversi media - come illustrazioni disegnate a mano abbinate a forme geometriche perfette.

Tendenze del web design-2021

City Circus usa i collage dappertutto nel tuo sito web.

Sfocatura e effetto vetro smerigliato

L'effetto vetro smerigliato è ideale per rendere leggibile il testo sulle immagini. Può anche essere usato come effetto hover. Un tutorial su come implementare l'effetto vetro smerigliato nei CSS si trova qui.

Tendenze del web design-2021
Fonte: Codepen.io 

Organico e discreto

Tendenze del web design-2021

Il sito pureorganix.ca tende a usare pochi colori, brillanti e naturali. Le tonalità organiche sono in aumento giá da un po' e rimarranno un tema anche nel 2021.

Nero Bianco

Tendenze del web design-2021
Sito web: Database UX 

La completa assenza di colore rende il tuo sito web minimalista, ordinato e chiaro. L'UX Database ha bilanciato bene il tocco serio, dato dall'omissione delle tinte amichevoli, grazie all'uso di illustrazioni.

UX Design e usabilità del web

Perché dovresti essere interessato all'usabilità e all'esperienza utente come web designer? E come si ottiene davvero un valore aggiunto per gli utenti attraverso un buon UX? Questo e ancora di piú viene trattato in questo articolo.

Icone e immagini

Come per la realtà virtuale (VR), abbiamo aspettato a lungo che gli oggetti 3D facessero finalmente il loro grande passo. Come all'inizio di ogni anno, ci si aspetta che gli elementi 3D e la VR giochino un ruolo maggiore d'ora in poi. Questo non è previsto che sia diverso nel 2021.

Gli elementi 3D saranno sempre più utilizzati nel 2021: per esempio, come sostituzione di icone e illustrazioni 2D, per rappresentare prodotti e come elementi geometrici di design.

Vedremo il 3D anche come parte interattiva del sito, come per l'agenzia Dogstudio.

Tendenze del web design-2021

O come elemento statico, o più precisamente animato, come si vede nel prossimo esempio.

Tendenze del web design-2021
Sito web: https://www.yaya.co/

E-commerce

La realtà aumentata è stata usata sporadicamente per scopi di e-commerce in passato. 

Tendenze del web design-2021

Dieselinvece si basa più sulla variante interattiva 3D.

Tendenze del web design-2021

Entrambi gli approcci sono utili per il rispettivo prodotto. Poter testare virtualmente i mobili nella propria casa futura non riduce solo i rischi di fare un acquisto sbagliato. L'app è anche divertente e fornisce incentivi per la decorazione e lo shopping.

Diesel, d'altra parte, sta cercando di creare una sorta di sensazione in 3D, permettendo agli utenti finali di esaminare e sentire virtualmente il prodotto prima di acquistarlo.

In passato l'integrazione di elementi di realtà aumentata/virtuale e di elementi 3D era spesso molto costosa e quindi riservata alle aziende più grandi. Con i nuovi strumenti l'integrazione della realtà aumentata (AR) è diventata possibile anche per le aziende più piccole.

Ecco due esempi:

Il web sta diventando più personale, più interattivo e si adatta a noi

Google ci offre un esempio di interattività con il tuo Blob Opera. Le proprie creazioni possono essere registrate e poi condivise con tutti.

Tendenze del web design-2021

Sulla pagina di contatti di Madwell ogni elemento grafico è interattivo.

Tendenze del web design-2021

Sennep offre i tuoi servizi con molta personalitá.

Tendenze del web design-2021

Web Design per le cause

Inoltre il 2020 ci ha appena dimostrato che noi tutti possiamo, e in parte dobbiamo, collegarci in rete. Il web è diventato più umano. Il web design per cause diventa sempre più rilevante. Siti web etici, siti web verdi, siti web per difendere noi stessi e il nostro prossimo (per citare solo alcuni argomenti) hanno acquisito sempre maggiore importanza l'anno scorso. Sicuramente questa tendenza continuerá ad essere forte anche nel 2021.

Consenso*
Questo campo è per la convalida e non deve essere modificato.

Essere in contatto con amici di tutto il mondo, lavorare a distanza, commercializzare prodotti e servizi online - non sono cose nuove. Eppure finora hanno rappresentato una realtà soprattutto per una minoranza della popolazione. 

Molte aziende e persone finora si sono confrontate con questo argomento in modo piuttosto tradizionale: esistono le possibilità di presenza sul web e di networking, ma le usiamo solo come elementi secondari. Il contatto personale continua ad essere in primo piano. 

La funzionalità dei nostri prodotti online è quindi particolarmente importante - anche perché la concorrenza è molto più grande. E in futuro, non possiamo più permetterci di tralasciare argomenti come l'accessibilità.

Naturalmente, una videochiamata non può sostituire un importante incontro faccia a faccia. Ma forse stiamo imparando attraverso la situazione attuale a distinguere tra le riunioni veramente importanti e quelle che possono essere fatte anche con l'aiuto di una telefonata. Questo approccio si riflette spesso nella qualità della presenza digitale. 

Frasi come "Se qualcuno lo vuole sapere, ci chiamerà o ci chiederà" le ho sentite spesso in passato durante la pianificazione di progetti online. Con la nuova tendenza all'isolamento e all'home office non abbiamo più questo lusso.

Ecco perché il design mobile, le prestazioni, l'usabilità e simili rimarranno fattori importanti nella creazione del tuo sito web nel 2021.

Tendenze del web design-2021

Le tue domande sulle tendenze del web design 2021

Diteci le vostre domande e previsioni sulle tendenze del web design 2021 qui sotto nei commenti - siamo curiosi. Vuoi essere informato sui nuovi articoli di WordPress? Poi segui Raidboxes su Twitter, Facebook e tramite la nostra newsletter.

Ti è piaciuto l'articolo?

Con la tua valutazione ci aiuti a migliorare ancora di più il nostro contenuto.

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato.