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

Parallax scrolling: come rendere più piacevole la UX [case history]

Il parallax scrolling è una tecnica ormai molto sviluppata nel frontend development. Parallax, in italiano parallasse, deriva dal greco e significa accavallamento: il principale effetto ottenuto comporta la sovrapposizione di vari elementi all’interno della nostra pagina, che si spostano allo scroll a velocità differenti. In motion graphic questo espediente veniva utilizzato ancor prima di vederlo nel web, per ottenere un effetto tridimensionale in cui le immagini di sfondo si muovono più lentamente rispetto a quelle in primo piano.

Quando utilizzare il parallax scrolling

È possibile ottenere un perfetto effetto di parallax scrolling su pagine relativamente lunghe: questo ci permette di avere lo “spazio di manovra” necessario per scorrere la pagina e notare l’accavallamento degli elementi a velocità differenti. L’effetto non deve essere eccessivamente evidente, bastano veramente pochi accorgimenti per rendere lo scrolling più piacevole e fluido, rispetto allo standard lineare.

Grazie al parallax scrolling, l’utente si sentirà catapultato all’interno della pagina e delle immagini, creando fantastici effetti tridimensionali e di zoom. L’effetto può essere applicato sia a fotografie che a elementi di UI ma anche a caratteri tipografici e pattern di sfondo.

Come progettare una pagina web con il parallax scrolling

Progettare una pagina web con l’effetto del parallax scrolling, comporta uno studio approfondito della struttura della pagina e degli effetti che i vari elementi dovranno possedere al momento dello scroll.

Per lo sviluppo della home page e di alcune pagine interne del sito Souvenir Clubbing abbiamo prima di tutto realizzato dei wireframe, ovvero uno schema dei contenuti della pagina, completamente in bianco e nero. Questo ci ha permesso di studiare gli effetti principali e a quali velocità si dovevano muovere.

Parallax Scrolling - Come progettare un effetto parallasse aiutandosi con i wireframe
I wireframe ci permettono di definire gli ingombri e le varie tipologie di spostamento.

Con i wireframe è possibile eliminare ogni tipo di distrazione da colori, immagini e tipografia: tutta l’attenzione è dedicata alla gerarchia dei contenuti e alla User Experience.

Lo sviluppo frontend del parallax scrolling

Per questo progetto abbiamo deciso di affidarci ad un potente plugin jQuery che ci ha permesso di realizzare ogni effetto di parallax scrolling nel modo più preciso e fluido possibile: il suo nome è Skrollr e lo potete scaricare dalla sua repository github a questo link: https://github.com/Prinzhorn/skrollr.

Associato al grid system del nostro Framaework, siamo stati in grado di gestire ogni elemento in maniera tale che ogni effetto di scrolling avvenisse esattamente al momento desiderato: il sistema di ancoraggio di Skrollr riesce a gestire i breakpoints in modo molto preciso.

Schema per gestire i breakpoints di Skrollr
Schema per gestire i breakpoints di Skrollr

Conclusioni

In conclusione, sviluppare una pagina con l’effetto del parallax scrolling necessità degli accorgimenti specifici che ci permettono di ottenere uno scrolling piacevole, migliorare la User Experience delle nostre pagine e dare quel tocco di dinamicità a qualsiasi tipo di contenuto ma attenzione: senza il dovuto studio e progettazione l’effetto può risultare invadente e abbassare parecchio le prestazioni, creando scatti e delay durante la navigazione.

Potete visionare il risultato del nostro lavoro sul sito www.souvenirclubbing.net o guardare un anteprima del parallax con il video sottostante.