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&amp;hs=czW&amp;sa=X&amp;channel=fs&amp;biw=957&amp;bih=968&amp;tbm=isch&amp;tbnid=BDzkDjNjQ8KRkM%3A&amp;imgrefurl=http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FFile%3AAltavista-1999.png&amp;docid=ksj2dXnJlPOIhM&amp;imgurl=http%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2Fd%2Fd8%2FAltavista-1999.png&amp;w=799&amp;h=565&amp;ei=DGnUUqCdHLOX0QX474CIBA&amp;zoom=1&amp;ved=0CFEQhBwwAA&amp;iact=rc&amp;page=1&amp;start=0&amp;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