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

11. L’évolution du design des applis
Changement des supports et des formats

14. L’évolution du design des applis
Changement des devices (puissance, miniaturisation,
interfaçage) et des comportements induits.

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

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.

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
.

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é, g
estion 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

35. Revamper le design
La partie Design
Faire une conversion papier/écran en maquettant sous
Photoshop, composant par composant.

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

47. Des questions ?

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