Février 2013a RITAteachingRelax In The Air6UX / Webdesign/ visual design
typographie
• Hiérarchie• Intelligibilité• Lisibilité• Esthétique• Ergonomie de la page• Confort• RepèresdesignbutsRelax In The Airtyp...
typographiedesignfaitsRelax In The Airla lecture sur écran est fatigante etcontraignante.Février 2013Copyright© 2013 Relax...
typographiedesignfaitsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
typographiedesignfaitsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
• Serif / sans serif.• Longueur d’une ligne: 12 mots c’est lisible.• Leading ou interlignage: 1.1 - 1.5 c’est aéré.• Lette...
designcontrasteRelax In The Airhttp://www.snook.ca/technical/colour_contrast/colour.htmltypographieFévrier 2013Copyright© ...
a a a a a a a a a a a a a a atypographiedesignéchellesRelax In The Air8 9 10 11 12 14 16 18 24 30 36 48 60 72 96Février 20...
typographiedesignrègleRelax In The Air• Jamais plus de 2 typos est généralementune bonne règle• en combinant 2 typos tente...
typographiedesigncombinaisonRelax In The AirUne certaine harmonie se dégagede notre combinaisonFévrier 2013Copyright© 2013...
typographiedesignRelax In The AirNous sommes différentesmais encore trop semblablescombinaisonFévrier 2013Copyright© 2013 ...
typographiedesignRelax In The AirNous sommes très différenteset nous marions biencombinaisonFévrier 2013Copyright© 2013 Re...
typographiedesigntypesRelax In The AirDesignerau contrôleUtilisateurau contrôleImages Alternatives Typo et images Web safe...
typographiedesignweb safe fontsRelax In The Airtypographies installées par défaut sur lamachine de l’utilisateur.Février 2...
• Arial• Courrier New• Verdana• Tahoma• Times New Roman• Trebuchet• Georgiatypographiedesignweb safe fontsRelax In The Air...
typographiedesignweb safe fontsRelax In The Airles moteurs de recherche peuventuniquement chercher et indexer dans duconte...
typographiedesignweb safe fontsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
typographiedesignweb safe fontsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
designalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
• Google Fonts• Typekit• Font Face• FontdeckdesignalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax...
typographiedesignRelax In The AirAttention à la lisibilité en dessous d’unecertaine taille !alternativesFévrier 2013Copyri...
designalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
designalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
designalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
designalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
designalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
designalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
www.spurapp.com/#54556/grayscalecool link
beta.typecastapp.com/dashboardcool link
www.google.com/webfontscool link
MC Casalconventions
There are no stupid users, only stupidinteraction designers.
besoin
outil
utilisateur
this part fitsthe problem
this part fitsthe person
besoinsattentescapacités
comment pense l’utilisateur?appréciequalité etcrédibilité
il scanne
impatient etattend unegratification
il ne fait pastoujoursles bons choix
il suit sonintuition
il veut lecontrôle
simplifierIl est bien plus facile de simplifier vos idéespour les rendre fonctionnelles que de faireentrer de force une id...
cool linkgoodfuckingdesignadvice.com
aaaaaaaaaarrrgh
Utilisez d’autres éléments de communication(non-verbaux).Ne combinez pas trop d’éléments à la fois.Ne cédez pas à trop d’i...
conventionssimplifierRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
conventionssimplifierRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
N’ennuyez pas votre utilisateur et faites simpleLess is more
know the rules____________________Une blondeJe ne vois pas le bouton Contact.
cool linkTextegoodfuckingdesignadvice.com
• Respectez les conventions de localisation• Respectez les conventions de vocabulaire• Respectez les conventions d’interac...
localisation fail
vocabulaire fail
vocabulaire fail
interaction fail
navigation_________________________Phil Stuart - PreloadedElle doit être la colonne vertébrale de toutsite riche en conten...
cool linkTextegoodfuckingdesignadvice.com
Au centre de l’utilisabilité d’un sitepremier lien de l’utilisateur avec le siteconventionsnavigationRelax In The AirFévri...
Equilibrez entre ludique et fonctionnel.Veillez à la réactivité.Système facile à utiliser et à comprendre.Ne perdez pas l’...
groupes reconnaissables par l’utilisateuravant que sont cerveau ne tente de lesregrouper dans des sous-groupes.Relax In Th...
conventionsnavigationRelax In The AirAiFévrier 2013Copyright© 2013 Relax In The Air
conventionsnavigationRelax In The AirAiFévrier 2013Copyright© 2013 Relax In The Air
conventionsnavigationRelax In The AirAiFévrier 2013Copyright© 2013 Relax In The Air
conventionsnavigationRelax In The AirAiFévrier 2013Copyright© 2013 Relax In The Air
l’utilisateur doit rapidement comprendre cequi est cliquable.Doit facilement comprendre la logique descomportementsCes com...
la navigation doit être conçue du point devue de l’utilisateur.utilisez des web fonts (pas d’images).conventionsnavigation...
http://www.nike.com/us/en_us/c/better-world/enhttp://tntrailsandbyways.comhttp://methoddesignlab.comhttp://www.bonlook.com...
Breadcrumb____________________WikipediaAide à la navigation utilisée dans les UI. Ilpermet aux utilisateurs de garder une ...
Facilite pour l’utilisateur le retour enarrière et lui montre son emplacement dansl’architecture globale d’un site.convent...
également utilisé dans la progression deprocessus d’inscription, achat, questionnaire...conventionsbreadcrumbRelax In The ...
Relax In The AirconventionsbreadcrumbFévrier 2013Copyright© 2013 Relax In The Air
Relax In The AirconventionsbreadcrumbFévrier 2013Copyright© 2013 Relax In The Air
fitts___________________Paul FittsUne cible est d’autant plus rapide àatteindre qu’elle est proche et grande.
cool linkTextegoodfuckingdesignadvice.com
conventionsloi de fittsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
Pour consulter notre menu, cliquez iciPour consulter notre menu, cliquez iciPour vous mettre l’eau à la bouche, consultez ...
OKOKconventionsloi de fittsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
Set user freeDesign for flexibilitySpare the networkOptimize response timebest practices
Webdesign, UX et UCD #6
Webdesign, UX et UCD #6
Webdesign, UX et UCD #6
Webdesign, UX et UCD #6
Webdesign, UX et UCD #6
Upcoming SlideShare
Loading in...5
×

Webdesign, UX et UCD #6

1,188

Published on

Cours de webdesign, UX et UCD. Le but de ce cours n'est pas d'apprendre le métier de webdesigner dans sa globalité, mais d'être capable d'avoir un dialogue cohérent avec les acteurs du web. Cela leur permettra aussi de comprendre les codes et le langage du webdesign.

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,188
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Webdesign, UX et UCD #6"

  1. 1. Février 2013a RITAteachingRelax In The Air6UX / Webdesign/ visual design
  2. 2. typographie
  3. 3. • Hiérarchie• Intelligibilité• Lisibilité• Esthétique• Ergonomie de la page• Confort• RepèresdesignbutsRelax In The AirtypographieFévrier 2013Copyright© 2013 Relax In The Air
  4. 4. typographiedesignfaitsRelax In The Airla lecture sur écran est fatigante etcontraignante.Février 2013Copyright© 2013 Relax In The Air
  5. 5. typographiedesignfaitsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  6. 6. typographiedesignfaitsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  7. 7. • 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.typographiedesignfaitsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  8. 8. designcontrasteRelax In The Airhttp://www.snook.ca/technical/colour_contrast/colour.htmltypographieFévrier 2013Copyright© 2013 Relax In The Air
  9. 9. a a a a a a a a a a a a a a atypographiedesignéchellesRelax In The Air8 9 10 11 12 14 16 18 24 30 36 48 60 72 96Février 2013Copyright© 2013 Relax In The Air
  10. 10. typographiedesignrègleRelax In The Air• Jamais plus de 2 typos est généralementune bonne règle• en combinant 2 typos tentez d’obtenirharmonie et contraste• mélanger une sérif et une bâton a plus desensFévrier 2013Copyright© 2013 Relax In The Air
  11. 11. typographiedesigncombinaisonRelax In The AirUne certaine harmonie se dégagede notre combinaisonFévrier 2013Copyright© 2013 Relax In The Air
  12. 12. typographiedesignRelax In The AirNous sommes différentesmais encore trop semblablescombinaisonFévrier 2013Copyright© 2013 Relax In The Air
  13. 13. typographiedesignRelax In The AirNous sommes très différenteset nous marions biencombinaisonFévrier 2013Copyright© 2013 Relax In The Air
  14. 14. typographiedesigntypesRelax In The AirDesignerau contrôleUtilisateurau contrôleImages Alternatives Typo et images Web safeFévrier 2013Copyright© 2013 Relax In The Air
  15. 15. typographiedesignweb safe fontsRelax In The Airtypographies installées par défaut sur lamachine de l’utilisateur.Février 2013Copyright© 2013 Relax In The Air
  16. 16. • Arial• Courrier New• Verdana• Tahoma• Times New Roman• Trebuchet• Georgiatypographiedesignweb safe fontsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  17. 17. typographiedesignweb safe fontsRelax In The Airles moteurs de recherche peuventuniquement chercher et indexer dans ducontenu lisible.Février 2013Copyright© 2013 Relax In The Air
  18. 18. typographiedesignweb safe fontsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  19. 19. typographiedesignweb safe fontsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  20. 20. designalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  21. 21. • Google Fonts• Typekit• Font Face• FontdeckdesignalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  22. 22. typographiedesignRelax In The AirAttention à la lisibilité en dessous d’unecertaine taille !alternativesFévrier 2013Copyright© 2013 Relax In The Air
  23. 23. designalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  24. 24. designalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  25. 25. designalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  26. 26. designalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  27. 27. designalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  28. 28. designalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  29. 29. www.spurapp.com/#54556/grayscalecool link
  30. 30. beta.typecastapp.com/dashboardcool link
  31. 31. www.google.com/webfontscool link
  32. 32. MC Casalconventions
  33. 33. There are no stupid users, only stupidinteraction designers.
  34. 34. besoin
  35. 35. outil
  36. 36. utilisateur
  37. 37. this part fitsthe problem
  38. 38. this part fitsthe person
  39. 39. besoinsattentescapacités
  40. 40. comment pense l’utilisateur?appréciequalité etcrédibilité
  41. 41. il scanne
  42. 42. impatient etattend unegratification
  43. 43. il ne fait pastoujoursles bons choix
  44. 44. il suit sonintuition
  45. 45. il veut lecontrôle
  46. 46. simplifierIl est bien plus facile de simplifier vos idéespour les rendre fonctionnelles que de faireentrer de force une idée dans unefonctionnalité existante.gapingvoid.com____________________Michael Lebowitz
  47. 47. cool linkgoodfuckingdesignadvice.com
  48. 48. aaaaaaaaaarrrgh
  49. 49. 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.conventionssimplifierRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  50. 50. conventionssimplifierRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  51. 51. conventionssimplifierRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  52. 52. N’ennuyez pas votre utilisateur et faites simpleLess is more
  53. 53. know the rules____________________Une blondeJe ne vois pas le bouton Contact.
  54. 54. cool linkTextegoodfuckingdesignadvice.com
  55. 55. • Respectez les conventions de localisation• Respectez les conventions de vocabulaire• Respectez les conventions d’interactionconventionsrèglesRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  56. 56. localisation fail
  57. 57. vocabulaire fail
  58. 58. vocabulaire fail
  59. 59. interaction fail
  60. 60. navigation_________________________Phil Stuart - PreloadedElle doit être la colonne vertébrale de toutsite riche en contenus et le point de départde l’organisation et de l’architecture devotre construction.
  61. 61. cool linkTextegoodfuckingdesignadvice.com
  62. 62. Au centre de l’utilisabilité d’un sitepremier lien de l’utilisateur avec le siteconventionsnavigationRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  63. 63. 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.conventionsnavigationRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  64. 64. groupes reconnaissables par l’utilisateuravant que sont cerveau ne tente de lesregrouper dans des sous-groupes.Relax In The Air5 à 7Février 2013Copyright© 2013 Relax In The Air
  65. 65. conventionsnavigationRelax In The AirAiFévrier 2013Copyright© 2013 Relax In The Air
  66. 66. conventionsnavigationRelax In The AirAiFévrier 2013Copyright© 2013 Relax In The Air
  67. 67. conventionsnavigationRelax In The AirAiFévrier 2013Copyright© 2013 Relax In The Air
  68. 68. conventionsnavigationRelax In The AirAiFévrier 2013Copyright© 2013 Relax In The Air
  69. 69. l’utilisateur doit rapidement comprendre cequi est cliquable.Doit facilement comprendre la logique descomportementsCes comportements doivent resterconstants tout au long du siteconventionsnavigationRelax In The AircomportementsFévrier 2013Copyright© 2013 Relax In The Air
  70. 70. la navigation doit être conçue du point devue de l’utilisateur.utilisez des web fonts (pas d’images).conventionsnavigationRelax In The AircomportementsFévrier 2013Copyright© 2013 Relax In The Air
  71. 71. http://www.nike.com/us/en_us/c/better-world/enhttp://tntrailsandbyways.comhttp://methoddesignlab.comhttp://www.bonlook.comhttp://designintellection.comhttp://www.coexhibitions.comhttp://www.bankwest.com.auhttp://www.globalhumanitarianassistance.orgconventionsnavigationRelax In The Airgood designFévrier 2013Copyright© 2013 Relax In The Air
  72. 72. Breadcrumb____________________WikipediaAide à la navigation utilisée dans les UI. Ilpermet aux utilisateurs de garder une tracede leur emplacement dans les pages.
  73. 73. Facilite pour l’utilisateur le retour enarrière et lui montre son emplacement dansl’architecture globale d’un site.conventionsbreadcrumbRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  74. 74. également utilisé dans la progression deprocessus d’inscription, achat, questionnaire...conventionsbreadcrumbRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  75. 75. Relax In The AirconventionsbreadcrumbFévrier 2013Copyright© 2013 Relax In The Air
  76. 76. Relax In The AirconventionsbreadcrumbFévrier 2013Copyright© 2013 Relax In The Air
  77. 77. fitts___________________Paul FittsUne cible est d’autant plus rapide àatteindre qu’elle est proche et grande.
  78. 78. cool linkTextegoodfuckingdesignadvice.com
  79. 79. conventionsloi de fittsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  80. 80. Pour consulter notre menu, cliquez iciPour consulter notre menu, cliquez iciPour vous mettre l’eau à la bouche, consultez notre menuconventionsloi de fittsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  81. 81. OKOKconventionsloi de fittsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  82. 82. Set user freeDesign for flexibilitySpare the networkOptimize response timebest practices

×