Gergely Orosz

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

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

4. What Makes an App Great • Designing Cocktail Flow • Creating a Beautiful WP7 Application

5. What Makes an App Great • Designing Cocktail Flow • Creating a Beautiful WP7 Application

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

7. What Makes an App Great?

8. What is Cocktail Flow? • Bartending app • Focus on strong visuals • Lots of useful features • Updated regularly

9. 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.

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

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

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

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

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

15. We believe the future is a world of great experiences.

16. Tools are easy to replace.Experiences are harder.

17. What Makes an App Great • Designing Cocktail Flow • Creating a Beautiful WP7 Application

18. Designing Cocktail Flow • Metro Recap • Getting Started • Planning • Inspiration • The Process • Designing • Design Decisions • Performance

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

20. Reflecting on WP7 • Tools should be metro

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

22. Designing Cocktail Flow - Planning • Experience • High reach • Early adopters

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

24. Designing Cocktail Flow - The Process

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

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

27. Designing Cocktail Flow – DesignDecisions • Spice up the UI • Use gradients • Gives „life”, „depth” to the scene

28. Designing Cocktail Flow – DesignDecisions • Spice up the UI • Templated buttons • Gradients, typography, icons • Users should recognize it’s a button

29. Designing Cocktail Flow – DesignDecisions • Spice it up with images • Using images in menu items

30. Designing Cocktail Flow – DesignDecisions • Spice it up with images • Use subtle background images • Differentiates the app from the OS. • Adds an extra touch

31. Designing Cocktail Flow – DesignDecisions • Spice it up with images • Background images • Dominant images for headers

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

33. Designing Cocktail Flow – DesignDecisions • Vary typography • Font sizes, font style • Segoe WP Bold, Light, Semibold.. • Helps to focus, less so boring

34. Designing Cocktail Flow – DesignDecisions • Embrace Metro in Motion • Cocktails flow in from the right • Familiar but refreshing (and memorable)

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

36. 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.

37. 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

38. What Makes an App Great • Designing Cocktail Flow • Creating a Beautiful WP7 Application

39. 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

40. 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

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

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.