Purple firma il codice del nuovo sito di Pagani Automobili | Purple Network #Blog

News, Prodotti e tecnologia, PurplePurple firma il codice del nuovo sito di Pagani Automobili

La storia della grande casa automobilistica italiana raccontata in digital grazie ad un visual storytelling in video full screen con la fluidità e la leggerezza del CSS.

Purple firma il codice del nuovo sito di Pagani Automobili

Esclusività, velocità, fluidità, interpretazione di un sogno destinato a pochi: le Automobili Pagani nascono per essere uniche, delle opere d’arte che si fondono con la scienza.

layout home page PaganiLeggerezza e performance sono le caratteristiche che abbiamo inseguito nello sviluppo, in collaborazione con Bootique, del nuovo sito corporate dell’azienda automotive di San Cesario sul Panaro, pubblicato in occasione del lancio della Huayra Roadster presentata nell’ultima edizione del Salone dell’Auto di Ginevra.

Huayra Roadster, leggera e veloce come will-change

Intro Pagani Huayra Roadster Horacio Pagani

Horacio Pagani ha definito la sua ultima creatura come il suo progetto più complesso di sempre: sei anni di lavoro per creare un modello di Huayra ancora più leggera del coupé.
Per questo anche il nostro sito doveva essere “leggero”, mantenere la qualità del suo design da ogni device e garantire la massima esperienza utente.

Huayra roadster Pagani Automobili_b

I testi entrano nel layout con effetto dissolvenza mentre la navigazione è gestita con uno snap scroll fluido, che permette di passare di pagina in pagina con la stessa eleganza di una Pagani sull’asfalto. Per ottenere questo risultato senza appesantire la navigazione, abbiamo ridotto al minimo l’utilizzo di JavaScript per la gestione delle animazioni e lavorato prevalentemente in CSS: nello studio degli approcci migliori per raggiungere il nostro obiettivo, abbiamo trovato utile e interessante la proprietà CSS will-change.

Specifiche, un contachilometri trigonometrico

Specifiche Pagani Huayra con integrazioni trigonometria

Le specifiche sono state disegnate in un semicerchio e sviluppate tutte in CSS con l’integrazione di alcuni elementi di trigonometria, per calcolare con esattezza l’angolo in cui si posizionano i bullet: la semicirconferenza rimane fissa mentre i bullet si muovono in base al tap, l’angolo calcolato è una transizione che dipende dal numero di elementi presenti.

specifiche sito corporate Pagani Automobili

Navigazione da Mobile, sistema di snap scroll on/off

La qualità delle animazioni e la fluidità del layout sono state mantenute anche in ambito mobile. La navigazione del sito è in snap scroll ma per mobile sono stati adottati dei piccoli accorgimenti per fornire la migliore esperienza utente possibile e dare libertà di scrolling, come nel caso della pagina dedicata ai contatti.
Abbiamo scelto di sviluppare un sistema on/off di attivazione dello snap scroll che ci ha dato la possibilità di rendere lo scroll continuo del contenuto nella pagina contatti, dove lo snap viene momentaneamente disattivato fino al completamento del form, salvo poi riattivarsi nello swipe successivo.

snap scroll verticale per il nuovo sito di Pagani Automobili

Ci siamo preoccupati anche della qualità degli scatti pubblicati, con la gestione da backend di immagini diverse a seconda del devices di fruizione, garantendo una resa fotografica ottimale.

Lo sviluppo: come abbiamo dato vita all’idea di Bootique

online nuovo sito Pagani Automobili

In collaborazione con il team sviluppo di Bootique, abbiamo portato la ricercatezza e l’attenzione che caratterizza il lavoro di Horacio Pagani, utilizzando PHPHTML5, CSS3 e jQuery, integrando elementi di trigonometria, perché nessun dettaglio venisse lasciato al caso. Un progetto sviluppato in WordPress, scelto per la sua semplicità di utilizzo, con design responsive e multilingua.
Tutte le sezioni possono essere aggiornate facilmente e il caratteristico visual storytelling del sito è integrabile con immagini, video embed ma abbiamo previsto anche l’inserimento di un effetto parallasse in tutte le sezioni.

» Naviga il mito Pagani

  •  
  •  
  •  

Scatti in binario

  • Our Boss is different. He’s pink.
•
•
•
•
•
•
#purplenetwork #purplelife #digitalmarketing #milanoagency #pinkhair #developer #cto #digitalagency #coding
  • Noi ve l’avevamo detto che oggi l’elearning si sarebbe fatto davvero. •
•
•
•
•
•
#formazione #elearnit #digitalmarketing #milanoagency #purplenetwork #purplevents #workshop #formacloud #formafarm #digitalagency #purplelife #purplenetworkoffice
  • “La conoscenza è un asset principale di ogni azienda”.
Oggi in #purplenetwork ospitiamo il workshop su Forma Cloud il nuovo prodotto nato dalla sinergia tra noi e #elearnit. Oggi portiamo l’Open Saas nell’e-learning.
•
•
•
•
•
•
•
•
#digitalmarketing #elearning #formacloud #formafarm #formalms #webagency #milanoagency #formazione #formazioneaziendale
  • Vicinanze del giovedì pomeriggio.
•
•
•
•
•
#digitalagency #purplenetwork #purplelife #creativity #milanoagency #projectmanager #creative #stripes #coding #developer
  • Project Management attitude.
•
•
•
•
•
•
•
•
#purplenetwork #purplelife #digitalmarketing #digitalagency #milanoagency #advertising #creativity #projectmanager #dailymeeting #workflow
  • Cos’avrà da nasconderci @lasgrips?
•
•
•
•
•
•
•
•
#projectmanager #digitalagency #digitalmarketing #creative #creativeagency #advertisingagency #milanoagency #milano #office #purplenetwork #purplelife #purpleflow
  • Abbiamo portato in digitale il #comfortliving di #Yesly, un’esperienza tutta da provare. Grazie @finderitalia!
•
•
•
•
•
•
•
#purplenetwork #purplelife #digital #digitalinnovation #advertisingagency #milanoagency #creative #creativity #interaction #secondscreen #coding #developer #geek #innovation
  • ART at work.
•
•
•
•
•
#purplenetwork #purplelife #artdirector #creative #digitalagency #milanoagency #advertising #digital
  • Great team, good guys. Part 1.
•
•
•
•
•
•
•
#purplenetwork #purplelife #creative #creativity #digitalagency #milanoagency #advertising #coding #developers
  • Ogni giorno è buono per festeggiare 🥳 
Ancora più hype per il compleanno di Sharon!
•
•
•
•
•
•
•
•
#creativeagency #advertising #advertising_agency #purplenetwork #purplelife #purplestyle #milanoagency

Seguici su Instagram!