Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Progettare un sito web: strumenti
Project Work
Trento, marzo2014 | DanielaCostantini
Lezioni
CHI COSTRUISCE UN SITO?
l’architetto dell’informazione.
IA is…
… the individual who organizes
the patterns inherent in data,
making the complex clear
R.S.Wurman
information architecture (IA) is a practice of
making sense
of complexity
COS’E’ L’AI?
Abby Covert
COSA FA?
 identificae rappresenta la struttura organizzativa
delle informazionidi un ecosistema
 al finedi favorirne la ...
design is a teamsport
vagamundos
LE FASI DEL PROCESSO
C. Lavazza
IDEAZIONE
almoko
IDEAZIONE: gli elementi
“exploring and defining the problem”
obiettivi
target requisiti
vincoli
IDEAZIONE: gli strumenti di analisi
l’ascolto
Interviste al cliente
Interviste agli utenti
Questionari
Focus-group
Osservazione diretta
ThomasHawk
analisi competitiva
ReneMensen
inventariocontenuti (audit)
personas
IDEAZIONE: gli strumenti di creazione
mappa concettuale
scketch
Qualche tecnica di co-design
JenLen
brainstorming
TheImageGroup
card-sorting
Rosenfeld Media
6-to-1
design the box
Design by FireEvents
KJ method
SeanMunson
DESIGN
[che non vuol dire disegnare ma progettare]
magnusfranklin
azioni
individuazione del core message
(ed eventuale payoff)
1
(pay off)
riassume in una frase assai semplice l’essenzadell’azienda:
Life is Now - Vodafone
Dovec’è Barillac’è casa – Bar...
azioni
definizione del layout
2
azioni
strutturazione contenuti
e menu di navigazione (labeling)
3
azioni
definizione supporto alla navigazione
(guida al sito, mappa, contatti, breadcrumbs…)
4
azioni
scelta dei colori e delle principali
impostazioni grafiche (visual designer)
5
(style guide)
strumenti
strumenti
strumenti
wireframes
sono la dichiarazionedi intenti
di come sarà la struttura delle pagine
strumenti-> wireframe
tools wireframes online
https://moqups.com/
https://gomockingbird.com/mockingbird/
http://www.mockflow.com/
http://createl...
adactio
cross-channel experience
mobile.
mobile…
SVILUPPO
jesse757
RILASCIO
tempusvolat
Ora lavoriamo. Insieme.
quale scenario
Ideare una strutturadi sito-vetrinache ha come obiettivo
primario quello di promuovereil marchioEcolabel,
i...
IDEAZIONE: co-design
DELIVERABLES -> mappa concettuale
DELIVERABLES: specifiche strutturaAI
DELIVERABLES: wireframe
DELIVERABLES: prototipo
DELIVERABLES: prototipo
CannedTuna
DELIVERABLES: prototipo
homepage: cosa metterci?
HisforHome
la homepage: «the fold»
above the fold
http://www.wordwatch.com/blog/conversion-tracking/above-the-fold-content-and-conversion-rates/
value proposition
è una promessa di valore :
è la ragione per cui un utente
dovrebbe fermarsi
(e «comprare») da noi.
buoni esempi di value proposition
buoni esempi di value proposition
buoni esempi di value proposition
«encourage scrolling»
«encourage scrolling»
«encourage scrolling»
eye tracking
screen sizes
Ora lavoriamo. Insieme.
mocqups
AI (Architettura dell'Informazione) for dummies: lezioni e project work
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Come Progettare un Sito Immobiliare Efficace - Digital Re 2013
Next

35

Share

AI (Architettura dell'Informazione) for dummies: lezioni e project work

Related Books

Free with a 30 day trial from Scribd

See all

AI (Architettura dell'Informazione) for dummies: lezioni e project work

  1. 1. Progettare un sito web: strumenti Project Work Trento, marzo2014 | DanielaCostantini
  2. 2. Lezioni
  3. 3. CHI COSTRUISCE UN SITO? l’architetto dell’informazione.
  4. 4. IA is… … the individual who organizes the patterns inherent in data, making the complex clear R.S.Wurman
  5. 5. information architecture (IA) is a practice of making sense of complexity COS’E’ L’AI? Abby Covert
  6. 6. COSA FA?  identificae rappresenta la struttura organizzativa delle informazionidi un ecosistema  al finedi favorirne la trovabilità, la funzionalità e l’usabilità  adottando un approccio di designcentrato sulla persona
  7. 7. design is a teamsport vagamundos
  8. 8. LE FASI DEL PROCESSO C. Lavazza
  9. 9. IDEAZIONE almoko
  10. 10. IDEAZIONE: gli elementi “exploring and defining the problem” obiettivi target requisiti vincoli
  11. 11. IDEAZIONE: gli strumenti di analisi
  12. 12. l’ascolto Interviste al cliente Interviste agli utenti Questionari Focus-group Osservazione diretta ThomasHawk
  13. 13. analisi competitiva ReneMensen
  14. 14. inventariocontenuti (audit)
  15. 15. personas
  16. 16. IDEAZIONE: gli strumenti di creazione
  17. 17. mappa concettuale
  18. 18. scketch
  19. 19. Qualche tecnica di co-design JenLen
  20. 20. brainstorming TheImageGroup
  21. 21. card-sorting Rosenfeld Media
  22. 22. 6-to-1
  23. 23. design the box Design by FireEvents
  24. 24. KJ method SeanMunson
  25. 25. DESIGN [che non vuol dire disegnare ma progettare] magnusfranklin
  26. 26. azioni individuazione del core message (ed eventuale payoff) 1
  27. 27. (pay off) riassume in una frase assai semplice l’essenzadell’azienda: Life is Now - Vodafone Dovec’è Barillac’è casa – Barilla Just do it – Nike Connecting People – Nokia Think different – Apple Cuoredi Panna – CornettoAlgida Re della Casa – Ariete Più bianco non si può – detersivo Dash
  28. 28. azioni definizione del layout 2
  29. 29. azioni strutturazione contenuti e menu di navigazione (labeling) 3
  30. 30. azioni definizione supporto alla navigazione (guida al sito, mappa, contatti, breadcrumbs…) 4
  31. 31. azioni scelta dei colori e delle principali impostazioni grafiche (visual designer) 5
  32. 32. (style guide)
  33. 33. strumenti
  34. 34. strumenti
  35. 35. strumenti wireframes sono la dichiarazionedi intenti di come sarà la struttura delle pagine
  36. 36. strumenti-> wireframe
  37. 37. tools wireframes online https://moqups.com/ https://gomockingbird.com/mockingbird/ http://www.mockflow.com/ http://creately.com/ https://wireframe.cc/ http://pencil.evolus.vn/Default.html http://blog.hotgloo.com/
  38. 38. adactio cross-channel experience
  39. 39. mobile. mobile…
  40. 40. SVILUPPO jesse757
  41. 41. RILASCIO tempusvolat
  42. 42. Ora lavoriamo. Insieme.
  43. 43. quale scenario Ideare una strutturadi sito-vetrinache ha come obiettivo primario quello di promuovereil marchioEcolabel, intesocome valoreaggiunto per una strutturaturistica che offreservizi e prodotti a ridottoimpattoambientale
  44. 44. IDEAZIONE: co-design
  45. 45. DELIVERABLES -> mappa concettuale
  46. 46. DELIVERABLES: specifiche strutturaAI
  47. 47. DELIVERABLES: wireframe
  48. 48. DELIVERABLES: prototipo
  49. 49. DELIVERABLES: prototipo CannedTuna
  50. 50. DELIVERABLES: prototipo
  51. 51. homepage: cosa metterci? HisforHome
  52. 52. la homepage: «the fold»
  53. 53. above the fold http://www.wordwatch.com/blog/conversion-tracking/above-the-fold-content-and-conversion-rates/
  54. 54. value proposition è una promessa di valore : è la ragione per cui un utente dovrebbe fermarsi (e «comprare») da noi.
  55. 55. buoni esempi di value proposition
  56. 56. buoni esempi di value proposition
  57. 57. buoni esempi di value proposition
  58. 58. «encourage scrolling»
  59. 59. «encourage scrolling»
  60. 60. «encourage scrolling»
  61. 61. eye tracking
  62. 62. screen sizes
  63. 63. Ora lavoriamo. Insieme.
  64. 64. mocqups
  • sbarrax

    Jan. 8, 2020
  • MariangelaMusolino1

    Apr. 29, 2016
  • MatteoPoile

    Mar. 7, 2016
  • MinoParisi

    Mar. 5, 2015
  • Edworld1982

    Oct. 29, 2014
  • giovanniluca3

    Oct. 28, 2014
  • francesco

    Aug. 5, 2014
  • patrickrossa

    May. 30, 2014
  • CristinaBaruta

    Apr. 19, 2014
  • SimoneBertoloni

    Apr. 9, 2014
  • Aetheros

    Apr. 8, 2014
  • raffiro

    Apr. 8, 2014
  • diomy80

    Apr. 8, 2014
  • FrancescaCroci

    Apr. 8, 2014
  • francescobiacca

    Apr. 8, 2014
  • MarziaBianchi

    Apr. 7, 2014
  • RamonaVesprini

    Apr. 7, 2014
  • DanieleFerrari1

    Apr. 7, 2014
  • MatteoSicilianideCum

    Apr. 7, 2014
  • paolovalzania

    Apr. 7, 2014

Views

Total views

2,685

On Slideshare

0

From embeds

0

Number of embeds

309

Actions

Downloads

0

Shares

0

Comments

0

Likes

35

×