Mediawave: nuovo progetto per rivista multimediale per iPAD / Presentazione

8/3/2019 Mediawave: nuovo progetto per rivista multimediale per iPAD / Presentazione

http://slidepdf.com/reader/full/mediawave-nuovo-progetto-per-rivista-multimediale-per-ipad-presentazione 1/56

martedì 7 febbraio 2012



Università degli Studi di FirenzeFacoltà di ArchitetturaCorso di laurea in Disegno Industriale

Mediawave: Nuovo progetto per rivista multimediale per iPad

20 dicembre 2011

Relatore: prof. Alberto Di CintioLaureando: Giacomo Bianchi




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




OBIETTIVI:

•Comunicazione storie ed esperienze relative all’universo del

web management e dei digital media.

•Sperimentazione di nuove metafore di interazione tra utente e

dispositivo.




• Application:

Software stand-alone acquistabile dalla Apple Store.

• Web Application:

Sito web ottimizzato per il dispositivo e visualizzabile dal browser.

Tipologie di applicazione sviluppabili:




PRIMA FASE

Studio di creatività




• Tablet computer (Apple iPad)presentato da Steve Jobs il 27 gennaio2010.

• Schermo da 9,7 pollici con risoluzione1024x768 pixels.

• Tecnologia multi-touch.

• Sistema operativo iOS.

• Modalità di visione verticale eorizzontale.

• Utilizza Safari come browser di default.

ANALISI DEL DISPOSITIVO




Principali modalità di interazione gestuale native:

• tap (toccare);

•drag (trascinare);

•swipe (strisciare);

•double tap (doppio tocco);

•pinch open/close (pizzicotto aperto/chiuso);




ANALISI DELLE TECNOLOGIE

Una web application per tablet è formata principalmente da tre elementi.




•Contenuti - HTML5

Ultima evoluzione ancora in fase di definizione dellinguaggio di marcatura HTML per la strutturazione di sitiweb.

•Formattazione - CSS3

Contiene nuove specifiche per la formattazione deicontenuti.

•Effetti - jQuery

Libreria in JavaScript per l’implementazione dell’interattività.




Definire un modello d’utenza target per orientare i principaliaspetti della progettazione.

ANALISI DEL TARGET




•Ha dai 20 ai 30 anni;

• frequenta o ha frequentato un corso di laurea che gliha 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 l’hanno fatta.

Il target definitivo ha le seguenti caratteristiche:




Lo stile della rivista avrà l’obiettivo di:

•Interessare il lettore con contenuti specifici;

•presentare gli argomenti in una modalità fresca e attraente per il

target;

•incoraggiare il lettore mostrando vie professionali definite.

DEFINIZIONE DELLO STILE




STATO DELL’ARTE

Studio delle riviste digitali presenti sul mercato delle

applicazioni:

Pulse Flip BoardFLUDZinioBlancspot



http://slidepdf.com/reader/full/mediawave-nuovo-progetto-per-rivista-multimediale-per-ipad-presentazione 15/56martedì 7 febbraio 2012



BRAINSTORMING




Prima parte:

• Far emergere qualsiasi pensiero riguardante il progetto anche se privo di

significato e riportarlo su supporto cartaceo.

• Incoraggiare le idee selvagge.

• Privilegiare la quantità.

Seconda parte:

• Riordinare le idee e selezionare quelle più valide.

• Applicare un’analisi critica.

Al termine della seduta si otterrà un quadro esauriente deiconcetti utili alla progettazione.




Definire la giusta denominazione:

• Selezionare delle parole chiave;

• connotazione internazionale (inglese);

• combinazioni di parole significative (accostare una parolaspecifica con una dinamica);

• definizione di un payoff d’impatto del brand.

SCELTA DEL NOME




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




SECONDA FASE

Content management




Contenuti del magazine:

storie ed esperienze dei protagonisti del web management e

dei digital media, che hanno frequentato il Master in

Multimedia Content Design dell’Università di Firenze

SCELTA DEI CONTENUTI




Daniele NovagaWeb designer & SEO freelance,

nonché co-fondatore di StereoMood.

Ilaria SalvalaggioMarketing Operations Manager

presso Register.it

Umberto TesoroOnline Marketing Manager

presso Education First

Rosario SterrantinoAccount/PM/Team Manager

presso Contact Lab




Silvia CappelliResponsabile PR and Online Communication

presso la divisione cargo si ZWISS

Karim Ben HamidaDigital Product Marketing Manager

presso Populis

Anna Silvia BernottiWeb Innovator presso IBM




CATEGORIZZAZIONE




Le esperienze e le attività dei protagonisti scelti sono stateordinate in quattro gruppi:

•Percorso formativo.

•Ruolo professionale.

•Attività e servizi.

•Curiosità.

I gruppi riuniti formano il contenuto totale di ogni storia.




TERZA FASE

Information architecture




Stabilisce la forma gerarchica che assumono le pagine delmagazine ed i suoi collegamenti secondo un diagrammagrafico. Per la sua realizzazione occorre seguire i principi di:

•Usabilità.

•Accessibilità.

STRUTTURA DI NAVIGAZIONE




La navigazione dovrà essere intuitiva ed contenuti facili da

raggiungere.




Flowchart




Stabilisce la struttura che assume la singola pagina delmagazine e gli elementi che dovrà contenere.

UNITÀ INFORMATIVA




Bozza grafica che serve ad individuare gli elementi fisici e leloro dinamiche anche in termini di usabilità.

WIREFRAME




Scheletro Cover




Scheletro Presentazione personaggio


S h l S i i l



Scheletro Sezione articolo


T i i i i



Teorizzazione navigazione




QUARTA FASE

Graphic design




Lo scopo è definire i seguenti elementi seguendo le indicazionidel target e dell’architettura dell’informazione:

• Logo design.

• Font.

• Colori.

• Layout pagine.

• Animazioni.




IL LOGO




PROPOSTE GRAFICHE

A B

Pagina presentazione:




A

Pagina sezione articolo:




B




C




PROPOSTA FINALE




QUINTA FASE

Metafore di interazione innovative




Ipotesi di nuove modalità di interazione tra l’utente e i contenutidel magazine sulla base:

1. delle caratteristiche del dispositivo;

2. dei gesti dell’utente




Basata sull’inclinazione del dispositivo

INTERAZIONE SENSOR BASED

1.




Vai alla sezione inferiore




Vai alla sezione superiore




Visualizza il related




Cambia storia




Basata su specifici gesti dell’utente

INTERAZIONE GESTURE BASED

2.




Una serie di gesti tracciati sul display permetteranno di accederealle sezioni della storia corrispondenti.

Per la definizione dei gesti che compongono il nuovo linguaggio diinterazione è stata effettuata un’indagine scegliendo un campionedi utenti target.




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




Tracciare il simbolo di una spirale per accedere alla sezione delleattività e dei servizi




Tracciare il simbolo di una punto di domanda per accedere allasezione delle curiosità




Grazie per l’attenzione

Mediawave: nuovo progetto per rivista multimediale per iPAD / Presentazione

Documents