Your SlideShare is downloading. ×
Metro design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Metro design

791
views

Published on

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

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

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
791
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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,
  • 4. Changement des supports et des formats,
  • 5. Changement des devices (puissance,miniaturisation) et des comportements induits.
  • 6. DE CLI à NUI…
  • 7. Command Line Interface - CLI
  • 8. Graphic User Interface - GUI
  • 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. La prochaine évolution remarquable enterme d’interface est Metro: Dynamisme, clarté, simplicité, ergonomie, modernité. Tuiles, polices, animations, couleurs, photos, icônes, layout
  • 11. METRO !
  • 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. Metro Principles:
  • 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. Principle:Celebrate TypographyType is Beautiful, Not Just Legible.Clear, Straightforward Information Design.Uncompromising Sensitivity to Weight, Balance andScale
  • 16. Principle:Authentically DigitalDon’t Try to be What It’s NOTBe Direct
  • 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. PrinciplesClean, Light, Open, Fast Celebrate Typography Authentically Digital Content, Not Chrome
  • 19. Metro User Experience:Focuses on the individual and their tasks.Helps organize information and applications.
  • 20. Build delightful experienceBe inspired by Metro…but look for balance between the Metroprinciples and your own style
  • 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. TypographyMake words feel welcomePay attention to balance,weight & scale
  • 23. Make It Easy to UseFamiliar = Easy to use.Provide consistent and predictable experience.
  • 24. Du design au code…Les joies et périls de l’intégration…
  • 25. Les clefs de Metro Les formes icones
  • 26. Les clefs de Metro Les polices de caractères Segoe Arial Courier Verdana
  • 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. 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. Les clefs du Metro Les différentes parties Header Navigation Body Footer
  • 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. Icônes 4/5 Facebook PC Tweet Message Mail Photos Messenger “” Video Like Devices Outlook TV Txt Devices RSS Feeds Voicemail
  • 32. demo

×