Cours de Web Design part.6

Webdesign
visual design
Février 2013
a RITAteaching
Relax In The Air
6

• Hiérarchie
• Intelligibilité
• Lisibilité
• Esthétique
• Ergonomie de la page
• Confort
• Repères
design
buts
Relax In The Air
typographie
Février 2013
Copyright© 2013 Relax In The Air

typographie
design
faits
Relax In The Air
la lecture sur écran est fatigante et
contraignante.
Février 2013

typographie
design
faits
Relax In The Air
Février 2013

• Serif / sans serif.
• Longueur d’une ligne: 12 mots c’est lisible.
• Leading ou interlignage: 1.1 - 1.5 c’est aéré.
• Letter spacing ou inter-lettrage: par défaut.
• Couleur typographie VS espace blanc.
typographie
design
faits
Relax In The Air
Février 2013

design
contraste
Relax In The Air
http://www.snook.ca/technical/colour_contrast/colour.html
typographie
Février 2013

a a a a a a a a a a a a a a a
typographie
design
échelles
Relax In The Air
8 9 10 11 12 14 16 18 24 30 36 48 60 72 96
Février 2013

typographie
design
règle
Relax In The Air
• Jamais plus de 2 typos est généralement
une bonne règle
• en combinant 2 typos tentez d’obtenir
harmonie et contraste
• mélanger une sérif et une bâton a plus de
sens
Février 2013

typographie
design
combinaison
Relax In The Air
Une certaine harmonie se dégage
de notre combinaison
Février 2013

typographie
design
Relax In The Air
Nous sommes différentes
mais encore trop semblables
combinaison
Février 2013

typographie
design
Relax In The Air
Nous sommes très différentes
et nous marions bien
combinaison
Février 2013

typographie
design
types
Relax In The Air
Designer
au contrôle
Utilisateur
au contrôle
Images Alternatives Typo et images Web safe
Février 2013

typographie
design
web safe fonts
Relax In The Air
typographies installées par défaut sur la
machine de l’utilisateur.
Février 2013

• Arial
• Courrier New
• Verdana
• Tahoma
• Times New Roman
• Trebuchet
• Georgia
typographie
design
web safe fonts
Relax In The Air
Février 2013

typographie
design
web safe fonts
Relax In The Air
les moteurs de recherche peuvent
uniquement chercher et indexer dans du
contenu lisible.
Février 2013

typographie
design
web safe fonts
Relax In The Air
Février 2013

design
alternatives
typographie
Relax In The Air
Février 2013

• Google Fonts
• Typekit
• Font Face
• Fontdeck
design
alternatives
typographie
Relax In The Air
Février 2013

typographie
design
Relax In The Air
Attention à la lisibilité en dessous d’une
certaine taille !
alternatives
Février 2013

www.spurapp.com/#54556/grayscale
cool link

beta.typecastapp.com/dashboard
cool link

www.google.com/webfonts
cool link

There are no stupid users, only stupid
interaction designers.

comment pense l’utilisateur?
apprécie
qualité et
crédibilité

impatient et
attend une
gratification

il ne fait pastoujours
les bons choix

simplifier
Il est bien plus facile de simplifier vos idées
pour les rendre fonctionnelles que de faire
entrer de force une idée dans une
fonctionnalité existante.
gapingvoid.com
____________________
Michael Lebowitz

cool link
goodfuckingdesignadvice.com

Utilisez d’autres éléments de communication
(non-verbaux).
Ne combinez pas trop d’éléments à la fois.
Ne cédez pas à trop d’information ou d’urgence.
conventions
simplifier
Relax In The Air
Février 2013

conventions
simplifier
Relax In The Air
Février 2013

N’ennuyez pas votre utilisateur et faites simple
Less is more

know the rules
____________________
Une blonde
Je ne vois pas le bouton Contact.

cool link
Texte
goodfuckingdesignadvice.com

• Respectez les conventions de localisation
• Respectez les conventions de vocabulaire
• Respectez les conventions d’interaction
conventions
règles
Relax In The Air
Février 2013

navigation
_________________________
Phil Stuart - Preloaded
Elle doit être la colonne vertébrale de tout
site riche en contenus et le point de départ
de l’organisation et de l’architecture de
votre construction.

Au centre de l’utilisabilité d’un site
premier lien de l’utilisateur avec le site
conventions
navigation
Relax In The Air
Février 2013

Equilibrez entre ludique et fonctionnel.
Veillez à la réactivité.
Système facile à utiliser et à comprendre.
Ne perdez pas l’utilisateur.
Gardez la même logique.
Anticipez les besoins.
conventions
navigation
Relax In The Air
Février 2013

groupes reconnaissables par l’utilisateur
avant que sont cerveau ne tente de les
regrouper dans des sous-groupes.
Relax In The Air
5 à 7
Février 2013

conventions
navigation
Relax In The Air
Ai
Février 2013

l’utilisateur doit rapidement comprendre ce
qui est cliquable.
Doit facilement comprendre la logique des
comportements
Ces comportements doivent rester
constants tout au long du site
conventions
navigation
Relax In The Air
comportements
Février 2013

la navigation doit être conçue du point de
vue de l’utilisateur.
utilisez des web fonts (pas d’images).
conventions
navigation
Relax In The Air
comportements
Février 2013

http://www.nike.com/us/en_us/c/better-world/en
http://tntrailsandbyways.com
http://methoddesignlab.com
http://www.bonlook.com
http://designintellection.com
http://www.coexhibitions.com
http://www.bankwest.com.au
http://www.globalhumanitarianassistance.org
conventions
navigation
Relax In The Air
good design
Février 2013

Breadcrumb
____________________
Wikipedia
Aide à la navigation utilisée dans les UI. Il
permet aux utilisateurs de garder une trace
de leur emplacement dans les pages.

Facilite pour l’utilisateur le retour en
arrière et lui montre son emplacement dans
l’architecture globale d’un site.
conventions
breadcrumb
Relax In The Air
Février 2013

également utilisé dans la progression de
processus d’inscription, achat, questionnaire...
conventions
breadcrumb
Relax In The Air
Février 2013

Relax In The Air
conventions
breadcrumb
Février 2013

fitts
___________________
Paul Fitts
Une cible est d’autant plus rapide à
atteindre qu’elle est proche et grande.

conventions
loi de fitts
Relax In The Air
Février 2013

Pour consulter notre menu, cliquez ici
Pour consulter notre menu, cliquez ici
Pour vous mettre l’eau à la bouche, consultez notre menu
conventions
loi de fitts
Relax In The Air
Février 2013

OK
OK
conventions
loi de fitts
Relax In The Air
Février 2013

Set user free
Design for flexibility
Spare the network
Optimize response time
best practices

Cours de Web Design part.6

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Plus de MC Casal

Plus de MC Casal (7)

Cours de Web Design part.6