design : ne ratez pas le metro
DESCRIPTION
'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.TRANSCRIPT
palais des
congrès
Paris
7, 8 et 9
février 2012
Mardi 7 février 2012 11h00
Audrey Petit – Consultante – Microsoft ServicesMichel Rousseau – Consultant - Bewise
Ne ratez pas le Metro(DES205)
« Pure Player » Microsoft depuis 1999
Diffuse une expertise novatrice
Contribue à l’émergence de logiciels performants et ergonomiques
Ouverture d’une
agence sur Paris
Bewise
Retrouvez-nous sur le stand 47
Une expertise tout au long du cycle de vie informatique
Evaluation
Planification
Développement
Déploiement
Stabilisation
Opérations
Support
Alignement business & IT Optimisation et Opération
Support Premier
Entreprise Strategy
Microsoft Consulting Services
Déploiement et adoption
Microsoft Services – Vue d’ensemble
Partenaires
Productivityin the Cloud
ProductivityOn Premises
Go Big in Dynamics
Win the Datacenter
Tier 1
Client Services
Microsoft Consulting Services : 6 priorités
Evolution du « kikoo-lol qui clignote de partout » au « fun,
branché et bigarré ».
Metro : toutes les pièces détachées.
Questions.
Agenda
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’évolution du design des applis
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.
L’exemple par le web
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.
Revamper le design
Du design au code…Les joies et périls de l’intégration…
Les formes
Les clefs de Metro
icones
Les polices de caractères
Les clefs de Metro
Segoe
Verdana
Arial
Courier
Les polices de caractères
Les clefs de Metro
A
1
Segoe
M
A
1
Segoe UI
Light
M
A
1
Segoe
WP Black
M
A
1
Segoe Marker
M
A
1
Segoe Script
M
Les couleurs
Couleur de Font : noire ou blanche
Harmoniser la palette de couleurs
Eviter les couleurs saturées
Les clefs du Metro
1 2
Les différentes parties
Les clefs du Metro
Header
Footer
Body
Navigation
DEMO
Application du design style Metro
avec Silverlight 5 et Expression Blend
Des questions ?
Chaque semaine, les DevCampsALM, Azure, Windows Phone, HTML5, OpenDatahttp://msdn.microsoft.com/fr-fr/devcamp
Téléchargement, ressources et
toolkits : RdV sur MSDNhttp://msdn.microsoft.com/fr-fr/
Les offres à connaître90 jours d’essai gratuit de Windows Azure
www.windowsazure.fr
Jusqu’à 35% de réduction sur Visual Studio Pro, avec l’abonnement MSDN
www.visualstudio.fr
Pour aller plus loin
10 février
2012
Live
Meeting
Open Data - Développer des applications riches avec le
protocole Open Data
16 février
2012
Live
Meeting
Azure series - Développer des applications sociales sur la
plateforme Windows Azure
17 février
2012
Live
MeetingComprendre le canvas avec Galactic et la librairie three.js
21 février
2012
Live
MeetingLa production automatisée de code avec CodeFluent Entities
2 mars
2012
Live
Meeting
Comprendre et mettre en oeuvre le toolkit Azure pour Windows
Phone 7, iOS et Android
6 mars
2012
Live
MeetingNuget et ALM
9 mars
2012
Live
MeetingKinect - Bien gérer la vie de son capteur
13 mars
2012
Live
MeetingSharepoint series - Automatisation des tests
14 mars
2012
Live
Meeting
TFS Health Check - vérifier la bonne santé de votre plateforme
de développement
15 mars
2012
Live
Meeting
Azure series - Développer pour les téléphones, les tablettes et
le cloud avec Visual Studio 2010
16 mars
2012
Live
Meeting
Applications METRO design - Désossage en règle d'un template
METRO javascript
20 mars
2012
Live
Meeting
Retour d'expérience LightSwitch, Optimisation de l'accès aux
données, Intégration Silverlight
23 mars
2012
Live
Meeting
OAuth - la clé de l'utilisation des réseaux sociaux dans votre
application
Prochaines sessions des Dev Camps
Merci !
Michel Rousseau Consultant Bewise
Audrey Petit Consultante Microsoft Services