Metro design

1,094 views

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,094
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Metro design

  1. 1. METRO DESIGN
  2. 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. 3. Changement des comportements face à l’informatique,
  4. 4. Changement des supports et des formats,
  5. 5. Changement des devices (puissance,miniaturisation) et des comportements induits.
  6. 6. DE CLI à NUI…
  7. 7. Command Line Interface - CLI
  8. 8. Graphic User Interface - GUI
  9. 9. 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.
  10. 10. La prochaine évolution remarquable enterme d’interface est Metro: Dynamisme, clarté, simplicité, ergonomie, modernité. Tuiles, polices, animations, couleurs, photos, icônes, layout
  11. 11. METRO !
  12. 12. METRO:METRO IS OUR DESIGN LANGUAGE.WE CALL IT METRO BECAUSE IT’SMODERN AND CLEAN.IT’S FAST AND IN MOTION.IT’S ABOUT CONTENT AND TYPOGRAPHY.AND IT’S ENTIRELY AUTHENTIC.
  13. 13. Metro Principles:
  14. 14. Principle:Clean, Light, Open, FastFeels Fast and Responsive.Focus on Primary Tasks.Do a Lot with Very Little.Fierce Reduction of Unnecessary Elements.Delightful Use of Whitespace.
  15. 15. Principle:Celebrate TypographyType is Beautiful, Not Just Legible.Clear, Straightforward Information Design.Uncompromising Sensitivity to Weight, Balance andScale
  16. 16. Principle:Authentically DigitalDon’t Try to be What It’s NOTBe Direct
  17. 17. Principle:Content, Not ChromeReduce 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.
  18. 18. PrinciplesClean, Light, Open, Fast Celebrate Typography Authentically Digital Content, Not Chrome
  19. 19. Metro User Experience:Focuses on the individual and their tasks.Helps organize information and applications.
  20. 20. Build delightful experienceBe inspired by Metro…but look for balance between the Metroprinciples and your own style
  21. 21. Color Acquérir de lexpérience délicieuse Laissez-vous inspirer par le métro ... Mais trouver un juste équilibre entreUse le métro to delight the user. colorUse principes et vos propres styles experience. color to personalizeUse color to emphasize hierarchy.
  22. 22. TypographyMake words feel welcomePay attention to balance,weight & scale
  23. 23. Make It Easy to UseFamiliar = Easy to use.Provide consistent and predictable experience.
  24. 24. Du design au code…Les joies et périls de l’intégration…
  25. 25. Les clefs de Metro Les formes icones
  26. 26. Les clefs de Metro Les polices de caractères Segoe Arial Courier Verdana
  27. 27. 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
  28. 28. Les clefs du Metro Les couleurs  Couleur de Font : noire ou blanche  Harmoniser la palette de couleurs  Eviter les couleurs saturées 1 2
  29. 29. Les clefs du Metro Les différentes parties Header Navigation Body Footer
  30. 30. 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 :
  31. 31. Icônes 4/5 Facebook PC Tweet Message Mail Photos Messenger “” Video Like Devices Outlook TV Txt Devices RSS Feeds Voicemail
  32. 32. demo

×