Février 2013a RITAteachingRelax In The Air5UX / Webdesign/ visual design
design© http://www.phawker.com/wp-content/uploads/2011/04/Andy_Warhol.jpg
style© http://luxe.planet.fr/wp-content/uploads/2012/06/Karl-Lagerfeld.jpg
styledesignRelax In The AirFévrier 2013Copyright© 2013 Relax In The Airtendances et mode du momenttechnologie à dispositio...
couleurs
Forget about CMYK.It’s all about RGB and HEX.couleursdesignRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
En #FF0000 et #000000couleursdesignRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
____________________North KingdomLa couleur est aux sites web ce quela musique est aux films.
• Elles nous procurent du plaisir (ou pas...).• Les couleurs sont une forme decommunication comme le sont les langues.• In...
couleursdesignRelax In The AirLes relations de couleurs aidentl’utilisateur à créer des associations dansles éléments d’un...
couleursdesignRelax In The AirLes contrastes de couleurs peuvent aider àguider l’utilisateur à travers une interface.Févri...
• Bleu couleur favorite chez les deux genres.• Brun couleur moins appréciée chez les deux genres.• Orange couleur moins ap...
couleursDoivent correspondre aux objectifs et restersobres, mais efficaces
Radiations electromagnétiquescouleursdesignRelax In The Airqu’est-ce que c’est?Février 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The Airqu’est-ce que c’est?Février 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The Airqu’est-ce que c’est?la Radiation éléctromagnétique que l’humainpeut voir est appelé:Spectre ...
couleursdesignRelax In The AirnewtonFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The AirhistoireComment l’humanité répond-t-elle aux couleurs àtravers l’histoire l’histoire?Février...
comestible
eau / aliments
chaleur
chaleur
sang / danger
bleu
bleu
rouge / orange
couleursdesignthéorieRelax In The AirChaudFroidExcitantTranquillisantFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The Airusage du rouge1) Vous voulez inciter l’utilisateur à l’action, luimontrer une urgence:Montre...
couleursdesignRelax In The Airusage du rouge2) Utilisez-le dans les messages d’erreurs:Le rouge va alerter l’utilisateurmo...
couleursdesignRelax In The Airusage du rouge3) Utilisez-le dans tout design implicantl’alimentation:Le plus souvent associ...
yummy
yummy
yummy
couleursdesignRelax In The Airusage du rouge4) ne l’utilisez pas dans des contextes de performance:quizquestionnairesFévri...
couleursdesignRelax In The Airaucune couleur n’a un effet unique.nos réactions dépendent du contexte, de notreexpérience p...
couleursdesignRelax In The Airles réponses innées aux couleurs que nous avonshéritées de nos ancêtres se sont construites ...
couleursdesignRelax In The Airau moyen-âge, le pigment ultramarine utilisé dans lesteintures et colorants était tellement ...
bleu
couleursdesignRelax In The Airl’orange a une signification particulière dans lescultures orientales. Cela est probablement...
orange
orange
couleursdesignRelax In The Airaux usa Le jaune est souvent associé avec les taxisyellow cab company (fondée en 1915). Son ...
jaune
couleursdesignRelax In The Airle rouge est souvent utilisé dans les drapeauxnationaux car ils symbolisent le courage ou le...
rouge
rouge
rouge
couleursdesignRelax In The Air• Drapeau(x)• religion dominante (couleurs associées)• couleur du mariage• couleur du deuil ...
http://vimeo.com/11767564
couleursdesignroue de couleurRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The AirLa couleur de fond de votre site est probablement laplus importante et déterminante dans la ...
couleursdesignRelax In The Airblancbackground / fondFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The Air• le plus commun• très bon contraste avec les typos foncées• bonne lisibilité• associé avec ...
couleursdesignRelax In The AirLorsque l’audience est la plus largequand?Février 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The AirblancFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The Airbeigebackground / fondFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The Air• associé avec des thématiques naturelles• donne un plus grand sentiment d’intimité• véhicul...
couleursdesignRelax In The Airquand?jardinerietout site historiqueboissons maltéesFévrier 2013Copyright© 2013 Relax In The...
couleursdesignRelax In The AirbeigeFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The AirbeigeFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The Airfoncébackground / fondFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The Air• Pas le plus courant• peu adapté à des sites avec grand traffic(e-commerce)• sentiment d’ex...
couleursdesignRelax In The Airquand?design et modeactivités nocturnes (bars...)Février 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The AirfoncéFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The AirfoncéFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The AirfoncéFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The Airnous avons des standards dans la signalétique detous les jours et celle-ci s’applique aussi ...
couleursdesignRelax In The Airutilisez ces standards que l’utilisateur connait etreconnait pour véhiculer le bon message.é...
couleursdesignRelax In The Airvert• opération ou action réussie• progression dans une tâcheFévrier 2013Copyright© 2013 Rel...
couleursdesignRelax In The AirvertFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The Airjaune• mettre en avant des éléments importants(stabilo)• parfois associé avec des ventes, of...
couleursdesignRelax In The AirjauneFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The Airrouge• signaler une erreur• signaler un message urgent• signaler des messages marketing (fin...
couleursdesignRelax In The AirrougeFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The AirBLEU• sTANDARD POUR LES LIENS• NE PAS L’UTILISER POUR DU TEXTEFévrier 2013Copyright© 2013 Re...
couleursdesignRelax In The AirBLEUFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The AircombinaisonsMonochromatique (1 teinte)Février 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The AirmonochromatiqueFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The AirmonochromatiqueFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The AircombinaisonsAnalogue (3 teintes voisines)Février 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The AiranalogueFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The AiranalogueFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The AircombinaisonsComplémentaires (opposées)Février 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The AircomplémentairesFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The AircomplémentairesFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The AircombinaisonsSplit-Complémentaires (opposées)Février 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The Airsplit-complémentairesFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The Airsplit-complémentairesFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The AircombinaisonsTriadeFévrier 2013Copyright© 2013 Relax In The Air
couleursdesignRelax In The AirtriadeFévrier 2013Copyright© 2013 Relax In The Air
kuler.adobe.comcool link
www.colorotate.orgcool link
www.colorsontheweb.comcool link
Colour can bring design to life, informhierarchies, create bonds between elements,add pace or emotion.
Webdesign, UX et UCD #5
Webdesign, UX et UCD #5
Upcoming SlideShare
Loading in...5
×

Webdesign, UX et UCD #5

1,067

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
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,067
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Webdesign, UX et UCD #5

  1. 1. Février 2013a RITAteachingRelax In The Air5UX / Webdesign/ visual design
  2. 2. design© http://www.phawker.com/wp-content/uploads/2011/04/Andy_Warhol.jpg
  3. 3. style© http://luxe.planet.fr/wp-content/uploads/2012/06/Karl-Lagerfeld.jpg
  4. 4. styledesignRelax In The AirFévrier 2013Copyright© 2013 Relax In The Airtendances et mode du momenttechnologie à dispositionconnaissance des fondamentaux
  5. 5. couleurs
  6. 6. Forget about CMYK.It’s all about RGB and HEX.couleursdesignRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  7. 7. En #FF0000 et #000000couleursdesignRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  8. 8. ____________________North KingdomLa couleur est aux sites web ce quela musique est aux films.
  9. 9. • Elles nous procurent du plaisir (ou pas...).• Les couleurs sont une forme decommunication comme le sont les langues.• Influe sur les émotions.• Ont des significations différentes selon lesexe ou la culture.couleursdesignRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  10. 10. couleursdesignRelax In The AirLes relations de couleurs aidentl’utilisateur à créer des associations dansles éléments d’une page.Février 2013Copyright© 2013 Relax In The Air
  11. 11. couleursdesignRelax In The AirLes contrastes de couleurs peuvent aider àguider l’utilisateur à travers une interface.Février 2013Copyright© 2013 Relax In The Air
  12. 12. • Bleu couleur favorite chez les deux genres.• Brun couleur moins appréciée chez les deux genres.• Orange couleur moins appréciée chez les femmes.• plus grande tolérance des hommes aux couleursachromatiques (noir, blanc & les gris)• les femmes sont plus précises lorsqu’ellesnomment les couleurs.couleursdesignRelax In The AirgénéralitésFévrier 2013Copyright© 2013 Relax In The Air
  13. 13. couleursDoivent correspondre aux objectifs et restersobres, mais efficaces
  14. 14. Radiations electromagnétiquescouleursdesignRelax In The Airqu’est-ce que c’est?Février 2013Copyright© 2013 Relax In The Air
  15. 15. couleursdesignRelax In The Airqu’est-ce que c’est?Février 2013Copyright© 2013 Relax In The Air
  16. 16. couleursdesignRelax In The Airqu’est-ce que c’est?la Radiation éléctromagnétique que l’humainpeut voir est appelé:Spectre visible de la lumière / lumière visibleFévrier 2013Copyright© 2013 Relax In The Air
  17. 17. couleursdesignRelax In The AirnewtonFévrier 2013Copyright© 2013 Relax In The Air
  18. 18. couleursdesignRelax In The AirhistoireComment l’humanité répond-t-elle aux couleurs àtravers l’histoire l’histoire?Février 2013Copyright© 2013 Relax In The Air
  19. 19. comestible
  20. 20. eau / aliments
  21. 21. chaleur
  22. 22. chaleur
  23. 23. sang / danger
  24. 24. bleu
  25. 25. bleu
  26. 26. rouge / orange
  27. 27. couleursdesignthéorieRelax In The AirChaudFroidExcitantTranquillisantFévrier 2013Copyright© 2013 Relax In The Air
  28. 28. couleursdesignRelax In The Airusage du rouge1) Vous voulez inciter l’utilisateur à l’action, luimontrer une urgence:Montrer un call to action «acheter!»prix d’un produitun compte à reboursFévrier 2013Copyright© 2013 Relax In The Air
  29. 29. couleursdesignRelax In The Airusage du rouge2) Utilisez-le dans les messages d’erreurs:Le rouge va alerter l’utilisateurmontrera l’importance d’un messageFévrier 2013Copyright© 2013 Relax In The Air
  30. 30. couleursdesignRelax In The Airusage du rouge3) Utilisez-le dans tout design implicantl’alimentation:Le plus souvent associé aux alimentsutilisé avec succès dans des restaurants etcFévrier 2013Copyright© 2013 Relax In The Air
  31. 31. yummy
  32. 32. yummy
  33. 33. yummy
  34. 34. couleursdesignRelax In The Airusage du rouge4) ne l’utilisez pas dans des contextes de performance:quizquestionnairesFévrier 2013Copyright© 2013 Relax In The Air
  35. 35. couleursdesignRelax In The Airaucune couleur n’a un effet unique.nos réactions dépendent du contexte, de notreexpérience personnelle et de notre culture.théorieFévrier 2013Copyright© 2013 Relax In The Air
  36. 36. couleursdesignRelax In The Airles réponses innées aux couleurs que nous avonshéritées de nos ancêtres se sont construites autourde la culture et des interactions entre les cultures.cultureFévrier 2013Copyright© 2013 Relax In The Air
  37. 37. couleursdesignRelax In The Airau moyen-âge, le pigment ultramarine utilisé dans lesteintures et colorants était tellement cher qu’il adepuis été associé avec les hautes classes de lasociété.pendant ce temps, les basses classes portaient duvert et du brun.cultureFévrier 2013Copyright© 2013 Relax In The Air
  38. 38. bleu
  39. 39. couleursdesignRelax In The Airl’orange a une signification particulière dans lescultures orientales. Cela est probablement dû ausafran.cultureFévrier 2013Copyright© 2013 Relax In The Air
  40. 40. orange
  41. 41. orange
  42. 42. couleursdesignRelax In The Airaux usa Le jaune est souvent associé avec les taxisyellow cab company (fondée en 1915). Son fondateur,John d. hertz, s’était appuyé sur une étude del’université de chicago qui disait que c’était la couleurla plus facile à distinguer depuis une longue distance.cultureFévrier 2013Copyright© 2013 Relax In The Air
  43. 43. jaune
  44. 44. couleursdesignRelax In The Airle rouge est souvent utilisé dans les drapeauxnationaux car ils symbolisent le courage ou le sangversé par les soldats morts au combat.cultureFévrier 2013Copyright© 2013 Relax In The Air
  45. 45. rouge
  46. 46. rouge
  47. 47. rouge
  48. 48. couleursdesignRelax In The Air• Drapeau(x)• religion dominante (couleurs associées)• couleur du mariage• couleur du deuil (ou toute autre cérémoniereligieuse)• couleur d’événements et jour fériés• sports et équipes rivales (couleurs associées)cultureFévrier 2013Copyright© 2013 Relax In The Air
  49. 49. http://vimeo.com/11767564
  50. 50. couleursdesignroue de couleurRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  51. 51. couleursdesignRelax In The AirLa couleur de fond de votre site est probablement laplus importante et déterminante dans la création devotre site internet.background / fondFévrier 2013Copyright© 2013 Relax In The Air
  52. 52. couleursdesignRelax In The Airblancbackground / fondFévrier 2013Copyright© 2013 Relax In The Air
  53. 53. couleursdesignRelax In The Air• le plus commun• très bon contraste avec les typos foncées• bonne lisibilité• associé avec la pureté, propreté et innocence(occident)blancFévrier 2013Copyright© 2013 Relax In The Air
  54. 54. couleursdesignRelax In The AirLorsque l’audience est la plus largequand?Février 2013Copyright© 2013 Relax In The Air
  55. 55. couleursdesignRelax In The AirblancFévrier 2013Copyright© 2013 Relax In The Air
  56. 56. couleursdesignRelax In The Airbeigebackground / fondFévrier 2013Copyright© 2013 Relax In The Air
  57. 57. couleursdesignRelax In The Air• associé avec des thématiques naturelles• donne un plus grand sentiment d’intimité• véhicule l’idée d’ancienneté (parchemin)beigeFévrier 2013Copyright© 2013 Relax In The Air
  58. 58. couleursdesignRelax In The Airquand?jardinerietout site historiqueboissons maltéesFévrier 2013Copyright© 2013 Relax In The Air
  59. 59. couleursdesignRelax In The AirbeigeFévrier 2013Copyright© 2013 Relax In The Air
  60. 60. couleursdesignRelax In The AirbeigeFévrier 2013Copyright© 2013 Relax In The Air
  61. 61. couleursdesignRelax In The Airfoncébackground / fondFévrier 2013Copyright© 2013 Relax In The Air
  62. 62. couleursdesignRelax In The Air• Pas le plus courant• peu adapté à des sites avec grand traffic(e-commerce)• sentiment d’exclusivité et sophisticationfoncéFévrier 2013Copyright© 2013 Relax In The Air
  63. 63. couleursdesignRelax In The Airquand?design et modeactivités nocturnes (bars...)Février 2013Copyright© 2013 Relax In The Air
  64. 64. couleursdesignRelax In The AirfoncéFévrier 2013Copyright© 2013 Relax In The Air
  65. 65. couleursdesignRelax In The AirfoncéFévrier 2013Copyright© 2013 Relax In The Air
  66. 66. couleursdesignRelax In The AirfoncéFévrier 2013Copyright© 2013 Relax In The Air
  67. 67. couleursdesignRelax In The Airnous avons des standards dans la signalétique detous les jours et celle-ci s’applique aussi dans le web.éléments graphiquesFévrier 2013Copyright© 2013 Relax In The Air
  68. 68. couleursdesignRelax In The Airutilisez ces standards que l’utilisateur connait etreconnait pour véhiculer le bon message.éléments graphiquesFévrier 2013Copyright© 2013 Relax In The Air
  69. 69. couleursdesignRelax In The Airvert• opération ou action réussie• progression dans une tâcheFévrier 2013Copyright© 2013 Relax In The Air
  70. 70. couleursdesignRelax In The AirvertFévrier 2013Copyright© 2013 Relax In The Air
  71. 71. couleursdesignRelax In The Airjaune• mettre en avant des éléments importants(stabilo)• parfois associé avec des ventes, offres etsoldes• utilisé aussi pour les notations (rating)Février 2013Copyright© 2013 Relax In The Air
  72. 72. couleursdesignRelax In The AirjauneFévrier 2013Copyright© 2013 Relax In The Air
  73. 73. couleursdesignRelax In The Airrouge• signaler une erreur• signaler un message urgent• signaler des messages marketing (fin d’enchères)Février 2013Copyright© 2013 Relax In The Air
  74. 74. couleursdesignRelax In The AirrougeFévrier 2013Copyright© 2013 Relax In The Air
  75. 75. couleursdesignRelax In The AirBLEU• sTANDARD POUR LES LIENS• NE PAS L’UTILISER POUR DU TEXTEFévrier 2013Copyright© 2013 Relax In The Air
  76. 76. couleursdesignRelax In The AirBLEUFévrier 2013Copyright© 2013 Relax In The Air
  77. 77. couleursdesignRelax In The AircombinaisonsMonochromatique (1 teinte)Février 2013Copyright© 2013 Relax In The Air
  78. 78. couleursdesignRelax In The AirmonochromatiqueFévrier 2013Copyright© 2013 Relax In The Air
  79. 79. couleursdesignRelax In The AirmonochromatiqueFévrier 2013Copyright© 2013 Relax In The Air
  80. 80. couleursdesignRelax In The AircombinaisonsAnalogue (3 teintes voisines)Février 2013Copyright© 2013 Relax In The Air
  81. 81. couleursdesignRelax In The AiranalogueFévrier 2013Copyright© 2013 Relax In The Air
  82. 82. couleursdesignRelax In The AiranalogueFévrier 2013Copyright© 2013 Relax In The Air
  83. 83. couleursdesignRelax In The AircombinaisonsComplémentaires (opposées)Février 2013Copyright© 2013 Relax In The Air
  84. 84. couleursdesignRelax In The AircomplémentairesFévrier 2013Copyright© 2013 Relax In The Air
  85. 85. couleursdesignRelax In The AircomplémentairesFévrier 2013Copyright© 2013 Relax In The Air
  86. 86. couleursdesignRelax In The AircombinaisonsSplit-Complémentaires (opposées)Février 2013Copyright© 2013 Relax In The Air
  87. 87. couleursdesignRelax In The Airsplit-complémentairesFévrier 2013Copyright© 2013 Relax In The Air
  88. 88. couleursdesignRelax In The Airsplit-complémentairesFévrier 2013Copyright© 2013 Relax In The Air
  89. 89. couleursdesignRelax In The AircombinaisonsTriadeFévrier 2013Copyright© 2013 Relax In The Air
  90. 90. couleursdesignRelax In The AirtriadeFévrier 2013Copyright© 2013 Relax In The Air
  91. 91. kuler.adobe.comcool link
  92. 92. www.colorotate.orgcool link
  93. 93. www.colorsontheweb.comcool link
  94. 94. Colour can bring design to life, informhierarchies, create bonds between elements,add pace or emotion.

×