Webdesign, UX et UCD #6

  • 1,011 views
Uploaded 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 …

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.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,011
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Février 2013a RITAteachingRelax In The Air6UX / Webdesign/ visual design
  • 2. typographie
  • 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. typographiedesignfaitsRelax In The Airla lecture sur écran est fatigante etcontraignante.Février 2013Copyright© 2013 Relax In The Air
  • 5. typographiedesignfaitsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 6. typographiedesignfaitsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 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. designcontrasteRelax In The Airhttp://www.snook.ca/technical/colour_contrast/colour.htmltypographieFévrier 2013Copyright© 2013 Relax In The Air
  • 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. 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. typographiedesigncombinaisonRelax In The AirUne certaine harmonie se dégagede notre combinaisonFévrier 2013Copyright© 2013 Relax In The Air
  • 12. typographiedesignRelax In The AirNous sommes différentesmais encore trop semblablescombinaisonFévrier 2013Copyright© 2013 Relax In The Air
  • 13. typographiedesignRelax In The AirNous sommes très différenteset nous marions biencombinaisonFévrier 2013Copyright© 2013 Relax In The Air
  • 14. typographiedesigntypesRelax In The AirDesignerau contrôleUtilisateurau contrôleImages Alternatives Typo et images Web safeFévrier 2013Copyright© 2013 Relax In The Air
  • 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. • Arial• Courrier New• Verdana• Tahoma• Times New Roman• Trebuchet• Georgiatypographiedesignweb safe fontsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 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. typographiedesignweb safe fontsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 19. typographiedesignweb safe fontsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 20. designalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 21. • Google Fonts• Typekit• Font Face• FontdeckdesignalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 22. typographiedesignRelax In The AirAttention à la lisibilité en dessous d’unecertaine taille !alternativesFévrier 2013Copyright© 2013 Relax In The Air
  • 23. designalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 24. designalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 25. designalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 26. designalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 27. designalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 28. designalternativestypographieRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 29. www.spurapp.com/#54556/grayscalecool link
  • 30. beta.typecastapp.com/dashboardcool link
  • 31. www.google.com/webfontscool link
  • 32. MC Casalconventions
  • 33. There are no stupid users, only stupidinteraction designers.
  • 34. besoin
  • 35. outil
  • 36. utilisateur
  • 37. this part fitsthe problem
  • 38. this part fitsthe person
  • 39. besoinsattentescapacités
  • 40. comment pense l’utilisateur?appréciequalité etcrédibilité
  • 41. il scanne
  • 42. impatient etattend unegratification
  • 43. il ne fait pastoujoursles bons choix
  • 44. il suit sonintuition
  • 45. il veut lecontrôle
  • 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. cool linkgoodfuckingdesignadvice.com
  • 48. aaaaaaaaaarrrgh
  • 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. conventionssimplifierRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 51. conventionssimplifierRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 52. N’ennuyez pas votre utilisateur et faites simpleLess is more
  • 53. know the rules____________________Une blondeJe ne vois pas le bouton Contact.
  • 54. cool linkTextegoodfuckingdesignadvice.com
  • 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. localisation fail
  • 57. vocabulaire fail
  • 58. vocabulaire fail
  • 59. interaction fail
  • 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. cool linkTextegoodfuckingdesignadvice.com
  • 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. 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. 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. conventionsnavigationRelax In The AirAiFévrier 2013Copyright© 2013 Relax In The Air
  • 66. conventionsnavigationRelax In The AirAiFévrier 2013Copyright© 2013 Relax In The Air
  • 67. conventionsnavigationRelax In The AirAiFévrier 2013Copyright© 2013 Relax In The Air
  • 68. conventionsnavigationRelax In The AirAiFévrier 2013Copyright© 2013 Relax In The Air
  • 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. 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. 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. Breadcrumb____________________WikipediaAide à la navigation utilisée dans les UI. Ilpermet aux utilisateurs de garder une tracede leur emplacement dans les pages.
  • 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. également utilisé dans la progression deprocessus d’inscription, achat, questionnaire...conventionsbreadcrumbRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 75. Relax In The AirconventionsbreadcrumbFévrier 2013Copyright© 2013 Relax In The Air
  • 76. Relax In The AirconventionsbreadcrumbFévrier 2013Copyright© 2013 Relax In The Air
  • 77. fitts___________________Paul FittsUne cible est d’autant plus rapide àatteindre qu’elle est proche et grande.
  • 78. cool linkTextegoodfuckingdesignadvice.com
  • 79. conventionsloi de fittsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 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. OKOKconventionsloi de fittsRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 82. Set user freeDesign for flexibilitySpare the networkOptimize response timebest practices