1. Progettare un sito web: strumenti
Project Work
Trento, marzo2014 | DanielaCostantini

2. Lezioni

3. CHI COSTRUISCE UN SITO?
l’architetto dell’informazione.

4. IA is…
… the individual who organizes
the patterns inherent in data,
making the complex clear
R.S.Wurman

5. information architecture (IA) is a practice of
making sense
of complexity
COS’E’ L’AI?
Abby Covert

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. design is a teamsport
vagamundos

8. LE FASI DEL PROCESSO
C. Lavazza

9. IDEAZIONE
almoko

10. IDEAZIONE: gli elementi
“exploring and defining the problem”
obiettivi
target requisiti
vincoli

11. IDEAZIONE: gli strumenti di analisi

12. l’ascolto
Interviste al cliente
Interviste agli utenti
Questionari
Focus-group
Osservazione diretta
ThomasHawk

13. analisi competitiva
ReneMensen

14. inventariocontenuti (audit)

15. personas

16. IDEAZIONE: gli strumenti di creazione

17. mappa concettuale

18. scketch

19. Qualche tecnica di co-design
JenLen

20. brainstorming
TheImageGroup

21. card-sorting
Rosenfeld Media

22. 6-to-1

23. design the box
Design by FireEvents

24. KJ method
SeanMunson

25. DESIGN
[che non vuol dire disegnare ma progettare]
magnusfranklin

26. azioni
individuazione del core message
(ed eventuale payoff)
1

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. azioni
definizione del layout
2

29. azioni
strutturazione contenuti
e menu di navigazione (labeling)
3

30. azioni
definizione supporto alla navigazione
(guida al sito, mappa, contatti, breadcrumbs…)
4

31. azioni
scelta dei colori e delle principali
impostazioni grafiche (visual designer)
5

32. (style guide)

33. strumenti

34. strumenti

35. strumenti
wireframes
sono la dichiarazionedi intenti
di come sarà la struttura delle pagine

36. strumenti-> wireframe

38. 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/

39. adactio
cross-channel experience

40. mobile.
mobile…

41. SVILUPPO
jesse757

42. RILASCIO
tempusvolat

43. Ora lavoriamo. Insieme.

44. 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

45. IDEAZIONE: co-design

46. DELIVERABLES -> mappa concettuale

47. DELIVERABLES: specifiche strutturaAI

48. DELIVERABLES: wireframe

49. DELIVERABLES: prototipo

50. DELIVERABLES: prototipo
CannedTuna

51. DELIVERABLES: prototipo

52. homepage: cosa metterci?
HisforHome

53. la homepage: «the fold»

54. above the fold
http://www.wordwatch.com/blog/conversion-tracking/above-the-fold-content-and-conversion-rates/

55. value proposition
è una promessa di valore :
è la ragione per cui un utente
dovrebbe fermarsi
(e «comprare») da noi.

56. buoni esempi di value proposition

57. buoni esempi di value proposition

58. buoni esempi di value proposition

59. «encourage scrolling»

60. «encourage scrolling»

61. «encourage scrolling»

62. eye tracking

63. screen sizes

64. Ora lavoriamo. Insieme.

65. mocqups