2. What Are We Going To Cover?
General Design Concepts and Guidelines
Navigating the Windows 8 Modern UI Experience
Some Apps Are Doing Modern UI Well
Some Apps Are Doing Modern UI Not So Well
What Does This Mean to Us?
2 Modern UI Style Overview / Jake Taylor / 8.24.2012
3. General Design Concepts
“Content is the heart of Metro MUI style apps, and
putting content before chrome is fundamental to the
design of Metro style apps.”
~ Microsoft
Clean and Open Layout
Clear Information Hierarchy
Leverage the Edge
Invest in a Great Tile
Design for Touch and Be Fast and Fluid
3 Modern UI Style Overview / Jake Taylor / 8.24.2012
4. General Design Concepts
Clean and Open Layout
Leave only the most relevant elements on screen.
Give content breathing room by removing lines, boxes, and unnecessary graphical effects like blurs and gradients.
Use open space to frame the content.
Limit navigational chrome that is persistently on screen, such as tabs. Let people focus on the current content, and
avoid distracting them with way-finding chrome.
Cinematic letterbox layout – Horizontal layouts instead of Vertical
*From Microsoft
engadget Homepage engadget Details Page
4 Modern UI Style Overview / Jake Taylor / 8.24.2012
5. General Design Concepts
Clear Information Hierarchy
Use size, weight, and color in text consistently to convey information on a piece of content's importance. The set of
variations should be small, so people can easily see how content fits together in the overall hierarchy.
*From Microsoft
Reference: Guidelines for text and typography Stockholm Travel Homepage
5 Modern UI Style Overview / Jake Taylor / 8.24.2012
6. General Design Concepts
Leverage the Edge
Place commands in the app bar, which can be brought up on demand through a swipe from the top or bottom edge,
and can be dismissed when users have completed their actions.
Leverage the charms, which can be brought up on demand through a swipe from the right edge, for invoking the
Search, Share, Devices, or Settings charms.
*From Microsoft
SkyDrive app bar Bing Sports app bar
6 Modern UI Style Overview / Jake Taylor / 8.24.2012
7. General Design Concepts
Invest in a Great Tile
“A tile is the front door into an app. Sitting on the Start screen, it is an extension of the app and can provide
much more personal and engaging information than a traditional icon. Invest in designing a great tile to draw
people into your app.”
~ Microsoft
Good Bad
7 Modern UI Style Overview / Jake Taylor / 8.24.2012
8. General Design Concepts
Design for Touch and Be Fast and Fluid
“Metro MUI style apps are designed to be touch first. They leverage the hands and
fingers for what they are great at, with comfort and ergonomics in mind.”
~ Microsoft
Leverage the Animation Library's set of scenario-specific animations, designed to
convey information.
Think Mobile First. How would I interact with this design on my Phone or Tablet?
8 Modern UI Style Overview / Jake Taylor / 8.24.2012
9. Navigating the Modern UI Experience
Start Screen Application Name
User Name and Profile Avatar
Tile based application launch
Zoom out
You still have the old desktop Horizontal scrollbar
9 Modern UI Style Overview / Jake Taylor / 8.24.2012
10. Navigating the Modern UI Experience
You can zoom out and name your groups of tiles
Click on the Zoom Out button in the lower right corner Right Click on a group of tiles to name them
Right Click on the Desktop
10 Modern UI Style Overview / Jake Taylor / 8.24.2012
11. Navigating the Modern UI Experience
You can use the app bar to pin/unpin tiles and make them large or small
Available actions for a single tile selected using Right Click Available actions when multiple tiles are selected
11 Modern UI Style Overview / Jake Taylor / 8.24.2012
12. Navigating the Modern UI Experience
Hot Spot/Hot Corner On Hover Menus
Hover against
the left side of
the screen Hover in the upper
right corner or
bottom right corner
Currently open of the screen
apps menu
Charms bar
12 Modern UI Style Overview / Jake Taylor / 8.24.2012
13. Navigating the Modern UI Experience
What is the Charms bar?
The charms bar can be accessed at anytime by hovering on the upper right or lower right corner of your screen. On a
tablet it would be a swipe from the right edge of the tablet.
Search is contextual to where you are. If your on the Start screen and search you’ll be searching your
entire computer, if your within an app you’ll be searching the content within the app.
If the content within an app is shareable this will be the easy way to share the content you are viewing
via any service you might have connected to your account. Twitter, Facebook, Mail, etc…
Will take you back to your Start screen
Allows you to print or send content to other windows 8 RT devices (phones & tablets)
Similar to the Search feature, Settings is contextual and will apply to where you are.
13 Modern UI Style Overview / Jake Taylor / 8.24.2012
14. Navigating the Modern UI Experience
Hot Corner On Hover Menus cont…
Hovering over the upper left corner will show you the last application you
used and you are able to left click and quickly cycle thru your open
applications
You will always be able to get back to the Start screen tiles by hovering
over the bottom left corner and using a left click
14 Modern UI Style Overview / Jake Taylor / 8.24.2012
15. Some Apps Are Doing Modern UI Well
15 Modern UI Style Overview / Jake Taylor / 8.24.2012
16. Some Apps Are Doing Modern UI Well
16 Modern UI Style Overview / Jake Taylor / 8.24.2012
17. Some Apps Are Doing Modern UI Well
17 Modern UI Style Overview / Jake Taylor / 8.24.2012
18. Some Apps Are Doing Modern UI Well
18 Modern UI Style Overview / Jake Taylor / 8.24.2012
19. Some Apps Are Doing Modern UI Well
19 Modern UI Style Overview / Jake Taylor / 8.24.2012
20. Some Apps Are Doing Modern UI Not So Well
20 Modern UI Style Overview / Jake Taylor / 8.24.2012
21. Some Apps Are Doing Modern UI Not So Well
21 Modern UI Style Overview / Jake Taylor / 8.24.2012
22. Some Apps Are Doing Modern UI Not So Well
22 Windows 8 UI Style Overview / Jake Taylor / 8.15.2012
23. What Does This Mean to Us?
23 Windows 8 UI Style Overview / Jake Taylor / 8.15.2012
24. What Does This Mean to Us?
Review the Modern UI online style guide to ensure you are leveraging inherit interactions
Design with content over chrome in mind, make use of typography and good imagery
Leverage areas like the app bar (for navigation or actions) and charms bar (for sharing)
When creating content layouts think horizontally instead of vertically
Think mobile first and design for touch (where applicable)
24 Windows 8 UI Style Overview / Jake Taylor / 8.15.2012
25. Bonus Resources – Axure MUI Library
25 Windows 8 UI Style Overview / Jake Taylor / 8.15.2012
26. Bonus Resources – Metro Studio 2
26 Windows 8 UI Style Overview / Jake Taylor / 8.15.2012
27. References
Modern UI Style Guide PDF:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465418.aspx
Designing UX for apps:
http://msdn.microsoft.com/en-us/library/windows/apps/hh779072.aspx
Make great Metro style apps:
http://msdn.microsoft.com/library/windows/apps/hh464920.aspx
Mobile First:
http://www.lukew.com/resources/mobile_first.asp
http://www.abookapart.com/products/mobile-first
MUI Axure Libraries:
http://netcraft.co.il/metrowidget/home.html
Metro Studio 2:
http://www.syncfusion.com/downloads/metrostudio
27