Cdm by intermediadesign

ELEMENTI E STRUTTURA DI BASE

960 px

Si propone uno schema estremamente minimale, contraddistinto dalla assenza di elementi eccessivamente appariscenti a tutto vantaggio dell’efficacia grafica e visiva. Caratteristiche principali del nuovo website aziendale: pulizia; minimal; moderno; interessante; deve sposarsi meglio con il flyer attuale. Lo schema è ottimizzato in modo da adattarsi ad ogni risoluzione video, mantenendo comunque ogni elemento funzionale alla navigazione ed all’utilizzo delle risorse all’interno di una “finestra” di 960 x 720 px.

720 px

Elementi di base dell’interfaccia: sfondo sfumato tra #f0f1f0 e #ffffff (con possibilità di arrivare ad un range tra #d6d6d9 e #ffffff); logo (angolo UP-SX); controller per loop (angolo UP-DX); dati anagrafici completi (angolo DN-SX); credits (angolo DN-DX).

intermediadesign - bozzetti website per cdm cornici - prima stesura - 11.12.2009

ELEMENTI DI NAVIGAZIONE

Gli elementi di navigazione, in linea con le direttive stabilite per quelli di base, si adeguano all’impianto generale mantenendo le caratteristiche complessive del sito web.

02-A

02-B

02-C

02-D

TOOL TIP MENU

TOOL TIP SELEZIONE

Al “roll-over” sulle varie zone sensibili del menu (vedi foglio successivo), viene attivato il TOOL TIP MENU (Fig. 02-A), in cui il testo descrittivo è in colore bianco (#ffffff) su campo grigio chiaro (# cfcfcf); al “roll-over” sulle varie zone sensibili della navigazione prodotti, viene attivato il TOOL TIP SELEZIONE (Fig. 02-B), in cui il testo bianco e nero (#ffffff; #000000) è su campo rosso chiaro (#da6d6d); contemporaneamente al TOOL TIP SELEZIONE viene attivata un’AREA DI SELEZIONE (Fig. 02-C) per agevolare la navigazione; durante la navigazione sono sempre presenti alcuni PULSANTI DI SERVIZIO (Fig. 02-D), che riportano il navigatore alle situazioni precedenti (hanno valenza analoga al tasto “back” dei normali browser).

AREA DI SELEZIONE

PULSANTI DI SERVIZIO

intermediadesign - bozzetti website per cdm cornici - prima stesura - 11.12.2009

MENU PRINCIPALE

Il MENU PRINCIPALE è costituito da una visione prospettica del flyer attuale, con alcune zone (corrispondenti alle varie facce del flyer) che fungono da pulsanti per navigare all’interno del sito web. Al “roll-over” si attivano i “tool-tip” descritti in precedenza. Si torna sempre a questa situazione per navigare tra le sezioni principali del sito web (funzione “back” descritta in precedenza).

intermediadesign - bozzetti website per cdm cornici - prima stesura - 11.12.2009

PAGINE ISTITUZIONALI

Per le pagine istituzionali, quelle che attualmente comprendono le voci AZIENDA, SERVIZI e MATERIALI, si prevede di realizzare uno schema comune (riprodotto a fianco a titolo di esempio in Fig. 04-A) composto da una image gallery 3D (gestita dinamicamente tramite un file .xml) e da un testo descrittivo relativo alla sezione scelta. La gallery di immagini in 3D prevede diverse modalità di passaggio tra la visualizzazione di un’immagine e l’altra, come riportato in Fig. 04-B e 04-C.

04-A SITUAZIONE 0

04-B SITUAZIONE 1

04-C SITUAZIONE 2

intermediadesign - bozzetti website per cdm cornici - prima stesura - 11.12.2009

PAGINE PRODOTTI

In queste pagine viene ripreso lo schema del flyer aziendale, che propone una prospettiva dello spaccato di una casa con stanze e mobilia. Lo schema risulta di facile ed immediata comprensione, evidenziando da subito gli oggetti “reali” in cui sono incorporati i prodotti lavorati da CDM CORNICI, ed aggiungendo una grafica accattivante che contribuisce a rendere piacevole l’esperianza di visita al sito web aziendale. Inizialmente vengono proposti 3 modellini che sintetizzano la gamma di possibili situazioni tipo (Fig. 05-B): casa; giardino; ufficio. Indicazioni utili alla navigazione sono fornite al visitatore tramite animazioni e “tool-tips” previsti al “roll-over” sui vari modellini (come si vede in Fig. 05-A e 05-B).

05-A SITUAZIONE 1

Le fasi qui riportate evidenziano le scelte iniziali: si sceglie una situazione tipo (p.es.: la casa); si sceglie un ambiente tipo (p.es.: la zona giorno); si sceglie una tipologia di prodotto (p.es.: mobili contenitori).

05-B SITUAZIONE 0

05-C SITUAZIONE 2

intermediadesign - bozzetti website per cdm cornici - prima stesura - 11.12.2009

PAGINE PRODOTTI

Dopo aver scelto la tipologia prodotto, viene caricata una gallery di immagini in 3D (anche questa gestita dinamicamente tramite file .xml) cui è associato un testo descrittivo composto da TITOLO, DESCRIZIONE IMMAGINE e LINK. Sulla parte sinistra dello schermo compare una piccola “tool-bar” che riporta il riepilogo delle scelte effettuate, il pulsante per tornare alla situazione precedente (in questo caso, alla zona giorno), l’elenco dei prodotti che CDM CORNICI realizza per la zona scelta, i links ad eventuali video relativi alla situazione proposta.

06-A SITUAZIONE 1

06-B SITUAZIONE 0

intermediadesign - bozzetti website per cdm cornici - prima stesura - 11.12.2009

PAGINE LAVORAZIONI

Un semplice monitor sospeso nel vuoto; un player che gestisce i filmati relativi alle varie lavorazioni; un eventuale testo esplicativo a commento dei filmati.

07-A SITUAZIONE 0

07-B SITUAZIONE 1

07-C SITUAZIONE 2

intermediadesign - bozzetti website per cdm cornici - prima stesura - 11.12.2009

NOTE E/O INTEGRAZIONI

TIMBRO E FIRMA PER ACCETTAZIONE

intermediadesign - bozzetti website per cdm cornici - prima stesura - 11.12.2009