SlideShare une entreprise Scribd logo
palais des
congrès
Paris




7, 8 et 9
février 2012
Ne ratez pas le Metro
(DES205)

Mardi 7 février 2012 11h00

Audrey Petit – Consultante – Microsoft Services
Michel Rousseau – Consultant - Bewise
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
Microsoft Services – Vue d’ensemble
Une 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
Microsoft Consulting Services : 6 priorités




                                                                 Client
Productivity   Productivity   Go Big in    Win the              Services
                                                       Tier 1
in the Cloud   On Premises    Dynamics    Datacenter
Agenda

  Evolution du « kikoo-lol qui clignote de partout » au « fun,
  branché et bigarré ».
  Metro : toutes les pièces détachées.
  Questions.
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.
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 induits.
L’évolution du design des applis

Changement sociétal, effets de bords
technologiques, évolution du mode de
consommation, …, changement récursif, par ailleurs.
L’évolution du design des applis

Ceci induit un changement de perception des
applications, tant au niveau de l’ergonomie que de son
ressenti (UX), tant au niveau de son fonctionnel que de
son design.
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
      .
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…)
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é.
L’exemple par le web

 L’exemple réel :
L’exemple par le
web


La version redesignée
conforme :
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…
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 tablette.
       Travailler avec une grille.
       Redéfinir l’ergonomie.
       Bien sûr, oublier les limitations du passé…
       Bien sûr, tenir compte des nouvelles…
Revamper le design

 La partie Design
      Retour au mode papier/ tableau/ brainstorming
      Définir un principe ergonomique
      Créer une première ébauche
Revamper le design

 La partie Design
      Faire une conversion papier/écran en maquettant sous
      Photoshop, composant par composant.
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              1         1        1


     M             M              M         M        M

   Segoe       Segoe UI         Segoe     Segoe    Segoe
                 Light         WP Black   Marker   Script
Les clefs du Metro

   Les couleurs
     Couleur de Font : noire ou blanche

     Harmoniser la palette de couleurs

     Eviter les couleurs saturées




                 1                         2
Les clefs du Metro

   Les différentes parties

           Header

           Navigation




                             Body




           Footer
DEMO

Application du design style Metro
avec Silverlight 5 et Expression Blend
Des questions ?
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 d'un template
                                                                              METRO javascript
            www.visualstudio.fr                        20 mars       Live     Retour d'expérience LightSwitch, Optimisation de l'accès aux
                                                        2012        Meeting   données, Intégration Silverlight

                                                       23 mars       Live     OAuth - la clé de l'utilisation des réseaux sociaux dans votre
                                                        2012        Meeting   application
Merci !


   Michel Rousseau                 Audrey Petit
      Consultant Bewise              Consultante Microsoft Services
      michel.rousseau@bewise.fr      audrey.petit@microsoft.com

Contenu connexe

Tendances

Android un nouveau futur s'ouvre à nous
Android un nouveau futur s'ouvre à nousAndroid un nouveau futur s'ouvre à nous
Android un nouveau futur s'ouvre à nous
Mathias Seguy
 
TechDays 2013 - Développer avec Visual Studio et TFS 2012 ses applications Wi...
TechDays 2013 - Développer avec Visual Studio et TFS 2012 ses applications Wi...TechDays 2013 - Développer avec Visual Studio et TFS 2012 ses applications Wi...
TechDays 2013 - Développer avec Visual Studio et TFS 2012 ses applications Wi...
Cédric Leblond
 
De A à Z: Utiliser PivotViewer dans une application orientée données
De A à Z: Utiliser PivotViewer dans une application orientée donnéesDe A à Z: Utiliser PivotViewer dans une application orientée données
De A à Z: Utiliser PivotViewer dans une application orientée données
Microsoft
 
Conférence "Architecture Android" du 19 Mars 2013 par Mathias Seguy fondateur...
Conférence "Architecture Android" du 19 Mars 2013 par Mathias Seguy fondateur...Conférence "Architecture Android" du 19 Mars 2013 par Mathias Seguy fondateur...
Conférence "Architecture Android" du 19 Mars 2013 par Mathias Seguy fondateur...
Mathias Seguy
 
Fujitsu IT Future 2013 : l’ère du tout mobile, mode d’emploi..
Fujitsu IT Future 2013 : l’ère du tout mobile, mode d’emploi..Fujitsu IT Future 2013 : l’ère du tout mobile, mode d’emploi..
Fujitsu IT Future 2013 : l’ère du tout mobile, mode d’emploi..Fujitsu France
 
Programmation sous Android
Programmation sous AndroidProgrammation sous Android
Programmation sous Android
Olivier Le Goaër
 
Framework XPlatform Mobile
Framework XPlatform MobileFramework XPlatform Mobile
Framework XPlatform Mobile
Gabriel DUPONT
 
Presentation Android
Presentation AndroidPresentation Android
Presentation Android
Jean Collas
 
Niji x mobile mots flash
Niji x mobile   mots flashNiji x mobile   mots flash
Niji x mobile mots flash
Gabriel DUPONT
 
SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...
SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...
SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...
TelecomValley
 
Livre blanc Windows Azure et les éditeurs de logiciel
Livre blanc Windows Azure et les éditeurs de logicielLivre blanc Windows Azure et les éditeurs de logiciel
Livre blanc Windows Azure et les éditeurs de logicielMicrosoft Décideurs IT
 
Niji rapport de prévention 2021 - android 12
Niji   rapport de prévention 2021 - android 12Niji   rapport de prévention 2021 - android 12
Niji rapport de prévention 2021 - android 12
Gabriel DUPONT
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...
Microsoft Technet France
 
Niji mobile factory - prevention application mobile android11-i os14- 06-2020
Niji   mobile factory - prevention application mobile android11-i os14- 06-2020Niji   mobile factory - prevention application mobile android11-i os14- 06-2020
Niji mobile factory - prevention application mobile android11-i os14- 06-2020
Gabriel DUPONT
 
Improve Foundations (FR)
Improve Foundations (FR)Improve Foundations (FR)
Improve Foundations (FR)
dduquenne
 
EZ Systems - EZ publish, la plate-forme de gestion de contenu web de nouvell...
EZ Systems -  EZ publish, la plate-forme de gestion de contenu web de nouvell...EZ Systems -  EZ publish, la plate-forme de gestion de contenu web de nouvell...
EZ Systems - EZ publish, la plate-forme de gestion de contenu web de nouvell...
Documation Gestion de l'information et du document numérique en entreprise
 
Niji rapport de prévention 2021 - i os 15
Niji   rapport de prévention 2021 - i os 15Niji   rapport de prévention 2021 - i os 15
Niji rapport de prévention 2021 - i os 15
Gabriel DUPONT
 
WygDay 2010
WygDay 2010WygDay 2010
WygDay 2010
Gregory Renard
 
Rapport de stage genie logiciel awoufack tedem adeline encadreur kamleu nou...
Rapport de stage genie logiciel awoufack tedem adeline encadreur   kamleu nou...Rapport de stage genie logiciel awoufack tedem adeline encadreur   kamleu nou...
Rapport de stage genie logiciel awoufack tedem adeline encadreur kamleu nou...
Emeric Kamleu Noumi
 

Tendances (20)

Android un nouveau futur s'ouvre à nous
Android un nouveau futur s'ouvre à nousAndroid un nouveau futur s'ouvre à nous
Android un nouveau futur s'ouvre à nous
 
TechDays 2013 - Développer avec Visual Studio et TFS 2012 ses applications Wi...
TechDays 2013 - Développer avec Visual Studio et TFS 2012 ses applications Wi...TechDays 2013 - Développer avec Visual Studio et TFS 2012 ses applications Wi...
TechDays 2013 - Développer avec Visual Studio et TFS 2012 ses applications Wi...
 
De A à Z: Utiliser PivotViewer dans une application orientée données
De A à Z: Utiliser PivotViewer dans une application orientée donnéesDe A à Z: Utiliser PivotViewer dans une application orientée données
De A à Z: Utiliser PivotViewer dans une application orientée données
 
Conférence "Architecture Android" du 19 Mars 2013 par Mathias Seguy fondateur...
Conférence "Architecture Android" du 19 Mars 2013 par Mathias Seguy fondateur...Conférence "Architecture Android" du 19 Mars 2013 par Mathias Seguy fondateur...
Conférence "Architecture Android" du 19 Mars 2013 par Mathias Seguy fondateur...
 
Présentation kanban
Présentation kanbanPrésentation kanban
Présentation kanban
 
Fujitsu IT Future 2013 : l’ère du tout mobile, mode d’emploi..
Fujitsu IT Future 2013 : l’ère du tout mobile, mode d’emploi..Fujitsu IT Future 2013 : l’ère du tout mobile, mode d’emploi..
Fujitsu IT Future 2013 : l’ère du tout mobile, mode d’emploi..
 
Programmation sous Android
Programmation sous AndroidProgrammation sous Android
Programmation sous Android
 
Framework XPlatform Mobile
Framework XPlatform MobileFramework XPlatform Mobile
Framework XPlatform Mobile
 
Presentation Android
Presentation AndroidPresentation Android
Presentation Android
 
Niji x mobile mots flash
Niji x mobile   mots flashNiji x mobile   mots flash
Niji x mobile mots flash
 
SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...
SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...
SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...
 
Livre blanc Windows Azure et les éditeurs de logiciel
Livre blanc Windows Azure et les éditeurs de logicielLivre blanc Windows Azure et les éditeurs de logiciel
Livre blanc Windows Azure et les éditeurs de logiciel
 
Niji rapport de prévention 2021 - android 12
Niji   rapport de prévention 2021 - android 12Niji   rapport de prévention 2021 - android 12
Niji rapport de prévention 2021 - android 12
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...
 
Niji mobile factory - prevention application mobile android11-i os14- 06-2020
Niji   mobile factory - prevention application mobile android11-i os14- 06-2020Niji   mobile factory - prevention application mobile android11-i os14- 06-2020
Niji mobile factory - prevention application mobile android11-i os14- 06-2020
 
Improve Foundations (FR)
Improve Foundations (FR)Improve Foundations (FR)
Improve Foundations (FR)
 
EZ Systems - EZ publish, la plate-forme de gestion de contenu web de nouvell...
EZ Systems -  EZ publish, la plate-forme de gestion de contenu web de nouvell...EZ Systems -  EZ publish, la plate-forme de gestion de contenu web de nouvell...
EZ Systems - EZ publish, la plate-forme de gestion de contenu web de nouvell...
 
Niji rapport de prévention 2021 - i os 15
Niji   rapport de prévention 2021 - i os 15Niji   rapport de prévention 2021 - i os 15
Niji rapport de prévention 2021 - i os 15
 
WygDay 2010
WygDay 2010WygDay 2010
WygDay 2010
 
Rapport de stage genie logiciel awoufack tedem adeline encadreur kamleu nou...
Rapport de stage genie logiciel awoufack tedem adeline encadreur   kamleu nou...Rapport de stage genie logiciel awoufack tedem adeline encadreur   kamleu nou...
Rapport de stage genie logiciel awoufack tedem adeline encadreur kamleu nou...
 

En vedette

Stephaniebolanos
StephaniebolanosStephaniebolanos
Stephaniebolanos
sbolanos13051
 
Ética
ÉticaÉtica
Ética
Lori .
 
Huisstijlontwikkeling voor ASN Bank
Huisstijlontwikkeling voor ASN BankHuisstijlontwikkeling voor ASN Bank
Huisstijlontwikkeling voor ASN Bank
Albedo communicatie
 
Box PUNTA DEL ESTE 2013
Box PUNTA DEL ESTE 2013Box PUNTA DEL ESTE 2013
Box PUNTA DEL ESTE 2013
Franco Laporta
 
Presentac[1]..
Presentac[1]..Presentac[1]..
Presentac[1]..
veragil
 
Tech@State 2011
Tech@State 2011Tech@State 2011
Tech@State 2011
Heather Blanchard
 
Mining machinary nit rourkela
Mining machinary nit rourkelaMining machinary nit rourkela
Mining machinary nit rourkela
rrosan1991
 

En vedette (7)

Stephaniebolanos
StephaniebolanosStephaniebolanos
Stephaniebolanos
 
Ética
ÉticaÉtica
Ética
 
Huisstijlontwikkeling voor ASN Bank
Huisstijlontwikkeling voor ASN BankHuisstijlontwikkeling voor ASN Bank
Huisstijlontwikkeling voor ASN Bank
 
Box PUNTA DEL ESTE 2013
Box PUNTA DEL ESTE 2013Box PUNTA DEL ESTE 2013
Box PUNTA DEL ESTE 2013
 
Presentac[1]..
Presentac[1]..Presentac[1]..
Presentac[1]..
 
Tech@State 2011
Tech@State 2011Tech@State 2011
Tech@State 2011
 
Mining machinary nit rourkela
Mining machinary nit rourkelaMining machinary nit rourkela
Mining machinary nit rourkela
 

Similaire à Design : Ne ratez pas le METRO

Développement de jeux pour Windows Phone 7.5 avec XNA et Silverlight
Développement de jeux pour Windows Phone 7.5 avec XNA et SilverlightDéveloppement de jeux pour Windows Phone 7.5 avec XNA et Silverlight
Développement de jeux pour Windows Phone 7.5 avec XNA et Silverlight
Microsoft
 
Améliorer votre productivité XAML en entreprise !
Améliorer votre productivité XAML en entreprise !Améliorer votre productivité XAML en entreprise !
Améliorer votre productivité XAML en entreprise !
Microsoft
 
Améliorer votre productivité XAML en entreprise !
Améliorer votre productivité XAML en entreprise !Améliorer votre productivité XAML en entreprise !
Améliorer votre productivité XAML en entreprise !
Microsoft
 
Fast and Furious XAML Apps!
Fast and Furious XAML Apps!Fast and Furious XAML Apps!
Fast and Furious XAML Apps!
Microsoft
 
La réalité augmentée dans les systèmes embarqués
La réalité augmentée dans les systèmes embarquésLa réalité augmentée dans les systèmes embarqués
La réalité augmentée dans les systèmes embarqués
Microsoft Décideurs IT
 
APIs Facebook, Twitter, Foursquare… tirer parti des réseaux sociaux dans votr...
APIs Facebook, Twitter, Foursquare… tirer parti des réseaux sociaux dans votr...APIs Facebook, Twitter, Foursquare… tirer parti des réseaux sociaux dans votr...
APIs Facebook, Twitter, Foursquare… tirer parti des réseaux sociaux dans votr...
Microsoft
 
De l’ergonomie aux bonnes méthodes de développement de vos applications Windo...
De l’ergonomie aux bonnes méthodes de développement de vos applications Windo...De l’ergonomie aux bonnes méthodes de développement de vos applications Windo...
De l’ergonomie aux bonnes méthodes de développement de vos applications Windo...
Microsoft
 
WygDay 2010 - session plénière
WygDay 2010 - session plénièreWygDay 2010 - session plénière
WygDay 2010 - session plénière
Wygwam
 
Cahier spécial visual studio 2015 - Octobre 2015
Cahier spécial visual studio 2015 - Octobre 2015Cahier spécial visual studio 2015 - Octobre 2015
Cahier spécial visual studio 2015 - Octobre 2015
FactoVia
 
Kinect en moins de 10 Minutes
Kinect en moins de 10 MinutesKinect en moins de 10 Minutes
Kinect en moins de 10 Minutes
Microsoft
 
Développeurs, c’est vous le chef !!
Développeurs, c’est vous le chef !!Développeurs, c’est vous le chef !!
Développeurs, c’est vous le chef !!
Microsoft
 
Fichier, Nouveau projet… Et après ?
Fichier, Nouveau projet… Et après ?Fichier, Nouveau projet… Et après ?
Fichier, Nouveau projet… Et après ?
Microsoft
 
Bornes, écrans, automates: ce qui se cache derrière les systèmes embarqués qu...
Bornes, écrans, automates: ce qui se cache derrière les systèmes embarqués qu...Bornes, écrans, automates: ce qui se cache derrière les systèmes embarqués qu...
Bornes, écrans, automates: ce qui se cache derrière les systèmes embarqués qu...
Microsoft
 
Quoi de neuf dans Office 365?
Quoi de neuf dans Office 365?Quoi de neuf dans Office 365?
Quoi de neuf dans Office 365?
Microsoft Décideurs IT
 
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Stéphanie Hertrich
 
.NET Microframework, les joies de l'électronique et du code pour tous
.NET Microframework, les joies de l'électronique et du code pour tous.NET Microframework, les joies de l'électronique et du code pour tous
.NET Microframework, les joies de l'électronique et du code pour tous
Microsoft
 
Introduction au développement Windows 8 avec XAML et .NET 4.5
Introduction au développement Windows 8 avec XAML et .NET 4.5Introduction au développement Windows 8 avec XAML et .NET 4.5
Introduction au développement Windows 8 avec XAML et .NET 4.5
Microsoft
 
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Philippe Beraud
 
AgileTour Toulouse 2012 : TFS
AgileTour Toulouse 2012 : TFSAgileTour Toulouse 2012 : TFS
AgileTour Toulouse 2012 : TFSAgile Toulouse
 
Enseigner les technologies Microsoft, un exemple avec Windows Phone
Enseigner les technologies Microsoft, un exemple avec Windows PhoneEnseigner les technologies Microsoft, un exemple avec Windows Phone
Enseigner les technologies Microsoft, un exemple avec Windows Phone
Microsoft Décideurs IT
 

Similaire à Design : Ne ratez pas le METRO (20)

Développement de jeux pour Windows Phone 7.5 avec XNA et Silverlight
Développement de jeux pour Windows Phone 7.5 avec XNA et SilverlightDéveloppement de jeux pour Windows Phone 7.5 avec XNA et Silverlight
Développement de jeux pour Windows Phone 7.5 avec XNA et Silverlight
 
Améliorer votre productivité XAML en entreprise !
Améliorer votre productivité XAML en entreprise !Améliorer votre productivité XAML en entreprise !
Améliorer votre productivité XAML en entreprise !
 
Améliorer votre productivité XAML en entreprise !
Améliorer votre productivité XAML en entreprise !Améliorer votre productivité XAML en entreprise !
Améliorer votre productivité XAML en entreprise !
 
Fast and Furious XAML Apps!
Fast and Furious XAML Apps!Fast and Furious XAML Apps!
Fast and Furious XAML Apps!
 
La réalité augmentée dans les systèmes embarqués
La réalité augmentée dans les systèmes embarquésLa réalité augmentée dans les systèmes embarqués
La réalité augmentée dans les systèmes embarqués
 
APIs Facebook, Twitter, Foursquare… tirer parti des réseaux sociaux dans votr...
APIs Facebook, Twitter, Foursquare… tirer parti des réseaux sociaux dans votr...APIs Facebook, Twitter, Foursquare… tirer parti des réseaux sociaux dans votr...
APIs Facebook, Twitter, Foursquare… tirer parti des réseaux sociaux dans votr...
 
De l’ergonomie aux bonnes méthodes de développement de vos applications Windo...
De l’ergonomie aux bonnes méthodes de développement de vos applications Windo...De l’ergonomie aux bonnes méthodes de développement de vos applications Windo...
De l’ergonomie aux bonnes méthodes de développement de vos applications Windo...
 
WygDay 2010 - session plénière
WygDay 2010 - session plénièreWygDay 2010 - session plénière
WygDay 2010 - session plénière
 
Cahier spécial visual studio 2015 - Octobre 2015
Cahier spécial visual studio 2015 - Octobre 2015Cahier spécial visual studio 2015 - Octobre 2015
Cahier spécial visual studio 2015 - Octobre 2015
 
Kinect en moins de 10 Minutes
Kinect en moins de 10 MinutesKinect en moins de 10 Minutes
Kinect en moins de 10 Minutes
 
Développeurs, c’est vous le chef !!
Développeurs, c’est vous le chef !!Développeurs, c’est vous le chef !!
Développeurs, c’est vous le chef !!
 
Fichier, Nouveau projet… Et après ?
Fichier, Nouveau projet… Et après ?Fichier, Nouveau projet… Et après ?
Fichier, Nouveau projet… Et après ?
 
Bornes, écrans, automates: ce qui se cache derrière les systèmes embarqués qu...
Bornes, écrans, automates: ce qui se cache derrière les systèmes embarqués qu...Bornes, écrans, automates: ce qui se cache derrière les systèmes embarqués qu...
Bornes, écrans, automates: ce qui se cache derrière les systèmes embarqués qu...
 
Quoi de neuf dans Office 365?
Quoi de neuf dans Office 365?Quoi de neuf dans Office 365?
Quoi de neuf dans Office 365?
 
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des Entrepreneurs
 
.NET Microframework, les joies de l'électronique et du code pour tous
.NET Microframework, les joies de l'électronique et du code pour tous.NET Microframework, les joies de l'électronique et du code pour tous
.NET Microframework, les joies de l'électronique et du code pour tous
 
Introduction au développement Windows 8 avec XAML et .NET 4.5
Introduction au développement Windows 8 avec XAML et .NET 4.5Introduction au développement Windows 8 avec XAML et .NET 4.5
Introduction au développement Windows 8 avec XAML et .NET 4.5
 
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
Créez vos apps métier Windows 8 sans expertise en programmation, grâce à Proj...
 
AgileTour Toulouse 2012 : TFS
AgileTour Toulouse 2012 : TFSAgileTour Toulouse 2012 : TFS
AgileTour Toulouse 2012 : TFS
 
Enseigner les technologies Microsoft, un exemple avec Windows Phone
Enseigner les technologies Microsoft, un exemple avec Windows PhoneEnseigner les technologies Microsoft, un exemple avec Windows Phone
Enseigner les technologies Microsoft, un exemple avec Windows Phone
 

Plus de Microsoft

Uwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieuUwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieu
Microsoft
 
La Blockchain pas à PaaS
La Blockchain pas à PaaSLa Blockchain pas à PaaS
La Blockchain pas à PaaS
Microsoft
 
Tester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobileTester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobile
Microsoft
 
Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo
Microsoft
 
Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.
Microsoft
 
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Microsoft
 
Créer un bot de A à Z
Créer un bot de A à ZCréer un bot de A à Z
Créer un bot de A à Z
Microsoft
 
Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?
Microsoft
 
Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016
Microsoft
 
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Microsoft
 
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs AnalyticsAdministration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Microsoft
 
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Microsoft
 
Plan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site RecoveryPlan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site Recovery
Microsoft
 
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Microsoft
 
Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.
Microsoft
 
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Microsoft
 
Introduction à ASP.NET Core
Introduction à ASP.NET CoreIntroduction à ASP.NET Core
Introduction à ASP.NET Core
Microsoft
 
Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?
Microsoft
 
Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...
Microsoft
 
Azure Service Fabric pour les développeurs
Azure Service Fabric pour les développeursAzure Service Fabric pour les développeurs
Azure Service Fabric pour les développeurs
Microsoft
 

Plus de Microsoft (20)

Uwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieuUwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieu
 
La Blockchain pas à PaaS
La Blockchain pas à PaaSLa Blockchain pas à PaaS
La Blockchain pas à PaaS
 
Tester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobileTester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobile
 
Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo
 
Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.
 
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
 
Créer un bot de A à Z
Créer un bot de A à ZCréer un bot de A à Z
Créer un bot de A à Z
 
Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?
 
Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016
 
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
 
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs AnalyticsAdministration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs Analytics
 
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
 
Plan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site RecoveryPlan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site Recovery
 
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
 
Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.
 
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
 
Introduction à ASP.NET Core
Introduction à ASP.NET CoreIntroduction à ASP.NET Core
Introduction à ASP.NET Core
 
Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?
 
Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...
 
Azure Service Fabric pour les développeurs
Azure Service Fabric pour les développeursAzure Service Fabric pour les développeurs
Azure Service Fabric pour les développeurs
 

Dernier

MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
Horgix
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptxPRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
AlbertSmithTambwe
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
abderrahimbourimi
 

Dernier (7)

MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptxPRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
 

Design : Ne ratez pas le METRO

  • 1. palais des congrès Paris 7, 8 et 9 février 2012
  • 2. Ne ratez pas le Metro (DES205) Mardi 7 février 2012 11h00 Audrey Petit – Consultante – Microsoft Services Michel Rousseau – Consultant - Bewise
  • 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. Microsoft Services – Vue d’ensemble Une 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. Microsoft Consulting Services : 6 priorités Client Productivity Productivity Go Big in Win the Services Tier 1 in the Cloud On Premises Dynamics Datacenter
  • 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. 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. L’évolution du design des applis Changement des comportements face à l’informatique
  • 9.
  • 10.
  • 11. L’évolution du design des applis Changement des supports et des formats
  • 12.
  • 13.
  • 14. L’évolution du design des applis Changement des devices (puissance, miniaturisation, interfaçage) et des comportements induits.
  • 15.
  • 16.
  • 17. L’évolution du design des applis Changement sociétal, effets de bords technologiques, évolution du mode de consommation, …, changement récursif, par ailleurs.
  • 18.
  • 19.
  • 20. L’évolution du design des applis Ceci induit un changement de perception des applications, tant au niveau de l’ergonomie que de son ressenti (UX), tant au niveau de son fonctionnel que de son design.
  • 21.
  • 22.
  • 23. 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 .
  • 24.
  • 25.
  • 26. 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…)
  • 27. 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é.
  • 28. L’exemple par le web L’exemple réel :
  • 29. L’exemple par le web La version redesignée conforme :
  • 30. 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…
  • 31. L’exemple par le web Revamper, oui, mais revamper bien: Iso-fonctionnel. Metro.
  • 32. 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…
  • 33. Revamper le design La partie Design Retour au mode papier/ tableau/ brainstorming Définir un principe ergonomique Créer une première ébauche
  • 34.
  • 35. Revamper le design La partie Design Faire une conversion papier/écran en maquettant sous Photoshop, composant par composant.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40. Du design au code… Les joies et périls de l’intégration…
  • 41. Les clefs de Metro Les formes icones
  • 42. Les clefs de Metro Les polices de caractères Segoe Arial Courier Verdana
  • 43. 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
  • 44. Les clefs du Metro Les couleurs  Couleur de Font : noire ou blanche  Harmoniser la palette de couleurs  Eviter les couleurs saturées 1 2
  • 45. Les clefs du Metro Les différentes parties Header Navigation Body Footer
  • 46. DEMO Application du design style Metro avec Silverlight 5 et Expression Blend
  • 48. 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 d'un template METRO javascript www.visualstudio.fr 20 mars Live Retour d'expérience LightSwitch, Optimisation de l'accès aux 2012 Meeting données, Intégration Silverlight 23 mars Live OAuth - la clé de l'utilisation des réseaux sociaux dans votre 2012 Meeting application
  • 49. Merci ! Michel Rousseau Audrey Petit  Consultant Bewise  Consultante Microsoft Services  michel.rousseau@bewise.fr  audrey.petit@microsoft.com