Le skeuomorphisme et l'approche authentiquement numérique de Microsoft
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 351 vues

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 ...

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.

Statistics

Vues

Total Views
351
Views on SlideShare
351
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Ajouts 0

No embeds

Accessibilité

Catégories

Détails de l'import

Uploaded via as Microsoft PowerPoint

Droits d'utilisation

© Tous droits réservés

Report content

Signalé comme inapproprié Signaler comme inapproprié
Signaler comme inapproprié

Indiquez la raison pour laquelle vous avez signalé cette présentation comme n'étant pas appropriée.

Annuler
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Votre message apparaîtra ici
    Processing...
Poster un commentaire
Modifier votre commentaire
  • 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

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

  • 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
  • Le skeuomorphisme et l’approche de Microsoft Michel Rousseau Evangéliste UX Microsoft France @rousseau_michel http://blogs.msdn.com/b/designmichel/Design
  • 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 un tropisme incluant un référentiel existant, une métaphore au réel, une représentation figurative.Design
  • 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’est à dire l’impact de l’image mentale que nous nous faisons d’un objet, et ses corollaires.Design
  • 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 permet d’enrichir l’affordance de références culturelles. Voire, de se substituer à elle.Design
  • 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 beauté et la poésie sont intrinsèques.Design
  • 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 vieillies et en style pola, au lieu de la HD?Design
  • 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 skeuomorphisme produit des effets contre-productifs Le skeuomorphisme produit des effets contre- productifsDesign
  • Think different ?Design
  • .Design
  • Le skeuomorphisme, par son empreinte marquée, distrait l’utilisateur et l’éloigne du contenu quil souhaite consommer.Design
  • .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 mot de passe.Design
  • .Design
  • 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
  • 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
  • .Design
  • ModernUI est le corollaire de la pensée de Bill Gates : « Un PC sur chaque bureau, un PC dans chaque foyer »Design
  • Le skeuomorphisme et l’approche de MicrosoftDesign
  • 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
  • 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