DESIGNING          FOR iPad              Pek PongpaetWindyCityGo, April 9, 2011
Outline1.Intro2.Statistics3.The Talk4.Quick & Dirty Wireframing
Pek
@pekpongpaetVP of Product, SpotOn Inc,   Founder of ShelfLuv
6 Mortal Kombat Games
“Design is the application of intent -  the opposite of happenstance,   and an antidote to accident.”                     ...
The Story of ...
2 Dudes
No iPad Experience
< 6 Hours
Best Entertainment AppiPadDevCamp Hackathon      Chicago, May 2010
The iPad
Statistics
15M iPads sold           - Apple, Jan 2011
75,000 iPad apps            - Apple, Mar 2011
2Almost years    to sell1Million iPods
74 days to sell1 Million iPhones
28 days to sell1 Million iPads              http://www.businessinsider.com/apple-2-million-ipad-sales-in-context-2010-5
Massive Adoption            http://www.flickr.com/photos/kominyetska/4524717824/
“...the iPad had cannibalized sales                     from laptop PCs, especially                 netbooks, by as much a...
Who’s Buying?           http://www.flickr.com/photos/kylewith/4494321564/
iPad Users by Gender       Male          Female 7052.5 3517.5  0              iPad                      http://ymobileblog...
Other Statistics• 58.0% have bachelor’s degrees or higher• 44.3% with household income > $100,000• 48.7% own iPod touches•...
Just aGiant iPhone?
Laptop with no Keyboard?
3rd Category of Device
“But it can just run my    iphone apps”
New Design Considerations for New Type of Device
More Surface Area
Less on the run                  http://www.flickr.com/photos/wien/4785433512
More on the couch
http://www.flickr.com/photos/caribb/1415206174/
3rd Display         http://www.flickr.com/photos/48126477@N05/4861917488/
mostly a consumption device
Mockups     http://www.flickr.com/photos/pixelhalunke/4691112187/
Photos is your friend
Lighting
Original VersionToo Dark on the iPad
New VersionJust Right on the iPad
No More Mouse
Goodbye Hovers
No more tooltips
Direct Manipulation
Earlier version had navigation buttons
new version: just swipe
Make it Tactile
People wanted to touch it   (even the mockup)
Handle Different Orientations
Eye Candy            http://www.flickr.com/photos/stillmemory/438601340
Bland & Functional
Hot & Spicy
Add Physicality and    Heightened Realism Whenever possible, add a realistic, physical dimension     to your application. ...
Delight People with   Stunning Graphics One way to increase the perceived value of yourapplication is to replicate the loo...
The Devil’s in the Details
BEFORE
Trim        AFTER    Shadow to                      show tapershadows on  stitches        lighting for                 add...
Original Bookmark      Flat
New BookmarkPops Out More
Ergonomics
Pixel Size
width of finger
10x10 pixelsnot usable
Minimize Fatigue            http://www.flickr.com/photos/26112504@N05/3031027248/
Original Design                  impossible                    to reach                     without                  lifti...
New DesignEverything is within reach
Lunascape browserControls on the bottom
Naming Your Baby            http://www.flickr.com/photos/jinglejammer/2239434419/
Short & Sweet                http://www.flickr.com/photos/edp-pics/4530170352/
Name gets cut off
complimentary to the name       of the app
WireframesQuick & Dirty        http://www.flickr.com/photos/pixelhalunke/4691112187/
Regular Notebooks
Step 1: Draw
Step 2: Take Picture
Step 3: Enjoy
“Design is not just what it looks like and feels like. Design is how it works.”                  - Steve Jobs
blog.pekpongpaet.com
follow me on twitter@pekpongpaet
Designing for iPad
Designing for iPad
Designing for iPad
Designing for iPad
Designing for iPad
Designing for iPad
Designing for iPad
Designing for iPad
Designing for iPad
Designing for iPad
Designing for iPad
Designing for iPad
Designing for iPad
Designing for iPad
Designing for iPad
Designing for iPad
Designing for iPad
Designing for iPad
Designing for iPad
Designing for iPad
Designing for iPad
Designing for iPad
Designing for iPad
Designing for iPad
Upcoming SlideShare
Loading in …5
×

Designing for iPad

16,828 views

Published on

A presentation on Designing for the iPad by Pek Pongpaet for the WindyCity Go Conference

Published in: Design
3 Comments
27 Likes
Statistics
Notes
No Downloads
Views
Total views
16,828
On SlideShare
0
From Embeds
0
Number of Embeds
2,364
Actions
Shares
0
Downloads
545
Comments
3
Likes
27
Embeds 0
No embeds

No notes for slide

Designing for iPad

  1. DESIGNING FOR iPad Pek PongpaetWindyCityGo, April 9, 2011
  2. Outline1.Intro2.Statistics3.The Talk4.Quick & Dirty Wireframing
  3. Pek
  4. @pekpongpaetVP of Product, SpotOn Inc, Founder of ShelfLuv
  5. 6 Mortal Kombat Games
  6. “Design is the application of intent - the opposite of happenstance, and an antidote to accident.” - Robert L. Peters
  7. The Story of ...
  8. 2 Dudes
  9. No iPad Experience
  10. < 6 Hours
  11. Best Entertainment AppiPadDevCamp Hackathon Chicago, May 2010
  12. The iPad
  13. Statistics
  14. 15M iPads sold - Apple, Jan 2011
  15. 75,000 iPad apps - Apple, Mar 2011
  16. 2Almost years to sell1Million iPods
  17. 74 days to sell1 Million iPhones
  18. 28 days to sell1 Million iPads http://www.businessinsider.com/apple-2-million-ipad-sales-in-context-2010-5
  19. Massive Adoption http://www.flickr.com/photos/kominyetska/4524717824/
  20. “...the iPad had cannibalized sales from laptop PCs, especially netbooks, by as much as 50%.” -Brian Dunn, CEO Best Buyhttp://online.wsj.com/article/SB10001424052748703376504575491533125103528.html
  21. Who’s Buying? http://www.flickr.com/photos/kylewith/4494321564/
  22. iPad Users by Gender Male Female 7052.5 3517.5 0 iPad http://ymobileblog.com/blog/2010/05/06/apple-ipad-user-analysis/
  23. Other Statistics• 58.0% have bachelor’s degrees or higher• 44.3% with household income > $100,000• 48.7% own iPod touches• 43.0% own iPhones• 27.2% own Blackberry devices http://designtaxi.com/news/31438/AdColony-Releases-iPad-User-Survey-Demographics/
  24. Just aGiant iPhone?
  25. Laptop with no Keyboard?
  26. 3rd Category of Device
  27. “But it can just run my iphone apps”
  28. New Design Considerations for New Type of Device
  29. More Surface Area
  30. Less on the run http://www.flickr.com/photos/wien/4785433512
  31. More on the couch
  32. http://www.flickr.com/photos/caribb/1415206174/
  33. 3rd Display http://www.flickr.com/photos/48126477@N05/4861917488/
  34. mostly a consumption device
  35. Mockups http://www.flickr.com/photos/pixelhalunke/4691112187/
  36. Photos is your friend
  37. Lighting
  38. Original VersionToo Dark on the iPad
  39. New VersionJust Right on the iPad
  40. No More Mouse
  41. Goodbye Hovers
  42. No more tooltips
  43. Direct Manipulation
  44. Earlier version had navigation buttons
  45. new version: just swipe
  46. Make it Tactile
  47. People wanted to touch it (even the mockup)
  48. Handle Different Orientations
  49. Eye Candy http://www.flickr.com/photos/stillmemory/438601340
  50. Bland & Functional
  51. Hot & Spicy
  52. Add Physicality and Heightened Realism Whenever possible, add a realistic, physical dimension to your application. The more true to life yourapplication looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it. - iPad Human Interface Guidelines
  53. Delight People with Stunning Graphics One way to increase the perceived value of yourapplication is to replicate the look of high-quality or precious materials. [ ex. leather, metal, wood] - iPad Human Interface Guidelines
  54. The Devil’s in the Details
  55. BEFORE
  56. Trim AFTER Shadow to show tapershadows on stitches lighting for added realism
  57. Original Bookmark Flat
  58. New BookmarkPops Out More
  59. Ergonomics
  60. Pixel Size
  61. width of finger
  62. 10x10 pixelsnot usable
  63. Minimize Fatigue http://www.flickr.com/photos/26112504@N05/3031027248/
  64. Original Design impossible to reach without lifting handHands Need to Move to Reach Far
  65. New DesignEverything is within reach
  66. Lunascape browserControls on the bottom
  67. Naming Your Baby http://www.flickr.com/photos/jinglejammer/2239434419/
  68. Short & Sweet http://www.flickr.com/photos/edp-pics/4530170352/
  69. Name gets cut off
  70. complimentary to the name of the app
  71. WireframesQuick & Dirty http://www.flickr.com/photos/pixelhalunke/4691112187/
  72. Regular Notebooks
  73. Step 1: Draw
  74. Step 2: Take Picture
  75. Step 3: Enjoy
  76. “Design is not just what it looks like and feels like. Design is how it works.” - Steve Jobs
  77. blog.pekpongpaet.com
  78. follow me on twitter@pekpongpaet

×