windows 8 modern ui design concepts

Jake Taylor

10.19.2012

Modern UI Style Overview

2 Modern UI Style Overview / Jake Taylor / 8.24.2012

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?


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


General Design ConceptsClean 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


General Design ConceptsClear Information HierarchyUse 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

http://msdn.microsoft.com/en-us/library/windows/apps/hh700394.aspx


General Design ConceptsLeverage 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


General Design ConceptsInvest 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


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?

http://www.lukew.com/resources/mobile_first.asp


Navigating the Modern UI Experience

Start Screen

Tile based application launch

User Name and Profile Avatar

Zoom outHorizontal scrollbar

Application Name

You still have the old desktop



You can zoom out and name your groups of tiles

Click on the Zoom Out button in the lower right cornerRight Click on the Desktop

Right Click on a group of tiles to name them



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



Hot Spot/Hot Corner On Hover Menus

Hover against the left side of the screen

Currently open apps menu

Hover in the upper right corner or bottom right corner of the screen

Charms bar


Navigating the Modern UI ExperienceWhat 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.



Hot Corner On Hover Menus cont…

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

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

22 Windows 8 UI Style Overview / Jake Taylor / 8.15.2012




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)


Bonus Resources – Axure MUI Library


Bonus Resources – Metro Studio 2

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.abookapart.com/products/mobile-first

MUI Axure Libraries:

http://netcraft.co.il/metrowidget/home.html

Metro Studio 2:

http://www.syncfusion.com/downloads/metrostudio





http://msdn.microsoft.com/library/windows/apps/hh464920.aspx












windows 8 modern ui design concepts

Documents

modern ui experienceyou

modern ui experiencewhat

modern ui experiencehot

thedesign of metro style

fluidmetro mui style

right edge

great tile design

general design conceptscontent