Un progetto digitale per la sfida intrapresa da Giovanni Soldini: navigare i 7 mari raccontando il loro stato di salute e ciò che ognuno di noi può fare per salvaguardarli.

A bordo del Maserati M70, un trimarano oceanico di ultima generazione, il celebre velista Giovanni Soldini sta intraprendendo un viaggio intorno al mondo con lo scopo di monitorare e raccontare lo stato di salute dei mari e degli oceani.
PaperPlane è stata chiamata per costruire l’identità del progetto e realizzare il portale digitale che racconta il viaggio e che in futuro diventerà un punto di riferimento per le tematiche legate alla salute degli oceani e dei mari.

Richiesta

Costruire un’identità e un sito web che sappiano unire le tre anime del progetto: l’ambiente, il viaggio e la performance sportiva.

Soluzione

Una brand identity forte e d’impatto che rilegge in chiave contemporanea l’iconografia marinaresca ed un portale in WordPress in grado di raccogliere in un racconto organico innumerevoli contributi.

Logo e palette colori per Around The Blue, un progetto digitale sostenibile.

Un logo ad alto impatto visivo per una chiamata all’azione globale nei confronti di un tema che riguarda l’intera umanità.

Una curva taglia la tipografia, descrivendo con il suo arco un orizzonte, compagno di viaggio di ogni navigatore. Allo stesso tempo l’angolazione della curva da l’impressione di star osservando da fuori il nostro pianeta. Si crea così un gioco di prospettiva e punti di vista: l’immersione in prima persona richiama la componente romantica del viaggio; la vista esterna evoca l’approccio scientifico che dà autorevolezza al viaggio.

La tipografia bold e condensed dona un tono energico alla comunicazione e richiama il mondo dell’attivismo, dello sport e della politica, in una chiamata all’azione globale che ci coinvolge tutti.

Uno schema grafico che raffigura la genesi del logo di Around The Blue.
Il logo di AroundTheBlue in versione bianca, sovrapposto ad uno sfondo con molteplici tonalità di azzurro e blu.

Una brand identity che si ispira al mare e alla sua tradizione

Il tema della curva ritorna anche nel coordinato d’immagine, diventando un elemento visivo che maschera le immagini e i video e offre l’impressione di star osservando il nostro pianeta blu.
La palette colore è stata costruita estrapolando i colori da foto satellitari di mari e oceani prese da tutto il mondo.
Per raccontare le diverse tematiche che abitano il portale abbiano disegnato un set di icone, utilizzando come base di disegno la curva presente nel logo. Le icone sono tratte dai tatuaggi marinareschi e ne ereditano il significato, contestualizzandolo ai fini del racconto.

Toni e Jacopo ti aspettano

AroundTheBlue - Un progetto digitale sostenibile - Set icone
Lo screenshot di una pagina web del sito Around The Blue che mostra una mappa con l'itinerario che verrà percorso da Giovanni Soldini.

Un identity in movimento, come le onde del mare

Gli elementi del brand sono un elemento fondamentale anche dei diversi contributi video, dove prendono vita e servono da supporto informativo a quanto viene mostrato attraverso le immagini. I movimenti utilizzano sempre la curva come elemento base e si ispirano al moto continuo delle onde.

Il diario di bordo 2.0

Il viaggio intrapreso da Giovanni Soldini e il suo team in giro per il mondo viene narrato nelle pagine del sito impostato come fosse il loro diario di bordo.
Tutto il viaggio è raccontato attraverso le tappe, divise per Mari e Oceani, durante le quali si ha la possibilità di fermarsi per leggere o guardare un approfondimento sul mare, sui luoghi che navigheranno e sui cambiamenti che il mare sta subendo in questi anni.

La sostenibilità del pianeta passa anche da come noi progettiamo un sito web

Il progetto digitale di Around the Blue ha l’obiettivo di essere “carbon neutral”.
Per contribuire alla riduzione di emissioni di gas, abbiamo utilizzato per raccontare il progetto componenti a basso consumo di dati come icone e illustrazioni. Inoltre per tutto il sito si è deciso di utilizzare un dark blue che unisce la parte esperienziale (rende l’idea di “immersione nelle profondità delle acque) con quella funzionale, meno “luce” utilizzata significa una maggiore estensione della durata della batteria, quindi di conseguenza riduciamo il consumo di elettricità necessaria per ricaricare il nostro dispositivo generando meno emissioni di carbonio.

Toni e Laura ti aspettano

Lo screenshot di una pagina web in versione mobile del sito Around The Blue che mostra uno slideshow di contenuti.
Lo screenshot di una pagina web in versione mobile del sito Around The Blue che mostra i dati di una singola tappa.

L’importanza delle web performance per un sito WordPress che parla di sostenibilità

Il sito web di AroundTheBlue – realizzato con un tema custom per WordPress – è stato una sfida dal punto di vista delle performance a causa dei numerosi elementi grafici e video. Questi contenuti, necessari a rendere la narrazione più coinvolgente, hanno un impatto significativo sia per i tempi di caricamento che per la quantità di dati che vengono trasferiti al caricamento di ogni pagina.

Per ridurre al massimo l’impatto abbiamo utilizzato il formato SVG sia per immagini prettamente grafiche che per il font di icone che caratterizza il progetto.

Un altro elemento al quale abbiamo dedicato molta attenzione è il formato video: tutti i filmati presenti nella libreria media di WordPress vengono caricati in front end utilizzando Lazy loading. I video – ed il relativo player – inseriti tramite embed da Vimeo vengono effettivamente caricati solo nel momento in cui l’utente “clicca play”.

Toni e Nanni ti aspettano

Lo screenshot di una pagina web del sito Around The Blue che mostra l'itinerario di Giovanni Soldini.

Scopri altri casi studio

Rinnovare l’immagine istituzionale di un software B2B per video-library in streaming

Progettazione brand-identity per azienda biomedica - logo

Progettare la brand identity di un’azienda biomedica