Le téléchargement de votre SlideShare est en cours. ×
0
Donnez votre avis !                         Depuis votre smartphone, sur :                           http://notes.mstechda...
Le skeuomorphisme et         l’approche de Microsoft                            Michel Rousseau                           ...
Chapitre 1         DÉFINITIONDesign
Du grec Skeuos, équipement, ornement,     costume, armure, …     et du grec Morphé , la forme.Design
Le skeuomorphisme est un concept de    design qui définit graphiquement un objet    non par sa fonction primaire, mais par...
Globalement, c’est imiter un élément du    réel et l’associer à une fonction qui s’y    rapporte cognitivement.Design
Chapitre 2         QUELQUES EXEMPLESDesign
Le rivet du jean         Et les toiles des colons. De coton.Design
L’ampoule         Comme référent imagé.Design
Le filtre des cigarettes         Et le maïs.Design
Les enjoliveurs         Le charme de la diligence.Design
Spider cochon         La référence culturelle.Design
Le sabre laser         L’artefact technologique.Design
Avez-vous déjà vu ça?Design
La borne d’arcade         L’argument commercial.Design
La cigarette électronique         Qui fume comme une vraie.Design
Le dock Ipod         Pour les intérieurs qui se respectent.Design
La souris qui pointe         Pour les geeks, les vrais.Design
Le tableau de bord         Qui fait tout comme avant.Design
Chapitre 3         LE GESTALTDesign
Le skeuomorphisme      est   basé   sur   le    “Gestalt”.    Le Gestalt est l’étude de la psychologie de    la forme, c’e...
La pomme         Le syndrome Blanche-Neige.Design
La pomme v2         .Design
Le retour du cochon         .Design
Le retour du cochon en vrai         .Design
Chapitre 4         L’AFFORDANCEDesign
Le skeuomorphisme, c’est le contraire de    l’affordance ?Design
L’affordance est un concept de design qui    définit que la conformation d’un objet    définit à elle seule son usage.Design
.Design
.Design
.Design
.Design
?         .Design
L’affordance ne fonctionne bien    qu’avec des concepts d’utilisation    simples (visuel/réaction).    Le skeuomorphisme p...
Chapitre 5         OUI, MAIS DANS LE NUMÉRIQUE         ?Design
Charité bien ordonnée    commence par soi-même :         L’exemple MicrosoftDesign
.Design
L’exemple AndroidDesign
.Design
L’exemple AppleDesign
.Design
.Design
.Design
.Design
Oui, mais ça,    c’était avant Modern UI…Design
Modern UI est authentiquement    numérique.    On évite les métaphores au réel.    On crée un univers singulier.    La bea...
Chapitre 6         ET ÇA, C’EST BIEN?Design
Ok.    Mais en quoi lapproche    authentiquement numérique    est-elle meilleure que celle du    skeuomorphisme?Design
Le skeuomorphisme est un    bon raccourci symbolique.Design
Le skeuomorphisme est facile et    culturellement intégré.Design
Le skeuomorphisme est porteur    de pathos.Design
Le skeuomorphisme     est   un    vecteur d’identité.Design
Le skeuomorphisme, ça fait    ancien, authentique, familier.Design
Ok. Instagram utilise un démarche    de ce genre (effet pola, bords    vieillis), mais qui voudrait toutes ses    photos v...
Le SM n’est pas toujours adapté.Design
Design
il est temps de grandir, non ?Design
.Design
il est temps de changer ?Design
.  …2006       …2012Design
il est temps dêtre créatif ?Design
.Design
.Design
Le skeuomorphisme, par sa nature    de copie, est prédéterminé à se    recopier.Design
.Design
.Design
Le skeuomorphisme produit des effets contre-    productifs    Le skeuomorphisme produit des effets contre-productifs    Le...
Think different ?Design
.Design
Le skeuomorphisme, par son    empreinte marquée, distrait    l’utilisateur et l’éloigne du contenu    quil souhaite consom...
.Design
.Design
.Design
Le contre-exemple du Menu    Démarrer:    La vignette est une métaphore    digitale équivalente à l’ombre    portée.Design
.Design
Les icônes:         Simplicité, conceptualisation, contraste.        Design
Un autre exemple?         Le mot de passe image ou comment         s’affranchir digitalement du classique                 ...
.Design
Une police authentiquement numérique    et qui est adaptée aux devices    modernes :    Segoe UI 44    Segoe UI 34    Sego...
Mais avant tout, adopter Modern UI,    c’est offrir une alternative artistique et    délibérée, adulte et honnête des    n...
.Design
ModernUI est le    corollaire de la    pensée    de Bill    Gates :    « Un PC sur chaque    bureau, un PC dans    chaque ...
Le skeuomorphisme et    l’approche de MicrosoftDesign
Développeurs                                                      Pros de l’IT  http://aka.ms/generation-app       Formez-...
Donnez votre avis !                         Depuis votre smartphone, sur :                           http://notes.mstechda...
Prochain SlideShare
Chargement dans... 5
×

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

190

Published on

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.

0 commentaires
0 mentions J'aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Be the first to like this

Aucun téléchargement
Vues
Total des vues
190
Sur Slideshare
0
À partir des ajouts
0
Nombre d'ajouts
0
Actions
Partages
0
Téléchargements
8
Commentaires
0
J'aime
0
Ajouts 0
No embeds

No notes for slide
  • 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
  • Transcript of "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 TechDayshttp://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ÉFINITIONDesign
    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 EXEMPLESDesign
    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 GESTALTDesign
    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’AFFORDANCEDesign
    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 MicrosoftDesign
    37. 37. .Design
    38. 38. L’exemple AndroidDesign
    39. 39. .Design
    40. 40. L’exemple AppleDesign
    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 lapproche 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 …2012Design
    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- productifsDesign
    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 quil 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 14Design
    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 MicrosoftDesign
    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-vousWindows 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/itteamDesign
    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 TechDayshttp://notes.mstechdays.fr
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×