Tendenze del web design 2021: Scrollytelling, effetti 3D e maggiore interazione

Sonja Hoffmann Ultimo aggiornamento 14.07.2021
10 Min.
Tendenze del web design-2021
Ultimo aggiornamento 14.07.2021

Dopo un anno, come quello che abbiamo appena vissuto, azzardare una prospettiva sulle prossime tendenze assume proporzioni quasi utopiche. Dopo tutto, chi avrebbe potuto immaginare nel 2020 quanto velocemente il mondo può cambiare e quanto cambierà? E inoltre quanto velocemente possiamo adattarci a questi 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à.

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!

1. Scrolling

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 suo 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 mantenere il piú possibile una direzione. Cambiare troppo spesso da una all'altra confonderà i tuoi utenti.
  • Fa' attenzione al mix di testi lunghi e scorrimento orizzontale. Questo layout potrebbe rendere i tuoi testi meno leggibili.
Quale font è adatto al mio sito web?

Un font adatto rende il tuo sito web molto piú interessante non solo da un punto di vista visivo. I caratteri hanno un'influenza decisiva sulla decisione di ignorare o leggere le varie sezioni di un testo. In questoarticolo mostrerò 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.

Tendenze del web design-2021

Anche sul cellulare l'effetto non perde il suo fascino.

Tendenze del web design-2021

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.

2. Composizioni del design e layout

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 Visione 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 suo 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 

3. Colori

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.

4. 3D

Icone e immagini

Come per la Virtual Reality (VR), aspettiamo da tempo che anche gli oggetti 3D raggiungano finalmente il loro grande successo. Come all'inizio di ogni anno, ci si aspetta che da adesso gli elementi 3D e la VR giochino un ruolo maggiore. Lo stesso è previsto anche nel 2021.

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

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

Tendenze del web design-2021

O come elemento statico o animato, come si puó vedere nel prossimo esempio.

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

Ecommerce

L'Augmented Reality è già stata usata in passsato sporadicamente nell'e-commerce. Come con l'app IKEA.

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:

5. Contenuto

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

Google ci offre un esempio di interattività con il suo 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 suoi 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.

Conclusione

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 diventa sempre più grande. E in futuro non possiamo più permetterci di ignorare argomenti come l'accessibilità.

Naturalmente una videochiamata non può sostituire un importante incontro di persona. Ma forse, attraverso la situazione attuale, impariamo a distinguere gli incontri veramente importanti da quelli che potrebbero essere tranquillamente risolti con una telefonata. Questo approccio si é rispecchiato spesso anche 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 anche nel 2021 rimangono fattori importanti nella creazione del tuo sito web.

Tendenze del web design-2021
Twitter

Caricando il tweet, accetti l'informativa sulla privacy di Twitter.
Per saperne di più

Carica il contenuto

PGJsb2NrcXVvdGUgY2xhc3M9InR3aXR0ZXItdHdlZXQiIGRhdGEtd2lkdGg9IjU1MCIgZGF0YS1kbnQ9InRydWUiPjxwIGxhbmc9ImVuIiBkaXI9Imx0ciI+UGVvcGxlIG9mdGVuIGZvcmdldCBhYm91dCBjb2duaXRpdmUgaW1wYWlybWVudC4gIE5vLCB0aGF0JiMzOTtzIG5vdCBhbiBpbnRlbnRpb25hbCBwdW4uIDxicj5OaWNlIGV4dGVuc2lvbiBvZiA8YSBocmVmPSJodHRwczovL3R3aXR0ZXIuY29tL01pY3Jvc29mdD9yZWZfc3JjPXR3c3JjJTVFdGZ3Ij5AbWljcm9zb2Z0PC9hPiBpbmNsdXNpdmUgZGVzaWduIHdlIGRpZCBhdCB0aGUgPGEgaHJlZj0iaHR0cHM6Ly90d2l0dGVyLmNvbS9Nb0pHb3ZVSz9yZWZfc3JjPXR3c3JjJTVFdGZ3Ij5ATW9KR292VUs8L2E+LiAoYXBvbG9naWVzIHRvIGxhcnJ5IG1pbGVzLCB0b21hc3oga29sZWNraSwgamVuIGxlbW9uIGV0IGFsIGNhbiYjMzk7dCBmaW5kIHlvdSBvbiB0d2l0dGVyISkgPGEgaHJlZj0iaHR0cHM6Ly90LmNvL3NkU0hQMDRGeWYiPnBpYy50d2l0dGVyLmNvbS9zZFNIUDA0RnlmPC9hPjwvcD4mbWRhc2g7IE1hcmsgTWNFbGhhdyAoQG1hcmttY2VsaGF3KSA8YSBocmVmPSJodHRwczovL3R3aXR0ZXIuY29tL21hcmttY2VsaGF3L3N0YXR1cy85ODkwNDk5MzM4MTc5NjI0OTc/cmVmX3NyYz10d3NyYyU1RXRmdyI+QXByaWwgMjUsIDIwMTg8L2E+PC9ibG9ja3F1b3RlPjxzY3JpcHQgYXN5bmMgc3JjPSJodHRwczovL3BsYXRmb3JtLnR3aXR0ZXIuY29tL3dpZGdldHMuanMiIGNoYXJzZXQ9InV0Zi04
Le tue domande sulle tendenze del web design 2021
Inserisci le tue domande e previsioni in merito alle tendenze del web design 2021 qui sotto nei commenti - siamo curiosi. Vuoi essere informato sui nuovi post su WordPress? Allora segui RAIDBOXES su TwitterFacebook e attraverso la nostra newsletter.

Dopo aver studiato Game Design e scrittura creativa, si è specializzata nel web e app designe e nel loro sviluppo. La sua attenzione è rivolta alla gamification e al capire la motivazione e l'esperienza dell'utente, insieme alla passione e alla curiosità per i trend tecnologici.

Articoli correlati

Commenti su questo articolo

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato. I campi obbligatori sono contrassegnati con *.