metro design language framework

8/13/2019 Metro Design Language framework

1/12

The Metro Design Language

2012 Finite Plane Studios Ltd 1


http://www.finiteplane.com

[email protected]

David Wheeler

The Metro design language


Background and influences

Design language principles

Fast and fluid

Typography as a 1st class citizen

Animation and motion

Touch and natural UI

Obey the grid

Chrome-less

Authentically digital

Call to arms!

Agenda


Windows reimagined


Applications reimagined


DemonstrationHello, Windows 8


Influences


2/12




Bauhaus and modern design

Swiss design

Cinematography

Influences


InfluencesBauhaus


Bauhaus

The new building of the future will be everythingin one form; architecture, sculpture and painting.


BauhausFunction can be beautiful

Wassily chair

Victorian chair


BauhausReduction to form


Ornament is a crime

Truth to materials

Form follows function

International style*

* Term coined by Phillip Johnson and Henr y-Russell Hitchcock, 1932

Ornament can no longer be borne by someonewho exists at our level of culture.


3/12




Ornament is a crime?Not always


Ornament is a crime?Maybe


Ornament is a crime?Maybe


Function can be beautiful


InfluencesSwiss design (International typographic style)


Evolves from Bauhaus and modernism in architecture

A style of typography that favours

Cleanliness

Readability

Objectivity

Key features

Sans-serif typefaces

Ragged right text (as opposed to justified)

Use of photos instead of illustrations

Bring typography into the design itself

Swiss designInternational typographic style


4/12




P.

Mormerat,1961


CarloL.

Vivarelli,1954


ErikNitsche,ca.1

955


JosefMuller-Brockmann,

1960


Way finding


Way finding


5/12




Way finding


Life is busy


InfluencesCinematography


Essence of motion using typography

e.g. taking a movie soundtrack and showing it through text

Search on YouTube, Google or Bing for "kinetic typography"

Some examples that are cool

Nor th by Nor thwest http://bit.ly/hZ9A2h

Catch me if you can http://bit.ly/cWtjxE

General http://bit.ly/rgb52M

Kinetic typography


Reduce to the

, ,

Give it


Metro style design principles


6/12




Show pride in craftsmanship

Be fast and fluid

Be authentically digital

Do more with less

Win as one

Metro design principles


Sweat the details

Make using apps safe and reliable

Use balance, symmetry and hierarchy to foster trust

Align to the grid

Show pride in craftsmanship


Align to the gridCore sizes

Minimum dimensions

1024px

768px

Baseline dimensions

1024px (min)

1366px

320px


Align to the gridTouch independent pixels

A Rectangle with size 1366 x 768


Grid is divided into units

1 unit = 20px by 20px

1 subunit = 5px by 5px

At baseline size the grid is 68.25 by 38.5 units

Align to the gridThe grid defined


Align to the gridThe content area

7

units

6 units


7/12




Align to the gridThe header area

5

units

to

baseline

Semper ubi sub ubi (42pt font)


Align to the gridThe left margin

Semper ubi sub ubi (42pt font)

6 units


Text should align on baselines

Easy to read

Even if text is of different sizes

Microsoft has some very detailed guidelines on this

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

Align to the typographic gridRemember beautiful typography


Follow the Windows 8 silhouette

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


Games might not follow the grid


DemonstrationAuthentically digital


8/12




Be responsive to user interaction; be ready for the next one

Design for touch and intuitive interaction

Delight your users with motion

Create a UI that is immersive and compelling

Be fast and fluid


TouchSend in the manual!

Swipe toturn page


Touch"But it's a computer!"


TouchHumans hold tablets in their hands


Mouse is disconnected from the UI

Touch is directly connected to the objects on the screen

Object needs to respond to touch immediately

User only has one mouse (typically)

User might have many fingers and thumbs

Landscape / portrait orientation

Lying on your side in bed reading a book might still be por trait

TouchWhy touch is not just a mouse with a fat pointer


TouchThe language

Hold to learn

Tap forpr imary action Sl ide to pan

Swipe to select,command or move

Zoom RotateApplicationcommands

Systemcommands


9/12




Touch is a whole new language


You must design for touch


Touch isn't better than mouse just different


DemonstrationFast and fluid


Connect to the cloud so users can be connected to each other

Be dynamic and alive with communication

Use typography beautifully

Use bold, vibrant colours

Use motion meaningfully

Be authentically digital


Be authentically digitalThis isn't digital


10/12




Be authentically digitalThese aren't digital


DemonstrationAuthentically digital


Be great at something instead of mediocre at many things

Put content before chrome

Be visually focused and direct

Let people get immersed in what they love they will explore the rest

Inspire confidence in users

Do more with less


DemonstrationDo more with less


Fit into the UI model

Reduce redundancy in your UI

Work with other apps to complete scenarios

Use Microsoft's tools and templates to promote consistency

Win as one


Mae'n dog spiser le chien mundo


11/12




Why is Solitaire on Windows?


DemonstrationWin as one


Metro is a design language

Five core principles

Emphasis on modern design

Clean, authentic, beautiful, energetic, vibrant, connected

Embracing Metro takes some doing

This is not easy

This is not for everyone

Summary


Avoid not invented here syndrome

Use the Visual Studio templates

Use the animation library and built in controls

Get a touch-based device

The simulator is good, but not good enough if you intend to ship

Design tailored layouts for the different views

Design for touch

Embrace the contracts for settings, sharing, search, etc.

SummarySpecific recommendations


Places content before chrome

Is fast and fluid

Snaps and scales beautifully

Uses contracts appropriately

Has a great tile

Feels connected and alive

Roams to the cloud

Embraces the Metro design principles

Summary8 tenets of a great Metro app


Read the UX design guidelines


12/12




http://www.finiteplane.com

[email protected]

David Wheeler

Thanks for comingDon't forget to download the slides at

metro design language framework

Documents