Le animazioni SVG nel web: il sito di Severino Becagli [Case History]

Con il progetto di Severino Becagli ci siamo dovuti mettere alla prova per realizzare un nuovo immaginario, un nuovo modo di vedere l’Alga Spirulina. Severino Becagli è infatti il primo produttore di Alga Spirulina in Toscana. Il primo a voler trattare e promuovere questo tipo di prodotto, associandolo alla cultura e alla tradizione della nostra cara regione. Siamo così riusciti a creare una brand identity in grado di far associare la Spirulina, non solo al salutare e al biologico, ma anche alle cose buone, ai sapori e alla tradizione del buon cibo che la nostra cultura rappresenta.

Il sito web non poteva essere da meno: come poter far distinguere Severino Becagli da tutti i suoi competitor? Come far trasparire la passione delle persone dietro a questo progetto?

Le animazioni SVG sono state un’ottima soluzione. Grazie alla loro malleabilità a qualsiasi risoluzione e alla loro leggerezza, sono perfette per ottenere una resa fluida e dinamica. I principali vantaggi degli SVG nel web sono:

  • Pesano poco.
  • Possono essere modificati per colore, forma e traccia.
  • Sono perfettamente scalabili, senza perdita di qualità o sgranamenti.
  • Si vedono perfettamente sui retina display.

La costruzione del logo per la schermata del loading

Il sito web di Severino Becagli è ricco di immagini e video, per questo ci è venuto naturale inserire un loading che assista l’utente durante il caricamento dei vari contenuti e che faccia visualizzare il tutto nel momento in cui sia perfettamente caricato e renderizzato. Il logo di Severino Becagli si presta parecchio ad essere animato, vista la sua forma a spirale.

Per poter realizzare l’effetto del drawing, ovvero della traccia che appare disegnandosi, è stato necessario sviluppare una maschera che copra il tracciato (anche questa in SVG, per permettere una perfetta scalabilità su qualsiasi risoluzione), in questo modo, quando la traccia si disegnerà, andrà a riempire perfettamente la silhouette del pittogramma.

Preparata la struttura, non ci resta che animare tutto con la il motore di animazioni JavaScript AnimeJS, facendo in modo che il logo vada in loop fino a che la pagina non si sia completamente caricata. Nel momento in cui il browser sarà pronto a mostrarci il contenuto della pagina, l’animazione finirà il suo corso (soltanto pochi decimi di secondo, non vogliamo spazientire i nostri utenti) per poi svanire con uno zoom ad effetto.

Le altre animazioni SVG all’interno del sito web

Le animazioni SVG ci permettono di realizzare parecchi altri interessanti effetti: ad esempio la home page si apre con un altro effetto maschera. Stavolta la traccia SVG ha il compito di mostrarci una foto dell’alga Spirulina che si muove allo spostamento del mouse, inoltre le scritte dei titoli appaiono con un effetto rivelatore, anche questo ottenuto con delle semplici sagome realizzate in SVG, programmate per sparire al caricamento della pagina.

Oltre a varie animazioni realizzare con l’effetto del parallax scrolling, un’altro effetto sviluppato con gli SVG può essere visionato nella pagina “Spirulina“: quando vengono illustrate la composizione dell’alga e le principali vitamine contenute al suo interno, un pentagono in SVG appare allo scroll, mostrando le 5 principali vitamine presenti.

Non solo tecnica e animazioni…

Non sono solo animazioni e aspetti tecnici a rendere il sito web di Severino Becagli uno degli ultimi vanti della nostra agenzia di Comunicazione: ogni aspetto è curato nei minimi dettagli, seguendo un brand book precedentemente realizzato dal nostro reparto di art direction, contenente tutte le informazioni per poter declinare ogni elemento o prodotto marcato Severino Becagli.

Il sito web di Severino Becagli

Design versus Art

Ho frequentato un istituto che trattava arte applicata iscrivendomi però al corso di Comunicazione. Forse è per questo motivo che per molto tempo ho avuto le idee confuse su quale era il limite tra arte e design. In effetti per molti aspetti le due cose si intersecano, almeno lo hanno fatto per un periodo storico, dove i più creativi erano gli artisti a cui veniva attribuito il ruolo di designer. Personalmente sono molto felice che lo abbiano fatto perché così possiamo ammirare pezzi unici di architettura ed accessori.

Il punto su cui però interrogarsi è uno solo: il design deve tendere al bello o al funzionale? Quale vende di più?

Avete presente l’Art Noveau? Bellissima, sinuosa in tutte le sue linee ricurve e dettagliate, con i suoi bordi netti in stile fumetto pop, i suoi ori scintillanti e le sue architetture che si ispirano alla natura e dipinti giapponesi. Su Klimt ho scritto un tema e realizzato (in un totale delirio cosmico di onnipotenza) una sua opera in creta. Mia mamma a casa aveva attaccato dei quadretti con i manifesti di Steinlen, Mucha e Lautrec. Che colori, che tratto. Forse anche io un giorno potrò fare il disegnatore di pubblicità come loro, mi dicevo.

Ma non si trattava di design, erano solo degli artisti che disegnavano poster diventando illustratori.

Avete presente Sottsass? La megafigata dello specchio Ultrafragola, la libreria Carlton che tutti hanno desiderato almeno una volta nella vita? Come vorrei poterli mettere in casa..

Ecco, a prescindere dai propri gusti, questo non è design anche se l’ideatore è un designer.

Partiamo dalle basi.

L’artista elabora un qualcosa che è per le masse. Il designer anche.

L’artista crea dei pezzi unici per soldi. Il designer anche.

L’artista è sensibile ai movimenti sociali del suo tempo. Il designer anche.

L’artista elabora qualcosa che gli viene dalle viscere a proprio sentimento, con la tecnica che più lo aggrada. Il designer elabora qualcosa che deve rispettare determinati standard sia materialmente che strutturalmente.

Per esempio non si può costruire un tavolo di carta velina perchè non potremo mangiarci. Questa è una licenza poetica che si può permettere l’artista per trattare un tema a lui particolarmente caro. Il designer invece può pensare a realizzare un tavolo leggero e resistente che può cambiare misura per le più disparate esigenze dell’acquirente.

L’artista crea nelle persone interrogativi. Il designer risponde alle domande dei più esigenti.

Il design visivo per le pubblicità non dovrebbe costruire troppi interrogativi intorno alla sua funzione. La comunicazione deve essere veloce, colpire diretta senza far perdere lo spettatore nella foresta delle informazioni. Le persone leggono le immagini dalle auto, scorrendo le riviste e i device .

Al centro di una folla di gente che parla, solo un megafono viene ascoltato da tutti.

Ci sono un bel pò di parole che se pronunciate in associazione con altre possono farti sentire migliore nell’impiego che svolgi. Alcune di queste appartengono alla categoria dei designer e vengono usate a sproposito per una moltitudine di altre professioni.

Per come la intendo io, per tutte le domande che mi sono fatto e le relative risposte a cui sono arrivato, il design è quella particolare invenzione che migliora la vita delle persone, non la rende solo più bella e alla moda.

Fare design è un qualcosa che richiede conoscenza del prodotto che deve essere sviluppato. Per capire se un vino è buono o meno se ne deve aver provati altri e bisogna sapere quali sono le caratteristiche che lo rendono un vino di qualità. Ci può piacere anche il vino in tetrapak, ma non possiamo dire di essere dei sommelier.