Vancouver iPhone Meetup 2010 - Touch Interface Design - Kevin Kimmett
121
Tools and techniques for designers to create great mobile experiences And a showcase of CBC’s newest iPhone applications 1
-
Upload
kevin-kimmett -
Category
Design
-
view
838 -
download
0
description
Tools and techniques for designers to create great mobile experiences. And a showcase of CBC’s newest iPhone applications.
Transcript of Vancouver iPhone Meetup 2010 - Touch Interface Design - Kevin Kimmett
Tools and techniques for designers to create great mobile experiences And a showcase of CBC’s newest iPhone applications
1
Senior Digital Designer, Product Development TeamCBC Digital Programming & Business Development
WORK
www.kevinkimmett.comPERSONAL SITE
2
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
Resources
4
5
6
7
8
9
Pattern Tappatterntap.com
10
Design For Mobile wikipatterns.design4mobile.com
11
Smashing Magazinesmashingmagazine.com
12
Creative Applicationscreativeapplications.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
22
•Simplify
•Avoid Clutter
•Follow iPhone Conventions
•Special Attention to Typography
Flow
23
•Simplify
•Avoid Clutter
•Follow iPhone Conventions
•Special Attention to Typography
•Flow
Think about environment
24
•Simplify
•Avoid Clutter
•Follow iPhone Conventions
•Special Attention to Typography
•Flow
•Think about environment
Attention span
25
•Simplify
•Avoid Clutter
•Follow iPhone Conventions
•Special Attention to Typography
•Flow
•Think about environment
•Attention span
iPhone Users Are Smart
26
Why I like MONDAYS
27
CBC.ca Web ApplicationJumping head-first into designing for the iPhone
28
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 ApplicationBringing CBC Radio to the people (with iPhones)
51
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?
70
“Loving the CBC radio iPhone app. It's almost too much choice. Is that even possible?”
71
“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.” - Palm
95
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 2And a CBC News application?
113
114
115
“Be careful, it’s easy to go overboard and screw things up”
– Mike Rundle, flyosity.com
116
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
kevinkimmett.com
Slides and links will be on SlideShare.com
118
News and BlogsiPhone Buzzwww.iphonebuzz.com
The iPhone blogwww.theiphoneblog.com
iPhoneTunesiphonetunes.net
Just Another iPhone Blogjustanotheriphoneblog.com/wordpress
ResourcesTeehan+Lax Blog iPhone GUI PSD 3.0www.teehanlax.com/blog/?p=1628
Teehan+Lax Blogwww.teehanlax.com/blog
Design For Mobilepatterns.littlespringsdesign.com/index.php/Main_Page
Pattern Tappatterntap.com
Designing for the iPhone: Resourcestutorialblog.org/designing-for-the-iphone-resources
iPhoneFlowwww.iphoneflow.com
VideosDesign your iPhone app with Adobe Fireworkswww.building43.com/videos/2009/06/23/mockup-iphone-app-adobe-fireworks
RandomCreativeApplications.Net www.creativeapplications.net/category/iphone
tap tap tap Blogwww.taptaptap.com/blog
Overcommitted Blogblog.overcommittedapps.com
iPhone Gestureswww.interactivegestures.com/index.php?title=IPhone
Books and guidesSketching User Experiences by Bill Buxton
Mobile Design and Development by Brian Fling
Beginning iPhone Development by Dave Mark and Jeff LaMarche
iPhone Human Interface Guidelines (PDF)
iPhone Human Interface Guidelines for Web Applications (PDF)
119
