gergely orosz @gergelyorosz [email protected] creating a beautiful wp7 application
TRANSCRIPT
Gergely Orosz
@GergelyOrosz
http://bit.ly/GergelyOrosz
Creating a Beautiful WP7 Application
Gergely Orosz
Silverlight / WPF / WP7
Visiblox: performant WP7 / SL / WPF charting component
Cocktail Flow: WP7 applicationDeveloped with Distinction Ltd
What Makes an App Great
Designing Cocktail Flow
Creating a Beautiful WP7 Application
What Makes an App Great
Designing Cocktail Flow
Creating a Beautiful WP7 Application
What is Cocktail Flow?
Bartending app
2nd (UK) & 4th (US) highest rated app
Over 30.000 users
What Makes an App Great?
What is Cocktail Flow?
Bartending app
Focus on strong visuals
Lots of useful features
Updated regularly
What is Cocktail Flow?
Cocktail Flow is an app which is dedicated to bring the experience of sitting in a bar and drinking beautiful cocktails to your mobile.
New categories of apps
Great functionalityGreat experience
What makes a great app?
ToolsExperiences
Top rated apps on the platform
IloMiloCocktail Flow 4th & MayorTuneIn RadioThumba Photo EditorShazamBubble JumpNetflix
Top rated apps – Experience or Tools
IloMilo4th & MayorCocktail Flow NinjaBoy+Urban Dictionary 7Bank of AmericaShazamTuneIn Radio
Top rated free apps – Experience or Tools
4th & Mayor Krashlander FreeNinjaBoy+Urban Dictionary 7Bank of AmericaShazamTuneIn Radio
Top rated paid apps – Experience or Tools
IloMiloCocktail FlowFable: Coin GoldKrashlanderFruit NinjaTriangulaFlight Control
We believe the future is a world of great experiences.
Tools are easy to replace.Experiences are harder.
What Makes an App Great
Designing Cocktail Flow
Creating a Beautiful WP7 Application
Designing Cocktail Flow
Metro RecapGetting Started
PlanningInspirationThe Process
DesigningDesign DecisionsPerformance
Recap (what is Metro?)Metro is cleanMetro is easy to navigateMetro helps you make decisions fasterMetro is alive in motion
Reflecting on WP7
Tools should be metro
Reflecting on WP7
Experiences should embrace metroInnovate on top of metro
Plug headphon
es
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 appsUSGA Golf
Errr..?
Designing Cocktail Flow – Design Decisions
Don’t stick with black
Differentiate the app from the OS.Feels „cleaner”
Designing Cocktail Flow – Design Decisions
Spice up the UIUse gradientsGives „life”, „depth” to the scene
Designing Cocktail Flow – Design Decisions
Spice up the UITemplated buttons
Gradients, typography, iconsUsers should recognize it’s a button
Designing Cocktail Flow – Design Decisions
Spice it up with images
Using images in menu items
Designing Cocktail Flow – Design Decisions
Spice it up with images
Use subtle background images
Differentiates the app from the OS.Adds an extra touch
Designing Cocktail Flow – Design Decisions
Spice it up with images
Background imagesDominant images for headers
Designing Cocktail Flow – Design Decisions
Vary typographyFont sizes, font style
Designing Cocktail Flow – Design Decisions
Vary typographyFont sizes, font styleSegoe WP Bold, Light, Semibold..Helps to focus, less so boring
Designing Cocktail Flow – Design Decisions
Embrace Metro in MotionCocktails flow in from the rightFamiliar but refreshing (and memorable)
Designing Cocktail Flow – PerformanceNumerous 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 blackSpice up the UI
Gradients, templated buttons
Spice it up with imagesBackground images, images for menu items
Vary typographyFont sizes, colours, styles
Embrace Metro in motionOptimize performance
What Makes an App Great
Designing Cocktail Flow
Creating a Beautiful WP7 Application
Creating a Beautiful ApplicationCreate 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 MetroYou’ll probably need a designer to embrace it
Creating a Beautiful Application
Create a fluent user experienceNavigation
Easily discoverable
UsabilityIntuitive to useObserve how people use it without guidance
PerformancePeople 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.