Quelques principes du design web

1,112 views

Published on

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,112
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
58
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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/

×