L'animazione non è più solo per i cartoni animati. Dalle immagini in movimento a schermo intero ai piccoli effetti al passaggio del mouse, i tocchi di animazione stanno spuntando ovunque. L'animazione è alla moda, divertente e facile da usare.
E gli ostacoli all'uso dell'animazione hanno iniziato a calare. Con la maggior parte degli utenti sulle connessioni ad alta velocità e la facilità di creare qualsiasi cosa, da semplici movimenti o una stupida gif a diversi minuti di azione, le animazioni sono diventate strumenti pratici e utili per la progettazione web.
Nozioni di base sull'animazione
L'animazione si verifica quando qualcosa creato in forma statica o bidimensionale viene "riportato 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 l'icona di un'app che rimbalza come una palla mentre si carica sul desktop del tuo Mac.
Una delle parole che è quasi sinonimo di animazione è Disney. Nei primi anni '80, due dei principali animatori delle società hanno scritto un libro in cui sono descritti i 12 principi dell'animazione. The? Illusion of Life: Disney Animation? di Frank Thomas e Ollie Johnston fornisce ancora oggi il quadro per l'animazione.
- Squash e stretch
- Anticipazione
- messa in scena
- Azione immediata e posa da posare
- Azione Follow Through e Overlapping
- Slow In e Slow Out
- 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 si passa con il mouse su 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 emergenti del 2017
L'animazione nel web design è qualcosa che stiamo iniziando a vedere più di ogni giorno. La chiave per l'animazione come tendenza del design è la moderazione. Le animazioni piccole e semplici sono coinvolgenti e interessanti; l'utente potrebbe anche non pensare di essere affatto un'animazione. Le animazioni su larga scala possono essere una visuale interessante che ti coinvolge nel design. Ma se inizi a mescolare troppi effetti di movimento diversi, può causare il caos completo.
Ciò che rende l'animazione alla moda è il realismo. Nel panorama del design di oggi con così tanti design di stile piatto e minimale, gli utenti hanno bisogno di più spunti per dire loro cosa fare. Semplici bit di animazione possono guidare l'utente senza modificare l'aspetto estetico. Aiuta ad aggiungere istruzioni e ordini per progettare schemi che potrebbero essere troppo semplici dal punto di vista visivo 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 sul lato utente del progetto. Non hai più bisogno di Flash per animazioni più complicate. (E se stai ancora costruendo in Flash, è ora di smettere.) Può essere realizzato in molti altri modi. Le animazioni di oggi non impantanano siti web o server web, rendendo gli effetti veloci da caricare per gli utenti e con animazioni ad alta velocità di accesso a Internet non saltare di rimanere bloccati a metà del ciclo degli eventi.
Animazioni grandi o piccole
Quando si tratta di animare per il web, rientra in due categorie ugualmente facili da capire: grandi e piccole. (Probabilmente puoi indovinare come stanno queste cose.)
Le animazioni grandi sono quelle che hanno una scala per loro. Spesso nella forma di un video con un tempo di esecuzione, le animazioni su larga scala riempiono una porzione significativa dello schermo e sono caratteristiche di un breve filmato. Queste animazioni servono da punto focale nel design generale. Gli utenti spesso non devono eseguire alcuna azione per vedere l'animazione in movimento. Se guardi da vicino nel sito di Studio Meta, ciascuna delle grandi immagini ingrandisce mentre leggi la copia.
Le piccole animazioni sono i piccoli frammenti che scopri mentre inizi a interagire con un sito web. Questi divots potrebbero essere sotto forma di stati hover, piccoli pezzi 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 l'animazione semplice è che se si guarda da vicino, gli occhi nell'illustrazione lampeggiano effettivamente.
Quando usare l'animazione
Il problema di ogni tendenza, incluso questo, è sapere quando usarlo. L'animazione può essere un piccolo grande trucco per il tuo kit di strumenti di progettazione, ma non è per ogni progetto. L'animazione dovrebbe essere liscia e senza soluzione di continuità, non nervosa o meccanica. Deve servire a uno scopo per l'utente e non intralciare il contenuto.
La ragione 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 successivamente nella mappa di un sito web. Molti designer che utilizzano effetti di scorrimento complessi accoppiano una semplice animazione con uno strumento utente per scorrere o fare clic. (Questo include tutto, da una semplice icona di rimbalzo o da parole che compaiono un messaggio? Scorrere verso il basso.?)
L'usabilità si presenta in alcune forme:
- Funzione di comunicazione o modalità di utilizzo di un sito Web
- Mostra le modifiche, ad esempio compilando correttamente un modulo o evidenziando che un elemento è selezionabile
- Crea il 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 si crea un'animazione puramente visiva, considera cosa dovrebbe fare. Pensa alla connessione che vuoi che un utente abbia.Dovrebbe essere divertente o sorprendente? È un po 'di contenuti unici progettati per la condivisione? Anche una pura visione 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 ognuno dei 12 principi in un modo che è facile da capire.
- ? Animazione Web al lavoro? da A List Apart è una grande risorsa su ciò che fa funzionare l'animazione.
- The? Beginner's Introduction to CSS Animation? mostra come trasformare un quadrato in un cerchio usando le proprietà CSS.
- Gli elementi SVG animati elastici sono un'esercitazione su come integrare e animare un componente SVG.
- La presentazione The Art of UI Animations di Mark Geyer utilizza l'animazione per spiegare i concetti.
- ? 15 Strumenti HTML5 principali per creare animazioni avanzate con? è un grande passo successivo e un elenco di strumenti se hai già capito le basi.
- Il kit di sopravvivenza dell'animatore insegna i principi di base che si applicano a tutte le forme di animazione.
Conclusione
Quando si parla di animazione, la regola generale è questa: una buona animazione renderà l'esperienza dell'utente migliore. Questo può essere sotto forma di una connessione emotiva - come un'esperienza divertente, positiva - o rendendo il sito più facile da usare.
L'animazione è una tecnica divertente che è diventata molto più standard per una varietà di applicazioni. Se sei alla ricerca di ispirazione, assicurati di tornare indietro in questo articolo e fare clic sui collegamenti agli esempi visivi in tutto, visitare i siti e giocare con le funzioni animate al loro interno. Divertiti!