Yuri Radaelli, Web Developer.

Preludes

1. Obiettivi

Lo scopo del progetto è la condivisione di risorse all’interno di una community incentrata sull’eccellenza, personale e aziendale.

Interactive animation
Logo Goccia Virgola Tao

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.

Logo Goccia Virgola Tao

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

Mobilità

Versione mobile della home

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