News, Prodotti e tecnologia, PurplePurple 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.

Leggerezza 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

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.

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

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.

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.

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

In collaborazione con il team sviluppo di Bootique, abbiamo portato la ricercatezza e l’attenzione che caratterizza il lavoro di Horacio Pagani, utilizzando PHP, HTML5, 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