Design et ergonomie pour le Web
Cours 6
Jonathan Martel
16 mai 2014
Collège de Maisonneuve
Menu du jour
- Les interfaces Web
- Design Web
- Anatomie d'une page Web
Comment définir
un bon design Web ?
- Selon Jason Beaird (2010)
- L’utilisateur est charmé par le design, mais attiré par le contenu
- Les menus sont intuitifs et facilitent la navigation
- Clairement visible
- Descriptif
- Facilite sa reconnaissance comme menu
- Permet de savoir où est l’usager
- L’utilisateur se reconnait partout sur le site
Anatomie d'une page Web
L'entête et le logo
- La signature visuelle de l’organisation
- Doit contenir le logo ou le nom de l’organisation
- Se retrouve sur l’ensemble des pages
- Accroit l’identité de la « marque »
- Permet une identification rapide du site visité
Bloc de contenu
- Le bloc qui contient le « site »
- Présent sur chaque site (<body>, <article>, <div> ou <main>)
- Peut être défini de façon fluide, fixe ou adaptatif
Contenu
-
Le roi de votre site...
- Ce que le visiteur cherche
- Toujours mettre en évidence
Navigation
-
... et sa reine
- Doit être facile à trouver et à utiliser
- Devrait être gardé le plus près possible
du haut de la composition - Tous les éléments doivent apparaître
en haut du pli (Fold)
Les espaces blancs
-
La ponctuation graphique
- Ne pas avoir peur de l’espace vide
- Ce qui permet de respirer et de donner du rythme
- Permet de créer de l’unité et un équilibre
Pied de page
- Ce qui clos votre site
-
Contient normalement les droits d’auteur,
les mentions légales et les informations de contact. -
Peut contenir les liens vers les principaux items
du site (rappel du menu simple) - Indique la fin de la page et du contenu
Design et ergonomie pour le Web - Cours 6
By Jonathan Martel
Design et ergonomie pour le Web - Cours 6
Design et ergonomie pour le Web - Cours 6
