What makes your app grouse - #appfest Sydney
•Télécharger en tant que PPTX, PDF•
8 j'aime•1,164 vues
My design keynote presentation from Microsoft #appfest in Sydney February 2013
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (15)
En vedette
En vedette (20)
Similaire à What makes your app grouse - #appfest Sydney
Similaire à What makes your app grouse - #appfest Sydney (20)
Plus de Shane Morris
Plus de Shane Morris (12)
Dernier
Dernier (20)
What makes your app grouse - #appfest Sydney
- 1. WHAT MAKES YOUR APP GROUSE? Shane Morris shane@automaticstudio.com.au @shanemo
- 2. I KNOW, YOU JUST WANT TO START CODING
- 3. FEATURES- OUT? OR PEOPLE-IN?
- 4. A BIT ABOUT ME
- 5. SOME GROUSE APPS COCKTAIL FLOW (WINDOWS 8) QANTAS (WINDOWS PHONE)
- 6. WHAT MAKES THOSE APPS GROUSE?
- 7. WHAT MAKES THOSE APPS GROUSE? WHAT WE SAW MINIMALISM GROUSE: VISUAL VISUALLY FUNCTIONAL FUNCTIONALLY STANDARDS CONSISTENCY DISCOVERABILITY ORIENTATION SHALLOW NAVIGATION HEADINGS BACK TRANSITIONS
- 8. PETER MERHOLZ A GROUSE USER EXPERIENCE
- 9. A GROUSE USER EXPERIENCE THE RIGHT… Conceptual IDEA design (Start here) Information STRUCTURE design INTERFACE Interaction design VISUALS Visual design (THEN CODE… )
- 10. „BEST APP‟ STATEMENT CONCEPTUAL DESIGN
- 11. “MY APP IS THE BEST APP FOR…” DO ONE THING WELL
- 12. EXERCISE MY APP IS THE BEST APP FOR…
- 13. “DO MORE WITH LESS” WINDOWS DESIGN PRINCIPLE
- 14. A GROUSE USER EXPERIENCE THE RIGHT… Conceptual IDEA design (Start here) Information STRUCTURE design INTERFACE Interaction design VISUALS Visual design (THEN CODE… )
- 15. PROCESS PLANNING YOUR APP‟S UX
- 16. PROCESS PLANNING YOUR APP‟S UX
- 17. PROCESS PLANNING YOUR APP‟S UX 1. DECIDE WHAT YOUR APP IS GREAT AT 2. DECIDE WHAT USER ACTIVITIES TO SUPPORT 3. DECIDE WHAT FEATURES TO INCLUDE 4. DECIDE HOW TO MONETIZE YOUR APP 5. DESIGN THE UI FOR YOUR APP 6. MAKE A GOOD FIRST IMPRESSION 7. PROTOTYPE AND VALIDATE YOUR DESIGN msdn.microsoft.com/en-US/library/windows/apps/hh465427
- 18. PROCESS PLANNING YOUR APP‟S UX 1. DECIDE WHAT YOUR APP IS GREAT AT 2. DECIDE WHAT USER ACTIVITIES TO SUPPORT 3. DECIDE WHAT FEATURES TO INCLUDE 4. DECIDE HOW TO MONETIZE YOUR APP 5. DESIGN THE UI FOR YOUR APP 6. MAKE A GOOD FIRST IMPRESSION 7. PROTOTYPE AND VALIDATE YOUR DESIGN msdn.microsoft.com/en-US/library/windows/apps/hh465427
- 19. EXERCISE LIST ALL THE THINGS SCENARIOS USERS CAN COMPLETE WITH YOUR APP. ALL SENTENCES START WITH “USERS CAN…”
- 20. NOW YOU HAVE YOUR USER SCENARIOS… PLEASE REMOVE HALF EXAMINE YOUR „BEST APP‟ STATEMENT
- 21. INFORMATION DESIGN
- 22. Conceptual INFORMATION design DESIGN Information design
- 23. NAVIGATION
- 24. INFORMATION DESIGN HIERARCHICAL NAVIGATION Hub Section Detail
- 25. INFORMATION DESIGN „DEFAULT‟ NAVIGATION STRUCTURE WINDOWS 8 WINDOWS PHONE HUB PANORAMA SECTION PIVOT DETAIL PAGE
- 26. HUBS AND PANORAMAS
- 27. INFORMATION DESIGN HUB / PANORAMA TIPS THE APP‟S VALUE PROPOSITION SHOULD BE NON-STANDARD GROUP SIZES ARE OK IMMEDIATELY CLEAR PAY ATTENTION TO READING ORDER THINK “MAGAZINE COVER” A LIST IS BETTER IF THERE IS AN IMPLIED REFLECT THE START SCREEN TILES AND ORDER. CONTENT MINIMISE INTERACTIVITY MAKE IT CLEAR THERE IS MORE CONTENT OFF THE EDGE AVOID GESTURES THAT INTERFERE WITH PANNING THE PANORAMA “PEEK” DON‟T BE PREDICTABLE IF CONTENT IS NOT DON‟T USE CONTROLS TO NAVIGATE WITHIN THE PREDICTABLE PANORAMA YOU DON‟T HAVE TO DEFAULT TO THE FIRST PANEL (PHONE)
- 28. EXERCISE SKETCH OUT YOUR NAVIGATION STRUCTURE LOOK AT YOUR KEY SCENARIOS
- 29. INTERACTION DESIGN
- 30. Conceptual design INTERACTION Information design DESIGN Interaction design
- 31. INTERACTION DESIGN TIPS CONTENT AS CONTROLS TOUCH “DIRECT MANIPULATION” TARGET SIZE REACH MOVE OTHER COMMANDS OFF THE CANVAS OCCLUSION Charms App Bar Context menus …Except where you can‟t…
- 32. VISUAL DESIGN
- 33. Conceptual design Information design VISUAL DESIGN Interaction design Visual design
- 34. VISUAL MINIMALISM EVERY ELEMENT SHOULD BE ABLE TO JUSTIFY IT‟S EXISTENCE TO SOLVE A LAYOUT PROBLEM, TRY REMOVING PIXELS, NOT ADDING THEM
- 35. VISUAL DESIGN PRO TIP leave s**t out
- 36. VISUAL DESIGN PRO TIP turn s**t down
- 37. TEMPLATES AND GRIDS THE STANDARD TEMPLATES ARE A GOOD START
- 42. VISUAL DESIGN PRO TIP line s**t up
- 43. VISUAL DESIGN PRO TIP space s**t evenly
- 44. VISUAL HIERARCHY USE VISUALS TO EXPLAIN THE STRUCTURE OF YOUR PAGE
- 45. VISUAL DESIGN VISUAL HIERARCHY CASE COMMUNICATE A CLEAR HIERARCHY OF INFORMATION TOOLS size TYPOGRAPHY size weight colour alignment alignment weight ALIGNMENT proximity proximity WHITESPACE colour colour
- 46. VISUAL DESIGN VISUAL HIERARCHY USE TYPOGRAPHY TO COMMUNICATE THE HIERARCHY OF INFORMATION Experiment with font weight and colour, rather than introducing additional font sizes. TAKE ADVANTAGE OF BUILT-IN STYLES IN EXPRESSION BLEND / VISUAL STUDIO
- 47. VISUAL DESIGN PRO TIP group s**t and sub-group s**t
- 48. ELEGANT VARIATION STRIVE FOR MEANINGFUL VARIETY
- 51. VISUAL DESIGN PRO TIP mix s**t up
- 52. COLOUR
- 54. VISUAL DESIGN HOW MANY COLOURS SHOULD I USE? RATE YOURSELF AS A GRAPHIC DESIGNER 1 THAT‟S HOW MANY COLOURS YOU SHOULD USE 5 (PLUS BLACK AND WHITE) (S**T) (GROUSE)
- 55. HOW MANY COLOURS SHOULD I USE? BUT I REALLY NEED MORE COLOURS! USE SHADES OF THE ONE COLOUR KULER.ADOBE.COM
- 56. VISUAL DESIGN PRO TIP you don‟t need a s**tload of colours
- 57. FOREGROUND AND BACKGROUND COLOURS COOL COLOURS IN THE BACKGROUND HOT COLOURS IN THE FOREGROUND
- 58. VISUAL DESIGN PRO TIP hot colours look s**thouse in the background
- 59. FONTS
- 60. VISUAL DESIGN HOW MANY FONTS SHOULD I USE? RATE YOURSELF AS A GRAPHIC DESIGNER 1 (S**T) 1 5 (GROUSE)
- 61. VISUAL DESIGN WHAT FONTS SHOULD I USE? WINDOWS PHONE STANDARD FONT SIZES AND WEIGHTS ARE SEGOE WP PROVIDED IN THE TEMPLATES DON‟T VARY FROM THEM WINDOWS 8 IF YOU HAVE A COMPANY/BRAND FONT SEGOE UI YOU CAN USE IT FOR MAJOR HEADINGS… CAMBRIA if it is easy to distinguish from Segoe Reading CALLIBRI Reading and Writing
- 63. VISUAL DESIGN PRO TIP segoe is the s**t
- 64. BLAND APP? YOUR APP LOOKS GROUSE WITH A BEAUTIFUL PHOTO IN THE BACKGROUND
- 65. VISUAL DESIGN PRO TIP get a s**t-hot photo
- 66. RECAP
- 67. GROUSE APPS PRO TIPS LEAVE S**T OUT PEOPLE-IN, NOT FUNCTIONS-OUT TURN S**T DOWN FOLLOW THE GUIDELINES! LINE S**T UP DESIGN.WINDOWS.COM DEV.WINDOWSPHONE.COM/DESIGN SPACE S**T EVENLY GROUP S**T AND SUB-GROUP S**T MIX S**T UP YOU DON‟T NEED A S**T-LOAD OF COLOURS HOT COLOURS LOOK S**THOUSE IN THE BACKGROUND SEGOE IT THE S**T GET A S**T-HOT PHOTO
- 68. WHAT NEXT?
- 69. WHAT MAKES YOUR APP GROUSE? WHAT NEXT? BEFORE YOU START CODING… CULL YOUR FEATURES SKETCH THE PAGE STRUCTURE AND NAVIGATION OF YOUR APP GROUP INFORMATION WITHIN PAGES AS YOU CODE… THINK ABOUT The information hierarchy on your pages Templates, grids and alignment Standards and consistency SOLVE DESIGN PROBLEMS BY REMOVING DETAIL, NOT ADDING
Notes de l'éditeur
- XXX grouse pic?
- Xxx Diagram fromtechedXxx or transition 2nd point
- XXX phone pics
- AndReliableAdaptableThe right offeringDelivered the right way
- Your turnChris Bernard: This app is the best app in its category at ___________
- Functional MinimalismHave an identity in the store
- Best app statement is about starting with people and a problem.Not starting with codeNot even starting with colours, fonts and logos
- People-in
- After the break:- we’ll get on to layout.
- Functional minimalism, as well as VisualRemove features
- A grab-bag of tips
- A grab-bag of pro-tips
- A grab-bag of pro-tips
- Templates
- Metro uses large blocks of bright colourBut We don’t want an angry fruit salad
- Especially if you’re not confident
- Even though I said be minimalist,One thing that you have to communicate is the structure
- The page should have a topography
- Nuclear option