Tools and techniques for designers
to create great mobile experiences
And a showcase of CBC’s newest iPhone applications

...
WORK
Senior Digital Designer, Product Development Team
CBC Digital Programming & Business Development


PERSONAL SITE
www....
What I am going to be talking about:

My resources

CBC.ca web application

CBC Radio application

CBC Hockey application
...
Resources




            4
5
6
7
8
9
Pattern Tap
patterntap.com




                 10
Design For Mobile wiki
 patterns.design4mobile.com




                              11
Smashing Magazine
 smashingmagazine.com




                        12
Creative Applications
  creativeapplications.net




                             13
14
15
15
16
17
Designing Tips




                 18
Simplify




           19
• Simplify

Avoid Clutter




                20
• Simplify
• Avoid Clutter

Follow iPhone Conventions




                            21
• Simplify
• Avoid Clutter
• Follow iPhone Conventions

Special Attention to Typography




                              ...
• Simplify
• Avoid Clutter
• Follow iPhone Conventions
• Special Attention to Typography

Flow




                       ...
• Simplify
• Avoid Clutter
• Follow iPhone Conventions
• Special Attention to Typography
• Flow

Think about environment

...
• Simplify
• Avoid Clutter
• Follow iPhone Conventions
• Special Attention to Typography
• Flow
• Think about environment
...
• Simplify
• Avoid Clutter
• Follow iPhone Conventions
• Special Attention to Typography
• Flow
• Think about environment
...
Why I like MONDAYS




                     27
CBC.ca Web Application
Jumping head-first into designing for the iPhone




                                              ...
29
30
31
Flow chart




             32
33
34
35
36
37
38
39
40
41
42
Designing Home Screen Icons




                              43
Home Screen Icon sketches




                            44
45
Research
• Be creative
• Be different
• Attention to detail
• Copy




                        46
• Research

Be creative
• Be different
• Attention to detail
• Copy




                        47
• Research
• Be creative

Be different
• Attention to detail
• Copy




                        48
• Research
• Be creative
• Be different

Attention to detail
• Copy




                      49
• Research
• Be creative
• Be different
• Attention to detail

Copy




                        50
CBC Radio Application
Bringing CBC Radio to the people (with iPhones)




                                                ...
52
53
Sketches




           54
55
56
57
58
59
60
61
62
63
64
65
66
30 x 30 pixels




                 67
• 30 x 30 pixels

Simple and streamlined




                         68
• 30 x 30 pixels
• Simple and streamlined



Use them if they’ve got them




                               69
• 30 x 30 pixels
• Simple and streamlined



• Use if they’ve got them

Can they guess what it is?



                    ...
“Loving the CBC radio iPhone
app. It's almost too much choice.
Is that even possible?”



                                ...
“Yay CBC iPhone app.”




                        72
CBC Hockey Application
“Um, somebody get me a playbook!”




                                    73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
“The CBC Hockey app is awesome.
   Get it if you're an NHL fan!”




                                   93
“ CBC Hockey app for iPhone is
      AWESOME! #WIN”




                                 94
Palm Pre CBC Radio Application
“There are no guidelines, but we’ll let you know what you’ve
done wrong once you are done.”...
Images of Palm Pre




                     96
97
98
99
100
101
102
103
104
105
106
106
107
108
109
110
111
What’s Next?




               112
CBC Web and native iPhone apps - Phase 2
And a CBC News application?




                                           113
114
115
“Be careful, it’s easy to go
overboard and screw things up”
     – Mike Rundle, flyosity.com




                          ...
Punchcut Perspective: Considerations for
Designing Touch UI

Punchcut is a user interface design company based in San Fran...
kevin.kimmett@cbc.ca
kevinkimmett.com


      Slides and links will be on SlideShare.com


                               ...
News and Blogs                                         Videos
iPhone Buzz                                            Desig...
Upcoming SlideShare
Loading in...5
×

Vancouver iPhone Meetup 2010 - Touch Interface Design - Kevin Kimmett

489

Published on

Tools and techniques for designers to create great mobile experiences. And a showcase of CBC’s newest iPhone applications.

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

  • Be the first to like this

No Downloads
Views
Total Views
489
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Vancouver iPhone Meetup 2010 - Touch Interface Design - Kevin Kimmett

  1. 1. Tools and techniques for designers to create great mobile experiences And a showcase of CBC’s newest iPhone applications 1
  2. 2. WORK Senior Digital Designer, Product Development Team CBC Digital Programming & Business Development PERSONAL SITE www.kevinkimmett.com 2
  3. 3. What I am going to be talking about: My resources CBC.ca web application CBC Radio application CBC Hockey application CBC Radio application for Palm Pre 3
  4. 4. Resources 4
  5. 5. 5
  6. 6. 6
  7. 7. 7
  8. 8. 8
  9. 9. 9
  10. 10. Pattern Tap patterntap.com 10
  11. 11. Design For Mobile wiki patterns.design4mobile.com 11
  12. 12. Smashing Magazine smashingmagazine.com 12
  13. 13. Creative Applications creativeapplications.net 13
  14. 14. 14
  15. 15. 15
  16. 16. 15
  17. 17. 16
  18. 18. 17
  19. 19. Designing Tips 18
  20. 20. Simplify 19
  21. 21. • Simplify Avoid Clutter 20
  22. 22. • Simplify • Avoid Clutter Follow iPhone Conventions 21
  23. 23. • Simplify • Avoid Clutter • Follow iPhone Conventions Special Attention to Typography 22
  24. 24. • Simplify • Avoid Clutter • Follow iPhone Conventions • Special Attention to Typography Flow 23
  25. 25. • Simplify • Avoid Clutter • Follow iPhone Conventions • Special Attention to Typography • Flow Think about environment 24
  26. 26. • Simplify • Avoid Clutter • Follow iPhone Conventions • Special Attention to Typography • Flow • Think about environment Attention span 25
  27. 27. • Simplify • Avoid Clutter • Follow iPhone Conventions • Special Attention to Typography • Flow • Think about environment • Attention span iPhone Users Are Smart 26
  28. 28. Why I like MONDAYS 27
  29. 29. CBC.ca Web Application Jumping head-first into designing for the iPhone 28
  30. 30. 29
  31. 31. 30
  32. 32. 31
  33. 33. Flow chart 32
  34. 34. 33
  35. 35. 34
  36. 36. 35
  37. 37. 36
  38. 38. 37
  39. 39. 38
  40. 40. 39
  41. 41. 40
  42. 42. 41
  43. 43. 42
  44. 44. Designing Home Screen Icons 43
  45. 45. Home Screen Icon sketches 44
  46. 46. 45
  47. 47. Research • Be creative • Be different • Attention to detail • Copy 46
  48. 48. • Research Be creative • Be different • Attention to detail • Copy 47
  49. 49. • Research • Be creative Be different • Attention to detail • Copy 48
  50. 50. • Research • Be creative • Be different Attention to detail • Copy 49
  51. 51. • Research • Be creative • Be different • Attention to detail Copy 50
  52. 52. CBC Radio Application Bringing CBC Radio to the people (with iPhones) 51
  53. 53. 52
  54. 54. 53
  55. 55. Sketches 54
  56. 56. 55
  57. 57. 56
  58. 58. 57
  59. 59. 58
  60. 60. 59
  61. 61. 60
  62. 62. 61
  63. 63. 62
  64. 64. 63
  65. 65. 64
  66. 66. 65
  67. 67. 66
  68. 68. 30 x 30 pixels 67
  69. 69. • 30 x 30 pixels Simple and streamlined 68
  70. 70. • 30 x 30 pixels • Simple and streamlined Use them if they’ve got them 69
  71. 71. • 30 x 30 pixels • Simple and streamlined • Use if they’ve got them Can they guess what it is? 70
  72. 72. “Loving the CBC radio iPhone app. It's almost too much choice. Is that even possible?” 71
  73. 73. “Yay CBC iPhone app.” 72
  74. 74. CBC Hockey Application “Um, somebody get me a playbook!” 73
  75. 75. 74
  76. 76. 75
  77. 77. 76
  78. 78. 77
  79. 79. 78
  80. 80. 79
  81. 81. 80
  82. 82. 81
  83. 83. 82
  84. 84. 83
  85. 85. 84
  86. 86. 85
  87. 87. 86
  88. 88. 87
  89. 89. 88
  90. 90. 89
  91. 91. 90
  92. 92. 91
  93. 93. 92
  94. 94. “The CBC Hockey app is awesome. Get it if you're an NHL fan!” 93
  95. 95. “ CBC Hockey app for iPhone is AWESOME! #WIN” 94
  96. 96. Palm Pre CBC Radio Application “There are no guidelines, but we’ll let you know what you’ve done wrong once you are done.” - Palm 95
  97. 97. Images of Palm Pre 96
  98. 98. 97
  99. 99. 98
  100. 100. 99
  101. 101. 100
  102. 102. 101
  103. 103. 102
  104. 104. 103
  105. 105. 104
  106. 106. 105
  107. 107. 106
  108. 108. 106
  109. 109. 107
  110. 110. 108
  111. 111. 109
  112. 112. 110
  113. 113. 111
  114. 114. What’s Next? 112
  115. 115. CBC Web and native iPhone apps - Phase 2 And a CBC News application? 113
  116. 116. 114
  117. 117. 115
  118. 118. “Be careful, it’s easy to go overboard and screw things up” – Mike Rundle, flyosity.com 116
  119. 119. Punchcut Perspective: Considerations for Designing Touch UI Punchcut is a user interface design company based in San Francisco that is focused on user experience for consumer devices; mobile, television and beyond. 117
  120. 120. kevin.kimmett@cbc.ca kevinkimmett.com Slides and links will be on SlideShare.com 118
  121. 121. News and Blogs Videos iPhone Buzz Design your iPhone app with Adobe Fireworks www.iphonebuzz.com www.building43.com/videos/2009/06/23/mockup-iphone-app-adobe-fireworks The iPhone blog www.theiphoneblog.com Random iPhoneTunes CreativeApplications.Net iphonetunes.net www.creativeapplications.net/category/iphone Just Another iPhone Blog tap tap tap Blog justanotheriphoneblog.com/wordpress www.taptaptap.com/blog Overcommitted Blog blog.overcommittedapps.com Resources Teehan+Lax Blog iPhone GUI PSD 3.0 iPhone Gestures www.teehanlax.com/blog/?p=1628 www.interactivegestures.com/index.php?title=IPhone Teehan+Lax Blog www.teehanlax.com/blog Books and guides Sketching User Experiences by Bill Buxton Design For Mobile patterns.littlespringsdesign.com/index.php/Main_Page Mobile Design and Development by Brian Fling Pattern Tap Beginning iPhone Development by Dave Mark and Jeff LaMarche patterntap.com iPhone Human Interface Guidelines (PDF) Designing for the iPhone: Resources tutorialblog.org/designing-for-the-iphone-resources iPhone Human Interface Guidelines for Web Applications (PDF) iPhoneFlow www.iphoneflow.com 119
  1. A particular slide catching your eye?

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

×