Creating a Beautiful Windows Phone 7 Application
Upcoming SlideShare
Loading in...5
×
 

Creating a Beautiful Windows Phone 7 Application

on

  • 10,118 views

Among the many gorgeous applications on Windows Phone 7, surely Cocktail Flow has to be right out at the front. ...

Among the many gorgeous applications on Windows Phone 7, surely Cocktail Flow has to be right out at the front.

The Cocktail Flow team will take us through the evolution of their application, the challenges, design decisions and solutions they came up with.

Statistics

Views

Total Views
10,118
Views on SlideShare
3,255
Embed Views
6,863

Actions

Likes
2
Downloads
70
Comments
0

23 Embeds 6,863

http://gergelyorosz.com 3477
http://gregdoesit.com 3298
http://www.gregdoesit.com 51
http://reader.aol.com 5
http://translate.googleusercontent.com 5
http://prlog.ru 4
http://webcache.googleusercontent.com 3
http://imap.www.gergelyorosz.com 2
http://abtasty.com 2
url_unknown 2
http://smtp.gergelyorosz.com 2
http://pop.gergelyorosz.com 1
http://cloud.feedly.com 1
http://localhost&_=1372325300584 HTTP 1
http://localhost&_=1372318661172 HTTP 1
http://localhost&_=1372318924879 HTTP 1
http://localhost&_=1371484502957 HTTP 1
http://localhost&_=1371482912605 HTTP 1
http://localhost&_=1369757877229 HTTP 1
http://imap.gregdoesit.com 1
http://smtp.gregdoesit.com 1
http://www.slideshare.net 1
http://feedly.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Creating a Beautiful Windows Phone 7 Application Creating a Beautiful Windows Phone 7 Application Presentation Transcript

  • 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
    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.
  • 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.
  • What Makes an App Great
    Designing Cocktail Flow
    Creating a Beautiful WP7 Application
  • Designing Cocktail Flow
    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”
  • Designing Cocktail Flow – DesignDecisions
    Spice up the UI
    Use gradients
    Gives „life”, „depth” to the scene
  • Designing Cocktail Flow – DesignDecisions
    Spice up the UI
    Templated buttons
    Gradients, typography, icons
    Users should recognize it’s a button
  • Designing Cocktail Flow – DesignDecisions
    Spice it up with images
    Using images in menu items
  • Designing Cocktail Flow – DesignDecisions
    Spice it up with images
    Use subtle background images
    Differentiates the app from the OS.
    Adds an extra touch
  • Designing Cocktail Flow – DesignDecisions
    Spice it up with images
    Background images
    Dominant images for headers
  • Designing Cocktail Flow – Design Decisions
    Vary typography
    Font sizes, font style
  • Designing Cocktail Flow – DesignDecisions
    Vary typography
    Font sizes, font style
    Segoe WP Bold, Light, Semibold..
    Helps to focus, less so boring
  • Designing Cocktail Flow – DesignDecisions
    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
    Spice it up with images
    Background images, images for menu items
    Vary typography
    Font sizes, colours, styles
    Embrace Metro in motion
    Optimize performance
  • What Makes an App Great
    Designing Cocktail Flow
    Creating a Beautiful WP7 Application
  • 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.