Designing Beautiful AppsRich HoldsworthCEO WappleCEO Didlr@richholdsworthrich@lookslikelemonade.com
What’s coming up?• Who, what, why?• Defining design• What is mobile anyway?• My design process• The most important design ...
Who, what, why?Why did you even let me in…?
CEO of Wapple• 9 years of creating mobile experiences• Development of original tech• Designed and built hundreds of experi...
Comprehensive mobile publishing• Web-based mobile site builder• Complete device detection and optimisation• Integrated sof...
Before that – Video Games!• Lead designer / producer• SCEE• Psygnosis• Interplay• Silicon Dreams• US Gold• The BEST design...
When we say ‘Design’ what dowe mean?Time to get on the same page
Lets not get carried away• Does a job, well• Looks good
Great design is very, very hard• The biggest challenge is over thinking and over working it• The easiest part if knowing w...
fork and knife
What is mobile?Or maybe ‘where’
The early days of Wapple• It was all mobile web• That was the common ground• It was clunky to begin with• And apps were crap
Then apps got good• Software you download and install• Hardly new• But hey, the stars aligned
So, mobile evolvesAnd continues to do soAnd we have to keep upGreat.
Just kidding, I like a challenge• So we got thinking• Not just about what ‘mobile’ is today but the trajectory it’s on• We...
The consumeris mobile, notthe device
Browsing isgiving way togoal fulfilment
Consumerexpectation isshifting fromweb to apps
How did we reach those?Fortune cookies?
The mobile consumerIts you
Wake UpBreakfastCommuteWorkLunchbreakWorkCommuteShoppingLeisureBedtime
Wake UpBreakfastCommutee
WorkLunchbreakWorkCommuteg
BreakfasShoppingLeisureBedtime
Wake UpBreakfastCommuteWorkLunchbreakWorkCommuteShoppingLeisureBedtime
Apps over browsingIs the browser an endangered species?
App use is beating browsing• Most users only ever visited a handful of sites anyway• With very limited requirements• As so...
Some numbers• 2hr 38min use per day• 80% apps, 20% browsing• 7.9 different apps a day (rising)• Read up: http://bit.ly/11N...
Consumers look to the app storesfor their favourite brandsPhones are judged on the availability of apps
That presents all kinds of problems• Discovery• Promotion• But not problems we have to deal with today• Today we only have...
How do I do design?And why is all that earlier stuff relevant?
Get some things straight• What do users want?• Where and why will they be doing it?• You have to LIVE these
I mean LIVE them
It’s a brute force approach• I work in cycles• Develop hard and fast with good people who make good decisions• Learn, adap...
The wildly anticipated andpossibly oversold design principalthat you need to know(according to me)
What are design principals?• They aren’t rules• They are helpful approaches that can help improve the overall designof you...
Get the book• Universal Principles of Design• William Lidwell, Kritina Holden & Jill Butler• ISBN 1592535879• My go-to, ti...
ArchetypesUniversal patterns of theme and form resulting from innate biases or dispositions
What willhappen?
Archetypes bring us:• Expectation fulfilment• Satisfaction• Users KNOW how a component will respond and can anticipate the...
Why use Archetypes?• Increased understanding of your app• Considerably lower learning curve
The birth of ArchetypesSometimes they just happen
Windows 8 and Windows Phone are radicallynew designs• Change happens #dealwithit
Be assured that users WILL get what you areup to• Yes, there are challenges• Charms bar• Hidden app bars• Pull to select• ...
Designing DidlrIt came from somewhere
Its not just me!• There’s a team of people working on didlr• Graphic artists• Web developers• Server guys• Project people•...
The initial idea• A little girl• An Xbox• Christmas dinner
Getting iterative• Sharing as simply as you would a tweet
Keeping things really simple• What seems like a limiting factor is actually an enabling factor
The big idea condensed• a social platform where• users draw and share• with simple tools• and follow each other• and rate ...
Early prototypingNot the worst way to spend a Sunday morning
Focus on comfort, touch and style• A little bit of experience playing with Windows Phone• Responsiveness was paramount• Pi...
Developing things further• Adding a server to manage all the content• Putting the drawing in the hands of more people• Set...
Early brand work
Getting the brand values right• Like everything, this is a process• Careful balance of identifiable brand that does not co...
Refining
Choosing Windows Phone• Didlr was still very much ‘under the radar’ and ‘off the books’• Knowing C# meant that I could red...
Plus, I’m not a fan of Apple’s skeuomorphism
And Android is a bag of nuts
Of course, those platforms matter• I simply didn’t have time to go that way• Visual Studio rocks, I was set• It’s been sai...
Remember brute force? It keeps going• Personal preference is to work like crazy, get things as good aspossible, move on an...
Using the UIDon’t fight the tide
Picking the recognisable controls and workingthem• No need to roll your own!• Listboxes, panoramas, pivots, appbars and mo...
And tiles. Obviously.
Different platforms, different flavours
Gotta make that change• Structure• Iconography• Layout• Space, size• Colour linguistics
The transition to Windows 8Gotta love reusablity
Initial code transfer• One person, one week• Communications layer straight across• Business logic straight across• Tweaks ...
Designing for Windows 8 was both easy andhard• We were very early – ready for launch• Less to go on• We had lots of help f...
Different platforms, different archetypes
Different platforms, different archetypes
The back end is common to all• Built around a groovy JSON api• All content is entirely cross platform• But remember – all ...
So, why design beautiful apps?• Well, dur…• Good design helps users engage with your app• It helps them use it• It makes t...
Thank You@didlrhttp://didlr.com
Rich Holdsworth @Didlr Presentation
Rich Holdsworth @Didlr Presentation
Rich Holdsworth @Didlr Presentation
Rich Holdsworth @Didlr Presentation
Rich Holdsworth @Didlr Presentation
Rich Holdsworth @Didlr Presentation
Rich Holdsworth @Didlr Presentation
Rich Holdsworth @Didlr Presentation
Rich Holdsworth @Didlr Presentation
Rich Holdsworth @Didlr Presentation
Rich Holdsworth @Didlr Presentation
Rich Holdsworth @Didlr Presentation
Upcoming SlideShare
Loading in …5
×

Rich Holdsworth @Didlr Presentation

365 views
243 views

Published on

Presentation from Rich Holdsworth from @didlr - presented at Microsoft want to show you how Windows 8 and Windows Phone 8 are the perfect platform for you to build your next app! Event At Portsmouth University http://blogs.msdn.com/b/uk_faculty_connection/archive/2013/03/21/microsoft-want-to-show-you-how-windows-8-and-windows-phone-8-are-the-perfect-platform-for-you-to-build-your-next-app.aspx

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
365
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Rich Holdsworth @Didlr Presentation

  1. 1. Designing Beautiful AppsRich HoldsworthCEO WappleCEO Didlr@richholdsworthrich@lookslikelemonade.com
  2. 2. What’s coming up?• Who, what, why?• Defining design• What is mobile anyway?• My design process• The most important design principal you need to know to designanything ever I think• Designing Didlr
  3. 3. Who, what, why?Why did you even let me in…?
  4. 4. CEO of Wapple• 9 years of creating mobile experiences• Development of original tech• Designed and built hundreds of experiences• Creative consultation
  5. 5. Comprehensive mobile publishing• Web-based mobile site builder• Complete device detection and optimisation• Integrated software solutions• Canvas• Architect• Exhibit
  6. 6. Before that – Video Games!• Lead designer / producer• SCEE• Psygnosis• Interplay• Silicon Dreams• US Gold• The BEST design training imaginable
  7. 7. When we say ‘Design’ what dowe mean?Time to get on the same page
  8. 8. Lets not get carried away• Does a job, well• Looks good
  9. 9. Great design is very, very hard• The biggest challenge is over thinking and over working it• The easiest part if knowing when its gone wrong• If you’re honest!• Trust your gut
  10. 10. fork and knife
  11. 11. What is mobile?Or maybe ‘where’
  12. 12. The early days of Wapple• It was all mobile web• That was the common ground• It was clunky to begin with• And apps were crap
  13. 13. Then apps got good• Software you download and install• Hardly new• But hey, the stars aligned
  14. 14. So, mobile evolvesAnd continues to do soAnd we have to keep upGreat.
  15. 15. Just kidding, I like a challenge• So we got thinking• Not just about what ‘mobile’ is today but the trajectory it’s on• We came up with a few big ideas
  16. 16. The consumeris mobile, notthe device
  17. 17. Browsing isgiving way togoal fulfilment
  18. 18. Consumerexpectation isshifting fromweb to apps
  19. 19. How did we reach those?Fortune cookies?
  20. 20. The mobile consumerIts you
  21. 21. Wake UpBreakfastCommuteWorkLunchbreakWorkCommuteShoppingLeisureBedtime
  22. 22. Wake UpBreakfastCommutee
  23. 23. WorkLunchbreakWorkCommuteg
  24. 24. BreakfasShoppingLeisureBedtime
  25. 25. Wake UpBreakfastCommuteWorkLunchbreakWorkCommuteShoppingLeisureBedtime
  26. 26. Apps over browsingIs the browser an endangered species?
  27. 27. App use is beating browsing• Most users only ever visited a handful of sites anyway• With very limited requirements• As soon as most of a user’s needs are fulfilled by apps browsingbecomes a cumbersome irrelevance
  28. 28. Some numbers• 2hr 38min use per day• 80% apps, 20% browsing• 7.9 different apps a day (rising)• Read up: http://bit.ly/11NJsMZ
  29. 29. Consumers look to the app storesfor their favourite brandsPhones are judged on the availability of apps
  30. 30. That presents all kinds of problems• Discovery• Promotion• But not problems we have to deal with today• Today we only have to worry about making something good, notpromoting it• Phew
  31. 31. How do I do design?And why is all that earlier stuff relevant?
  32. 32. Get some things straight• What do users want?• Where and why will they be doing it?• You have to LIVE these
  33. 33. I mean LIVE them
  34. 34. It’s a brute force approach• I work in cycles• Develop hard and fast with good people who make good decisions• Learn, adapt and change fast• Innovate as fast as possible
  35. 35. The wildly anticipated andpossibly oversold design principalthat you need to know(according to me)
  36. 36. What are design principals?• They aren’t rules• They are helpful approaches that can help improve the overall designof your app• There’s plenty of them… They all matter or you can choose to ignorethem all
  37. 37. Get the book• Universal Principles of Design• William Lidwell, Kritina Holden & Jill Butler• ISBN 1592535879• My go-to, tie-breaking design bible• Hick’s Law, Fitt’s Law, Chunking, 80/20
  38. 38. ArchetypesUniversal patterns of theme and form resulting from innate biases or dispositions
  39. 39. What willhappen?
  40. 40. Archetypes bring us:• Expectation fulfilment• Satisfaction• Users KNOW how a component will respond and can anticipate theresult
  41. 41. Why use Archetypes?• Increased understanding of your app• Considerably lower learning curve
  42. 42. The birth of ArchetypesSometimes they just happen
  43. 43. Windows 8 and Windows Phone are radicallynew designs• Change happens #dealwithit
  44. 44. Be assured that users WILL get what you areup to• Yes, there are challenges• Charms bar• Hidden app bars• Pull to select• Users WILL get it!
  45. 45. Designing DidlrIt came from somewhere
  46. 46. Its not just me!• There’s a team of people working on didlr• Graphic artists• Web developers• Server guys• Project people• Etc.• I developed the Windows Phone and Windows 8 versions
  47. 47. The initial idea• A little girl• An Xbox• Christmas dinner
  48. 48. Getting iterative• Sharing as simply as you would a tweet
  49. 49. Keeping things really simple• What seems like a limiting factor is actually an enabling factor
  50. 50. The big idea condensed• a social platform where• users draw and share• with simple tools• and follow each other• and rate and share each other’s work
  51. 51. Early prototypingNot the worst way to spend a Sunday morning
  52. 52. Focus on comfort, touch and style• A little bit of experience playing with Windows Phone• Responsiveness was paramount• Picking the colours and the strokes – create a recognisable aesthetic• What the prototype didn’t do spoke volumes!
  53. 53. Developing things further• Adding a server to manage all the content• Putting the drawing in the hands of more people• Setting the colours – adding transparency• Adjusting the smoothing
  54. 54. Early brand work
  55. 55. Getting the brand values right• Like everything, this is a process• Careful balance of identifiable brand that does not conflict with usercontent• Nor should it influence user content
  56. 56. Refining
  57. 57. Choosing Windows Phone• Didlr was still very much ‘under the radar’ and ‘off the books’• Knowing C# meant that I could reduce development costs• Beautiful UI aligned with Didlr• Elevating content in an sleek, animated environment
  58. 58. Plus, I’m not a fan of Apple’s skeuomorphism
  59. 59. And Android is a bag of nuts
  60. 60. Of course, those platforms matter• I simply didn’t have time to go that way• Visual Studio rocks, I was set• It’s been said but it’s important to know that all the tools were free• And they are of high quality
  61. 61. Remember brute force? It keeps going• Personal preference is to work like crazy, get things as good aspossible, move on and revisit• Windows Phone - V2 (V3 in development)• Windows 8 - V2 (V3 next)• iOS - V1 (V2 in development)• Android - V1 (better than iOS V1!)
  62. 62. Using the UIDon’t fight the tide
  63. 63. Picking the recognisable controls and workingthem• No need to roll your own!• Listboxes, panoramas, pivots, appbars and more• These are practically built in and users know how to use them
  64. 64. And tiles. Obviously.
  65. 65. Different platforms, different flavours
  66. 66. Gotta make that change• Structure• Iconography• Layout• Space, size• Colour linguistics
  67. 67. The transition to Windows 8Gotta love reusablity
  68. 68. Initial code transfer• One person, one week• Communications layer straight across• Business logic straight across• Tweaks to areas like storage and animation
  69. 69. Designing for Windows 8 was both easy andhard• We were very early – ready for launch• Less to go on• We had lots of help from Microsoft• Finding our way together• Now things are a lot easier• We have already done one UI refresh and there’s another on the way
  70. 70. Different platforms, different archetypes
  71. 71. Different platforms, different archetypes
  72. 72. The back end is common to all• Built around a groovy JSON api• All content is entirely cross platform• But remember – all platforms are uniquely tailored to their user’sexpectations
  73. 73. So, why design beautiful apps?• Well, dur…• Good design helps users engage with your app• It helps them use it• It makes them feel better
  74. 74. Thank You@didlrhttp://didlr.com

×