Quelques principes du design web

1 105 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 105
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
58
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/

×