Sei sulla pagina 1di 56

marted 7 febbraio 2012

Universit degli Studi di Firenze Facolt di Architettura Corso di laurea in Disegno Industriale

Relatore: prof. Alberto Di Cintio Laureando: Giacomo Bianchi


20 dicembre 2011

Mediawave: Nuovo progetto per rivista multimediale per iPad


marted 7 febbraio 2012

Progettazione e sviluppo di un web magazine per tablet sul tema del web management e dei digital media

marted 7 febbraio 2012

OBIETTIVI:
Comunicazione
storie ed esperienze relative alluniverso del web management e dei digital media. Sperimentazione di nuove metafore di interazione tra utente e dispositivo.

marted 7 febbraio 2012

Tipologie di applicazione sviluppabili:

Application:

Software stand-alone acquistabile dalla Apple Store.


Web Application:

Sito web ottimizzato per il dispositivo e visualizzabile dal browser.

marted 7 febbraio 2012

PRIMA FASE
Studio di creativit

marted 7 febbraio 2012

ANALISI DEL DISPOSITIVO

Tablet computer (Apple iPad) presentato da Steve Jobs il 27 gennaio 2010. Schermo da 9,7 pollici con risoluzione 1024x768 pixels. Tecnologia multi-touch. Sistema operativo iOS. Modalit di visione verticale e orizzontale. Utilizza Safari come browser di default.

marted 7 febbraio 2012

Principali modalit di interazione gestuale native: tap (toccare); drag (trascinare); swipe (strisciare); double tap (doppio tocco); pinch open/close (pizzicotto aperto/chiuso);

marted 7 febbraio 2012

ANALISI DELLE TECNOLOGIE

Una web application per tablet formata principalmente da tre elementi.

marted 7 febbraio 2012

Contenuti - HTML5
Ultima evoluzione ancora in fase di denizione del linguaggio di marcatura HTML per la strutturazione di siti web.

Formattazione - CSS3
Contiene nuove speciche per la formattazione dei contenuti.

Effetti - jQuery
Libreria in JavaScript per limplementazione dellinterattivit.

marted 7 febbraio 2012

ANALISI DEL TARGET

Denire un modello dutenza target per orientare i principali aspetti della progettazione.

marted 7 febbraio 2012

Il target denitivo ha le seguenti caratteristiche:

Ha dai 20 ai 30 anni; frequenta o ha frequentato un corso di laurea che gli


ha fornito conoscenze del dominio;

livello culturale di base medio/alto; vuole diventare un professionista del settore; si interessa alla rivista per prendere spunto da coloro
i quali ce lhanno fatta.

marted 7 febbraio 2012

DEFINIZIONE DELLO STILE


Lo stile della rivista avr lobiettivo di:

Interessare il lettore con contenuti specici; presentare gli argomenti in una modalit fresca e attraente per il
target;

incoraggiare il lettore mostrando vie professionali denite.

marted 7 febbraio 2012

STATO DELLARTE
Studio delle riviste digitali presenti sul mercato delle applicazioni:

Pulse

Blancspot

Zinio

FLUD

Flip Board

marted 7 febbraio 2012

marted 7 febbraio 2012

BRAINSTORMING
marted 7 febbraio 2012

Prima parte:

Far emergere qualsiasi pensiero riguardante il progetto anche se privo di signicato e riportarlo su supporto cartaceo. Incoraggiare le idee selvagge. Privilegiare la quantit.

Seconda parte:

Riordinare le idee e selezionare quelle pi valide. Applicare unanalisi critica.

Al termine della seduta si otterr un quadro esauriente dei concetti utili alla progettazione.
marted 7 febbraio 2012

SCELTA DEL NOME


Denire la giusta denominazione:
Selezionare delle parole chiave; connotazione internazionale (inglese); combinazioni di parole signicative (accostare una parola specica con una dinamica); denizione di un payoff dimpatto del brand.

marted 7 febbraio 2012

Parole chiave:

design, new, people, media, think, way, follow, dream, tool, idea, life, future, opportunity, tomorrow, project, brand, factory, store, story, wave, behind, look, light, boulevard, twist, happiness, content, orientation, magazine.
Risultato nome: Mediawave Risultato payoff: world wide portraits
marted 7 febbraio 2012

SECONDA FASE
Content management

marted 7 febbraio 2012

SCELTA DEI CONTENUTI

Contenuti del magazine: storie ed esperienze dei protagonisti del web management e dei digital media, che hanno frequentato il Master in Multimedia Content Design dellUniversit di Firenze

marted 7 febbraio 2012

Daniele Novaga
Web designer & SEO freelance, nonch co-fondatore di StereoMood.

Ilaria Salvalaggio
Marketing Operations Manager presso Register.it

Umberto Tesoro
Online Marketing Manager presso Education First

Rosario Sterrantino
Account/PM/Team Manager presso Contact Lab

marted 7 febbraio 2012

Silvia Cappelli
Responsabile PR and Online Communication presso la divisione cargo si ZWISS

Karim Ben Hamida


Digital Product Marketing Manager presso Populis

Anna Silvia Bernotti


Web Innovator presso IBM

marted 7 febbraio 2012

CATEGORIZZAZIONE

marted 7 febbraio 2012

Le esperienze e le attivit dei protagonisti scelti sono state ordinate in quattro gruppi:

Percorso formativo. Ruolo professionale. Attivit e servizi. Curiosit.


I gruppi riuniti formano il contenuto totale di ogni storia.

marted 7 febbraio 2012

TERZA FASE
Information architecture

marted 7 febbraio 2012

STRUTTURA DI NAVIGAZIONE

Stabilisce la forma gerarchica che assumono le pagine del magazine ed i suoi collegamenti secondo un diagramma graco. Per la sua realizzazione occorre seguire i principi di:

Usabilit. Accessibilit.

marted 7 febbraio 2012

La navigazione dovr essere intuitiva ed contenuti facili da raggiungere.

marted 7 febbraio 2012

Flowchart

marted 7 febbraio 2012

UNIT INFORMATIVA
Stabilisce la struttura che assume la singola pagina del magazine e gli elementi che dovr contenere.

marted 7 febbraio 2012

WIREFRAME

Bozza graca che serve ad individuare gli elementi sici e le loro dinamiche anche in termini di usabilit.

marted 7 febbraio 2012

Scheletro Cover

marted 7 febbraio 2012

Scheletro Presentazione personaggio

marted 7 febbraio 2012

Scheletro Sezione articolo

marted 7 febbraio 2012

Teorizzazione navigazione

marted 7 febbraio 2012

QUARTA FASE
Graphic design

marted 7 febbraio 2012

Lo scopo denire i seguenti elementi seguendo le indicazioni del target e dellarchitettura dellinformazione:
Logo design. Font. Colori. Layout pagine. Animazioni.

marted 7 febbraio 2012

IL LOGO

marted 7 febbraio 2012

PROPOSTE GRAFICHE
Pagina presentazione:
A B

marted 7 febbraio 2012

Pagina sezione articolo:


A

marted 7 febbraio 2012

marted 7 febbraio 2012

marted 7 febbraio 2012

PROPOSTA FINALE

marted 7 febbraio 2012

QUINTA FASE
Metafore di interazione innovative

marted 7 febbraio 2012

Ipotesi di nuove modalit di interazione tra lutente e i contenuti del magazine sulla base: 1. delle caratteristiche del dispositivo; 2. dei gesti dellutente

marted 7 febbraio 2012

1.

INTERAZIONE SENSOR BASED


Basata sullinclinazione del dispositivo

marted 7 febbraio 2012

Vai alla sezione inferiore

marted 7 febbraio 2012

Vai alla sezione superiore

marted 7 febbraio 2012

Visualizza il related

marted 7 febbraio 2012

Cambia storia

marted 7 febbraio 2012

2.

INTERAZIONE GESTURE BASED


Basata su specici gesti dellutente

marted 7 febbraio 2012

Una serie di gesti tracciati sul display permetteranno di accedere alle sezioni della storia corrispondenti. Per la denizione dei gesti che compongono il nuovo linguaggio di interazione stata effettuata unindagine scegliendo un campione di utenti target.

marted 7 febbraio 2012

Tracciare il simbolo di una scala per accedere alla sezione del percorso formativo e professionale

marted 7 febbraio 2012

Tracciare il simbolo di una spirale per accedere alla sezione delle attivit e dei servizi

marted 7 febbraio 2012

Tracciare il simbolo di una punto di domanda per accedere alla sezione delle curiosit

marted 7 febbraio 2012

Grazie per lattenzione

marted 7 febbraio 2012