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 bandito 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 e designer web, ora abbiamo la magia delle transizioni CSS3, animazioni SVG, GIF di alta qualità e, naturalmente, video animati creati con programmi come After Effects e Blender.

Recentemente ci sono stati alcuni anni in cui la tendenza era quella di progettare siti piatti. Per fortuna, l'animazione è tornata in grande stile ed è ora una delle maggiori tendenze per il 2018 e oltre.

Le animazioni sono ormai diventate un'aspettativa.

L'influenza positiva dell'animazione su UX e UI Design non è sorprendente, a causa di come 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 consentono agli utenti di sapere che sta accadendo qualcosa.

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

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?

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 tra la quantità di animazione che includi nel tuo progetto. Pensa più sulla falsariga di un "movimento morbido" piuttosto che su una pagina che si muove così tanto che non sai dove guardare. L'uso eccessivo dell'animazione è doloroso tanto quanto l'eccessivo minimalismo!

L'utilizzo di un programma come Adobe XD può aiutarti nel processo di provare diverse animazioni da posizionare strategicamente sul tuo sito. Se ti piace creare direttamente in WordPress, allora un'ottima opzione è Divi Builder, che offre molte possibilità di animazione all'interno di ogni modulo.

Alla fine dell'articolo, ho incluso alcuni collegamenti ad alcune fantastiche 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 complessiva.

Funzionale o estetico

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

Animazioni funzionali

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

Caricamento di animazioni

L'animazione funzionale più comune e una delle prime ad essere comune 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, vengono utilizzati per cose come il caricamento di video, la progressione 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.

Aleggia

Altre animazioni funzionali comuni che dovresti considerare sono gli hover. Siamo già abbastanza abituati a vedere le animazioni al passaggio del mouse e la maggior parte delle persone se le aspetterà. Far cambiare colore a un pulsante quando ci si passa sopra è un'animazione di base che dovresti assolutamente considerare di utilizzare, sia nel menu che in un invito all'azione.

Altri modi di utilizzare il passaggio del mouse sono per i pulsanti che non sembrano pulsanti o se si desidera mostrare informazioni al passaggio del mouse prima che facciano clic.

Scorrimento

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

Animazioni estetiche

Le animazioni estetiche o decorative sono quelle che rendono un sito visivamente più attraente ma non aiutano necessariamente con la funzionalità. C'è una vecchia metafora dell'era dei primi cartoni animati di Walt Disney, secondo cui l'animazione è una "illusione di vita". Ciò che l'animazione fa a un'immagine statica è portarla in 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 così tanti popup? Assicurati che le animazioni che aggiungi siano appena sufficienti per rendere il tuo sito piacevole da guardare ma non travolgente.

Sfondi animati

Gli sfondi animati più trendy in questo momento sono gli 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.

Creatività illimitata

Ultimo ma non meno importante, ciò che l'animazione può fare per il tuo sito è offrire creatività illimitata. Dal momento che puoi praticamente animare qualsiasi cosa, le possibilità creative sono infinite. Dagli sfondi animati alle 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 illustrazione isometrica e scorrimento animato e ottieni un sito fantastico come RollPark.

Ottimizza sempre per dispositivi mobili!

Sarebbe ingiusto da parte mia non ricordarti che dovresti sempre controllare le tue animazioni sul cellulare. Assicurati che funzionino come dovrebbero e apporta modifiche in caso contrario. Se usi le animazioni SVG, non dovresti avere molti problemi poiché la grafica .svg è infinitamente scalabile.

Ad ogni modo, controllare sempre sul cellulare e ottimizzare le tue 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 animazioni gratuite
• Le funzionalità di animazione di DIVI Builder
• Creatore di sfondo di particelle
• Due modi per creare sfondi di particelle semplici con i CSS
• Utilizzo dell'animazione SVG

Insomma

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

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

Che tipo di animazione del sito web sperimenterai in seguito?