Introduction to Metro UI

10,475 views

Published on

Introduction to Metro UI and my Skype concept for Windows Phone 7.
Event: WindowsPhone 7.5 Apps: 2-Day HACKATHON

1 Comment
28 Likes
Statistics
Notes
No Downloads
Views
Total views
10,475
On SlideShare
0
From Embeds
0
Number of Embeds
993
Actions
Shares
0
Downloads
0
Comments
1
Likes
28
Embeds 0
No embeds

No notes for slide

Introduction to Metro UI

  1. 1. Introduction to METRO UI
  2. 2. Who Am I? Maria Nasioti@Maria_Nas UX Designer at BugSense Expert Mobile App Designer Wannabe Jedi
  3. 3. METRO UIwhat is metro design principles metro ux metro in practice Metro is a design It’s It’s about content language modern, clean, fast and typography. and in motion
  4. 4. METRO UIdesign principles metro ux metro in practice what is metro Feels Fast and Responsive Focus on Primary Tasks Do a Lot with Very Little Fierce Reduction of Unnecessary Elements Fierce Reduction is not only about making clean Clean, light, fast Uis but also and first, about simplifying the application flow
  5. 5. METRO UIdesign principles metro ux metro in practice what is metro Remove Visuals that are Not Content Content is the UI - The star of the show is information/content, not UI controls or interface. Direct Interaction with the Content Content, not chrome
  6. 6. METRO UIdesign principles metro ux metro in practice what is metro Type is Beautiful, Not Just Legible Use typography in different sizes and different weights to convey structured information. Offers unique visual design possibilities Typography
  7. 7. METRO UIdesign principles metro ux metro in practice what is metro Feels Responsive and Alive Gives Context to Improve Usability Transition Between UI is as Important as the Design of the UI Adds Dimension and Depth Alive in motion
  8. 8. METRO UIdesign principles metro ux metro in practice what is metro Don’t Try to be What It’s NOT - Recreating objects from the physical world in a digital screen. Be Direct users care more about being able to consume information than having “representations of physical Authentically Digital world objects” inside their phones
  9. 9. METRO UImetro uxmetro in practice what is metrodesign principles Focuses on the Helps organize Personal, Relevant, individual and their information and Connected tasks applications
  10. 10. METRO UImetro uxmetro in practice what is metrodesign principles
  11. 11. METRO UImetro uxmetro in practice what is metrodesign principles Personal Relevant Connected Personal Weather surfaced Weather updated based Connected Weather for on the live tile in Star on your location your contacts
  12. 12. METRO UImetro in practice what is metrodesign principles metro ux Build delightful Play with colors and Use typography experience Minimum text size 13px Be inspired by METRO but look for balance between the ..delight the user Pay attention to METRO principles and your ..personalize experience balance, weight and scale own style
  13. 13. METRO UImetro in practice what is metrodesign principles metro ux Use motion to Use iconography Hardware delight the user but Hardware buttons Remember that pacing is Gestures important – the more you use Be consistent One hand usage it, the less special it becomes Test icons with user Touch size and spacing
  14. 14. METRO UImetro in practice what is metrodesign principles metro ux
  15. 15. METRO UImetro in practice what is metrodesign principles metro uxhttp://ux.artu.tv/?p=165
  16. 16. METRO UI
  17. 17. METRO UIstart tiles A refresh design better than icons. A tile is an easily recognizable visual shortcut for an application or its content that users can set in the phones start screen. Important! Surface information relevant to the application Multiple tile images should be visually consistent with each other and have a recognizable theme or style
  18. 18. METRO UIstart tiles Try and be flat, not glossy. Limit the use of words. Keep it simple. Do not use white as your background color. Do not try an use rounded corners within your backgrounds. If you use multiple tile images, they should be visually consistent with each other and have a recognizable theme or style.
  19. 19. METRO UIsplash screen Keep it simple Emphasize your Brand Play with motions
  20. 20. METRO UIpivotDisplay a set of things in different ways The pivot control provides a quick way to manage views or pages. It can be used for filtering large datasets, viewing multiple data sets, or switching application views or related content. The pivot control places them horizontally next to each other, and manages the left/right navigation of the individual pages
  21. 21. METRO UIpivot -2 -1 0 1 2
  22. 22. METRO UIpivot Important! The pivot control should be used only to display items or data of similar type. Never place a pivot control inside of a panorama control, or another pivot control. Pivot pages should not be used for task flow. Dont use controls that can pan or scroll inside a pivot control. Such as slider, toggles or map control.
  23. 23. METRO UIpanoramaPut multiple sources of info into one place The panorama control displays a view of items that can be panned side-to-side. It is a full-screen container and navigation model for an application.
  24. 24. METRO UIpanorama
  25. 25. METRO UI Important!panorama Use either a single color background or an image that spans the entire panorama but be careful with image because its very common the image principle do not match with the end and it looks ugly. Dont use controls that can pan or scroll inside a panorama control. Limit yourself to 5 sections if you use the panorama control
  26. 26. METRO UIpanorama
  27. 27. METRO UIpanorama
  28. 28. METRO UIpivot VS panorama Pivot Panorama Supports a larger number of "items" because the layout is simpler. Tends to create more visually stunning experiences Loading pivot item and unloading pivot item events Background images of any size make it easy to defer content automatically wrap property creation Horizontally oriented panorama More efficient use of screen items allow variably sized space content to flow smoothly portrait and landscape
  29. 29. METRO UIsingle page
  30. 30. METRO UIsingle page
  31. 31. METRO UI The application bar provides a placeapp bar to promote the most common tasks and views of the application. For less common tasks, applications can include a single menu launched from the application bar. An Application Menu is not required, but if you have one it is associated with the application bar.
  32. 32. METRO UIapp bar The context menu offers an additional way for the user to access specific tasks. The context menu should be used to express secondary or advanced actions to the user, never primary tasks, and may have no more than five items.
  33. 33. METRO UIapp bar The Application Bar always stays on the same edge of the display as the hardware buttons. Up to 4 icon buttons can be displayed in the App Bar but you could display down to 0 (zero) buttons if needed. If you don’t have icon buttons to display it’s better to switch to the Mini App Bar. http://ux.artu.tv/?p=236
  34. 34. METRO UICommon controls
  35. 35. METRO UITarget size recommended minimum touch target minimum touch target Minimum visual size for touchable item Minimum spacing between elements is 6px Visual size is 60%-100% of the touch target siz
  36. 36. Thank you! @Maria_Nas

×