Eni
Un Information Design System per comunicare nel settore energetico

Dal 2012 The Visual Agency è fornitore di eni per la produzione di infografiche, vincendo inoltre la gara per la fornitura di data visualization interattive nel 2017. Lo scorso 2019 è stata ingaggiata per il re-design delle principali infografiche interattive realizzate durante gli anni di questa collaborazione. Il motivo di questo aggiornamento è dovuto al lancio del nuovo sito eni.com, che ha visto la luce il 6 febbraio 2020.

Fase 1
Analizzare lo stato dell’arte

 

Al fine di uniformare i diversi linguaggi, sedimentati nei vari re-work e introdotti da diversi owner di contenuti, è stato fondamentale ripensare da zero il processo che porta alla pubblicazione di visualizzazioni interattive, dal design allo sviluppo.

Fase 2
Progettazione di un sistema organico di elementi

 

La realizzazione di semplici style-guide per la progettazione di infografiche non sarebbe bastata a sopportare il carico di design e sviluppo necessario alla produzione. Ripartendo quindi dalle guidelines stabilite dal cliente e dall’analisi dei progetti passati, è stato pensato un nuovo sistema di stili: un information design system.
Seguendo la logica dell’atomic design, gli elementi di ogni visualizzazione di dati sono stati de-strutturati e analizzati per la successiva ri-costruzione degli stessi, e per la rappresentazione delle informazioni.

Elementi per l’atomic design

 

Gli elementi che vanno a costituire il progetto grafico possono essere di due tipi: strutturali e indicali.

1. elementi strutturali, che distribuiscono spazialmente i dati e determinano una griglia all’interno della quale visualizzare le informazioni;

2. indicazioni numeriche, che costituiscono un riferimento quantitativo nella rappresentazione del dato.

Interazioni e navigazione

 

La combinazione dei differenti elementi atomici e delle loro interazioni ci ha permesso di dare vita ad un nuovo sistema modulare, coerente con la design identity del cliente e dal look accattivante.
Una modalità di navigazione lineare ed intuitiva è stata progettata per facilitare la fruizione dei contenuti da parte degli utenti. 

In questo esempio, al movimento laterale corrisponde la navigazione tra le differenti sezioni di una visualizzazione; tramite un click nella barra superiore è invece possibile effettuare uno switch tra tabs e viste di una stessa sezione, mostrato mediante un effetto zoom-out.

Griglia

 

A partire dal layout dell’interfaccia, abbiamo progettato una griglia modulare all’interno della quale inserire i componenti infografici. 
Il modulo base (360×185 px) costituisce un’unità di grandezza attraverso la quale costruire molteplici variazioni del layout.
 Ciò offre uno strumento di organizzazione delle informazioni e definisce un perimetro di azione valido per tutti gli inserti di visualizzazione dati.

Fase 3
Utilizzo dell’information design system

 

Il sistema è stato quindi utilizzato come punto di partenza per la progettazione di nuovi componenti infografici. Elementi testuali, dinamici ed interattivi concorrono alla realizzazione di visualizzazioni complete ed immersive, destinate tanto alla chiara fruizione dei dati quanto all’approfondimento dei contenuti.

👏 Leggi questo articolo su medium 👏

 

Stay updated

Berry

Iscriviti a Berry – la Newsletter di The Visual Agency !

 

Non ti invieremo niente di noioso, promesso 🤞