Quelques principes du design Web              ereyes.net
Que peut-on faire  dans le site ?
Faire une liste de   raisons pour lesquelles on visite notre site, e.g.trouver quelque choseapprendre quelque choseréalise...
Organizer le contenu
penser le site comme une série de données et de tâcheson montre quoi ?comment est organisé et catégorisé ?qu’est-ce qu’on ...
Architecture de l’information       organiser un espace d’information                                                     ...
Architecture de l’information       organiser un espace d’information                                                     ...
http://www.behance.net/gallery/Domain-Diagrams/4300779
Architecture de l’information  organiser un espace d’informationhttp://www.dynamicdiagrams.com
Architecture de l’information  organiser un espace d’informationhttp://www.dynamicdiagrams.com
Architecture de l’information  organiser un espace d’informationhttp://www.dynamicdiagrams.com
Modèle de navigation       comment sont connectés les pages et comment l’utilisateur les navigueBill Scott & Theresa Neil ...
Layout
le   layout         contient :• hiérarchie visuelle• flux visuel
Hiérarchie visuelle       poids et importance des éléments                                                                ...
densité                                                  couleur de fond                                          position...
Bill Scott & Theresa Neil (2009). Designing Web Interfaces: Principles and Patterns for Rich Interaction. Sebastopol, CA: ...
Flux visuel       quoi lire après ?                                                                        ligne imaginair...
il est conseillé d’ajouter des “appels à l’action” après                                       le texte important (gauche)...
alignement de formulairesBill Scott & Theresa Neil (2009). Designing Web Interfaces: Principles and Patterns for Rich Inte...
http://www.aharef.info/static/htmlgraph/
https://addons.mozilla.org/fr/firefox/addon/tilt/
Design graphique
http://colorschemedesigner.com/
http://www.google.com/webfonts
http://www.ringvemedia.com/
Design basé sur des modèles
Un    modèle décrit une solution optimale à un problème donné                           Tout modèle comprend :            ...
titre du modèle                       utilisation du modèle                       d’autres modèlesparties du modèle
http://patterntap.com/
http://developer.yahoo.com/ypatterns/about/stencils/
http://twitter.github.com/bootstrap/
Quelques principes du design web
Quelques principes du design web
Quelques principes du design web
Quelques principes du design web
Quelques principes du design web
Quelques principes du design web
Quelques principes du design web
Quelques principes du design web
Quelques principes du design web
Quelques principes du design web
Prochain SlideShare
Chargement dans…5
×

Quelques principes du design web

1 050 vues

Publié le

Publié dans : Formation
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 050
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
57
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Quelques principes du design web

  1. 1. Quelques principes du design Web ereyes.net
  2. 2. Que peut-on faire dans le site ?
  3. 3. Faire une liste de raisons pour lesquelles on visite notre site, e.g.trouver quelque choseapprendre quelque choseréaliser une transactioncontrôler ou monitorer quelque chosecréer quelque chosediscuter avec d’autres genss’entretenir
  4. 4. Organizer le contenu
  5. 5. penser le site comme une série de données et de tâcheson 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. 6. Architecture de l’information organiser un espace d’information diagrammes conceptuels simplehttp://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html
  7. 7. Architecture de l’information organiser un espace d’information diagramme des documents du sitehttp://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html
  8. 8. http://www.behance.net/gallery/Domain-Diagrams/4300779
  9. 9. Architecture de l’information organiser un espace d’informationhttp://www.dynamicdiagrams.com
  10. 10. Architecture de l’information organiser un espace d’informationhttp://www.dynamicdiagrams.com
  11. 11. Architecture de l’information organiser un espace d’informationhttp://www.dynamicdiagrams.com
  12. 12. Modèle de navigation comment sont connectés les pages et comment l’utilisateur les navigueBill Scott & Theresa Neil (2009). Designing Web Interfaces: Principles and Patterns for Rich Interaction. Sebastopol, CA: O’Reilly.
  13. 13. Layout
  14. 14. le layout contient :• hiérarchie visuelle• flux visuel
  15. 15. Hiérarchie visuelle poids et importance des éléments hiérarchie de textesBill Scott & Theresa Neil (2009). Designing Web Interfaces: Principles and Patterns for Rich Interaction. Sebastopol, CA: O’Reilly.
  16. 16. densité couleur de fond position et taille ryhtmeBill Scott & Theresa Neil (2009). Designing Web Interfaces: Principles and Patterns for Rich Interaction. Sebastopol, CA: O’Reilly.
  17. 17. Bill Scott & Theresa Neil (2009). Designing Web Interfaces: Principles and Patterns for Rich Interaction. Sebastopol, CA: O’Reilly.
  18. 18. Flux visuel quoi lire après ? ligne imaginairesBill Scott & Theresa Neil (2009). Designing Web Interfaces: Principles and Patterns for Rich Interaction. Sebastopol, CA: O’Reilly.
  19. 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. 20. alignement de formulairesBill Scott & Theresa Neil (2009). Designing Web Interfaces: Principles and Patterns for Rich Interaction. Sebastopol, CA: O’Reilly.
  21. 21. http://www.aharef.info/static/htmlgraph/
  22. 22. https://addons.mozilla.org/fr/firefox/addon/tilt/
  23. 23. Design graphique
  24. 24. http://colorschemedesigner.com/
  25. 25. http://www.google.com/webfonts
  26. 26. http://www.ringvemedia.com/
  27. 27. Design basé sur des modèles
  28. 28. 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 practiceYahoo Developer Network, 2012http://developer.yahoo.com/ypatterns/about/index.html
  29. 29. titre du modèle utilisation du modèle d’autres modèlesparties du modèle
  30. 30. http://patterntap.com/
  31. 31. http://developer.yahoo.com/ypatterns/about/stencils/
  32. 32. http://twitter.github.com/bootstrap/

×