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. Me...
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
Titre1
sous-titre1
paragraphe1
Titre2
sous-titre2
paragraphe2
Alignement
titre1
sous-titre1
paragraphe1
titre2
sous-titre2
paragraphe2
Espacement
titre1
sous-titre1
paragraphe1
titre2
sous-titre2
paragraphe2
Couleur
titre1
sous-titre1
paragraphe1
titre2
sous-titre2
paragraphe2
Titre1
sous-titre1
paragraphe1
Titre2
sous-titre2
paragraphe2
Tuyaux
Réduire : Garder l'essentiel 
➔ Actions liées à l'objectif
➔ Restez cohérent
C'est plus
facile de
tout
mettre
que de
ne rien
mettre
BrCSCFHrKFICQT9elLnGncPaqAfMdlRDs+XEZ5AjFKWwozyOVud9/1jttCWT/u/0MB8...
REDUCE
RE
Tuyaux
Donner du sens
➔ Guider l'utilisateur
➔ Voire forcer son attention
➔ Rester cohérent
Clique
ici
Info
Info
Info
Clique
ici
Info
Info
Info
Clique
ici
Info
Info
Info
On lit les infos de haut en bas
Et on clique sur le bouton
truc
truc
truc
truc
Clique
ici
Info
Info
info
Clique
ici
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
Conseils sur le Design pour les Développeurs par un Développeur
Conseils sur le Design pour les Développeurs par un Développeur
Conseils sur le Design pour les Développeurs par un Développeur
Conseils sur le Design pour les Développeurs par un Développeur
Conseils sur le Design pour les Développeurs par un Développeur
Conseils sur le Design pour les Développeurs par un Développeur
Prochain SlideShare
Chargement dans…5
×

Conseils sur le Design pour les Développeurs par un Développeur

815 vues

Publié le

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/

Publié dans : Design
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
815
Sur SlideShare
0
Issues des intégrations
0
Intégrations
19
Actions
Partages
0
Téléchargements
9
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Conseils sur le Design pour les Développeurs par un Développeur

  1. 1. DESIGN principes de base appliqués à l'UX web
  2. 2. Souvent joli
  3. 3. Guider l'attention
  4. 4. Pas de friction
  5. 5. Comment y arriver ?  ➔ Soigner la mise en page ➔ Bien choisir ses éléments ➔ Connaitre son objectif
  6. 6. Une mise en page lisible et propre ➔ allège l'esprit ➔ inspire confiance
  7. 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. 8. Secret à ne répéter à personne On ne regarde pas au centre en premier Et pas toujours en haut non plus
  9. 9. Secret à ne répéter à personne On ne regarde pas au centre en premier Et pas toujours en haut non plus
  10. 10. Organisation des contenus ➔ Hiérarchisation par la mise en page ➔ Classification par similarité
  11. 11. Tailles Titre1 sous-titre1 paragraphe1 Titre2 sous-titre2 paragraphe2
  12. 12. Alignement titre1 sous-titre1 paragraphe1 titre2 sous-titre2 paragraphe2
  13. 13. Espacement titre1 sous-titre1 paragraphe1 titre2 sous-titre2 paragraphe2
  14. 14. Couleur titre1 sous-titre1 paragraphe1 titre2 sous-titre2 paragraphe2
  15. 15. Titre1 sous-titre1 paragraphe1 Titre2 sous-titre2 paragraphe2
  16. 16. Tuyaux Réduire : Garder l'essentiel  ➔ Actions liées à l'objectif ➔ Restez cohérent
  17. 17. 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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
  18. 18. REDUCE
  19. 19. RE
  20. 20. Tuyaux Donner du sens ➔ Guider l'utilisateur ➔ Voire forcer son attention ➔ Rester cohérent
  21. 21. Clique ici Info Info Info
  22. 22. Clique ici Info Info Info
  23. 23. Clique ici Info Info Info On lit les infos de haut en bas Et on clique sur le bouton
  24. 24. truc truc truc truc
  25. 25. Clique ici Info Info info
  26. 26. Clique ici
  27. 27. DESIGN principes de base appliqués à l'UX web
  28. 28. DESIGN principes de base appliqués à l'UX web
  29. 29. DESIGN principes de base appliqués à l'UX web
  30. 30. DESIGN principes de base appliqués à l'UX web1 2 3

×