Creating a Beautiful WP7 Application<br />GergelyOrosz<br />@GergelyOrosz<br />http://bit.ly/GergelyOrosz<br />gergely@ger...
GergelyOrosz<br />Silverlight / WPF / WP7<br />Visiblox: performant WP7 / SL / WPF charting component<br />Cocktail Flow: ...
What Makes an App Great<br />Designing Cocktail Flow<br />Creating a Beautiful WP7 Application<br />
What Makes an App Great<br />Designing Cocktail Flow<br />Creating a Beautiful WP7 Application<br />
What is Cocktail Flow?<br />Bartending app<br />2nd (UK) & 4th (US) highest rated app<br />Over 30.000 users<br />
What Makes an App Great?<br />
What is Cocktail Flow?<br />Bartending app<br />Focus on strong visuals<br />Lots of useful features<br />Updated regularl...
What is Cocktail Flow?<br />Cocktail Flow is an app which is dedicated to bring the experience of sitting in a bar and dri...
What makes a great app?<br />Great functionality<br />Great experience<br />New categories of apps<br />Tools<br />Experie...
Top rated apps on the platform<br />IloMilo<br />Cocktail Flow <br />4th & Mayor<br />TuneIn Radio<br />Thumba Photo Edito...
Top rated apps –Experience or Tools<br />IloMilo<br />4th & Mayor<br />Cocktail Flow <br />NinjaBoy+<br />Urban Dictionary...
Top rated free apps –Experience or Tools<br />4th & Mayor <br />Krashlander Free<br />NinjaBoy+<br />Urban Dictionary 7<br...
Top rated paid apps –Experience or Tools<br />IloMilo<br />Cocktail Flow<br />Fable: Coin Gold<br />Krashlander<br />Fruit...
We believe the future is a world of great experiences.<br />
Tools are easy to replace.Experiences are harder.<br />
What Makes an App Great<br />Designing Cocktail Flow<br />Creating a Beautiful WP7 Application<br />
Designing Cocktail Flow<br />Metro Recap<br />Getting Started<br />Planning<br />Inspiration<br />The Process<br />Designi...
Recap (what is Metro?)<br />Metro is clean<br />Metro is easy to navigate<br />Metro helps you make decisions faster<br />...
Reflecting on WP7<br />Tools should be metro<br />
Reflecting on WP7<br />Experiences should embrace metro<br />Innovate on top of metro<br />Plug headphones <br />
Designing Cocktail Flow - Planning<br />Experience<br />High reach<br />Early adopters<br />
Designing Cocktail Flow - The Process<br />Full visual plans<br />Rapid prototyping & iteration<br />
Designing Cocktail Flow - The Process<br />
Designing Cocktail Flow - Inspiration<br />WP7 != iPhone, Android<br />Design guidelines for Windows Phone- MSDN<br />YouT...
Designing Cocktail Flow – DesignDecisions<br />Don’t stick with black<br />Differentiate the app from the OS.<br />Feels „...
Designing Cocktail Flow – DesignDecisions<br />Spice up the UI<br />Use gradients<br />Gives „life”, „depth” to the scene<...
Designing Cocktail Flow – DesignDecisions<br />Spice up the UI<br />Templated buttons<br />Gradients, typography, icons<br...
Designing Cocktail Flow – DesignDecisions<br />Spice it up with images<br />Using images in menu items<br />
Designing Cocktail Flow – DesignDecisions<br />Spice it up with images <br />Use subtle background images<br />Differentia...
Designing Cocktail Flow – DesignDecisions<br />Spice it up with images<br />Background images<br />Dominant images for hea...
Designing Cocktail Flow – Design Decisions<br />Vary typography<br />Font sizes, font style<br />
Designing Cocktail Flow – DesignDecisions<br />Vary typography<br />Font sizes, font style<br />Segoe WP Bold, Light, Semi...
Designing Cocktail Flow – DesignDecisions<br />Embrace Metro in Motion<br />Cocktails flow in from the right<br />Familiar...
Designing Cocktail Flow – Performance<br />Numerous performance issues<br />Page transitions were slow<br />Some animation...
Designing Cocktail Flow – Resolving Perf.<br />Page transitions were slow <br />Took them out<br />Some animations were sl...
Designing Cocktail Flow -Summary<br />Don’t stick with black<br />Spice up the UI<br />Gradients, templated buttons<br />S...
What Makes an App Great<br />Designing Cocktail Flow<br />Creating a Beautiful WP7 Application<br />
Creating a Beautiful Application<br />Create experiences<br />Tools are good until a better one is out<br />Content (& fun...
Creating a Beautiful Application<br />Create a fluent user experience<br />Navigation<br />Easily discoverable<br />Usabil...
Creating a Beautiful Application - summary<br />Build experiences, not tools<br />Content, functionality, chrome<br />Use ...
© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be...
Upcoming SlideShare
Loading in...5
×

Creating a Beautiful Windows Phone 7 Application

11,750

Published on

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.

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
11,750
On Slideshare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
73
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Creating a Beautiful Windows Phone 7 Application

  1. 1.
  2. 2. Creating a Beautiful WP7 Application<br />GergelyOrosz<br />@GergelyOrosz<br />http://bit.ly/GergelyOrosz<br />gergely@gergelyorosz.com<br />
  3. 3. GergelyOrosz<br />Silverlight / WPF / WP7<br />Visiblox: performant WP7 / SL / WPF charting component<br />Cocktail Flow: WP7 application<br />Developed with Distinction Ltd<br />
  4. 4. What Makes an App Great<br />Designing Cocktail Flow<br />Creating a Beautiful WP7 Application<br />
  5. 5. What Makes an App Great<br />Designing Cocktail Flow<br />Creating a Beautiful WP7 Application<br />
  6. 6. What is Cocktail Flow?<br />Bartending app<br />2nd (UK) & 4th (US) highest rated app<br />Over 30.000 users<br />
  7. 7. What Makes an App Great?<br />
  8. 8. What is Cocktail Flow?<br />Bartending app<br />Focus on strong visuals<br />Lots of useful features<br />Updated regularly<br />
  9. 9. What is Cocktail Flow?<br />Cocktail Flow is an app which is dedicated to bring the experience of sitting in a bar and drinking beautiful cocktails to your mobile.<br />
  10. 10. What makes a great app?<br />Great functionality<br />Great experience<br />New categories of apps<br />Tools<br />Experiences<br />
  11. 11. Top rated apps on the platform<br />IloMilo<br />Cocktail Flow <br />4th & Mayor<br />TuneIn Radio<br />Thumba Photo Editor<br />Shazam<br />Bubble Jump<br />Netflix <br />
  12. 12. Top rated apps –Experience or Tools<br />IloMilo<br />4th & Mayor<br />Cocktail Flow <br />NinjaBoy+<br />Urban Dictionary 7<br />Bank of America<br />Shazam<br />TuneIn Radio<br />
  13. 13. Top rated free apps –Experience or Tools<br />4th & Mayor <br />Krashlander Free<br />NinjaBoy+<br />Urban Dictionary 7<br />Bank of America<br />Shazam<br />TuneIn Radio<br />
  14. 14. Top rated paid apps –Experience or Tools<br />IloMilo<br />Cocktail Flow<br />Fable: Coin Gold<br />Krashlander<br />Fruit Ninja<br />Triangula<br />Flight Control<br />
  15. 15. We believe the future is a world of great experiences.<br />
  16. 16. Tools are easy to replace.Experiences are harder.<br />
  17. 17. What Makes an App Great<br />Designing Cocktail Flow<br />Creating a Beautiful WP7 Application<br />
  18. 18. Designing Cocktail Flow<br />Metro Recap<br />Getting Started<br />Planning<br />Inspiration<br />The Process<br />Designing<br />Design Decisions<br />Performance<br />
  19. 19. Recap (what is Metro?)<br />Metro is clean<br />Metro is easy to navigate<br />Metro helps you make decisions faster<br />Metro is alive in motion<br />
  20. 20. Reflecting on WP7<br />Tools should be metro<br />
  21. 21. Reflecting on WP7<br />Experiences should embrace metro<br />Innovate on top of metro<br />Plug headphones <br />
  22. 22. Designing Cocktail Flow - Planning<br />Experience<br />High reach<br />Early adopters<br />
  23. 23. Designing Cocktail Flow - The Process<br />Full visual plans<br />Rapid prototyping & iteration<br />
  24. 24. Designing Cocktail Flow - The Process<br />
  25. 25. Designing Cocktail Flow - Inspiration<br />WP7 != iPhone, Android<br />Design guidelines for Windows Phone- MSDN<br />YouTube videos of demo apps<br />USGA Golf<br />Errr..?<br />
  26. 26. Designing Cocktail Flow – DesignDecisions<br />Don’t stick with black<br />Differentiate the app from the OS.<br />Feels „cleaner”<br />
  27. 27. Designing Cocktail Flow – DesignDecisions<br />Spice up the UI<br />Use gradients<br />Gives „life”, „depth” to the scene<br />
  28. 28. Designing Cocktail Flow – DesignDecisions<br />Spice up the UI<br />Templated buttons<br />Gradients, typography, icons<br />Users should recognize it’s a button<br />
  29. 29. Designing Cocktail Flow – DesignDecisions<br />Spice it up with images<br />Using images in menu items<br />
  30. 30. Designing Cocktail Flow – DesignDecisions<br />Spice it up with images <br />Use subtle background images<br />Differentiates the app from the OS.<br />Adds an extra touch<br />
  31. 31. Designing Cocktail Flow – DesignDecisions<br />Spice it up with images<br />Background images<br />Dominant images for headers<br />
  32. 32. Designing Cocktail Flow – Design Decisions<br />Vary typography<br />Font sizes, font style<br />
  33. 33. Designing Cocktail Flow – DesignDecisions<br />Vary typography<br />Font sizes, font style<br />Segoe WP Bold, Light, Semibold..<br />Helps to focus, less so boring<br />
  34. 34. Designing Cocktail Flow – DesignDecisions<br />Embrace Metro in Motion<br />Cocktails flow in from the right<br />Familiar but refreshing (and memorable)<br />
  35. 35. Designing Cocktail Flow – Performance<br />Numerous performance issues<br />Page transitions were slow<br />Some animations were slow<br />Load times were slow<br />Virtualized list was slow<br />
  36. 36. Designing Cocktail Flow – Resolving Perf.<br />Page transitions were slow <br />Took them out<br />Some animations were slow <br />Optimised them to be more gpu friendly<br />Load times were slow<br />„Loading” screens. Users are more patient. <br />Virtualized list (ListBox) was very slow <br />Paginated lists. No better solution found.<br />
  37. 37. Designing Cocktail Flow -Summary<br />Don’t stick with black<br />Spice up the UI<br />Gradients, templated buttons<br />Spice it up with images<br />Background images, images for menu items<br />Vary typography<br />Font sizes, colours, styles<br />Embrace Metro in motion<br />Optimize performance<br />
  38. 38. What Makes an App Great<br />Designing Cocktail Flow<br />Creating a Beautiful WP7 Application<br />
  39. 39. Creating a Beautiful Application<br />Create experiences<br />Tools are good until a better one is out<br />Content (& functionality) is king. Don’t ignore chrome though.<br />Users won’t tell you but they love (reasonable) chrome<br />Understand, use and embrace Metro<br />You’ll probably need a designer to embrace it<br />
  40. 40. Creating a Beautiful Application<br />Create a fluent user experience<br />Navigation<br />Easily discoverable<br />Usability<br />Intuitive to use<br />Observe how people use it without guidance<br />Performance<br />People notice performance issues, don’t notice if there aren’t any<br />
  41. 41. Creating a Beautiful Application - summary<br />Build experiences, not tools<br />Content, functionality, chrome<br />Use & embrace Metro<br />Create fluent user experiences<br />
  42. 42. © 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.<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×