Metro app design

2,451 views

Published on

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

Metro app design

  1. 1. Tan Chun Siong Metro Design Step-By-Step www.tanchunsiong.com
  2. 2. Resolution & Deadzones
  3. 3. Resolution1246 x 1366 x 768718Deadzones
  4. 4. Title extends … ResolutioDeadzones n 1246 x 1366 x 768 718 Deadzone s Deadzones
  5. 5. App Bar Left Right Local Global
  6. 6. Typography
  7. 7. Different Typography HELVECTICA GILL SANS ROCKWELL SEGOE UI FUTU GARAMOND LIGHT MUSEO REGULAR RA FERTIGO FRUTIGE R
  8. 8. Typography Layout DescriptionDream Build Launch The choice of fonts are important to the first impression and design ofIs a continuous campaign to your application. Alignment in this textbox helps to create a gridhelp developers get onboard effect.on Windows 8 Varying the sizes of fonts and types of fonts can make it interesting forYou are currently attending a workshop on Metro Design the users. Example using BOLDStep-By-Step in Microsoft Singapore, One Marina effects andBoulevard. This workshop is part of the Dream Build Launch increasinghackathon. can give 1 2012 different emphasize. June Use orientation to your advantage toToday’s Date: text, grouping them base on types. backgroun Example date.d 6 Putting color behind text gives it a feel of title.
  9. 9. Grids andWhitespace DescriptionDream Build Launch The choice of fonts are important to the first impression and design ofIs a continuous campaign to your application. Alignment in this textbox helps to create a gridhelp developers get onboard effect.on Windows 8 Varying the sizes of fonts and types of fonts can make it interesting forYou are currently attending a workshop on Metro Design the users. Example using BOLDStep-By-Step in Microsoft Singapore, One Marina effects andBoulevard. This workshop is part of the Dream Build Launch increasinghackathon. can give 1 2012 different emphasize. June Use orientation to your advantage toToday’s Date: text, grouping them base on types. backgroun Example date.d 6 Putting color behind text gives it a feel of title.
  10. 10. Simplicity
  11. 11. Graphics and Colors Colors brings out life in your application Color Schemes are important. They should not be too colorful hence making it distracting for the user Use similar colors to convey messages such as actionable items Nexthttp://colorschemedesigner.com/
  12. 12. Always Start off with Graphics Schemes Theme: Typography related Theme: Time related Theme: Exercise related http://www.cssdrive.com/imagepalette/index.php
  13. 13. Either fill graphics or corner it Something Maybe there is more text here There could be even more text here, Description which would describe more of Just make sure that they have enough here the list of items at the bottom White space in between more things there The text here tries to match the colors of the overlay at Makes the layout a bit more the bottom of the list of item interesting Lorem Lorem Lorem Lorem Lorem L Ipsum Ipsum Ipsum Ipsum Ipsum Ip
  14. 14. Either fill graphics or corner it Something Maybe there is more text here There could be even more text here, Description which would describe more of Just make sure that they have enough here the list of items at the bottom White space in between The text here tries to match more things the colors of the overlay at the bottom of the list of item there Makes the layout a bit more interesting AM 0 9 :3 5 PM
  15. 15. Either fill graphics or corner it

×