Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Master in Architettura dell'Informazione IED 2012

Progetto finale del Master IED di Roma in "Architettura dell'Informazione" 2012: "dall'idea al progetto"

  • Identifiez-vous pour voir les commentaires

Master in Architettura dell'Informazione IED 2012

  1. 1. Marcello MiceliIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012
  2. 2. Il web: il nuovo mondo COMUNICARE

v.tr.
(dal
lat.
Communicàre:
render
comune,
 condividere)
far
altri
partecipi
di
una
cosa,
dare
notizia,
 ragguagliare.

 SIN.
Diffondere,
partecipare.
 Web
 Comunità
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Marcello Miceli
  3. 3. Il web: il nuovo mercato Tecnologia

 Struttura
 Costi
“bassi”
 Mercato
concorrenziale
 Libertà
 Credibilità
 Valori
 Fiducia
 Trasparenza



IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Marcello Miceli
  4. 4. Il web: il nuovo “luogo”“Le
comunità
già
esistono,
pensa
piuttosto
a
come
aiutarle
a
fare
quel
che
vogliono
fare.”

 Mark
Zuckerberg
(Facebook)
 Architettura
dell’Informazione
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Marcello Miceli
  5. 5. Daniele ZennaroIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012
  6. 6. Componenti del design di un prodotto Estetica
 Pratica
 Usabilità
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Daniele Zennaro
  7. 7. Estetica Chiarezza
 Elasticità
 Semplicità
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Daniele Zennaro
  8. 8. Usabilità Insieme
di
fattori
che
rendono
un
sito
funzionale
e
 soddisfacente,
nei
tempi
d’uso,
richiesti
per
compiere
le
 azioni
che
gli
utenti
desiderano.
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Daniele Zennaro
  9. 9. Usabilità preventiva 1/2 Stadio
iniziale
della
progettazione
per
 suggerire
i
“comportamenti
d’uso”.
 Osservare
le
mosse
degli
utenti
per
capire
in
 quali
punti
possono
trovarsi
in
difficoltà.
 Processo
iterativo.
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Daniele Zennaro
  10. 10. Usabilità preventiva 2/2 Navigabilità di un sito. Tempi di risposta delle operazioni. Struttura dei contenuti e delle informazioni. Funzionalità del design.IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Daniele Zennaro
  11. 11. Indici di qualità Qualità del design Efficienza d’uso Fattori di controllo Feedback dagli utenti Facilità di memorizzazioneIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Daniele Zennaro
  12. 12. Criteri di usabilità Coerenza. Compatibilità. Risorse a disposizione dell’utente. Feedback. Semplicità.IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Daniele Zennaro
  13. 13. Psicologia applicata al web Effetto
 Velocità
 sorpresa
 Analisi
dei
 nelle
 comportamenti
 operazioni
 sociali
 Serendipity
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Daniele Zennaro
  14. 14. Manuele ForcucciIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012
  15. 15. Human-centered design (HCD)IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Manuele Forcucci
  16. 16. Human-centered design (HCD) Le
persone
prima
di
tutto.
 Sono
i
destinatari
finali.
 Progettiamo
per
loro.
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Manuele Forcucci
  17. 17. Human-centered design (HCD) Le
persone
devono
sentirsi
allaltezza
 del
contesto
in
cui
stanno
navigando.
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Manuele Forcucci
  18. 18. Design ThinkingIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Manuele Forcucci
  19. 19. Design Thinking E un processo collaborativo, che allarga gli orizzonti del design, non relegandolo semplicemente alle forme e agli oggetti.IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Manuele Forcucci
  20. 20. Design Thinking Si
trova
una
soluzione
attraverso
le
storie,
le
 esperienze
comuni
e
complementari.
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Manuele Forcucci
  21. 21. Design Thinking Definisce
nuove
opzioni
e
soluzioni
a
nuovi
 problemi.
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Manuele Forcucci
  22. 22. Design Thinking Spazio
alla
co‐creazione,
al
brainstorming
e
 all’ideazione
di
scenari
futuribili
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Manuele Forcucci
  23. 23. Design Thinking Si
costruiscono
prototipi,
si
creano
le
ipotesi
 e
si
verificano.
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Manuele Forcucci
  24. 24. Design Thinking Spazio
ai
test:
lidea
funziona?
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Manuele Forcucci
  25. 25. User Experience (UX)IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Manuele Forcucci
  26. 26. User Experience (UX) La
User
Experience
è
linsieme
di
tutti
gli
aspetti
 comportamentali,
affettivi
ed
emozionali
legati
 allesperienza
delle
persone
in
un
determinato
contesto.
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Manuele Forcucci
  27. 27. User Experience (UX) Facilitare i flussi di navigazione. Abbassare il rumore informativo (dare spazio alle informazioni fondamentali, esplicandole in maniera chiara) . Creare percorsi facili da percorrere. Creare piacere, non stress nelle persone.IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Manuele Forcucci
  28. 28. User Experience (UX) Le
esperienze
in
rete
hanno
un
sequel
nelle
 nostre
vite.
 La
UX
è
ovunque
e
ci
circonda.
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Manuele Forcucci
  29. 29. Service DesignIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Manuele Forcucci
  30. 30. Service Design Organizzazione
 E
strettamente
 delle
 legato
allIA
 infrastrutture
e
 pervasiva.

 delle
informazioni
 di
un
servizio.

IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Manuele Forcucci
  31. 31. Service Design L’informazione
è
un
servizio.
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Manuele Forcucci
  32. 32. Service Design Il
service
design
non
disegna
lesperienza
ma
“per”
 lesperienza.
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Manuele Forcucci
  33. 33. Antonella SpartàIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012
  34. 34. La storia di un’idea Definizione Definizione Progettazione Sviluppo Test obiettivi requisiti operativa grafico IDEA RILASCIO Analisi As-is Business Formalizzazione Marketing Sviluppo analysis progetto ITIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Antonella Spartà
  35. 35. I nostri clienti e la loro ideaIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Antonella Spartà
  36. 36. Saper ascoltare le storie Vorrei
che
il
portale
fosse
 un
luogo,
per
le
persone
 Un
sito
che
ci
permetta
di
 straniere
come
me,
per
 far
conoscere
e
vendere
 mantenere
la
memoria…
 online
i
nostri
prodotti.
 …le
radici
 attraverso
il
 cibo.
 Ci
piacerebbe
che
 le
persone
 pubblicassero
le
 Vorrei
che
 loro
ricette…
 persone
di
 diverse
 nazionalità
si
 …persone
 raccontassero
 italiane
e
 con
il
cibo.
 straniere
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Antonella Spartà
  37. 37. BrainstormingIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Antonella Spartà
  38. 38. Definizione degli obiettivi Creare
una
community,
coinvolgere
le
persone
 immigrate
nella
produzione
di
contenuti,
 1 didattica,
curiosità,
consigli,
ma
anche
nel
 conservare
la
memoria.
 Avvicinare
alla
cultura
Nordafricana
viaggiatori
 2 e
persone
curiose
che
abbiano
voglia
di
sapori
 diversi.
 Vendere
i
prodotti
non
deteriorabili
del
negozio,
 3 fare
e‐commerce.
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Antonella Spartà
  39. 39. Scopriamo chi sono gli altri Gustissimo.it
 Giallozafferano.it
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Antonella Spartà
  40. 40. Le analisi swot
analysis
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Antonella Spartà
  41. 41. Le analisi qualitativa
 •  Homepage
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Antonella Spartà
  42. 42. Le analisi descrizione
narrativa
 •  L’architettura
informativa
 •  La
facilità
d’uso
 •  L’esperienza
utente
 •  La
navigazione
 •  I
contenuti
in
homepage
 •  Il
linguaggio
 •  L’organizzazione
del
contenuto
 •  I
titoli
 •  I
servizi
 •  L’aggiornamento
 •  Il
processo
di
aggiornamento
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Antonella Spartà
  43. 43. Il test d’usabilità nella fase d’analisi •  Il
menù
delle
ricette
di
1°
e
2°
 livello
deve
essere
molto
 chiaro.
 •  L’ingrediente
deve
essere
 l’elemento
principale,
 relazionato
alla
cultura
e
alla
 storia.
 •  …
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Antonella Spartà
  44. 44. Il test d’usabilità nella fase d’analisi •  Spazi
logico‐semantici
ben
 definiti.
 •  In
homepage
vogliamo
pochi
 elementi,
ma
chiari.
 •  …
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Antonella Spartà
  45. 45. Dal progetto al design Marzia Bianchi Marzia BianchiIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Marzia Bianchi
  46. 46. Allora chi sono le nostre personae “Voglio
ricordare

 le
tradizioni
della
nostra
 famiglia.
Da
piccola
 nonna
mi
raccontava
 del
nostro
paese.”
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Marzia Bianchi
  47. 47. Allora chi sono le nostre personae “Viaggio
molto.
 Vorrei
trovare
appassionati
 per
condividere
esperienze

 
di
viaggio
e
di
sapori.”
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Marzia Bianchi
  48. 48. Allora chi sono le nostre personae “Ho
un
negozio
a
Roma
 di
prodotti
alimentari
 tipici
del
Nord
Africa.
 Vorrei
espandere
 la
mia
attività.”

 Sono di orgine egiziana Ho la mia famiglia in Italia Vorrei espandere la mia attività commerciale Sono da solo in negozioIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Marzia Bianchi
  49. 49. Allora chi sono le nostre personae “Voglio
preparare
una
cena
 marocchina
per
mia
moglie.
 Amo
la
cucina
etnica.
 Sono
stufo
dei
soliti
piatti
 italiani.”

IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Marzia Bianchi
  50. 50. Scegliamo l’url couscousmediterraneo.it
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Marzia Bianchi
  51. 51. La mappa concettuale Tutte le nostre idee prendono una forma e una direzione.IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Marzia Bianchi
  52. 52. Il card sorting È
il
momento
di
definire
 lo
schema
di
navigazione

 del
nostro
sito,
 con
il
card
sorting.
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Marzia Bianchi
  53. 53. Il card sorting Il
team
al
lavoro.
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Marzia Bianchi
  54. 54. Il card sorting Alla
fine
ci
siamo
riusciti.
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Marzia Bianchi
  55. 55. Mappa del sito ULTIME
 CHI
SIAMO
 RICETTE
>>
 HOME
 ISCRIVITI
 EVENTI
>>
 CERCA
 NOVELLI
 POLICY
 LORENS
 NEWSLETTER
 D’ARABIA
 >>
 PRODOTTO
 * CREDITS
 ADV
 FOOTER
 EVENTI
 CONTATTI
 >>
 NOTE
 LEGALI
 QUESTO
 SITO
>>
 * RICETTE
 COMMUNI SHOP
 SCUOLA
 TY
 INTRO
–
 CHI
 INTRO
 INTRO
 SIAMO/ INTRO
 NATA LE
 DOVE
 PASQ PRODO SIAMO
 UA
 FORUM
 EVENTI
 FESTIVI SEGN TTI
 …
 TA’
 ALA
 VIDE INSERIS PARTECI …
 UTENSI O
 CI
 PA
CON
 Struttura
del
sito.
 LI
 RICETTA
 VIDEO
 FACILE
 A
 PROP CHEF
A
 B
 INGRED ONITI
 SCEG LI
 DOMICI LIO
 Navigazione
primaria,
 C
 IENTE
 …
 RACCO NTA
IL
 secondaria
e
pagine
correlate.
 D
 METOD …
 DESERT FORN O
 O
 O
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Marzia Bianchi
  56. 56. L’inventario dei contenuti Diamo
un
valore

 al
nostro
contenuto.
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Marzia Bianchi
  57. 57. Esempio: la ricetta Titolo della ricetta Titolo Descrizione Antipasti Piatti di carne Sommario Piatti di pesce Foto Piatti vegetariani Video Zuppe e minestre Insalate Salse Dolci Procedimento ricetta Portata Bevande Tipologia Ingredienti Quantità Ingredienti per persona Attributi Festività Eventi Difficoltà Metainformazioni Tempo di preparazione OrigineIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Marzia Bianchi
  58. 58. Un contenuto di valore Dura

 Più
usabile
 nel
tempo
 Fluido
 Google
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Marzia Bianchi
  59. 59. I primi prototipi su cartaIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Marzia Bianchi
  60. 60. Carlo SimoncelliIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012
  61. 61. Cosa abbiamo imparato Abbiamo
imparato
cos’è
l’usabilità.
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  62. 62. IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  63. 63. IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  64. 64. “Lusabilità
è
lefficacia,
lefficienza
e
 la
soddisfazione
con
cui
determinate
 persone
possono
raggiungere
 determinati
obiettivi
in
un
 determinato
contesto
duso”.
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  65. 65. IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  66. 66. Come valutare l’usabilità Con
metodi
 Con
le
 esperti.

 persone.
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  67. 67. Analisi Euristica Coerenza Linguaggio chiaro e 1
 6
 dell’interfaccia comprensibile Feedback Facilità nel riconoscere le 2
 7
 adeguato azioni da svolgere Facilità di uscita da Presenza di 3
 8
 situazioni critiche scorciatoie Prevenzione Essenzialità ed 4
 9
 degli errori estetica dell’interfaccia Messaggi di Presenza di 5
 10
 errore semplici help e manualiIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  68. 68. Cognitive walktrought Un
metodo
esplorativo
che
consiste
nel
 valutare
i
passaggi
richiesti
per
il
 completamento
di
un
compito
con
lo
 scopo
di
individuare
gli
ostacoli
 riscontrabili
nell’interfaccia.
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  69. 69. Valutare l’usabilità con le persone I
test
d’usabilità
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  70. 70. IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  71. 71. IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  72. 72. IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  73. 73. Abbiamo osservato come le persone … cercano
una
ricetta
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  74. 74. Abbiamo osservato come le persone … inseriscono
una
ricetta
 couscousmediterraneo.it
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  75. 75. Abbiamo osservato come le persone … Inseriscono
una
ricetta
 couscousmediterraneo.it
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  76. 76. Abbiamo osservato come le persone … inseriscono
una
ricetta:
 Test
sul
 Test
sul
 prototipo
 prototipo
 interattivo
 cartaceo
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  77. 77. IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  78. 78. IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  79. 79. IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  80. 80. IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  81. 81. IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  82. 82. IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  83. 83. In sintesi… Conduzione
 Comportamento
degli
 Neutralità
 osservatori
 Prototipo

 Quando
vanno
 cartaceo

 Prototipo

 effettuati
 HTML

 Strumenti
da
 Quali
vantaggi
 utilizzare
 offrono
 Ruoli
principali
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Carlo Simoncelli
  84. 84. Federica ScaraglioIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012
  85. 85. E ora, come “vestiamo” il nostro sito? DESIGN

 > EMOZIONALE
 Comportamentale
 Viscerale
 Riflessivo
 “Chi ha detto che il piacere non è funzionale?” Charles EamesIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  86. 86. Emozioni positive: I luoghi > Senso di appartenenzaIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  87. 87. L’arredamentoIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  88. 88. Emozioni positive I mercati > Senso di ComunitàIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  89. 89. La cucinaIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  90. 90. Definiamo: I
COLORI
 Marchio
 Tema
Sito
 Testi
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  91. 91. I colori “evocativi” Titoli Marchio Sito Sito SitoIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  92. 92. Linee guida per il marchio e non solo… TONO
 •  Evocativo
ed
espressivo
>
Sito
di
cucina
EMOZIONI
 Femminile
 Maschile
 •  Affettivo
>
Nordafrica
 Giovane
 Maturo
 •  Piacevole
>
Originale,
equilibrato
 Lusso
 
 Economico
 Giocoso
 Serio

 







(informale)
 •  Sintetico
>
Semplicità
 Forte
 
 Tranquillo
USABILITA’
 •  Adattabile
>
Head,
favicon,
icone
per
app

 Semplice
Complesso
 •  Riproducibile
>
Supporti
cartacei,
gadget…
 Delicato
 Manifesto
 IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  93. 93. Partiamo dal logo Scelta
di
un
lettering
“evocativo”

 >IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  94. 94. Partiamo dal logo Scelta
di
un
lettering
“evocativo”

 >IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  95. 95. Studio elaborazione del pittogramma EVOCARE LE RADICI EVOCARE LA FUNZIONE +IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  96. 96. L’elaborazione E
SEMPLIFICA
 ELABORA

 >IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  97. 97. Il marchio, tagline, icone Saperi e sapori dal Nordafrica FAVICON ICONE PER APP PROFILO FACEBOOKIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  98. 98. Il marchio, tagline, icone Saperi e sapori dal Nordafrica FAVICON ICONE PER APP PROFILO FACEBOOK FAVICON ICONE PER APP PROFILO FACEBOOKIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  99. 99. Vestiamo i wireframe: elementiIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  100. 100. Vestiamo i wireframe: la creativitàIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  101. 101. Vestiamo i wireframe: la creativitàIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  102. 102. Screen font Valore emotivo Capacità evocativa Valore funzionale LeggibilitàIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  103. 103. Titoli Sommari Testi Arial A B C D E F G H I J K L M N O P Q R S T U V W X Y Z ( / ) ^ _ ‘ a b c d e f g h i j k l m n o p q r s t u v w x y z ( ! ? & > < colore: #67494D colore: #000000IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  104. 104. Combinazione delle font colore: #67494D colore: #000000IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  105. 105. Combinazione delle font Titolo: Alice 36px Sommario: Alice 18px Body: Arial 15px colore: #67494D colore: #000000IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  106. 106. Stile redazionale GUIDA DI STILE > Accuratezza Tono Usabilità OttimizzazioneIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  107. 107. Ricordiamoci delle emozioni: le foto L’immagine Qualità vale più di dell’immagine 1.000 parole Il taglio Non inserire MAI una foto I particolari 128549.jpgIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  108. 108. Essere chiari: i titoli e sommari Crea titoli accurati Crea titoli reali, non Titoli troppo creativi predittivi o vaghi Ricordati che dal titolo parte Il “profumo” ottimizzazione per dell’informazione motori di ricercaIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  109. 109. Troppo, poco, il giusto: il contenuto Un pò di storia Ricordati delle persone: usare presente indicativo Linguaggio e dare del “tu” semplice e chiaro Ricordiamoci Suddividere i bold per ottimizza il Firmare le capoversi contenuto ricetteIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  110. 110. Le Meta informazioniSemplifica
la
fruizione
al
visitatore
Semplifica
la
ricerca,
dentro
e
fuori
del
sito
 Ricordati delle persone: usare presente indicativo Gli dare del “tu” e ingredienti Dosi Difficoltà Tempo di Origini La portata preparazioneIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Federica Scaraglio
  111. 111. Giuseppe CurialeIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012
  112. 112. La produzioneIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giuseppe Curiale
  113. 113. Progetto Tecnologie
 Risorse
 Sitemap
 Concept
 Design
 Content
Inventory
 Wireframe
 Delivery
 Flowcharts
 Functions
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giuseppe Curiale
  114. 114. Sviluppo Wordpress Content
 inventory
 Themes Twenty
Eleven
 CousCous
Mediterraneo
 Wordpress
 WhiteLabel

 Simple
Theme
 Database
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giuseppe Curiale
  115. 115. Sviluppo Wordpress Content
Inventory
change…
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giuseppe Curiale
  116. 116. Sviluppo Wordpress Themes Twenty
Eleven
 CousCous
Mediterraneo
 Wordpress
 WhiteLabel

 Simple
Theme
 Database
 Wireframe
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giuseppe Curiale
  117. 117. Sviluppo Wordpress Header.php Themes
 Twenty
Eleven
 CousCous
Mediterraneo
 WhiteLabel

 Simple
Theme
 Style.css
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giseppe Curiale
  118. 118. Sviluppo WordpressConfiguration
&
Test
 • Set‐up
infrastructure:
Domain,
email,
ftp

 • Test
all
forms
 • Check
of
search
functionality
 • Check
login
pages
 • Validation
HTML,
CSS,
Javascript
 • Test
anti‐spam
features
 • Check
external
links
 • Check
RSS
links
 • Privacy
 IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giseppe Curiale
  119. 119. Sviluppo Wordpress Development Setup
 Development
 Development
 CMS

 database
 Design
1
 Design
2
 Design
 Concept
 contents
 functionality
 personas
 Design
3
 Design
1
 Design
2
 Flussi,
Wireframe
 Design AI,
Flussi
 Wireframe
 Flussi
 Wireframe
 Usability
1
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giuseppe Curiale
  120. 120. Giulio AngeloroIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012
  121. 121. E adesso che esistiamo? 24
 Gli utenti che nel mese effettuano ricerche, pari MLN
 al 93% della popolazione. 55
 min
 Il tempo trascorso da un utente medio nel mese. I siti più visitatiFonte AudiwebIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giulio Angeloro
  122. 122. Indicizziamo il nostro sito•  Meta
Tag
•  Sitemap
•  Usare
nomi
descrittivi
per
le
foto
o
immagini
•  Link
predittivi
 Parole
 Titolo
 Url
 Descrizione
 chiave
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giulio Angeloro
  123. 123. Indicizziamo il nostro sito•  Meta
Tag
•  Sitemap
•  Usare
nomi
descrittivi
per
le
foto
o
immagini
•  Link
predittivi
http://www.couscousmediterraneo.it
http://www.couscousmediterraneo.it/ricette/
http://www.couscousmediterraneo.it/ricette/algeria/
http://www.couscousmediterraneo.it/ricette/algeria/tajine‐di‐gamberi‐e‐zafferano
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giulio Angeloro
  124. 124. Indicizziamo il nostro sito•  Meta
Tag
•  Sitemap
•  Usare
nomi
descrittivi
per
le
foto
o
immagini
•  Link
predittivi
 tajine-di-gamberi-e-zafferano.jpg Immagine_001.jpgIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giulio Angeloro
  125. 125. Indicizziamo il nostro sito•  Meta
Tag
•  Sitemap
•  Usare
nomi
descrittivi
per
le
foto
o
immagini
•  Link
predittivi
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giulio Angeloro
  126. 126. Indicizziamo il nostro sito Fare
un
sito
ottimizzato
per
i
motori
di
ricerca
significa
 fare
un
sito
altrettanto
valido
per
gli
utenti
che
ne
 usufruiranno.
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giulio Angeloro
  127. 127. Indicizziamo il nostro sitoIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giulio Angeloro
  128. 128. Come e quando è visitato il nostro sito?•  Web
Master
Tools
•  Analytics
•  Insights
for
search
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giulio Angeloro
  129. 129. Come e quando è visitato il nostro sito?•  Web
Master
Tools
•  Analytics
•  Insights
for
search
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giulio Angeloro
  130. 130. Come e quando è visitato il nostro sito?•  Web
Master
Tools
•  Analytics
•  Insights
for
search
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giulio Angeloro
  131. 131. L’ecosistema pubblicitario Google Siti
che
ospitano
annunci

 di
Google
AdWords
 per
contenuti
 text
advertising
solutions
 Sistema
pubblicitario


Inserzionisti
 basato
sulle
query
di
ricerca
 e
i
contenuti
dei
siti

 Editori
 display
advertising
solutions
 Siti
che
vendono
i
propri
 spazi
pubblicitari
 Sistema
per
ottimizzare

 le
vendite
e
gli
acquisti

 di
spazi
pubblicitari
IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giulio Angeloro
  132. 132. AdwordsIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giulio Angeloro
  133. 133. AdwordsIED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012 Giulio Angeloro
  134. 134. IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012
  135. 135. IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012
  136. 136. IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012
  137. 137. IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012
  138. 138. IED MASTER ARCHITETTURA DELL’INFORMAZIONE 2012
  139. 139. Grazie a…

×