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/

1. DESIGN principes de base
appliqués à l'UX web

2. Souvent
joli

3. Guider
l'attention

4. Pas de
friction

5. Comment y arriver ?
➔ Soigner la mise en page
➔ Bien choisir ses éléments
➔ Connaitre son objectif

6. Une mise en page
lisible et propre
➔ allège l'esprit
➔ inspire confiance

7. 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)

8. Secret à ne répéter à personne
On ne
regarde pas
au centre
en premier
Et pas toujours en haut non plus

9. Secret à ne répéter à personne
On ne
regarde pas
au centre
en premier
Et pas toujours en haut non plus

14. Organisation
des contenus
➔ Hiérarchisation par la mise en page
➔ Classification par similarité

15. Tailles
Titre1
sous-titre1
paragraphe1
Titre2
sous-titre2
paragraphe2

16. Alignement
titre1
sous-titre1
paragraphe1
titre2
sous-titre2
paragraphe2

17. Espacement
titre1
sous-titre1
paragraphe1
titre2
sous-titre2
paragraphe2

18. Couleur
titre1
sous-titre1
paragraphe1
titre2
sous-titre2
paragraphe2

19. Titre1
sous-titre1
paragraphe1
Titre2
sous-titre2
paragraphe2

20. Tuyaux
Réduire : Garder l'essentiel
➔ Actions liées à l'objectif
➔ Restez cohérent

21. C'est plus
facile de
tout
mettre
que de
ne rien
mettre
BrCSCFHrKFICQT9elLnGncPaqAfMdlRDs+XEZ5AjFKWwozyOVud9/1jttCWT/u/0MB8iw+F0cQkLw+ISDLCVE
mKWmaZJBXmEKQFkEBgSoHJJaAvSPC4Q6s4TDTQn/MBMwTDdbdZKkANTcbxkM4+0SlzX2ggJu7EvyaOY
cwEUAnwZ/icu3dBe0Gnez/uGA+PYTA6PVJQmbJxUuaAitSEqIJGsKus4BLoHVbZSzbUKbovR6lAhOMSCSS
6qasgSgkrZrG1jtZCPsylKo+Kn8W+sDhc4iwA4V9buNBZ+78YbRle9nx/0MB8knaD0cAkhWMJUgqZKXZQWR
XlJPVAYtd3NIjI9Am+6meU/SPRZVOt1OZvb5PeGqVP3Uc/DjV+n1jcPako+F/i/8AQwHnboE33Uzyn6QugTfdT
fpHpHDqW22wL2bhzuYGK57kBmuxLBrqY2Je1OY+WcdNry8nMmrPO/QJvupnlP0hdAm+6meU/SPSOGWsp
XZW8D/yYleG15eTmNWeaegTfdTPKfpC6BN91M8p+kelnhPDa8vJzGrPNPQJvupnlP0hdAm+6meU/SPSzwn
eXk5jVnmnoE33Uzyn6QugTfdTPKfpHpZ4Tw2vLycxqzzT0Cb7qZ5T9IXQJvupnlP0j0s8J4bXl5OY1Z5p6BN91M
p+kLoE33Uzyn6R6WeE8Nry8nMas809Am+6meU/SF0Cb7qZ5T9I9LPCeG15eTmNWeaegTfdTPKfpC6BN91
p+kelnhPDa8vJzGrPNPQJvupnlP0hdAm+6meU/SPSzwnhteXk5jVnxn/hiUyMROXiJbJ1BCa0Zq1sssmu1TA7x
4nSmHUFatUqWpQlXMpCiljNKmB2SeqDc5jONO8J48GkaTrp42rfM0lYx6MfKAmlK5GtOqpUtApLJ2npQLBz1
HPCMb6VLrxS1SwSkhDFKbOJaQeqAM3yEfYnhPGI1cLv/JbEcmz3Oe8k7hxh5VEUqYL3GfHkIjxK1bNBGd7j
x5PlHEoPo3SaZy5lC6koYMzMSA4L3qBD8GWIsXgDDKUFOUIS71M1+bg3PL8TlBtY4jxgZgmopN3GYrEBCC
RZIFz9OcD6Lx6ZyStCypLsLM7e0BnfnwtaOKUtmNC3zBZrm48O/Pkx4idMDChAHJQLd1x+n0EwvHivuyD3iP
GSS7eD/KogeMKUuwqIdg99+
+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

22. REDUCE

23. RE

26. Tuyaux
Donner du sens
➔ Guider l'utilisateur
➔ Voire forcer son attention
➔ Rester cohérent

27. Clique
ici
Info
Info
Info

28. Clique
ici
Info
Info
Info

29. Clique
ici
Info
Info
Info
On lit les infos de haut en bas
Et on clique sur le bouton

30. truc
truc
truc
truc

31. Clique
ici
Info
Info
info

32. Clique
ici

33. DESIGN principes de base
appliqués à l'UX web

34. DESIGN principes de base
appliqués à l'UX web

35. DESIGN principes de base
appliqués à l'UX web

36. DESIGN principes de base
appliqués à l'UX web1
2
3