The Metro design language for app

developers

W.Meints

Who am I?Willem MeintsLead developer

Info SupportProfessional Development Centre

http://www.fizzylogic.nl/

@wmeints

What is WP7?

ResourcesApplying

Concepts

Agenda

Introduction

C#

Windows Phone featuresCapacitive touch4 or more contact points

SensorsA-GPS, Accelerometer, Compass, Light, Proximity

Camera5 mega pixels or more

MultimediaCommon detailed specs, Codec acceleration

Memory256MB RAM or more, 8GB Flash or more

GPUDirectX 9 acceleration

CPUARMv7 Cortex/Scorpion or better

800

QV

GA

/ 4

80 H

VG

A

480 QVGA / 320 HVGA

Hardware buttons | Back, Start, Search

Concepts

What is Metro?

• Metro is inspired by the signs you see around you, every day you go to work.

ContentAuthentic

Typography Motion

The principles of Metro

Be authentic

• A phone is a digital device with unique capabilities.

–Don’t try to make your app look like the real thing–The app needs to fit only to your

phone–Embrace the digital format

Content over chromeJust because it’s a

phone doesn’t mean you don’t have a

canvas

Celebrate typography

• A major part of information is presented as text on a screen or a sign.

• Metro is not 100% about typography, but it plays a big role in presenting data.

• True to it’s authenticity, fonts are crisp and optimized for modern phone displays

Celebrate typography

• Metro applies typography by

–Using different font sizes–Varying the font weights

• Good typography is important for presenting structured information.

Get your interface in motion

• Motion gives a sense of space inside an otherwise

somewhat abstract environment.

–Am I moving from one end of the app to the opposite end?–Or maybe just a small step in the

process?

Get your interface in motion

• Motion also gives a sense of interactivity

–The user touches something that bends when he touches it. He will Immidiately think: “Hey, I can do something with it.”

Applying Metro design

Before you start

• Find the best idea to build an app– Not only will this bring alot of money

into your pocket, it also helps the rest of the process.

– A clear idea makes it easier to come up with a working solution later on.

Before you start - Journeys

• Idea: Record your personal walking statistics–Why? I have to walk 5KM every day

because of a chronic condition. I can’t reach that right now, so I want to see how things are progressing towards that goal.

– Key scenario: Record GPS coordinates and calculate the distance.

Creating the structure of the app

• Content first: Structure the data that you’re going to display so that it turns into information.

• A good information architecture will make or break your app!

Creating the structure of the app

• Split the behavior of the app from the data. – Structure the

behavior using storyboarding

– Structure the information using UML or any other language that allows you to organize data structures

Creating the structure of the app

Record new trip

View previous

trips

View statisticsRecord new trip

Navigation patterns immerse along the way!

View trip details

Creating the visual design

• Based on the information architecture you can create a visual design for your app.

• Don’t worry about branding just yet.

Creating the structure of the app

Record new trip

View previous

trips

View statisticsRecord new trip

Panorama control

Single page View trip details Pivot

Creating the visual design

• There’s three basic layout structures provided out of the box.

• The single page

Creating the visual design

• There’s three basic layout structures provided out of the box.

• The pivot control

Creating the visual design

• There’s three basic layout structures provided out of the box.

• The panorama

Adding motion

• Each move in the application has a corresponding animation:

– Jump between two conceptual spaces: Swivel– Drill down, without dead-end: Horizontal slide– Drill down with dead-end: Slide down

• Things that are interactive tilt backwards when you touch them.

Adding motion

• All the animations on Windows Phone 7 are done using time based storyboards.

–Most of them are actually premade for your convenience.

–Wait, let me just show you!

Branding your app

• Branding an app is a great idea! – Having a consistant look, helps the user

recognize they are in the right spot (or not).

– It can also help establish a pleasant memory of the company that’s behind the app if combined with a good experience.

Branding your app

• Tip: Users can choose an accent color. It’s their way of saying, this is my phone.

• If you can, incorporate it into your branding.

Resources

Useful resources

• Official Metro design guidelines: http://msdn.microsoft.com/en-us/library/hh202915(v=vs.92).aspx

• Series of blogposts on WP7 app design: http://ux.artu.tv/?page_id=190

Useful resources

• Wireframing toolkit: http://blogs.claritycon.com/windowsphone7/2011/01/12/wicked-wireframes-wp7-vector-ux-kit-3/

http://www.fizzylogic.nl/

@wmeints