Utilizzo dei 12 principi dell'animazione Disney nel tuo prossimo progetto di web design

Nel momento esatto in cui sto scrivendo questo, il mio ufficio ha 17 cose Disney sulle pareti e sugli scaffali. Diciassette. Anche io sono sorpreso. Per quanto io ami tutto ciò che è Disney, la magia creata attraverso i 12 principi dell'animazione sfugge persino a me mentre guardo uno dei loro film.

E questo è il punto. I 12 principi dell'animazione sono sottili. Fanno impressioni sugli spettatori senza che gli spettatori se ne rendano conto. Ci fanno ridere, piangere, simpatizzare e sognare, a volte all'interno della stessa scena. E creano personaggi e oggetti che sembrano e si muovono in modo così realistico che vuoi raggiungerli e toccarli. (Hai mai visto Coco ? Appoggio il mio caso.)

Quei 12 principi dell'animazione ora forniscono la base per tutto il lavoro sul movimento, Disney e non. Sono anche rilevanti per i campi al di fuori dell'animazione, come il web design.

Una breve storia dei 12 principi dell'animazione

I 12 principi dell'animazione sono stati introdotti da Ollie Johnston e Frank Thomas, due dei Nine Old Men della Disney, il nucleo centrale di animatori che si unirono negli anni '20 e '30. Johnston e Thomas hanno scritto The Illusion of Life: Disney Animation nel 1981, ed è rimasta la "bibbia" dell'animazione. Il libro esamina da vicino gli approcci dei migliori animatori Disney per estrarre i 12 principi. Sebbene questi principi fossero originariamente destinati all'animazione disegnata a mano, sono sopravvissuti ai cambiamenti tecnologici e ora sono utilizzati da animatori di computer (come Pixar) e web designer.

I 12 principi dell'animazione e come informano il web design

C'è una ragione per cui questi principi hanno resistito alla prova del tempo. A volte le basi sono ancora le migliori.

1. Schiaccia e allunga

Fonte: Chris Gannon via Giphy

"Squash and Stretch" è il più importante dei principi di animazione. Dà alle animazioni flessibilità, gravità, peso e massa. Quando un oggetto è in movimento, non mantiene la stessa forma.

Il volume deve rimanere coerente, però. Lo stretching richiede di rendere l'oggetto più sottile e più lungo; lo schiacciamento lo rende più corto e più largo. Se lo facessi solo più sottile o più corto, non manterrebbe lo stesso volume.

Nel web design, "Squash and Stretch" viene utilizzato quando gli oggetti devono essere accattivanti. Se c'è un oggetto che deve sembrare dotato di massa fisica, questo principio può funzionare.

2. Anticipazione

Fonte: CentoLodigiani via Giphy

L'anticipazione prepara lo spettatore a ciò che sta per accadere e può rendere l'azione risultante più realistica. Non ti siederesti senza prima piegare le ginocchia, o prendere qualcosa senza tirare fuori il braccio, giusto? L'anticipazione mette il personaggio o l'oggetto attraverso uno o due movimenti realistici per suggerire allo spettatore cosa sta per accadere.

Nel web design, l'anticipazione viene utilizzata nelle transizioni. Ad esempio, se un visitatore compila una casella di informazioni e tralascia le informazioni richieste, la casella potrebbe rimbalzare un po' per attirare la sua attenzione e comunicare "Ehi, qualcosa non va". Un altro modo per usare l'anticipazione è ridurre leggermente gli oggetti e poi farli diventare più grandi al passaggio del mouse.

3. Messa in scena

La messa in scena guida l'occhio dello spettatore in modo che guardi dove vuoi che guardi ("linee principali" in fotografia). Riduci il resto della scena in modo che lo spettatore si concentri proprio su ciò che vuoi che faccia. Un altro componente della messa in scena è che ogni azione che un personaggio fa ha un'intenzione dietro di essa. Se isolassi ogni fotogramma dell'animazione, saresti in grado di dire l'intenzione dietro la posa.

La stadiazione è uno dei principi più facili da applicare al web design e alle immagini utilizzate sui siti web. Questo è ciò che accade quando viene visualizzato un popup su una pagina Web: il movimento del popup ti fa concentrare su di esso e il resto della pagina è sfocato, oscurato o coperto. Stai illuminando in senso figurato la parte più importante del "palcoscenico" e tenendo tutto il resto sullo sfondo. Anche la luce e l'ombra possono essere utilizzate per questo, oppure i web designer possono applicare questo principio semplicemente eliminando i dettagli non necessari.

4. Dritto avanti e posa per posa

"Dritto avanti" e "posa per posare" sono due modi diversi per creare animazioni. Con "dritto in avanti", i fotogrammi vengono creati in ordine dall'inizio alla fine. Ciò conferisce all'animazione un movimento dinamico e fluido. Con "posa in posa", vengono creati il ​​primo e l'ultimo fotogramma, quindi vengono aggiunte le pose intermedie necessarie.

Fonte: Vincenzo Lodigiani, Motion Artist

Oggi, l'animazione al computer usa "posa per posa" perché il computer può riempire automaticamente i fotogrammi mancanti. Dai un'occhiata alle animazioni di Cechov: puoi dire che non sono realisticamente fluide (e non dovrebbero esserlo). Se desideri creare un'animazione "dritta" sul tuo sito web, puoi utilizzare la funzione di temporizzazione dei passaggi ( ), che ti consente di definire più fotogrammi e di visualizzarli in sequenza.

5. Seguire e sovrapporre l'azione

Il principio dell'"azione continua e sovrapposta" afferma che quando un personaggio o un oggetto è in movimento e poi si ferma, parti del soggetto si muoveranno e si fermeranno a velocità diverse. Questo imita le leggi della fisica della vita reale.

• Azione sovrapposta: diverse parti del soggetto si muovono a velocità diverse.
• Follow Through: le parti dell'oggetto collegate in modo lasco continuano a muoversi per alcuni secondi dopo che l'oggetto principale si è fermato. Quelle parti si sposteranno oltre il punto di arresto e poi si tireranno indietro verso l'oggetto.

Nell'esempio seguente, le braccia e le gambe di Rapunzel si muovono a una velocità diversa dalla sua testa: è un'azione sovrapposta. Quando smette di roteare, i suoi capelli continuano a oscillare per un secondo - questo è il seguito.

Il "trascinamento" è una tecnica correlata in cui accade il contrario: parti dell'oggetto si muovono e poi il resto raggiunge. Tutte queste tecniche mostrano movimenti realistici o possono esagerare il movimento per un effetto comico.

Anche la "sposta in movimento" è collegata a questo. I personaggi che rimangono fermi hanno un leggero movimento in modo che l'animazione non diventi stagnante.

Nel mobile e nel web design, "follow-through" e "azione sovrapposta" mostrano allo spettatore che un'azione si sta interrompendo di proposito . Altrimenti, potresti pensare che abbia semplicemente smesso di funzionare. Ad esempio, guarda come l'app Wunderlist sul mio iPhone mostra che sto spostando un elemento dell'elenco. L'articolo diventa di un colore diverso e si ingrandisce man mano che lo sposto, quindi torna al colore e alle dimensioni originali una volta terminato. È così che so che l'azione è completa.

Puoi anche vedere questo principio in azione sul tuo iPhone. Mentre passi da una visualizzazione all'altra o sposti le icone nella schermata principale, gli elementi si spostano a velocità leggermente diverse. Questo è il modo in cui il tuo iPhone comunica: "Le cose stanno cambiando".

6. Rallenta e rallenta

Il principio "rallenta e rallenta" afferma che un oggetto inizia a muoversi lentamente, acquista slancio e accelera, quindi rallenta di nuovo quando si ferma. Fondamentalmente, i movimenti devono accelerare e rallentare per essere naturali. Per ottenere questo effetto, ci sono fotogrammi aggiuntivi all'inizio e alla fine di un'azione per enfatizzare l'aumento e la diminuzione graduale del movimento.

Fonte: L'illusione della vita su Tumblr

Per il web design, i CSS hanno due funzioni di temporizzazione legate a questo principio: facilità di entrata e di uscita. Puoi vedere un esempio se lo trovi sul sito web Your Plan, Your Planet (fai clic su "Iniziamo" prima).

7. Arco

Come molti degli altri 12 principi dell'animazione, "arco" si basa sulla fisica. Gli oggetti di solito seguono un certo tipo di arco mentre si muovono a causa della gravità. Se dovessero rimanere dritti, il movimento sarebbe meccanico, non realistico.

Questo vale anche per tutti i tipi di movimento, non solo per gli archi dal basso all'alto al basso:

Nel web design, il principio "arco" può essere utilizzato creando animazioni che si snodano, ovviamente, ma anche facendo ruotare un elemento, come durante i tempi di caricamento.

8. Azione secondaria

Un'azione secondaria enfatizza l'azione principale senza distrarla. Dà anche più dimensione a personaggi e oggetti e dà vita a una scena. Il principio della messa in scena ha un ruolo perché l'azione principale deve ancora essere al centro.

Un'azione secondaria non deve necessariamente cadere al di fuori dell'oggetto principale. Può essere un personaggio che fischia mentre cammina o esprime emozioni alzando le sopracciglia.

Nel mobile e nel web design, il principio dell'"azione secondaria" si vede quando gli elementi si spostano per fare spazio a un nuovo elemento, come quando riorganizzi le app sul tuo iPhone. Questo può andare di pari passo con "azioni successive e sovrapposte", che enfatizza quelle azioni.

9. Tempismo

Il tempismo è piuttosto semplice ed è correlato a "rallentare e rallentare". Il principio dice che gli elementi dovrebbero muoversi in modo coerente in modo naturale, come farebbero nel mondo reale. Per enfasi, possono essere volutamente accelerati o rallentati. Il numero di fotogrammi utilizzati stabilirà i tempi: più fotogrammi creano un'azione più lenta, meno fotogrammi ne creano una più veloce.

In questo esempio, le prime azioni di Daffy Duck hanno un tempismo naturale, quindi l'ultima azione, quando si avvicina allo spettatore, è volutamente veloce per dare enfasi.

Il tempismo aiuta anche lo spettatore a capire il peso degli oggetti in relazione l'uno all'altro. In questo esempio, il personaggio solleva i pesi lentamente e li lascia cadere rapidamente, mostrando che sono pesanti per lui:

Fonte: @scottthigpen su Giphy

Nel web design, il tempismo viene utilizzato per far sì che gli elementi rimangano un po' più a lungo o scompaiano rapidamente, in particolare quando si risponde all'interazione dell'utente. Ad esempio, se un utente desidera chiudere un menu, è possibile impostare il tempo in modo che rimanga per 300 ms. Se toccano un elemento nella barra di navigazione, vorrai che l'azione avvenga rapidamente (100 ms).

10. Esagerazione

Anche se molti dei 12 principi dell'animazione sono incentrati sulla realtà, la bellezza dell'animazione è che non è reale. Il principio dell'"esagerazione" dice che troppo realismo può sminuire ciò che l'animazione è migliore: l'intrattenimento. L'esagerazione è usata per rendere i personaggi e gli oggetti più interessanti. Prende la realtà e la alza di un livello, quel tanto che basta perché la scena sia ancora credibile. L'esagerazione richiede moderazione in modo che la scena non diventi astratta o surreale.

Nel web design, gli oggetti vengono ridimensionati per attirare o distogliere l'attenzione. Quando un utente è attivo su una determinata parte del sito Web, come un modulo, può crescere mentre altri elementi si riducono. Questo è simile al principio della "messa in scena", specialmente quando si pensa ai moduli pop-up.

11. Disegno solido

Fonte: L'illusione della vita su Tumblr

Anche se l'animazione è tecnicamente 2D, deve presentarsi realisticamente in 3D. Il principio del "disegno solido" potrebbe anche essere chiamato "prospettiva" perché riguarda la capacità di disegnare e comprendere le basi come:

• Anatomia
• Bilancia
• Consistenza
• Luce e ombra
• Volume
• Il peso

Per i web designer, aggiungere profondità a un elemento mostra agli utenti che possono interagire con esso. Puoi vederlo in azione sul nostro sito web. Guarda come il pulsante "Unisciti al download" diventa rosa mentre scorro verso il basso:

12. Appello

Forse il più complicato dei 12 principi dell'animazione da padroneggiare, "appeal" dice che i tuoi personaggi, oggetti e il loro mondo devono attrarre il pubblico. Dovrebbero essere attraenti e affascinanti in qualche modo, fisicamente o meno. Non c'è una ricetta per farlo bene, ma lo sviluppo solido del personaggio e la narrazione sono ingredienti chiave.

Nell'animazione, ogni singolo personaggio non sarà attraente: il cattivo è una pietra angolare dei film Disney. Tuttavia, il modo in cui vengono presentati dovrebbe comunque avere carisma e interessare il pubblico.

Nel web design, "ricorso" significa che il sito web nel suo insieme è coinvolgente, divertente e facile da usare.

Avvolgendo

I 12 principi Disney possono aiutare con animazioni semplici, come se stai creando un gioco interattivo sul tuo sito web, ma possono anche aiutare con il design per tutti i tipi di pagine web. La maggior parte dei consumatori è come me quando si tratta di film Disney: so che mi piace qualcosa e il mio cervello elabora i segnali, ma non riesco a capire perché ho quelle reazioni. Il lavoro del web designer è quello di anticipare ciò che un visitatore penserà e farà, e poi guidarlo sottilmente a intraprendere le azioni giuste.

Cerchi ancora più modi per entrare in contatto con il tuo pubblico? Leggi il nostro post sul blog sull'uso dell'emozione del colore.