Preludes
1. Obiettivi
Lo scopo del progetto è la condivisione di risorse all’interno di una community incentrata sull’eccellenza, personale e aziendale.
2. Stile
Lo stile visivo e concettuale deve comunicare chiarezza e umanità. Si è quindi scelto di sviluppare il logo a partire dall’icona della goccia d’acqua e di comporre il layout basandosi su linee curve e colori organici.
3. Struttura
La homepage si apre su uno sfondo illustrato dove un gruppo di persone tesse una strada verso il cielo. Dopo qualche istante, l’illustrazione viene coperta da quattro quadranti interattivi che spiegano i contenuti presenti nell principali aree del sito.
Lo scenario illustrato della home viene mostrato soltanto alla prima visita: se si ritorna alla homepage successivamente, si caricano istantaneamente i contenuti dei quadranti senza attendere di nuovo la comparsa dell’illustrazione.
2. Stile
Lo stile visivo e concettuale deve comunicare chiarezza e umanità. Si è quindi scelto di sviluppare il logo a partire dall’icona della goccia d’acqua e di comporre il layout basandosi su linee curve e colori organici.
Tecnologie
La homepage è stata realizzata interamente in Vanilla Javascript, il linguaggio di scripting più leggero del web; gli elementi iconici sono stati ottimizzati in SVG, un formato vettoriale universale che può essere manipolato da Vanilla Javascript.
La versione per dispositivi mobili utilizza contenuti multimediali ottimizzati nei nuovi formati webP e webM. In questo modo si è assicurata la massima rapidità possibile nella comparsa dello scenario illustrato a schermo intero, e della immediata risposta dei quadranti ai click del visitatore.
Mobilità
Anche la fruizione tramite tablet e smartphone vuole familiarizzare il visitatore alle principali sezioni, ma tramite un elenco verticale. Le quattro voci, quando vengono toccate, offrono una breve spiegazione e invitano ad esplorare la sezione corrispondente.
Anche gli altri elementi di interazione sono stati adattati per permettere la navigazione tattile: toccando i pulsanti (touch), scorrendo la pagina (swipe), trascinando gli oggetti (slide).
Contenuti
I contenuti dinamici del sito sono gestiti direttamente dal cliente tramite un pannello di amministrazione WordPress configurato per creare le “esperienze” sulla base di un formato composto da diversi campi di inserimento, in maniera che titoli, sottotitoli e tabelle informative vengano automaticamente stilizzate.
Caratteristiche: Interface Animation WordPress