the metro design language for app developers
TRANSCRIPT
![Page 1: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/1.jpg)
The Metro design language for app
developers
W.Meints
![Page 2: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/2.jpg)
Who am I?Willem MeintsLead developer
Info SupportProfessional Development Centre
http://www.fizzylogic.nl/
@wmeints
![Page 3: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/3.jpg)
What is WP7?
ResourcesApplying
Concepts
Agenda
![Page 4: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/4.jpg)
Introduction
![Page 5: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/5.jpg)
C#
![Page 6: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/6.jpg)
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
![Page 7: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/7.jpg)
Concepts
![Page 8: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/8.jpg)
What is Metro?
• Metro is inspired by the signs you see around you, every day you go to work.
![Page 9: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/9.jpg)
ContentAuthentic
Typography Motion
The principles of Metro
![Page 10: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/10.jpg)
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
![Page 11: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/11.jpg)
Content over chromeJust because it’s a
phone doesn’t mean you don’t have a
canvas
![Page 12: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/12.jpg)
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
![Page 13: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/13.jpg)
Celebrate typography
• Metro applies typography by
–Using different font sizes–Varying the font weights
• Good typography is important for presenting structured information.
![Page 14: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/14.jpg)
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?
![Page 15: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/15.jpg)
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.”
![Page 16: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/16.jpg)
Applying Metro design
![Page 17: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/17.jpg)
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.
![Page 18: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/18.jpg)
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.
![Page 19: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/19.jpg)
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!
![Page 20: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/20.jpg)
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
![Page 21: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/21.jpg)
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
![Page 22: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/22.jpg)
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.
![Page 23: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/23.jpg)
Creating the structure of the app
Record new trip
View previous
trips
View statisticsRecord new trip
Panorama control
Single page View trip details Pivot
![Page 24: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/24.jpg)
Creating the visual design
• There’s three basic layout structures provided out of the box.
• The single page
![Page 25: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/25.jpg)
Creating the visual design
• There’s three basic layout structures provided out of the box.
• The pivot control
![Page 26: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/26.jpg)
Creating the visual design
• There’s three basic layout structures provided out of the box.
• The panorama
![Page 27: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/27.jpg)
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.
![Page 28: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/28.jpg)
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!
![Page 29: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/29.jpg)
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.
![Page 30: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/30.jpg)
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.
![Page 31: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/31.jpg)
Resources
![Page 32: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/32.jpg)
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
![Page 33: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/33.jpg)
Useful resources
• Wireframing toolkit: http://blogs.claritycon.com/windowsphone7/2011/01/12/wicked-wireframes-wp7-vector-ux-kit-3/
![Page 34: The metro design language for app developers](https://reader033.vdocuments.net/reader033/viewer/2022052903/55789770d8b42aaf518b4a8d/html5/thumbnails/34.jpg)
http://www.fizzylogic.nl/
@wmeints