1. Quelques principes du design Web
ereyes.net

2. Que peut-on faire
dans le site ?

3. Faire une liste de raisons pour lesquelles on visite notre site, e.g.
trouver quelque chose
apprendre quelque chose
réaliser une transaction
contrôler ou monitorer quelque chose
créer quelque chose
discuter avec d’autres gens
s’entretenir

4. Organizer le contenu

5. penser le site comme une série de données et de tâches
on montre quoi ?
comment est organisé et catégorisé ?
qu’est-ce qu’on peut faire avec ?
quelle modèle de navigation ?
quelle métaphore ?

6. Architecture de l’information
organiser un espace d’information
diagrammes conceptuels simple
http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html

7. Architecture de l’information
organiser un espace d’information
diagramme des documents du site
http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html

8. http://www.behance.net/gallery/Domain-Diagrams/4300779

9. Architecture de l’information
organiser un espace d’information
http://www.dynamicdiagrams.com

10. Architecture de l’information
organiser un espace d’information
http://www.dynamicdiagrams.com

11. Architecture de l’information
organiser un espace d’information
http://www.dynamicdiagrams.com

12. Modèle de navigation
comment sont connectés les pages et comment l’utilisateur les navigue
Bill Scott & Theresa Neil (2009). Designing Web Interfaces: Principles and Patterns for Rich Interaction. Sebastopol, CA: O’Reilly.

13. Layout

14. le layout contient :
• hiérarchie visuelle
• flux visuel

15. Hiérarchie visuelle
poids et importance des éléments
hiérarchie de textes
Bill Scott & Theresa Neil (2009). Designing Web Interfaces: Principles and Patterns for Rich Interaction. Sebastopol, CA: O’Reilly.

16. densité couleur de fond
position et taille ryhtme
Bill Scott & Theresa Neil (2009). Designing Web Interfaces: Principles and Patterns for Rich Interaction. Sebastopol, CA: O’Reilly.

17. Bill Scott & Theresa Neil (2009). Designing Web Interfaces: Principles and Patterns for Rich Interaction. Sebastopol, CA: O’Reilly.

18. Flux visuel
quoi lire après ?
ligne imaginaires
Bill Scott & Theresa Neil (2009). Designing Web Interfaces: Principles and Patterns for Rich Interaction. Sebastopol, CA: O’Reilly.

19. il est conseillé d’ajouter des “appels à l’action” après
le texte important (gauche)...
... si ce texte n’est pas important à lire, l’appel peut
être séparé (droit)
Bill Scott & Theresa Neil (2009). Designing Web Interfaces: Principles and Patterns for Rich Interaction. Sebastopol, CA: O’Reilly.

20. alignement de formulaires
Bill Scott & Theresa Neil (2009). Designing Web Interfaces: Principles and Patterns for Rich Interaction. Sebastopol, CA: O’Reilly.

29. http://www.aharef.info/static/htmlgraph/

31. https://addons.mozilla.org/fr/firefox/addon/tilt/

32. Design graphique

33. http://colorschemedesigner.com/

34. http://www.google.com/webfonts

35. http://www.ringvemedia.com/

36. Design basé sur des modèles

37. Un modèle décrit une solution optimale à un problème donné
Tout modèle comprend :
un titre, un problème, un contexte, une solution
Cycle de vie :
beta > il marche > best practice
Yahoo Developer Network, 2012
http://developer.yahoo.com/ypatterns/about/index.html

39. titre du modèle
utilisation du modèle
d’autres modèles
parties du modèle

41. http://patterntap.com/

42. http://developer.yahoo.com/ypatterns/about/stencils/

43. http://twitter.github.com/bootstrap/