Sparkle si focalizza molto su quello che potrebbe essere considerato il primo livello del web design: il visual design statico. L'esperienza del visitatore dipende dagli elementi di design più classici come colore, contrasto, carattere e spazio geometrico. Qui esamineremo la funzione di animazione di Sparkle.

L'uso della parola esperienza è per scelta attenta, perché il tentativo di integrare le animazioni può essere sia piacevole che frustrante (si spera un po’ più piacevole che frustrante). Il motivo è che le animazioni possono disturbare molto di più l’equilibrio del design rispetto agli elementi statici. Data l'illusione di vita e movimento, puoi finire con troppi, o troppi pochi, frammenti disconnessi che non si adattano e disturbano anche il contorno.

Ma se fatte bene, queste entità di breve vita trasformano il design quasi più in una interazione naturale. I flussi narrativi e i contenuti della pagina diventano accoglienti inviti a ulteriori esplorazioni.

Quindi iniziamo a giocare.

Questo esempio è un design semplice su Halloween con l'intento di catturarne un po’ del divertimento e della follia.

Le animazioni di scorrimento possono essere applicate a immagini, pulsanti, caselle di testo ed elementi video. Puoi attivare le animazioni tramite la casella di spunta nel pannello dello stile. Si apriranno sotto due menu, uno per selezionare l'animazione e l'altro per scegliere la direzione e il tipo di movimento. L'ultima scelta nel primo menu, Altro, apre un elenco di animazioni non convenzionali, che potrebbero funzionare con Halloween. Sotto la scelta dello stile di animazione ci sono i controlli di temporizzazione, ripetizione e distanza.

Nonostante questo tema sia meno restrittivo rispetto, ad esempio, a un design aziendale, dobbiamo sempre fare attenzione alle animazioni che scegliamo. I nostri elementi in movimento: una lapide, un cane fantasma, una decorazione per bici, tre piccoli fantasmi e una zucca che sembra essere tenuta da Mercoledì Addams.

Dopo alcune sperimentazioni abbiamo queste scelte:

• Un rimbalzo per la lapide applica l'idea di peso e di intimidazione (nel contesto di Halloween).
• Un'oscillazione per il cane come la classica raffigurazione di un cartello oscillante di una locanda decrepita presente nella tradizione di Halloween. Funziona con la forma verticale dell'immagine, e il cane è il posto migliore per usarla in quanto completamente neutro.
• Niente per la decorazione della bici. C'è molto movimento e alla fine avere un elemento stabile fornisce un punto di riposo per gli occhi e rende più accettabile il movimento intorno. Cercare di percepire ciò che sta accadendo con più parti in movimento e nessun punto di stabilità creerebbe confusione e diminuirebbe il divertimento dell'effetto.
• Elastico per i fantasmi. Sembrano dei blob, quindi l’animazione elastico è perfetta, si somma alla comicità delle loro espressioni.
• Infine Tada! per la zucca nelle mani genera un momento "guarda", come se la ragazza si preparasse a offrire la zucca allo spettatore.

Il risultato finale:

Per quanto riguarda un esempio più normale di animazioni, in questo design la funzione di ritardo viene utilizzata per creare una scoperta lineare e un tema di esplorazione, comunicando contemporaneamente i servizi dell'azienda pubblicizzata: