Sito web responsive con navigazione sul globo terrestre

Il sito non è ideato simulando la Terra e il cosmo, ma riproduce materialmente la struttura sferica del nostro pianeta nello spazio aperto. Nella sostanza si tratta di una enorme singola pagina quadrata, il cui lato è lungo 5 volte lo schermo dell'utente.

 

 

Credits:

Concept: Andrea Montuschi e Ludovica Mantovan

Grafica e postproduzione foto: Ludovica Mantovan

Codice e programmazione, adattabilità responsive: Andrea Mattioli

WEB
Sito web responsive con navigazione sul globo terrestre

 

Navigare attraverso le sezioni significa letteralmente muoversi sulla superficie terrestre. Il pianeta ruota, mostrando oceani e continenti distribuiti sul globo.

 

Sullo sfondo la galassia segue il movimento terrestre, mentre prosegue nel suo viaggio attraverso lo spazio aperto.

WEB
Sito web responsive con navigazione sul globo terrestre

Per: Rosso Fuoco Film

Periodo: aprile 2016

Tipologia: sito web

Star Stuff - The movie

Muoversi nel sito e sulla superficie del pianeta terra, a 2 passi dalla Via Lattea

 

 

Un viaggio verso 4 osservatori in 4 diversi continenti alla ricerca del nostro posto nel cosmo.

 

L'utente viene accolto da una spettacolare foto della Via Lattea; gradualmente la camera scende fino alla superficie terrestre, da qui può iniziare la navigazione.

WEB
Sito web responsive con navigazione sul globo terrestre

Star Stuff - The movie

Muoversi nel sito e sulla superficie del pianeta terra, a 2 passi dalla Via Lattea

WEB
Sito web aziendale con video incorporato

Per: Borelli Transmission Components

Periodo: aprile 2016

Tipologia: sito web

Borelli Transmission Components

Sito web aziendale multilingua con video incorporato

 

 

Realizzazione di sito responsive multilingua con video da noi prodotto integrato nella home page.

 

Il sito è pensato per unire l'efficienza nella fruizione dei contenuti di un sito con struttura classica allo stile dei siti pageless, in grado di presentare in maniera accattivante la mission aziendale, le linee prodotti, la storia e i contatti.

L'integrazione di un video di tipo aziendale migliora la qualità estetica dell'home page e accompagna l'esperienza utente generale.

WEB
Sito web aziendale con video incorporato

Borelli Transmission Components

Sito web aziendale multilingua con video incorporato

WEB
Sito web in parallasse

 

Una serie di elementi grafici vivaci aggiungono allegria all'atmosfera professionale del sito.

Credits:

Coordinamento: Andrea Montuschi

Grafica: Anima in corporation

Fotografie: Luca Rossi

Codice e programmazione: Andrea Mattioli

WEB
Sito web in parallasse

 

WEB
Sito web interattivo in 3d

Per: So Far Torino

Periodo: dicembre 2015

Tipologia: sito web

So Far

Pani, sfizi e alta cucina tra dettagli fotografici e parallasse

 

Il sito è strutturato come un pageless con diverse pagine esterne per la visualizzazione dei contenuti testuali estesi.

 

Le fotografie realizzate da Luca Rossi sono sia contenuto, che struttura, mentre l'effetto parallasse accompagna la navigazione alternando le sezioni a testi agli sfondi fotografici.

WEB
Sito web in parallasse

So Far

Pani, sfizi e alta cucina tra dettagli fotografici e parallasse

WEB
Sito web interattivo in 3d

 

Per la visualizzazione di ogni altro contenuto testuale si sfrutta un'animazione html5. La faccia del cubo si espande fino ad adattarsi alla dimensione del testo.

 

Il sito è pienamente responsive, adattandosi ai dispositivi mobile, fino ai cellulari con schermi molto ridotti.

 

 

 

 

Credits:

Coordinamento: Andrea Montuschi

Grafica e animazioni: Sara Fabbri e Andrea Mattioli

Codice e programmazione, adattabilità responsive: Andrea Mattioli

WEB
Sito web interattivo in 3d

Le facce dei cubi sono dedicate a contenuti cinematografici diversi (es. tutti i film, prossime uscite, nostre produzioni), permettendo di utilizzare un singolo elemento 3d in maniera molteplice.

Sito web interattivo in 3d
WEB
Sito web interattivo in 3d

Per: Cineama Film Distribution

Periodo: settembre 2015

Tipologia: sito web

Cineama Film Distribution

L'esperienza utente attraverso le 3 dimensioni

 

 

Il sito ha un layout composto da quadrati e rettangoli. Ogni elemento è sia una voce di menù che porta al contenuto, sia il contenitore del contenuto selezionato.

 

Il passaggio da una funzionalità all'altra è in mano alla tecnologia 3d html5; alla selezione dell'utente il quadrato si trasforma in un cubo, ruota sul proprio asse e presenta il contenuto selezionato.

WEB
Sito web interattivo in 3d

Cineama Film Distribution

L'esperienza utente attraverso le 3 dimensioni

WEB
Blog di comunicazione politica

 

 

Anche il calendario sfrutta i colori per evidenziare e distinguere la categoria di ogni singolo evento.

 

 

 

Credits:

Coordinamento: Andrea Montuschi

Concept e grafica: Sara Fabbri

Animazioni e programmazione: Andrea Mattioli

WEB
Blog di comunicazione politica

 

L'home page permette la visualizzazione di tutti gli articoli attraverso l'interazione con dei "cubi multi-contenitori": ogni faccia incorpora titolo e corpo dei contenuti, mentre le animazioni mostrano, nascondono e ruotano i cubi in base al filtro selezionato dall'utente.

WEB
Sito web aziendale multimediale

Per: Marco Lombardo

Periodo: maggio 2016

Tipologia: blog

Marco Lombardo

I dieci colori di un programma politico

 

 

Realizzazione del sito di Marco Lombardo in versione desktop e adattabilità responsive del layout.

 

Tutto il sito si sviluppa attraverso i colori corrispondenti ai punti del programma elettorale. Il menù, le pagine, i layout e i contenuti utilizzano i colori in tutto i loro sviluppo.

WEB
Sito web aziendale multimediale

Marco Lombardo

I dieci colori di un programma politico

WEB
Sito web responsive con animazioni

Per: Anima In Corporation Srl

Periodo: gennaio 2016

Tipologia: blog

Il blog di Anima

Categorie dai colori vivaci e posizione dei contenuti fuori dal comune

 

 

Il concept del blog impone una convivenza tra contenuti iper tecnici e grafica carnevalesca, riuscendo a creare un piacevole "equilibrio instabile" all'interno dell'esperienza utente.

WEB
Sito web responsive con animazioni

Il blog di Anima

Categorie dai colori vivaci e posizione dei contenuti fuori dal comune

WEB
Sito web responsive con animazioni

 

La versione del sito dedicata ai dispositivi con schemo ridotto rispecchia la struttura e la grafica della versione estesa, permettendo comunque all'utente un'agevole navigazione attraverso i contenuti.

 

 

 

 

Credits:

Coordinamento: Andrea Montuschi

Grafica e animazioni: Andrea Montuschi e Andrea Mattioli

Codice e programmazione, adattabilità responsive: Andrea Mattioli

WEB
Sito web responsive con animazioni

Nella sezione inferiore del sito la mappa si sviluppa in verticale, dove troviamo una lunga serie di domande fino all'ultimo contenitore dove troviamo i contatti e la mappa dello studio notarile.

 

Sito web responsive con animazioni

Il click su una domanda apre una nuova pagina all'altezza della relativa risposta.

WEB
Sito web responsive con animazioni

Per: Notaio Remo Bassetti

Periodo: giugno 2015

Tipologia: sito web

Notaio Remo Bassetti

Colori, animazioni e una mappa delle competenze affiancano i consigli del famoso notaio

 

 

Il sito mostra le conoscenze notarili e i servizi online offerti attraverso un percorso simile ad una mappa della metropolitana, in cui le fermate e gli snodi contengono le tematiche principali trattate dallo studio.

Un click può trasformare una fermata in un contenitore colorato di testi e approfondimenti, oppure aprire una nuova pagina dedicata ad uno specifico argomento.

WEB
Sito web responsive con animazioni

Notaio Remo Bassetti

Colori, animazioni e una mappa delle competenze affiancano i consigli del famoso notaio

WEB
Sito web aziendale multimediale

 

Il layout, le immagini e i testi di ogni sezione si adattano alle dimensioni e alla forma dei diversi dispositivi, dai grandi monitor per desktop fino agli schermi dei cellulari più piccoli.

 

 

Credits:

Coordinamento: Andrea Montuschi

Grafica e animazioni: Sara Fabbri

Codice e programmazione, adattabilità responsive: Andrea Mattioli

WEB
Sito web aziendale multimediale

Il sito è arricchito da contenuti multimediali e un piccolo gaming che traducono in maniera fattiva lo sguardo moderno e non convenzionale con cui Anima in Corporation comunica l’identità aziendale. A cominciare dalla propria.

 

Sito web aziendale multimediale

Il sito è il risultato di una profonda discussione tematica con l’azienda che sentiva l’esigenza di proporsi con un’estetica moderna che prestasse forte attenzione all’ergonomia per la reperibilità delle informazioni, senza ridurre ogni tema trattato in slogan ma concentrandosi su modi alternativi di fruizione delle informazioni.

WEB
Sito web aziendale multimediale

Per: Anima In Corporation Srl

Periodo: gennaio 2015

Tipologia: sito web

Anima In Corporation

L'identità culturale delle aziende attraverso un sito pageless con animazioni e gaming

 

 

Realizzazione del sito di Anima in Corporation in versione desktop e adattabilità responsive del layout.

Il sito si presenta come un pageless a scorrimento verticale con l’inserimento di pagine di approfondimento e animazioni finalizzate alla maggiore comprensione dei contenuti

WEB
Sito web aziendale multimediale

Anima In Corporation

L'identità culturale delle aziende attraverso un sito pageless con animazioni e gaming

WEB
Sito web con calendario

Per: Palestra Arti d'Oriente

Periodo: novembre 2016

Tipologia: sito web

Palestra Arti d'Oriente

Accesso immediato alle informazioni e al calendario

 

 

Il sito offre alla prima schermata una visione chiara e immediata delle categorie di corsi disponibili e dei corrispondenti istruttori.

 

Ogni elemento è collegato al proprio calendario, uno strumento perfetto per il possibile cliente e per chi già è iscritto alla palestra.

WEB
Sito web con calendario

Palestra Arti d'Oriente

Accesso immediato alle informazioni e al calendario

WEB
Il sito web diventa una app

La struttura è responsive e si adatta alle diverse dimensioni dei dispositivi.

 

Il sito web diventa una app

Visto da tablet o cellulare il sito ha un layout radicalmente diverso, prende l'aspetto e l'ergonomicità di una tipica app per dispositivi mobile.

WEB
Il sito web diventa una app

Per: Birroteca Guelfa

Periodo: settembre 2014

Tipologia: sito web

Birroteca Guelfa

Birra artigianale al posto della solita birra. Un percorso fotografico nel sito che diventa una app.

 

Il sito è un pageless puro a scorrimento verticale. Nella sezione principale l'utente viene accolto da una presentazione fotografica in cui si evidenziano le differenze tra le comuni birre industriali e le birre artigianali. Dopo aver illustrato la varietà dei prodotti, il flusso di immagini e testi proietta il visitatore in una piacevole serata in compagnia di amici nel locale.

 

 

Credits:

Concept, grafica, animazioni e programmazione: Andrea Mattioli

Fotografie e concept presentazione: Luca Rossi

WEB
Il sito web diventa una app

Birroteca Guelfa

Birra artigianale al posto della solita birra. Un percorso fotografico nel sito che diventa una app

WEB
Dronexperience

 

 

Sul wall si trovano tutte le esperienze da vedere e ascoltare. I video e le anteprime sono cromaticamente in armonia con lo stile del sito.

 

 

 

Credits:

Coordinamento: Andrea Montuschi

Concept e grafica: Sara Fabbri e Andrea Montuschi

Codice e programmazione, adattabilità responsive: Andrea Mattioli

WEB
Dronexperience

Dronexperience

Come reagirai? Quali saranno le tue espressioni? Dove andrà il tuo sguardo?

 

 

Prenditi una pausa, abbandona i ritmi frenetici e concediti un’esperienza di ascolto dilatata, immersiva; il tempo di visita è di otto minuti: come tre fermate in autobus, due semafori o una colazione al bar… ma puoi andartene quando vuoi.

 

Entrando nel ventre luminoso, accompagnato dalla musica del drone, perderai ogni riferimento temporale. Il drone ha radici ancestrali e spirituali e richiama le lunghe note d’organo dell’Europa medievale le cornamuse scozzesi, i canti indiani.

WEB
Dronexperience

Dronexperience

Come reagirai? Quali saranno le tue espressioni? Dove andrà il tuo sguardo?

WEB
Italywarm

 

Le tre caratteristiche arrivano all'utente grazie sia dalla struttura pageless del sito (rapido nella navigazione e immediato nell'esposizione dei contenuti), sia da una grafica aziendale e moderna, a schermo intero.

 

 

Sito web aziendale
WEB
Sito web aziendale

Per: Italywarm

Periodo: dicembre 2014

Tipologia: sito web

Italywarm

Tecnologia italiana in una vetrina a tutto schermo

 

Italywarm aveva bisogno di un sito che esprimesse le proprie abilità aziendali: tecnologia all'avanguardia, bellezza ed efficenza.

 

 

 

Credits:

Coordinamento: Andrea Montuschi

Concept e grafica: Andrea Montuschi

Codice e programmazione, adattabilità responsive: Andrea Mattioli

WEB
Sito web aziendale

Italywarm

Tecnologia italiana in una vetrina a tutto schermo

WEB
Sito a griglia css3 con video

 

La versione del sito dedicata ai dispositivi mobile non necessitava di adattamento verticale, di conseguenza adotta il classico layout tipografico.

 

 

 

 

Credits:

Coordinamento: Laura Epasto

Studio grafico: Kronos Film

Codice e programmazione, adattabilità responsive: Andrea Mattioli

WEB
Sito a griglia css3 con video

Per: Kronos Film Production

Periodo: maggio 2015

Tipologia: sito web

Kronos Film Production

Sito internet con un moderno layout a griglia

 

 

Per le necessità della Kronos Film Production risultava perfetto un layout in grado di adattarsi non solo il larghezza, ma anche in altezza alle dimensioni dello schermo.

Il moderno layout a griglia CSS3 risultava decisamente migliore rispetto alla classica struttura tipografica.

WEB
Sito a griglia css3 con video

Kronos Film Production

Sito internet con un moderno layout a griglia

WEB
Il web design in azienda

Per: Laboratori Emiliani Alimentari

Periodo: aprile 2015

Tipologia: sito web

La Madia di Nonno Pepi

Una "madia virtuale" dove ritrovare la storia, la tradizione e i prodotti di qualità

 

 

 

In linea con l'azienda, il sito è classico sia nel layout che nel design. Grandi immagini ricreano la madia, l'antico laboratorio casalingo.

 

 

 

Credits:

Coordinamento: Dimitri Bertolini

Concept, design, codice e programmazione: Andrea Mattioli

WEB
Il web design in azienda

La Madia di Nonno Pepi

Una "madia virtuale" dove ritrovare la storia, la tradizione e i prodotti di qualità

WEB