palais descongrèsParis7, 8 et 9février 2012
Ne ratez pas le Metro(DES205)Mardi 7 février 2012 11h00Audrey Petit – Consultante – Microsoft ServicesMichel Rousseau – Co...
Bewise  « Pure Player » Microsoft  depuis 1999  Diffuse une expertise                                 Ouverture d’une  nov...
Microsoft Services – Vue d’ensembleUne expertise tout au long du cycle de vie informatique  Entreprise Strategy           ...
Microsoft Consulting Services : 6 priorités                                                                 ClientProducti...
Agenda  Evolution du « kikoo-lol qui clignote de partout » au « fun,  branché et bigarré ».  Metro : toutes les pièces dét...
L’évolution du design des applis   L’informatique est en constante évolution depuis 20   ans (dixit Lapalisse).   Le desig...
L’évolution du design des applis Changement des comportements face à l’informatique
L’évolution du design des applis Changement des supports et des formats
L’évolution du design des applis Changement des devices (puissance, miniaturisation, interfaçage) et des comportements ind...
L’évolution du design des applisChangement sociétal, effets de bordstechnologiques, évolution du mode deconsommation, …, c...
L’évolution du design des applisCeci induit un changement de perception desapplications, tant au niveau de l’ergonomie que...
L’évolution du design des applis La prochaine évolution remarquable en terme d’interface est Metro:      Dynamisme, clarté...
L’exemple par le web Le web est une interface fortement contrainte techniquement et de manière transactionnelle :      Con...
L’exemple par le web Comment transposer un site typiquement « années 90 » en un site volontairement «10’s »? Un exemple co...
L’exemple par le web L’exemple réel :
L’exemple par lewebLa version redesignéeconforme :
L’exemple par le web Etude de cas :      Design : 16 couleurs, palette web, transparence par alpha      1 bit (.gif ), ico...
L’exemple par le web Revamper, oui, mais revamper bien: Iso-fonctionnel. Metro.
Revamper le design S’affranchir de l’existant       Passer en mode horizontal, plus logique pour la lecture       sur tabl...
Revamper le design La partie Design      Retour au mode papier/ tableau/ brainstorming      Définir un principe ergonomiqu...
Revamper le design La partie Design      Faire une conversion papier/écran en maquettant sous      Photoshop, composant pa...
Du design au code…Les joies et périls de l’intégration…
Les clefs de Metro   Les formes                     icones
Les clefs de Metro   Les polices de caractères         Segoe                  Arial      Courier                  Verdana
Les clefs de Metro   Les polices de caractères     A             A              A         A        A     1             1  ...
Les clefs du Metro   Les couleurs     Couleur de Font : noire ou blanche     Harmoniser la palette de couleurs     Evit...
Les clefs du Metro   Les différentes parties           Header           Navigation                             Body       ...
DEMOApplication du design style Metroavec Silverlight 5 et Expression Blend
Des questions ?
Pour aller plus loin                                                       Prochaines sessions des Dev Camps  Chaque semai...
Merci !   Michel Rousseau                 Audrey Petit      Consultant Bewise              Consultante Microsoft Service...
Design : Ne ratez pas le METRO
Design : Ne ratez pas le METRO
Design : Ne ratez pas le METRO
Design : Ne ratez pas le METRO
Design : Ne ratez pas le METRO
Design : Ne ratez pas le METRO
Design : Ne ratez pas le METRO
Design : Ne ratez pas le METRO
Design : Ne ratez pas le METRO
Design : Ne ratez pas le METRO
Design : Ne ratez pas le METRO
Design : Ne ratez pas le METRO
Design : Ne ratez pas le METRO
Design : Ne ratez pas le METRO
Design : Ne ratez pas le METRO
Design : Ne ratez pas le METRO
Design : Ne ratez pas le METRO
Prochain SlideShare
Chargement dans…5
×

Design : Ne ratez pas le METRO

250 vues

Publié le

'un design has-been "kikoo-lol qui clignote dans tous les sens" à un design sexy branché et bigarré il n'y a qu'un Metro. A travers cette session vous pourrez voir l'évolution du design d'hier à aujourd'hui et la création d'une interface web dans le style Metro.

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
250
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
8
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Design : Ne ratez pas le METRO

  1. 1. palais descongrèsParis7, 8 et 9février 2012
  2. 2. Ne ratez pas le Metro(DES205)Mardi 7 février 2012 11h00Audrey Petit – Consultante – Microsoft ServicesMichel Rousseau – Consultant - Bewise
  3. 3. Bewise « Pure Player » Microsoft depuis 1999 Diffuse une expertise Ouverture d’une novatrice agence sur Paris Contribue à l’émergence de logiciels performants et ergonomiques Retrouvez-nous sur le stand 47
  4. 4. Microsoft Services – Vue d’ensembleUne expertise tout au long du cycle de vie informatique Entreprise Strategy Microsoft Consulting Services Support Premier Evaluation Développement Stabilisation Support Planification Déploiement Opérations Alignement business & IT Déploiement et adoption Optimisation et Opération Partenaires
  5. 5. Microsoft Consulting Services : 6 priorités ClientProductivity Productivity Go Big in Win the Services Tier 1in the Cloud On Premises Dynamics Datacenter
  6. 6. Agenda Evolution du « kikoo-lol qui clignote de partout » au « fun, branché et bigarré ». Metro : toutes les pièces détachées. Questions.
  7. 7. L’évolution du design des applis L’informatique est en constante évolution depuis 20 ans (dixit Lapalisse). Le design est en très forte évolution depuis 5 ans.
  8. 8. L’évolution du design des applis Changement des comportements face à l’informatique
  9. 9. L’évolution du design des applis Changement des supports et des formats
  10. 10. L’évolution du design des applis Changement des devices (puissance, miniaturisation, interfaçage) et des comportements induits.
  11. 11. L’évolution du design des applisChangement sociétal, effets de bordstechnologiques, évolution du mode deconsommation, …, changement récursif, par ailleurs.
  12. 12. L’évolution du design des applisCeci induit un changement de perception desapplications, tant au niveau de l’ergonomie que de sonressenti (UX), tant au niveau de son fonctionnel que deson design.
  13. 13. L’évolution du design des applis La prochaine évolution remarquable en terme d’interface est Metro: Dynamisme, clarté, simplicité, ergonomie, modernité. Tuiles, polices, animations, couleurs, photos, icônes, layout .
  14. 14. L’exemple par le web Le web est une interface fortement contrainte techniquement et de manière transactionnelle : Contrainte de débit, portabilité, interopérabilité, maintenance, sécurité, gestion des standards… Contraintes de l’héritage des modes de navigation (scroll souris, lecture verticale, temps de réponse…)
  15. 15. L’exemple par le web Comment transposer un site typiquement « années 90 » en un site volontairement «10’s »? Un exemple concret : le site Microsoft Techdays 95 revampé.
  16. 16. L’exemple par le web L’exemple réel :
  17. 17. L’exemple par lewebLa version redesignéeconforme :
  18. 18. L’exemple par le web Etude de cas : Design : 16 couleurs, palette web, transparence par alpha 1 bit (.gif ), iconographie légère (débit limité), gif animé, polices système, taille des polices limitées, résolution limitée. Technique : Frames, tableaux, liens en dur, javascripts (roll- over)…pas de CSS, pas de web sémantique, indexation limitée, pas de lissage, etc…
  19. 19. L’exemple par le web Revamper, oui, mais revamper bien: Iso-fonctionnel. Metro.
  20. 20. Revamper le design S’affranchir de l’existant Passer en mode horizontal, plus logique pour la lecture sur tablette. Travailler avec une grille. Redéfinir l’ergonomie. Bien sûr, oublier les limitations du passé… Bien sûr, tenir compte des nouvelles…
  21. 21. Revamper le design La partie Design Retour au mode papier/ tableau/ brainstorming Définir un principe ergonomique Créer une première ébauche
  22. 22. Revamper le design La partie Design Faire une conversion papier/écran en maquettant sous Photoshop, composant par composant.
  23. 23. Du design au code…Les joies et périls de l’intégration…
  24. 24. Les clefs de Metro Les formes icones
  25. 25. Les clefs de Metro Les polices de caractères Segoe Arial Courier Verdana
  26. 26. Les clefs de Metro Les polices de caractères A A A A A 1 1 1 1 1 M M M M M Segoe Segoe UI Segoe Segoe Segoe Light WP Black Marker Script
  27. 27. Les clefs du Metro Les couleurs  Couleur de Font : noire ou blanche  Harmoniser la palette de couleurs  Eviter les couleurs saturées 1 2
  28. 28. Les clefs du Metro Les différentes parties Header Navigation Body Footer
  29. 29. DEMOApplication du design style Metroavec Silverlight 5 et Expression Blend
  30. 30. Des questions ?
  31. 31. Pour aller plus loin Prochaines sessions des Dev Camps Chaque semaine, les DevCamps 10 février Live Open Data - Développer des applications riches avec le ALM, Azure, Windows Phone, HTML5, OpenData 2012 Meeting protocole Open Data http://msdn.microsoft.com/fr-fr/devcamp 16 février Live Azure series - Développer des applications sociales sur la 2012 Meeting plateforme Windows Azure 17 février Live Comprendre le canvas avec Galactic et la librairie three.js Téléchargement, ressources et 2012 Meeting 21 février Live La production automatisée de code avec CodeFluent Entities 2012 Meeting toolkits : RdV sur MSDN 2 mars 2012 Live Meeting Comprendre et mettre en oeuvre le toolkit Azure pour Windows Phone 7, iOS et Android http://msdn.microsoft.com/fr-fr/ 6 mars Live Nuget et ALM 2012 Meeting Les offres à connaître 9 mars Live Kinect - Bien gérer la vie de son capteur 2012 Meeting 13 mars Live 90 jours d’essai gratuit de Windows Azure 2012 Meeting Sharepoint series - Automatisation des tests www.windowsazure.fr 14 mars 2012 Live Meeting TFS Health Check - vérifier la bonne santé de votre plateforme de développement 15 mars Live Azure series - Développer pour les téléphones, les tablettes et Jusqu’à 35% de réduction sur Visual Studio 2012 Meeting le cloud avec Visual Studio 2010 Pro, avec l’abonnement MSDN 16 mars 2012 Live Meeting Applications METRO design - Désossage en règle dun template METRO javascript www.visualstudio.fr 20 mars Live Retour dexpérience LightSwitch, Optimisation de laccès aux 2012 Meeting données, Intégration Silverlight 23 mars Live OAuth - la clé de lutilisation des réseaux sociaux dans votre 2012 Meeting application
  32. 32. Merci ! Michel Rousseau Audrey Petit  Consultant Bewise  Consultante Microsoft Services  michel.rousseau@bewise.fr  audrey.petit@microsoft.com

×