5. design de
l’interface (UI)
design visuel
Web designer
6. design de
l’interface (UI)
design des
design visuel interactions (UX)
Web designer
7. design de
l’interface (UI)
design des
design visuel interactions (UX)
Web designer
design du code
8. design de
l’interface (UI)
design des
design visuel interactions (UX)
Web designer
design du code design de
l’architecture
de l’information
9. design de
l’interface (UI)
design des
design visuel interactions (UX)
Web designer
design du code design de
l’architecture
de l’information
design des
stratégies
de contenu
10. design de
l’interface (UI)
design des
design visuel interactions (UX)
Web designer
design du code design de
l’architecture
de l’information
design des
stratégies
IT design
de contenu
11. design de
l’interface (UI)
design des
design visuel interactions (UX)
Web designer
design du code design de
l’architecture
de l’information
design design des
ou
Design? stratégies
IT design
de contenu
15. Les sujets qui ne figurent pas
à l’agenda:
‣ Systèmes de gestion de projet
‣ Méthodologies de développement
‣ Stratégie de contenu
‣ HTML5, CSS, JavaScript (enfin, juste
un peu)
29. Faites votre mieux pour:
‣ Comprendre la nature du contenu
‣ Le contenu influence et guide le
design
‣ Concevoir avec du vrai contenu
‣ Responsabiliser le client
31. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id
est laborum.
32. Lorsque vous utilisez Lorem Ipsum
vous assumez que le problème de
communication a déjà été résolu,
et qu’il n’est qu’un bruit de fond
par rapport au problème “plus
important” du style visuel.
34. Pour concevoir le meilleur site web
possible, utilisez le meilleur
navigateur du moment, et pas leur
plus petit commun dénominateur
ou le plus populaire.
36. ‣ Choisir votre navigateur de test
‣ Présentez vos maquettes dans le
navigateur
37. ‣ Choisir votre navigateur de test
‣ Présentez vos maquettes dans le
navigateur
‣ Identifier les problèmes plus tôt
dans le processus de design
38. ‣ Choisir votre navigateur de test
‣ Présentez vos maquettes dans le
navigateur
‣ Identifier les problèmes plus tôt
dans le processus de design
‣ Eviter les remises en cause tardives
39. Est-ce que les sites web
doivent apparaitre
identiques dans tous les
navigateurs?
40. Est-ce que les sites web
doivent apparaitre
identiques dans tous les
navigateurs?
41. Est-ce que les sites web
doivent apparaitre
identiques dans tous les
navigateurs?
42. Est-ce que les sites web
doivent apparaitre
identiques dans tous les
navigateurs?
43. Est-ce que les sites web
doivent apparaitre
identiques dans tous les
navigateurs?
44. Est-ce que les sites web
doivent apparaitre
identiques dans tous les
navigateurs?
62. Modernizr pour identifier les
capacités du navigateur
<html class="canvas canvastext geolocation
rgba hsla multiplebgs borderimage
borderradius boxshadow opacity cssanimations
csscolumns cssgradients cssreflections
csstransforms csstransforms3d csstransitions
video audio localstorage sessionstorage
webworkers applicationcache fontface">
http://www.modernizr.com/
63. Modernizr pour identifier les
capacités du navigateur
<html class=”canvas canvastext geolocation
rgba hsla no-multiplebgs borderimage
borderradius boxshadow opacity cssanimations
csscolumns cssgradients cssreflections
csstransforms csstransforms3d csstransitions
video audio localstorage sessionstorage
webworkers applicationcache fontface”>
http://www.modernizr.com/
64. Modernizr pour identifier les
capacités du navigateur
.multiplebgs div p {
/* propriétés pour les navigateurs qui
supportent multiple backgrounds */
}
.no-multiplebgs div p {
/* propriétés alternatives pour ceux
qui ne le supportent pas */
}
http://www.modernizr.com/
69. media query pour cibler le
device de sortie
@media print {
/* propriétés pour la
version imprimable */
}
70. media query pour cibler les
plateformes mobiles
@media only screen
and (max-device width:480px) {
/* propriétés pour ce
type d’écran */
}
71. media query pour cibler les
plateformes mobiles
@media only screen
and (max-device width:480px
and (orientation:landscape) {
/* propriétés pour ce
type d’écran dans cette
orientation */
}
72. media query pour cibler les
plateformes mobiles
<link rel="stylesheet"
href="handheld.css"
media="only screen
and (max-device width:480px)"/>
92. 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.
107. Identifiez les objets primaires de
votre site internet, et construisez les
URLs à partir de là
108. Identifiez les objets primaires de
votre site internet, et construisez les
URLs à partir de là
http://domaine.com/
109. Identifiez les objets primaires de
votre site internet, et construisez les
URLs à partir de là
http://domaine.com/
http://domaine.com/produits/
110. Identifiez les objets primaires de
votre site internet, et construisez les
URLs à partir de là
http://domaine.com/
http://domaine.com/produits/
http://domaine.com/produit/nom/
111. Identifiez les objets primaires de
votre site internet, et construisez les
URLs à partir de là
http://domaine.com/
http://domaine.com/produits/
http://domaine.com/produit/nom/
http://domaine.com/produit/nom/details/
112. Identifiez les objets primaires de
votre site internet, et construisez les
URLs à partir de là
http://domaine.com/
http://domaine.com/produits/
http://domaine.com/produit/nom/
http://domaine.com/produit/nom/details/
113. Identifiez les objets primaires de
votre site internet, et construisez les
URLs à partir de là
http://domaine.com/
http://domaine.com/produits/
http://domaine.com/produit/nom/
http://domaine.com/produit/nom/details/
Ajoutez du sens et évitez les adresses illisibles.
115. ‣ Choisissez des mots simples mais
pertinents;
‣ N’utilisez que les abbréviations qui
ont un sens dans le contexte;
116. ‣ Choisissez des mots simples mais
pertinents;
‣ N’utilisez que les abbréviations qui
ont un sens dans le contexte;
‣ Utilisez des verbes pour les actions;
117. ‣ Choisissez des mots simples mais
pertinents;
‣ N’utilisez que les abbréviations qui
ont un sens dans le contexte;
‣ Utilisez des verbes pour les actions;
‣ Prévoyez des redirections pour les
typos et pluriels (voire les
synonymes).
121. Je donne une présentation
sur le web design le 9 juillet
aux Ateliers Nomades, à
Genève.
122. <span class="vevent">
Je donne une<span class="summary">
présentation sur le web design</span> le
<abbr class="dtstart"
title="2010-07-09">9 juillet</abbr> aux
<span class="location">Ateliers Nomades,
Genève</span>.
</span>