Creating a Beautiful Windows Phone 7 Application

Creating a Beautiful WP7 Application
GergelyOrosz
@GergelyOrosz
http://bit.ly/GergelyOrosz
gergely@gergelyorosz.com

GergelyOrosz
Silverlight / WPF / WP7
Visiblox: performant WP7 / SL / WPF charting component
Cocktail Flow: WP7 application
Developed with Distinction Ltd

What Makes an App Great
Designing Cocktail Flow

What is Cocktail Flow?
Bartending app
2nd (UK) & 4th (US) highest rated app
Over 30.000 users

What Makes an App Great?

Bartending app
Focus on strong visuals
Lots of useful features
Updated regularly

Cocktail Flow is an app which is dedicated to bring the experience of sitting in a bar and drinking beautiful cocktails to your mobile.

What makes a great app?
Great functionality
Great experience
New categories of apps
Tools
Experiences

Top rated apps on the platform
IloMilo
Cocktail Flow
4th & Mayor
TuneIn Radio
Thumba Photo Editor
Shazam
Bubble Jump
Netflix

Top rated apps –Experience or Tools
IloMilo
4th & Mayor
Cocktail Flow
NinjaBoy+
Urban Dictionary 7
Bank of America
Shazam
TuneIn Radio

Top rated free apps –Experience or Tools
4th & Mayor
Krashlander Free
NinjaBoy+
Urban Dictionary 7
Bank of America
Shazam
TuneIn Radio

Top rated paid apps –Experience or Tools
IloMilo
Cocktail Flow
Fable: Coin Gold
Krashlander
Fruit Ninja
Triangula
Flight Control

We believe the future is a world of great experiences.

Tools are easy to replace.Experiences are harder.

Metro Recap
Getting Started
Planning
Inspiration
The Process
Designing
Design Decisions
Performance

Recap (what is Metro?)
Metro is clean
Metro is easy to navigate
Metro helps you make decisions faster
Metro is alive in motion

Reflecting on WP7
Tools should be metro

Reflecting on WP7
Experiences should embrace metro
Innovate on top of metro
Plug headphones

Designing Cocktail Flow - Planning
Experience
High reach
Early adopters

Designing Cocktail Flow - The Process
Full visual plans
Rapid prototyping & iteration

Designing Cocktail Flow - The Process

Designing Cocktail Flow - Inspiration
WP7 != iPhone, Android
Design guidelines for Windows Phone- MSDN
YouTube videos of demo apps
USGA Golf
Errr..?

Designing Cocktail Flow – DesignDecisions
Don’t stick with black
Differentiate the app from the OS.
Feels „cleaner”

Spice up the UI
Use gradients
Gives „life”, „depth” to the scene

Spice up the UI
Templated buttons
Gradients, typography, icons
Users should recognize it’s a button

Spice it up with images
Using images in menu items

Use subtle background images
Differentiates the app from the OS.
Adds an extra touch

Background images
Dominant images for headers

Designing Cocktail Flow – Design Decisions
Vary typography
Font sizes, font style

Vary typography
Font sizes, font style
Segoe WP Bold, Light, Semibold..
Helps to focus, less so boring

Embrace Metro in Motion
Cocktails flow in from the right
Familiar but refreshing (and memorable)

Designing Cocktail Flow – Performance
Numerous performance issues
Page transitions were slow
Some animations were slow
Load times were slow
Virtualized list was slow

Designing Cocktail Flow – Resolving Perf.
Page transitions were slow
Took them out
Some animations were slow
Optimised them to be more gpu friendly
Load times were slow
„Loading” screens. Users are more patient.
Virtualized list (ListBox) was very slow
Paginated lists. No better solution found.

Designing Cocktail Flow -Summary
Don’t stick with black
Spice up the UI
Gradients, templated buttons
Background images, images for menu items
Vary typography
Font sizes, colours, styles
Embrace Metro in motion
Optimize performance

Creating a Beautiful Application
Create experiences
Tools are good until a better one is out
Content (& functionality) is king. Don’t ignore chrome though.
Users won’t tell you but they love (reasonable) chrome
Understand, use and embrace Metro
You’ll probably need a designer to embrace it

Creating a Beautiful Application
Create a fluent user experience
Navigation
Easily discoverable
Usability
Intuitive to use
Observe how people use it without guidance
Performance
People notice performance issues, don’t notice if there aren’t any

Creating a Beautiful Application - summary
Build experiences, not tools
Content, functionality, chrome
Use & embrace Metro
Create fluent user experiences

© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

http://gregdoesit.com	3298
http://gergelyorosz.com	127
http://www.gregdoesit.com	51
url_unknown	2
http://webcache.googleusercontent.com	2
http://abtasty.com	2
http://translate.googleusercontent.com	2
http://smtp.gregdoesit.com	1
http://imap.gregdoesit.com	1
http://prlog.ru	1
http://www.slideshare.net	1

Creating a Beautiful Windows Phone 7 Application

by Gergely Orosz

Accessibility

Categories

Upload Details

Usage Rights

11 Embeds 3,488

Statistics

Creating a Beautiful Windows Phone 7 Application Presentation Transcript