Conseils sur le Design pour les Développeurs par un Développeur
36
DESIGN principes de base appliqués à l'UX web
description
Quelques astuces faciles à appliquer pour que les développeurs puissent faire des produits avec un minimum de style et d'utilisabilité. Présentation faite aux JDLL 2014. http://jdll.org Présentation faite aux JDLL 2014. http://jdll.org/
Transcript of Conseils sur le Design pour les Développeurs par un Développeur
DESIGN principes de base appliqués à l'UX web
Souvent
joli
Guider
l'attention
Pas de friction
Comment y arriver ?
➔ Soigner la mise en page➔ Bien choisir ses éléments➔ Connaitre son objectif
Une mise en page lisible et propre
➔ allège l'esprit➔ inspire confiance
Tuyaux Mise en page sans réfléchir
1. Aligner les éléments(faire une grille)
2. Mettre des marges(aérer sa grille)
3. Mettre en gros ce qui est plus important (hiérarchiser)
Secret à ne répéter à personne
On ne regarde pas au centre en premier
Et pas toujours en haut non plus
Secret à ne répéter à personne
On ne regarde pas au centre en premier
Et pas toujours en haut non plus
Organisation des contenus
➔ Hiérarchisation par la mise en page➔ Classification par similarité
Tailles
Titre1sous-t itre1paragraphe1
Titre2sous-t itre2paragraphe2
Alignement
t itre1 sous-titre1 paragraphe1titre2 sous-titre2 paragraphe2
Espacement
t itre1
sous-titre1paragraphe1
titre2
sous-titre2paragraphe2
Couleur
t itre1sous-titre1paragraphe1titre2sous-titre2paragraphe2
Titre1
sous-t itre1 paragraphe1
Titre2
sous-t itre2 paragraphe2
TuyauxRéduire : Garder l'essentiel
➔ Actions liées à l'objectif➔ Restez cohérent
C'est plus facile de tout mettre que de ne rien mettre
<a style="width:267px;height:189px;left:0px;right:" href="http://www.google.com/imgres?client=ubuntu&hs=czW&sa=X&channel=fs&biw=957&bih=968&tbm=isch&tbnid=BDzkDjNjQ8KRkM%3A&imgrefurl=http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FFile%3AAltavista-1999.png&docid=ksj2dXnJlPOIhM&imgurl=http%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2Fd%2Fd8%2FAltavista-1999.png&w=799&h=565&ei=DGnUUqCdHLOX0QX474CIBA&zoom=1&ved=0CFEQhBwwAA&iact=rc&page=1&start=0&ndsp=17" jsaction="isr.hc;mousedown:isr.hmd;mouseover:isr.hmov;mouseout:isr.hmou" data-ved="0CFEQhBwwAA" class="rg_l"><img src="data:image/jpeg;base64,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
REDUCE
RE
TuyauxDonner du sens
➔ Guider l'utilisateur➔ Voire forcer son attention➔ Rester cohérent
Cliqueici
Info
Info
Info
Cliqueici
Info
Info
Info
Cliqueici
Info
Info
Info
On lit les infos de haut en basEt on clique sur le bouton
truc
truc
truc
truc
Cliqueici
Info
Info
info
Cliqueici
DESIGN principes de base appliqués à l'UX web
DESIGN principes de base appliqués à l'UX web
DESIGN principes de base appliqués à l'UX web
DESIGN principes de base appliqués à l'UX web1
2
3
