Successfully reported this slideshow.
Your SlideShare is downloading. ×

Le skeuomorphisme et l'approche authentiquement numérique de Microsoft

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 85 Ad

Le skeuomorphisme et l'approche authentiquement numérique de Microsoft

Download to read offline

Le skeuomorphisme, dont nous donnerons une définition et des exemples dans cette session, est la marque de fabrique des applications et des OS depuis maintenant 10 années. Voyons comment et pourquoi la charte Modern UI (ou Design Windows 8) de Microsoft prend hardiment le contre-pied de cette tendance.

Le skeuomorphisme, dont nous donnerons une définition et des exemples dans cette session, est la marque de fabrique des applications et des OS depuis maintenant 10 années. Voyons comment et pourquoi la charte Modern UI (ou Design Windows 8) de Microsoft prend hardiment le contre-pied de cette tendance.

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Viewers also liked (20)

Advertisement

Similar to Le skeuomorphisme et l'approche authentiquement numérique de Microsoft (20)

More from Microsoft Décideurs IT (20)

Advertisement

Le skeuomorphisme et l'approche authentiquement numérique de Microsoft

  1. 1. Donnez votre avis ! Depuis votre smartphone, sur : http://notes.mstechdays.fr De nombreux lots à gagner toutes les heures !!! Claviers, souris et jeux Microsoft… Merci de nous aider à améliorer les TechDays http://notes.mstechdays.fr
  2. 2. Le skeuomorphisme et l’approche de Microsoft Michel Rousseau Evangéliste UX Microsoft France @rousseau_michel http://blogs.msdn.com/b/designmichel/ Design
  3. 3. Chapitre 1 DÉFINITION Design
  4. 4. Du grec Skeuos, équipement, ornement, costume, armure, … et du grec Morphé , la forme. Design
  5. 5. Le skeuomorphisme est un concept de design qui définit graphiquement un objet non par sa fonction primaire, mais par un tropisme incluant un référentiel existant, une métaphore au réel, une représentation figurative. Design
  6. 6. Globalement, c’est imiter un élément du réel et l’associer à une fonction qui s’y rapporte cognitivement. Design
  7. 7. Chapitre 2 QUELQUES EXEMPLES Design
  8. 8. Le rivet du jean Et les toiles des colons. De coton. Design
  9. 9. L’ampoule Comme référent imagé. Design
  10. 10. Le filtre des cigarettes Et le maïs. Design
  11. 11. Les enjoliveurs Le charme de la diligence. Design
  12. 12. Spider cochon La référence culturelle. Design
  13. 13. Le sabre laser L’artefact technologique. Design
  14. 14. Avez-vous déjà vu ça? Design
  15. 15. La borne d’arcade L’argument commercial. Design
  16. 16. La cigarette électronique Qui fume comme une vraie. Design
  17. 17. Le dock Ipod Pour les intérieurs qui se respectent. Design
  18. 18. La souris qui pointe Pour les geeks, les vrais. Design
  19. 19. Le tableau de bord Qui fait tout comme avant. Design
  20. 20. Chapitre 3 LE GESTALT Design
  21. 21. Le skeuomorphisme est basé sur le “Gestalt”. Le Gestalt est l’étude de la psychologie de la forme, c’est à dire l’impact de l’image mentale que nous nous faisons d’un objet, et ses corollaires. Design
  22. 22. La pomme Le syndrome Blanche-Neige. Design
  23. 23. La pomme v2 . Design
  24. 24. Le retour du cochon . Design
  25. 25. Le retour du cochon en vrai . Design
  26. 26. Chapitre 4 L’AFFORDANCE Design
  27. 27. Le skeuomorphisme, c’est le contraire de l’affordance ? Design
  28. 28. L’affordance est un concept de design qui définit que la conformation d’un objet définit à elle seule son usage. Design
  29. 29. . Design
  30. 30. . Design
  31. 31. . Design
  32. 32. . Design
  33. 33. ? . Design
  34. 34. L’affordance ne fonctionne bien qu’avec des concepts d’utilisation simples (visuel/réaction). Le skeuomorphisme permet d’enrichir l’affordance de références culturelles. Voire, de se substituer à elle. Design
  35. 35. Chapitre 5 OUI, MAIS DANS LE NUMÉRIQUE ? Design
  36. 36. Charité bien ordonnée commence par soi-même : L’exemple Microsoft Design
  37. 37. . Design
  38. 38. L’exemple Android Design
  39. 39. . Design
  40. 40. L’exemple Apple Design
  41. 41. . Design
  42. 42. . Design
  43. 43. . Design
  44. 44. . Design
  45. 45. Oui, mais ça, c’était avant Modern UI… Design
  46. 46. Modern UI est authentiquement numérique. On évite les métaphores au réel. On crée un univers singulier. La beauté et la poésie sont intrinsèques. Design
  47. 47. Chapitre 6 ET ÇA, C’EST BIEN? Design
  48. 48. Ok. Mais en quoi l'approche authentiquement numérique est-elle meilleure que celle du skeuomorphisme? Design
  49. 49. Le skeuomorphisme est un bon raccourci symbolique. Design
  50. 50. Le skeuomorphisme est facile et culturellement intégré. Design
  51. 51. Le skeuomorphisme est porteur de pathos. Design
  52. 52. Le skeuomorphisme est un vecteur d’identité. Design
  53. 53. Le skeuomorphisme, ça fait ancien, authentique, familier. Design
  54. 54. Ok. Instagram utilise un démarche de ce genre (effet pola, bords vieillis), mais qui voudrait toutes ses photos vieillies et en style pola, au lieu de la HD? Design
  55. 55. Le SM n’est pas toujours adapté. Design
  56. 56. Design
  57. 57. il est temps de grandir, non ? Design
  58. 58. . Design
  59. 59. il est temps de changer ? Design
  60. 60. . …2006 …2012 Design
  61. 61. il est temps d'être créatif ? Design
  62. 62. . Design
  63. 63. . Design
  64. 64. Le skeuomorphisme, par sa nature de copie, est prédéterminé à se recopier. Design
  65. 65. . Design
  66. 66. . Design
  67. 67. Le skeuomorphisme produit des effets contre- productifs Le skeuomorphisme produit des effets contre-productifs Le skeuomorphisme produit des effets contre-productifs Le skeuomorphisme produit des effets contre- productifs Design
  68. 68. Think different ? Design
  69. 69. . Design
  70. 70. Le skeuomorphisme, par son empreinte marquée, distrait l’utilisateur et l’éloigne du contenu qu'il souhaite consommer. Design
  71. 71. . Design
  72. 72. . Design
  73. 73. . Design
  74. 74. Le contre-exemple du Menu Démarrer: La vignette est une métaphore digitale équivalente à l’ombre portée. Design
  75. 75. . Design
  76. 76. Les icônes: Simplicité, conceptualisation, contraste.   Design
  77. 77. Un autre exemple? Le mot de passe image ou comment s’affranchir digitalement du classique mot de passe. Design
  78. 78. . Design
  79. 79. Une police authentiquement numérique et qui est adaptée aux devices modernes : Segoe UI 44 Segoe UI 34 Segoe UI 24 Segoe UI 14 Design
  80. 80. Mais avant tout, adopter Modern UI, c’est offrir une alternative artistique et délibérée, adulte et honnête des nouvelles interfaces. Design
  81. 81. . Design
  82. 82. ModernUI est le corollaire de la pensée de Bill Gates : « Un PC sur chaque bureau, un PC dans chaque foyer » Design
  83. 83. Le skeuomorphisme et l’approche de Microsoft Design
  84. 84. Développeurs Pros de l’IT http://aka.ms/generation-app Formez-vous en ligne www.microsoftvirtualacademy.com http://aka.ms/evenements- Retrouvez nos http://aka.ms/itcamps-france developpeurs évènements Les accélérateurs Faites-vous Windows Azure, Windows Phone, accompagner Windows 8 gratuitement Essayer gatuitement http://aka.ms/telechargements nos soltions IT La Dev’Team sur MSDN Retrouver nos experts L’IT Team sur TechNet http://aka.ms/devteam Microsoft http://aka.ms/itteam Design
  85. 85. Donnez votre avis ! Depuis votre smartphone, sur : http://notes.mstechdays.fr De nombreux lots à gagner toutes les heures !!! Claviers, souris et jeux Microsoft… Merci de nous aider à améliorer les TechDays http://notes.mstechdays.fr

Editor's Notes

  • Notation
  • Intro session Windows 8, generale ou design (supprimer la mention inutile). Ne pas modifier ce template. Choisissez plutôt une slide d’intro pour votre sujet et supprimez les autres.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.Idem pour les textes.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.Idem pour les textes.
  • Exemple de page image
  • Exemple de page image
  • Exemple de page image
  • Exemple de page image
  • Exemple de page image
  • Exemple de page image
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Exemple de page image
  • Exemple de page image
  • Exemple de page image
  • Exemple de page image
  • Exemple de page image
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.Idem pour les textes.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Exemple de page image
  • Exemple de page image
  • Exemple de page image
  • Exemple de page image
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.Idem pour les textes.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Exemple de page image
  • Exemple de page image
  • Exemple de page image
  • Exemple de page image
  • Exemple de page image
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.Idem pour les textes.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Exemple de page image
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Exemple de page image
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Exemple de page image
  • Exemple de page image
  • Exemple de page image
  • Exemple de page image
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.Idem pour les textes.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Exemple de page image
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Exemple de page image
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Exemple de page image
  • Exemple de page image
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Exemple de page image
  • Exemple de page image
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Exemple de page image
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Exemple de page image
  • Exemple de page image
  • Exemple de page image
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Exemple de page image
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Exemple de page image
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Exemple de page image
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Les blocs de couleurs sont éditables et peuvent reprendre la couleur du type de session qui est donnée.
  • Notation

×