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

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

2. WORK
Senior Digital Designer, Product Development Team
CBC Digital Programming & Business Development
PERSONAL SITE
www.kevinkimmett.com
2

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. Resources
4

5. 5

6. 6

7. 7

8. 8

9. 9

10. Pattern Tap
patterntap.com
10

11. Design For Mobile wiki
patterns.design4mobile.com
11

12. Smashing Magazine
smashingmagazine.com
12

13. Creative Applications
creativeapplications.net
13

14. 14

15. 15

16. 15

17. 16

18. 17

19. Designing Tips
18

20. Simplify
19

21. • Simplify
Avoid Clutter
20

22. • Simplify
• Avoid Clutter
Follow iPhone Conventions
21

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

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

25. • Simplify
• Avoid Clutter
• Follow iPhone Conventions
• Special Attention to Typography
• Flow
Think about environment
24

26. • Simplify
• Avoid Clutter
• Follow iPhone Conventions
• Special Attention to Typography
• Flow
• Think about environment
Attention span
25

27. • Simplify
• Avoid Clutter
• Follow iPhone Conventions
• Special Attention to Typography
• Flow
• Think about environment
• Attention span
iPhone Users Are Smart
26

28. Why I like MONDAYS
27

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

30. 29

31. 30

32. 31

33. Flow chart
32

34. 33

35. 34

36. 35

37. 36

38. 37

39. 38

40. 39

41. 40

42. 41

43. 42

44. Designing Home Screen Icons
43

45. Home Screen Icon sketches
44

46. 45

47. Research
• Be creative
• Be different
• Attention to detail
• Copy
46

48. • Research
Be creative
• Be different
• Attention to detail
• Copy
47

49. • Research
• Be creative
Be different
• Attention to detail
• Copy
48

50. • Research
• Be creative
• Be different
Attention to detail
• Copy
49

51. • Research
• Be creative
• Be different
• Attention to detail
Copy
50

52. CBC Radio Application
Bringing CBC Radio to the people (with iPhones)
51

53. 52

54. 53

55. Sketches
54

56. 55

57. 56

58. 57

59. 58

60. 59

61. 60

62. 61

63. 62

64. 63

65. 64

66. 65

67. 66

68. 30 x 30 pixels
67

69. • 30 x 30 pixels
Simple and streamlined
68

70. • 30 x 30 pixels
• Simple and streamlined
Use them if they’ve got them
69

71. • 30 x 30 pixels
• Simple and streamlined
• Use if they’ve got them
Can they guess what it is?
70

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

73. “Yay CBC iPhone app.”
72

74. CBC Hockey Application
“Um, somebody get me a playbook!”
73

75. 74

76. 75

77. 76

78. 77

79. 78

80. 79

81. 80

82. 81

83. 82

84. 83

85. 84

86. 85

87. 86

88. 87

89. 88

90. 89

91. 90

92. 91

93. 92

94. “The CBC Hockey app is awesome.
Get it if you're an NHL fan!”
93

95. “ CBC Hockey app for iPhone is
AWESOME! #WIN”
94

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. Images of Palm Pre
96

98. 97

99. 98

100. 99

101. 100

102. 101

103. 102

104. 103

105. 104

106. 105

107. 106

108. 106

109. 107

110. 108

111. 109

112. 110

113. 111

114. What’s Next?
112

115. CBC Web and native iPhone apps - Phase 2
And a CBC News application?
113

116. 114

117. 115

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

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. kevin.kimmett@cbc.ca
kevinkimmett.com
Slides and links will be on SlideShare.com
118

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