Quelques principes du design Webereyes.net

Que peut-on faire dans notre site ?

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 observer quelque chose

créer quelque chose

discuter avec d’autres gens

s’entretenir

Organiser le contenu

penser le site comme une série de tâches

qu’est-ce qu’on montre ?

organisation et catégorisation

qu’est-ce qu’on peut faire ?

quel modèle de navigation ?

quelle métaphore ?

Architecture de l’information organiser un espace d’information

diagrammes conceptuels simples

http://webstyleguide.com/wsg3/3-information-architecture/4-presenting-information.html

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

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

http://www.dynamicdiagrams.com

Architecture de l’information organiser un espace d’information

http://www.dynamicdiagrams.com

Architecture de l’information organiser un espace d’information

http://www.dynamicdiagrams.com

Architecture de l’information organiser un espace d’information

Modèle de navigationcomment 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.

Layout

le layout contient :

• hiérarchie visuelle

• flux visuel

hiérarchie de textes

Hiérarchie visuellepoids et importance des éléments

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

densité couleur de fond

ryhtmeposition et taille

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

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

Flux visuelquoi lire après ?

ligne imaginaires

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

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.

alignement de formulaires

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

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 :

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

titre du modèle

parties du modèle

utilisation du modèle

d’autres modèles

http://patterntap.com/

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