Design : Ne ratez pas le METRO

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

michel.rousseau@bewise.fr

Audrey Petit Consultante Microsoft Services

audrey.petit@microsoft.com