ISO Redesign

Transcript

1. ISO { redesign } project David Roessli cybermedia concepts © Copyright 2011, David Roessli. These slides are confidential and may not be used without permission.
3. Web designer
4. Web designer design visuel
5. Web designer design visuel design de l’interface (UI)
6. Web designer design visuel design des interactions (UX) design de l’interface (UI)
7. Web designer design visuel design du code design des interactions (UX) design de l’interface (UI)
8. Web designer design visuel design du code design des interactions (UX) design de l’interface (UI) design de l’architecture de l’information
9. Web designer design visuel design du code design des interactions (UX) design de l’interface (UI) design de l’architecture de l’information design des stratégies de contenu
10. Web designer design visuel design du code design des interactions (UX) design de l’interface (UI) design de l’architecture de l’information design des stratégies de contenu IT design
11. Web designer design visuel design du code design des interactions (UX) design de l’interface (UI) design de l’architecture de l’information design des stratégies de contenu IT design design ou Design?
12. Je fais des sites web
14. www.xstrata.com
15. www.xstrata.com
16. www.xstrata.com
17. www.xstrata.com
18. www.xstrata.com
19. www.xstrata.com
20. www.cgmplc.com
21. www.osteofrance.com
22. www.osteofrance.com
23. www.osteofrance.com
24. www.amberpeaks.com
25. www.amberpeaks.com
26. www.amberpeaks.com
27. www.favre-guth.ch
28. www.favre-guth.ch
29. www.favre-guth.ch
30. www.favre-guth.ch
31. www.favre-guth.ch
32. www.favre-guth.ch
33. www.cerutti.net
34. www.cerutti.net
35. www.celine-artiste.org
36. www.celine-artiste.org
37. www.celine-artiste.org
38. www.groupesida.ch
39. www.groupesida.ch
40. www.groupesida.ch
41. personal projects
42. personal projects
43. http://cybmed.com http://davidroessli.com/about @roessli
44. www.iso.org
45. www.iso.org
46. ‣Concevoir une nouvelle ligne graphique www.iso.org
47. ‣Concevoir une nouvelle ligne graphique ‣Optimiser l’expérience du visiteur www.iso.org
48. ‣Concevoir une nouvelle ligne graphique ‣Optimiser l’expérience du visiteur ‣Etablir une stratégie de contenu www.iso.org
49. Nouveau design visuel
51. ‣Comprendre la nature du contenu ‣Le contenu influence et guide le design ‣Concevoir avec du vrai contenu ‣Le client fait partie intégrante processus de design Nouveau design visuel
53. Andy Clarke
54. Andy Clarke
55. Andy Clarke
56. lanyrd.com/people/malarkey/sessions/
57. lanyrd.com/people/malarkey/sessions/
58. http://stuffandnonsense.co.uk/ http://forabeautifulweb.com/ @Malarkey
59. stuffandnonsense.co.uk
60. stuffandnonsense.co.uk
61. stuffandnonsense.co.uk
62. forabeautifulweb.com
63. www.xstrata.com
64. www.newint.org
65. www.newint.org
66. www.newint.org
67. www.newint.org
68. www.newint.org
69. www.cannybill.com
70. www.cannybill.com
71. www.cannybill.com
72. www.mobi-cart.com
73. www.mobi-cart.com
74. www.mobi-cart.com
75. www.caerwysview.net
76. www.caerwysview.net
77. www.caerwysview.net
78. Stratégie de contenu
79. “There’s really only one central principle of good content: it should be appropriate for your business, for your users, and for its context. Appropriate in its method of delivery, in its style and structure, and above all in its substance.” – Erin Kissane @kissane
80. ‣Le contenu est adéquat pour un utilisateur lorsqu’il lui permet d’atteindre ses buts. Stratégie de contenu
81. ‣Le contenu est parfaitement adéquat quand l’utilisateur se sent génial, après avoir trouvé exactement ce dont il avait besoin, au moment où il en avait besoin, et sous la forme requise. Stratégie de contenu
82. ‣Le contenu est adéquat pour votre entreprise lorsqu’il vous permet d’atteindre vos buts commerciaux d’une manière durable. Stratégie de contenu
83. ‣utile ‣centré sur l’utilisateur ‣clair ‣consistent ‣concis ‣maintenu En plus d’être adéquat un bon contenu doit être,
84. Le diable est dans les détails
85. La passion du travail bien fait
86. Audience Contexte Fonction Contenu
87. mise en forme rédaction balisage comportement
88. accessibilité sémantique fonctionnalité ndability
89. web standards accessibilité design visuellement engageant simple fonctionnel attrayant technologies appropriées
90. On fait ce qu’on fait, parce qu’on aime ce qu’on fait
91. Concevoir dans le navigateur
92. Utiliser le meilleur navigateur du moment pour concevoir le meilleur site web possible, et pas leur plus petit commun dénominateur ou le plus populaire.
93. ‣Présenter les maquettes dans le navigateur
94. ‣Présenter les maquettes dans le navigateur ‣Identifier les problèmes plus tôt dans le processus de design
95. ‣Présenter les maquettes dans le navigateur ‣Identifier les problèmes plus tôt dans le processus de design ‣Eviter les remises en cause tardives
96. ‣Présenter les maquettes dans le navigateur ‣Identifier les problèmes plus tôt dans le processus de design ‣Eviter les remises en cause tardives ‣Cycles de design plus courts
97. Est-ce que les sites web doivent apparaitre identiques dans tous les navigateurs?
98. Est-ce que les sites web doivent apparaitre identiques dans tous les navigateurs?
99. Est-ce que les sites web doivent apparaitre identiques dans tous les navigateurs?
100. Est-ce que les sites web doivent apparaitre identiques dans tous les navigateurs?
101. Est-ce que les sites web doivent apparaitre identiques dans tous les navigateurs?
102. Est-ce que les sites web doivent apparaitre identiques dans tous les navigateurs?
103. non http://dowebsitesneedtolookexactlythesameineverybrowser.com
104. Est-ce que les sites web doivent être vécus exactement de la même manière dans tous les navigateurs?
105. Est-ce que les sites web doivent être vécus exactement de la même manière dans tous les navigateurs?
106. non plus http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
107. Soigner la microcopie
108. La taille ne fait pas tout
109. Lorsque vous rédigez pour le web, les petits détails font toute la différence. Votre microcopie doit guider les utilisateurs et le ton doit promouvoir la confiance qu’ils ont en vous.
110. ‣Guider ‣Aider ‣Rassurer
111. ‣Guider ‣Aider ‣Rassurer ‣Stylé et fonctionnel
118. Enrichir avec des microformats
119. http://microformats.org
120. hCard hCalendar rel-license rel-nofollow rel-tag XFN …
121. Je donne une présentation sur le web design le 31 mars à l’ISO, à Genève.
122. <span class="vevent"> Je donne une<span class="summary"> présentation sur le web design</span> le <abbr class="dtstart" title="2011-03-31">31 mars</abbr> à l’ <span class="location">ISO, à Genève</span>. </span>
123. Etre fétichiste avec vos URLs
124. _cassia_/3990384437
125. Identifier les objets primaires du site web, et construire les URLs à partir de là
126. http://domaine.com/ Identifier les objets primaires du site web, et construire les URLs à partir de là
127. http://domaine.com/ Identifier les objets primaires du site web, et construire les URLs à partir de là http://domaine.com/produits/
128. http://domaine.com/ Identifier les objets primaires du site web, et construire les URLs à partir de là http://domaine.com/produits/ http://domaine.com/produit/nom/
129. http://domaine.com/ Identifier les objets primaires du site web, et construire les URLs à partir de là http://domaine.com/produits/ http://domaine.com/produit/nom/ http://domaine.com/produit/nom/details/
130. Identifier les objets primaires du site web, et construire les URLs à partir de là http://domaine.com/ http://domaine.com/produits/ http://domaine.com/produit/nom/ http://domaine.com/produit/nom/details/
131. Identifier les objets primaires du site web, et construire les URLs à partir de là Ajoutez du sens et évitez les adresses illisibles. http://domaine.com/ http://domaine.com/produits/ http://domaine.com/produit/nom/ http://domaine.com/produit/nom/details/
132. ‣Choisir des mots simples mais pertinents;
133. ‣Choisir des mots simples mais pertinents; ‣N’utiliser que les abbréviations qui ont un sens dans le contexte;
134. ‣Choisir des mots simples mais pertinents; ‣N’utiliser que les abbréviations qui ont un sens dans le contexte; ‣Utiliser des verbes pour les actions;
135. ‣Choisir des mots simples mais pertinents; ‣N’utiliser que les abbréviations qui ont un sens dans le contexte; ‣Utiliser des verbes pour les actions; ‣Prévoir des redirections pour les typos et pluriels (voire les synonymes).
136. ‣Grande expérience du web ‣Expertise en HTML, CSS et JavaScript ‣Approche flexible et agile ‣Collaboration proche et intense ‣Un soin maniaque des détails Ce que nous vous offrons
137. 31 mars 2011 http://ro.ess.li/talk/iso