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

Sonja Hoffmann Ultimo aggiornamento 22.02.2021
9 Min.
Tendenze del web design-2021
Ultimo aggiornamento 22.02.2021

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!

La nuova normalità ci ha tutti in pugno: la tecnologia è diventata più importante per noi e 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 noi. 

Lockdown, home office e simili hanno spostato la nostra attenzione più verso il digitale. Tuttavia, questa tendenza provoca anche una rapida crescita dei prodotti digitali. Lo stesso vale per il settore del commercio elettronico. Tutto questo richiede più individualità e abilità per essere in grado di posizionarsi contro un maggior numero di concorrenti.

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

Così nel nuovo anno, vediamo più opportunità di personalizzazione. Vediamo più spesso la possibilità di passare dalla modalità Dark/Light o anche di personalizzare i colori di un design stesso.

Vediamo disegni più audaci e meno simmetrici. La controtendenza verso l'integrazione di colori ed elementi organici rimane. Otteniamo più personalità attraverso collage, media misti e l'integrazione di effetti di animazione. Diamo ora un'occhiata alle tendenze del web design 2021 in dettaglio!

1. scorrimento

Animazioni di parallasse e di scorrimento in parallasse

La parallasse, specialmente con immagini semplici, è qualcosa che abbiamo usato per diversi anni. Recentemente, abbiamo aggiunto complesse animazioni di scorrimento in parallasse. Usati correttamente, questi trasformano il vostro 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 sono situati a distanze diverse l'uno dall'altro. Se questi si muovono per scorrimento, percepiamo il loro movimento come velocità diverse.

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

Alcuni consigli su come integrare con successo l'effetto Parallax:

  • Assicuratevi che le informazioni importanti siano sempre presentate in modo chiaro e che non siano superate dall'effetto.
  • Assicurati che tutte le funzionalità del tuo sito siano mantenute su tutti i dispositivi - anche in condizioni non ottimali, come la scarsa 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, che sono animate insieme per trasmettere la sensazione di un paesaggio reale. Nella versione mobile, tuttavia, l'effetto parallasse è sostituito da un'immagine statica.

Animazioni di scorrimento

Anche le animazioni a scorrimento estensivo non sono del tutto nuove, ma hanno ricevuto meno attenzione finora - probabilmente non ultimo perché la loro composizione richiede abilità di disegno. Come sempre, meno è meglio. Usate bene, le animazioni a scorrimento danno al vostro sito web un flusso 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 loro sito web. Anche sui dispositivi più piccoli, le animazioni funzionano - anche se il tempo di caricamento ne risente un po'.

Tendenze del web design-2021

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

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

Scorrimento orizzontale

Anche se le opinioni sullo scorrimento orizzontale sono state molto diverse in passato, vediamo siti web che lo utilizzano sempre più spesso. 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 navigazione adesiva, che di solito si trova in alto, è sul lato sinistro. Funziona allo stesso modo con gli Anchor Links come in un One Pager orientato verticalmente. Su mobile, 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 Home Société è l'uso dello scorrimento infinito: se si arriva alla fine di una pagina, si viene trasportati all'inizio senza essere notati. Questa pagina fa anche a meno dello scorrimento orizzontale su base mobile.

Alcuni consigli su come integrare con successo lo scorrimento orizzontale:

  • Dai ai tuoi utenti un piano B, come le frecce o un menu adesivo, per navigare nel tuo sito.
  • Pensa a quale contenuto 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 vostri 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 rende il tuo sito web non solo visivamente molto più interessante. I caratteri hanno un'influenza decisiva sul fatto che sezioni di testo siano ignorate o lette. In questo Invia Ti 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 personalità e un senso di interattività. I contenuti lunghi sono presentati in modo facilmente digeribile. Le storie sono costruite in modo più 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 parallasse seguito da molto testo. Questo è confezionato 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 di progettazione? Puoi trovare i consigli più 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 vi invita a un viaggio attraverso la storia dell'arte alla ricerca delle tendenze del web design del futuro.

Tendenze del web design-2021

L'effetto non perde il suo fascino neanche in movimento.

Tendenze del web design-2021

canals-amsterdam.nl combina lo scrollytelling con la navigazione orizzontale, l'animazione e il parallasse. Un dettaglio speciale: il menu adesivo cambia il suo colore di sfondo a seconda del colore della posizione corrente. Maggiori informazioni su questo argomento si possono trovare nella Guida di Scrollytelling.

Carte a scorrimento

Per schede di scorrimento intendiamo lo scorrimento verticale o orizzontale, che scatta nella finestra successiva prima di navigare ulteriormente. Si può sottolineare visivamente questo, per esempio, con separazioni colorate, che trasmettono la sensazione delle carte, come nell'esempio di Green Meadow.

Tendenze del web design-2021

Altre caratteristiche speciali qui sono le animazioni di testo che continuano a ricaricarsi, così come lo scorrimento infinito, che ci dà la sensazione di un sito web infinito.

2. composizioni e layout del design

Integrazione delle caratteristiche fisiche del prodotto da vendere

Tendenze del web design-2021

Ora London vende smalto per unghie tra le altre cose. Per il layout di design 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 assomigliare a una versione slavata dei loro succhi di frutta. Questo effetto è usato anche per alcune intestazioni.

Tendenze del web design-2021

Ora The Floral Agency ha evidenziato visivamente il loro sito web con fiori della loro gamma. 

Neomorfismo

Il neumorfismo o nuovo morfismo è stato dichiarato una tendenza per un bel po' di tempo. Ma il motivo per cui i disegni minimalisti sono stati trattati con avversione nella scena creativa è dovuto principalmente a queste due ragioni:

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

Nel 2021, la tendenza del neumorfismo è ora destinata a decollare un po' di più. Il template Neu Vision mostra un'integrazione di Neumorphism facile da usare.

Tendenze del web design-2021
Tutorial: come creare nuovi elementi di morfismo

Con lo strumento Neumorphism.io potete provare voi stessi a Neumorphism. Il codice CSS corrispondente è incluso nel pacchetto. Potete trovare maggiori informazioni sull'argomento qui in questo articolo.

Composizioni astratte, collage e tecnica mista

Come menzionato prima, i siti web sono autorizzati a mostrare più personalità. Un modo per ottenere questo è attraverso composizioni astratte o collage. È anche permesso mescolare diversi media - che si tratti di illustrazioni disegnate a mano abbinate a forme geometriche perfette.

Tendenze del web design-2021

City Circus usa i collage in tutto il 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 può essere trovato 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 e brillanti colori naturali. Le tonalità organiche sono state in giro per un po' e rimarranno un tema 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 pulito. Il tocco serio creato dall'omissione delle tinte amichevoli è stato ben bilanciato dall'uso di illustrazioni di UX Database.

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 una buona UX? Vi dirò questo e altro in questo articolo.

4. 3D

Icone e immagini

Come per la Realtà Virtuale (VR), stiamo aspettando da tempo che gli oggetti 3D facciano 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 i prodotti e come elementi di design geometrico.

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

Tendenze del web design-2021

O come elemento statico o animato, come mostrato nel prossimo esempio.

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

Ecommerce

La realtà aumentata è già stata usata sporadicamente per scopi di e-commerce in passato. Come con l'app IKEA.

Tendenze del web design-2021

Diesel, d'altra parte, si basa più sulla varietà 3D interattiva.

Tendenze del web design-2021

Entrambi gli approcci hanno senso per il rispettivo prodotto. Poter testare virtualmente i mobili nella vostra futura casa non solo riduce le possibilità di fare un cattivo acquisto. 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 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 offre un esempio di interattività con il suo Blob Opera. Le proprie creazioni possono anche essere registrate e quindi condivise con tutti.

Tendenze del web design-2021

Nella pagina dei contatti di Madwell, ogni elemento grafico è interattivo.

Tendenze del web design-2021

Con molta personalità, Sennep offre i suoi servizi.

Tendenze del web design-2021

Web Design per le cause

Inoltre, il 2020 ha appena dimostrato che tutti noi possiamo collegarci in rete e in parte dobbiamo farlo. Il web è diventato più umano. Il web design per cause sta diventando sempre più rilevante. Siti web etici, siti web verdi, siti web per difendere noi stessi e il nostro prossimo (per citare solo alcuni argomenti) sono aumentati notevolmente di importanza l'anno scorso. Possiamo aspettarci che questa tendenza continui fortemente almeno nel 2021.

Conclusione

Rimanere in contatto con amici di tutto il mondo, lavorare a distanza, commercializzare prodotti e servizi online - non sono cose nuove. Eppure, fino ad ora, è stata più una realtà per una minoranza della popolazione. 

Molte aziende e persone in questo paese hanno finora affrontato l'argomento in modo piuttosto tradizionale: Abbiamo le possibilità di presenza sul web e di networking, ma le usiamo solo secondariamente. Il contatto personale era 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 ignorare argomenti come l'accessibilità.

Naturalmente, una videochiamata non può sostituire un importante incontro faccia a faccia. Ma forse impariamo 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 vuole sapere, ci chiamerà o ci chiederà" sono qualcosa che ho sentito più spesso in passato quando si pianificavano progetti online. Con la nuova attenzione 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
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
Diteci le vostre domande e previsioni sulle tendenze del web design 2021 qui sotto nei commenti - siamo eccitati. Vuoi essere informato dei nuovi post su WordPress ? Poi segui RAIDBOXES su Twitter Facebook e tramite 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.

Commenti su questo articolo

Scrivi un commento

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