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

kevin.kimmett@cbc.ca

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