Come aggiungere strategicamente animazioni al tuo sito

L'uso dell'animazione nel web design non è esattamente una novità.

Ricordi l'era ormai lontana delle gif 3D rotanti?

Che ne dici della vita e della morte di Flash?

Dopo che Apple ha vietato l'uso di Flash su tutti i suoi dispositivi mobili, i designer hanno rapidamente trovato un modo per riportare l'animazione nel gioco. Grazie alla creatività di sviluppatori web e designer, ora abbiamo la magia di transizioni CSS3, animazioni SVG, GIF di alta qualità e, naturalmente, video animati creati con programmi come After Effects e Blender.

Ci sono stati alcuni anni di recente in cui la tendenza era quella di progettare siti piatti. Per fortuna, l'animazione è tornata alla grande ed è ora una delle tendenze più grandi per il 2018 e oltre.

Le animazioni ora sono diventate un'aspettativa.

L'influenza positiva dell'animazione su UX e UI Design non è sorprendente, a causa del modo in cui gli esseri umani sono creature visive e saranno sempre attratti dal movimento e dal movimento. Le animazioni possono dare vita a qualsiasi processo, trasformandolo in un'esperienza. I movimenti fanno sapere agli utenti che sta succedendo qualcosa.

Ad esempio, le animazioni all'interno delle celle del modulo possono notificare agli utenti che hanno commesso un errore o che mancano delle informazioni. Oppure, quando si inserisce una password ed è sbagliata, gli asterischi possono diventare rossi, ballare un po' e scomparire.

Animazione dall'interfaccia utente cinetica

O che ne dici di questa divertente animazione di accesso? Le possibilità di animazione nel web design crescono ogni giorno. Perché non aggiungere anche alcune animazioni strategiche al tuo sito?

Animazione di Darin su Dribbble

Animare il tuo sito

Le opzioni su come aggiungere animazioni al tuo sito sono piuttosto estese, ma ciò non significa che dovrebbe essere pieno di icone che saltano e pulsanti rotanti. Ci deve essere un equilibrio nella quantità di animazione che includi nel tuo progetto. Pensa più sulla falsariga del "soft motion" piuttosto che su una pagina che si muove così tanto da non sapere dove guardare. L'uso eccessivo dell'animazione è doloroso quanto il minimalismo eccessivo!

L'uso di un programma come Adobe XD può aiutare con il processo di provare diverse animazioni da posizionare strategicamente sul tuo sito. Se ti piace costruire direttamente in WordPress, un'ottima opzione è Divi Builder, che include molte possibilità di animazione all'interno di ogni modulo.

Alla fine dell'articolo, ho incluso alcuni collegamenti ad alcune ottime risorse che ti aiuteranno ad aggiungere animazioni al tuo sito.

Diamo un'occhiata ai diversi tipi di animazioni che possono migliorare l'esperienza utente del tuo sito e la composizione visiva generale.

Funzionale o estetico

Le animazioni hanno due usi nel web design; funzionalità ed estetica.

Animazioni funzionali

Le animazioni possono aiutare i visitatori nel percorso dell'utente sul tuo sito. Portano l'attenzione sugli inviti all'azione o su sezioni importanti che non vuoi che manchino. Semplificano i processi e sono visivamente piacevoli.

Caricamento di animazioni

L'animazione funzionale più comune, e una delle prime ad essere comuni nella progettazione di siti Web, è l'animazione di caricamento. Questi si trovavano principalmente quando un sito veniva aperto per la prima volta, ma ora che i siti si caricano istantaneamente, viene utilizzato per cose come il caricamento di video, l'avanzamento dei download e altri processi che il tuo sito potrebbe avere.

Affinché la tua animazione di caricamento sia efficace, deve corrispondere al tuo marchio. Se il tuo sito è divertente e colorato, la tua animazione di caricamento può essere qualsiasi cosa, da una palla che rimbalza a un loop colorato. D'altra parte, se il tuo sito è serio e formale, l'animazione di caricamento dovrebbe seguire quello stile.

Animazione di Sharon Yar e Dilys Lim su Behance

Animazione da UXPin del sito di Tom Cole Architecture

Aleggia

Altre animazioni funzionali comuni che dovresti considerare sono i passaggi del mouse. Siamo già abbastanza abituati a vedere le animazioni al passaggio del mouse e la maggior parte delle persone se le aspetterà. Fare in modo che un pulsante cambi colore quando è sopra è un'animazione di base che dovresti assolutamente considerare di utilizzare, nel tuo menu o in un invito all'azione.

Altri modi di utilizzare il passaggio del mouse sono per i pulsanti che non sembrano pulsanti o se vuoi mostrare le informazioni sul passaggio del mouse prima che facciano clic.

Animazione da Design Shack

Scorrimento

I siti Web con effetti di scorrimento non sono più un fenomeno unico. Lo scrolling parallasse è diventato molto popolare (e sta diventando un po' stancante, a dire il vero). Quindi, se vuoi usare lo scorrimento animato, pensa fuori dagli schemi. Includere elementi che si spostano da una sezione all'altra, elementi che appaiono progressivamente con lo scroll. Pensa alla funzionalità oltre che all'estetica.

Animazione di Youandigraphics

Animazioni estetiche

Le animazioni estetiche o decorative sono quelle che rendono un sito visivamente più accattivante ma non necessariamente aiutano con la funzionalità. C'è una vecchia metafora dell'era dei primi cartoni animati di Walt Disney, che l'animazione è un'"illusione di vita". Ciò che l'animazione fa a un'immagine statica è darle vita, farla respirare.

Con la giusta quantità di animazione estetica, il tuo sito può essere indimenticabile.

Proprio come l'animazione funzionale, l'animazione decorativa deve avere un equilibrio. Chiediti se quello sfondo animato è davvero necessario o se corrisponde correttamente al tuo marchio. Ogni foto deve essere animata sullo schermo o hai bisogno di tanti pop-up? Assicurati che le animazioni che aggiungi siano sufficienti per rendere il tuo sito piacevole da vedere ma non opprimente.

Sfondi animati

Gli sfondi animati più alla moda in questo momento sono sfondi di particelle, da semplici punti in movimento a complessi movimenti di effetti di luce. Questi possono essere aggiunti come sfondo per un'intera pagina o solo per sezioni. Possono rendere le aree del tuo sito più personali. Ricorda che le tendenze cambiano, quindi se usi uno sfondo di particelle, assicurati che si adatti davvero al tuo sito.

Animazione di Femme Fatale

Creatività illimitata

Ultimo ma non meno importante, ciò che l'animazione può fare per il tuo sito è offrire creatività illimitata. Dal momento che puoi animare praticamente qualsiasi cosa, le possibilità creative sono infinite. Da sfondi animati a cose che si muovono sullo schermo e persino animazioni sottili come un personaggio che lampeggia.

Un sito può fare così tanto affidamento sull'animazione che il viaggio attraverso le pagine è una vera esperienza. Prendiamo ad esempio il nuovo sito di Porsche, che mostra la storia della casa automobilistica nel corso degli anni.

Oppure metti insieme l'illustrazione isometrica e lo scorrimento animato e ottieni un sito fantastico come RollPark.

Animazione da Rollpark

Ottimizza sempre per dispositivi mobili!

Sarebbe ingiusto per me non ricordarti che dovresti sempre controllare le tue animazioni sui dispositivi mobili. Assicurati che funzionino come dovrebbero e, in caso contrario, apporta le modifiche. Se usi le animazioni SVG, non dovresti avere molti problemi poiché la grafica .svg è infinitamente scalabile.

Ad ogni modo, controllare sempre sui dispositivi mobili e ottimizzare le animazioni per tutti i formati renderà il tuo sito molto migliore!

Strumenti per aiutarti ad animare il tuo sito

Ecco un elenco di collegamenti ad articoli pratici per diversi tipi di animazioni che puoi utilizzare sul tuo sito.

• Una raccolta di librerie di animazione gratuite
• Le capacità di animazione di DIVI Builder
• Creatore di sfondo di particelle
• Due modi per creare sfondi di particelle semplici con CSS
• Utilizzo dell'animazione SVG

In conclusione

Mantieni le tue animazioni equilibrate in termini di funzionalità ed estetica. Sono strumenti per dare vita al tuo sito, non per renderlo opprimente. Ricorda di essere creativo e pensare fuori dagli schemi.

Quando costruirai il tuo prossimo sito web (o aggiornerai quello esistente), aggiungerai delle animazioni al design? Ricorda: è meglio sperimentare su un sito di staging o su un sito locale prima di aggiungere un nuovo codice in modo permanente ai siti live!

Quale tipo di animazione del sito web sperimenterai in seguito?

Crea le tue animazioni con questi tutorial!

• Come creare animazioni SVG con CSS
• Come utilizzare le transizioni e le trasformazioni CSS3 per creare animazioni