• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Creating a Beautiful Windows Phone 7 Application
 

Creating a Beautiful Windows Phone 7 Application

on

  • 9,781 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
9,781
Views on SlideShare
3,142
Embed Views
6,639

Actions

Likes
2
Downloads
70
Comments
0

23 Embeds 6,639

http://gregdoesit.com 3298
http://gergelyorosz.com 3253
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.