Ma présentation du metro design à la session Web User Experience corner #Algeria 2.0 #cyber parc

1. METRO DESIGN

2. L’évolution du design des applis:
L’informatique est en constante évolution depuis 20 ans.
Le design est en très forte évolution depuis 5 ans.

3. Changement des comportements face à l’informatique,

6. Changement des supports et des formats,

9. Changement des devices (puissance,
miniaturisation) et des comportements induits.

12. DE CLI à NUI…

14. Command Line Interface - CLI

15. Graphic User Interface - GUI

16. DE CLI à NUI…
Natural User Interface - NUI…
Natural User Interface - NUI…
 Peu d’efforts pour beaucouppourrésultats de résultats
Peu d’efforts de beaucoup
 En prise avec le réel
En prise avec le réel
 Le corps humain devient le périphérique et remplace claviers et souris. Il
Tactile
est le medium permettant l’interaction.
Boussole GPS, Accéléromètre et
Gyroscope
Vidéo conférence
Le corps humain devient le périphérique
et remplace claviers et souris. Il est le
medium permettant l’interaction.

17. La prochaine évolution remarquable en
terme d’interface est Metro:
Dynamisme, clarté, simplicité, ergonomie, modernité.
Tuiles, polices, animations, couleurs, photos, icônes, layout

20. METRO !

23. METRO:
METRO IS OUR DESIGN LANGUAGE.
WE CALL IT METRO BECAUSE IT’S
MODERN AND CLEAN.
IT’S FAST AND IN MOTION.
IT’S ABOUT CONTENT AND TYPOGRAPHY.
AND IT’S ENTIRELY AUTHENTIC.

24. Metro Principles:

25. Principle:
Clean, Light, Open, Fast
Feels Fast and Responsive.
Focus on Primary Tasks.
Do a Lot with Very Little.
Fierce Reduction of Unnecessary Elements.
Delightful Use of Whitespace.

26. Principle:
Celebrate Typography
Type is Beautiful, Not Just Legible.
Clear, Straightforward Information Design.
Uncompromising Sensitivity to Weight, Balance and
Scale

27. Principle:
Authentically Digital
Don’t Try to be What It’s NOT
Be Direct

28. Principle:
Content, Not Chrome
Reduce Visuals that are Not Content.
Contents is the UI.
Direct interaction with the Content.
Transition Between UI is as Important as the Design of the UI.

29. Principles
Clean, Light, Open, Fast
Celebrate Typography
Authentically Digital
Content, Not Chrome

30. Metro User Experience:
Focuses on the individual and their tasks.
Helps organize information and applications.

31. Build delightful experience
Be inspired by Metro
…but look for balance between the Metro
principles and your own style

32. Color
Acquérir de l'expérience délicieuse
Laissez-vous inspirer par le métro
... Mais trouver un juste équilibre entre
Use le métro to delight the user.
color
Use principes et vos propres styles experience.
color to personalize
Use color to emphasize hierarchy.

33. Typography
Make words feel welcome
Pay attention to balance,
weight & scale

34. Make It Easy to Use
Familiar = Easy to use.
Provide consistent and predictable experience.

36. Du design au code…
Les joies et périls de l’intégration…

37. Les clefs de Metro
Les formes
icones

38. Les clefs de Metro
Les polices de caractères
Segoe Arial
Courier Verdana

39. 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

40. Les clefs du Metro
Les couleurs
 Couleur de Font : noire ou blanche
 Harmoniser la palette de couleurs
 Eviter les couleurs saturées
1 2

41. Les clefs du Metro
Les différentes parties
Header
Navigation
Body
Footer

42. Couleurs
#1fa9f0 RVB 31 169 240 #f16c00 RVB 241 108 0 #39c40e RVB 57 196 14
#ffd200 RVB 255 210 0 #ff0000 RVB 255 0 0 #ffffff RVB 255 255 255
#4a0067 RVB 74 0 103 #e4008c RVB 228 0 140 #a0007b RVB 160 0 123
#d3ae00 RVB 211 174 0
Pour fond blanc et bleu :
#1d89dd RVB 29 137 221 #b85200 RVB 184 82 0 #4d840f RVB 77 132 15
#680091 RVB 104 0 145 #cd0000 RVB 205 0 0 #001f45 RVB 0 31 69
Lien : http://www.microsoft.com (#e4008c RVB 208 0 140)
Puces :

43. Icônes 4/5
Facebook PC Tweet Message Mail Photos Messenger
“”
Video Like Devices Outlook TV Txt Devices
RSS Feeds Voicemail

44. demo