Un'introduzione all'animazione nel web design

L'animazione non è più solo per i cartoni animati. Dalle immagini in movimento a schermo intero ai piccoli effetti hover, tocchi di animazione spuntano ovunque. L'animazione è alla moda, divertente e facile da usare.

E gli ostacoli all'utilizzo dell'animazione hanno iniziato a cadere. Con la maggior parte degli utenti su connessioni ad alta velocità e la facilità di creare qualsiasi cosa, da semplici movimenti o una gif sciocca a diversi minuti di azione, le animazioni sono diventate strumenti pratici e utili per il web design.

Esplora Envato Elements

Nozioni di base sull'animazione

L'animazione avviene quando qualcosa di creato in forma immobile o bidimensionale viene "portato in vita" e sembra muoversi in un modo che segue le leggi della fisica. È il modo in cui un personaggio dei cartoni animati attraversa lo schermo o il modo in cui un'icona di un'app rimbalza come una palla mentre viene caricata sul desktop del tuo Mac.

Una delle parole che è quasi sinonimo di animazione è Disney. All'inizio degli anni '80, due dei migliori animatori delle compagnie scrissero un libro che descriveva in dettaglio i 12 principi dell'animazione. "Illusion of Life: Disney Animation" di Frank Thomas e Ollie Johnston fornisce ancora oggi il quadro per l'animazione.

Schiaccia e allunga
Anticipazione
messa in scena
Azione diretta e posa da posare
Azione continua e sovrapposta
Rallenta e rallenta
Arco
Azione secondaria
sincronizzazione
Esagerazione
Disegno solido
Appello

Le animazioni Web vengono spesso salvate come GIF, CSS, SVG, WebGL o video. Possono essere qualsiasi cosa, da una semplice sottolineatura che appare quando passi il mouse sopra una parola a un video a schermo intero o un'immagine di sfondo. Come con qualsiasi altra tecnica di progettazione, le animazioni possono essere sottili o potrebbero essere in faccia e difficili da evitare.

Trend emergente del 2017

L'animazione nel web design è qualcosa a cui stiamo iniziando ogni giorno. La chiave dell'animazione come tendenza del design è la moderazione. Animazioni piccole e semplici sono coinvolgenti e interessanti; l'utente potrebbe nemmeno pensare di essere un'animazione. Le animazioni su larga scala possono essere un aspetto interessante che ti coinvolge nel design. Ma se inizi a mescolare troppi effetti in movimento diversi, può causare il caos completo.

Ciò che rende alla moda l'animazione è il realismo. Nel panorama del design odierno con così tanti design in stile piatto e minimale, gli utenti hanno bisogno di più spunti per dire loro cosa fare. Semplici pezzi di animazione possono guidare l'utente senza cambiare l'estetica. Aiuta ad aggiungere istruzioni e ordine per progettare schemi che potrebbero essere visivamente troppo semplici per fornire una direzione sufficiente per gli utenti. In questo caso l'animazione crea un mezzo felice tra semplicità ridotta e usabilità.

L'altro fattore che contribuisce a questa tendenza è l'accesso agli strumenti sul retro e sugli utenti del progetto. Non è più necessario Flash per animazioni più complicate. (E se stai ancora costruendo in Flash, è ora di smettere.) Può essere realizzato in molti altri modi. Le animazioni odierne non impantanano siti Web o server Web, rendendo gli effetti facili da caricare per gli utenti e con animazioni ad alta velocità di accesso a Internet non saltano a rimanere bloccati a metà del ciclo degli eventi.

Animazioni grandi e piccole

Quando si tratta di animare per il Web, rientra in due categorie ugualmente facili da capire: grande e piccolo. (Probabilmente puoi indovinare come appaiono.)

Le animazioni di grandi dimensioni sono quelle che hanno una scala per loro. Spesso sotto forma di un video con un tempo di esecuzione, animazioni su larga scala riempiono una parte significativa dello schermo e sono caratteristiche di un cortometraggio. Queste animazioni fungono da punto focale nella progettazione generale. Gli utenti spesso non devono eseguire alcuna azione per vedere l'animazione in movimento. Se osservi attentamente il sito di Studio Meta, ciascuna delle immagini di grandi dimensioni ingrandisce mentre leggi la copia.

Le piccole animazioni sono i piccoli frammenti che scopri mentre inizi a interagire con un sito Web. Questi divot potrebbero essere sotto forma di stati al passaggio del mouse, minuscoli frammenti di ornamenti o guide o strumenti di usabilità. Le piccole animazioni sono un accento che contribuisce all'estetica generale, ma è improbabile che sia al centro del design. Nel sito di Henry Brown la semplice animazione è che se guardi da vicino, gli occhi nell'illustrazione lampeggiano effettivamente.

Quando utilizzare l'animazione

Il problema con ogni tendenza, compresa questa, è sapere quando usarlo. L'animazione può essere un piccolo trucco per il tuo kit di strumenti di progettazione, ma non per tutti i progetti. L'animazione dovrebbe essere fluida e senza interruzioni, non instabile o meccanica. Deve servire a uno scopo per l'utente e non ostacolare il contenuto.

Il motivo principale per utilizzare l'animazione è aumentare l'usabilità. Le animazioni semplici possono essere ottimi strumenti di guida per aiutare le persone a capire quali pulsanti fare clic o dove andare dopo nella mappa di un sito Web. Molti designer che utilizzano effetti di scorrimento complessi associano una semplice animazione a uno strumento utente per scorrere o fare clic. (Ciò include tutto, da una semplice icona che rimbalza o parole che compaiono e dicono "scorri verso il basso").

L'usabilità è disponibile in alcune forme:

Funzione di comunicazione o come utilizzare un sito Web
Mostra le modifiche, ad esempio compilando un modulo correttamente o evidenziando che è possibile fare clic su un elemento
Crea flusso o indirizza gli utenti a un invito all'azione

Il secondo motivo per usare l'animazione è estetico. L'animazione può essere una grande "decorazione". A volte l'obiettivo di un elemento animato è puramente visivo e questo è un uso accettabile. Questa animazione decorativa può aiutare a raccontare una storia o creare una connessione emotiva tra l'interfaccia e l'utente. Lo scopo di un'animazione può essere quello di suscitare interesse visivo e mantenere un utente impegnato con il tuo sito per un periodo di tempo più lungo.

Quando crei un'animazione puramente visiva, considera cosa dovrebbe fare. Pensa alla connessione che desideri avere un utente. Dovrebbe essere divertente o sorprendente? È un po 'di contenuto unico progettato per la condivisione? Anche un visual puro dovrebbe avere un obiettivo.

risorse

Pronto per iniziare l'animazione? Ecco alcune risorse per ulteriori letture e strumenti per aiutarti a iniziare.

Il video Illusion of Life mostra ciascuno dei 12 principi in un modo che è facile da capire.
"Web Animation at Work" da A List Apart è una grande risorsa su ciò che fa funzionare l'animazione.
La "Introduzione per principianti all'animazione CSS" mostra come trasformare un quadrato in un cerchio usando le proprietà CSS.
Gli elementi SVG animati elastici sono un tutorial su come integrare e animare un componente SVG.
La presentazione di The Art of UI Animations di Mark Geyer utilizza l'animazione per spiegare i concetti.
"15 strumenti HTML5 principali per la creazione di animazioni avanzate" è un ottimo passaggio di livello successivo e un elenco di strumenti se hai già capito le basi.
L'Animator's Survival Kit insegna i principi di base che si applicano a tutte le forme di animazione.

Conclusione

Quando si tratta di animazione, la regola empirica è questa: una buona animazione renderà migliore l'esperienza dell'utente. Questo può essere sotto forma di una connessione emotiva - come un'esperienza divertente e positiva - o rendendo un sito più facile da usare.

L'animazione è una tecnica divertente che è diventata molto più standard per una varietà di applicazioni. Se stai cercando ispirazione, assicurati di tornare indietro in questo articolo e fai clic sui collegamenti agli esempi visivi in tutto, visita i siti e gioca con le funzionalità animate al loro interno. Divertiti!