This presentation illustrates the design elements that can be used to build an application for both the iPad and iPhone platforms. Theses wireframes, stencils and resource kits represent the actual UI controls that are available to developers using the iPhone and iPad OS SDKs.

1. iPad and iPhone
UI Design Resources
Theses wireframes, stencils and resources represent the actual
UI controls that are available to developers using the iPhone
and iPad OS SDKs.
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
1
Tue Jun 08 2010 Confidential & Proprietary

2. Overview
Apple doesn't have any comprehensive pre-built GUI resources for
app development, making it very hard to match the uniformed style of
the iPhone or the iPad. You will need to create your own.
To help streamline your iPhone app design and development, I have
put together a fairly comprehensive collection of iPhone & iPad GUI
kits that will allow you to focus on developing rather than having to
design everything from scratch.
Within this document you will find complete GUI kits and stencils,
iPhone GUI elements and PSDs and finally a collection of the best
icon-sets perfectly suited for the iPhone.
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
2
Confidential & Proprietary

3. Resources (1 of 3)
Designer Resources
iPhone PSD Vector Kit (Smashing Magazine)
http://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/
iPhone GUI PSD Design Template (Teehan+lax)
http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/
iPhone Design Stencils – Yahoo Design Pattern Library
http://developer.yahoo.com/ypatterns/about/stencils/
Ultimate iPhone Stencil (OmniGraffle)
http://graffletopia.com/stencils/413
iPhone 3G Stencil (OmniGraffle)
http://www.graffletopia.com/stencils/495
iPad and iPhone Design (OmniGraffle)
http://graffletopia.com/stencils/570
FreshBooks iPhone Application GUI
http://developers.freshbooks.com/blog/view/freshbooks_iphone_application_gui/
iPhone GUI as Rich Symbols for Fireworks
http://jcorrea.es/2008/08/07/iphone-gui-as-rich-symbols-for-fireworks/
iPhone UI Vector Elements
http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements
iPad GUI PSD Design Template
http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
3
Confidential & Proprietary

4. Resources (2 of 3)
iPad Vector GUI Elements
http://iconlibrary.iconshock.com/icons/ipad-vector-gui-elements-tabs-buttons-menus-icons/
MobileMe Full iPhone GUI
http://kediashubham.deviantart.com/art/MobileMe-Full-iPhone-GUI-97267445
iPad Vector GUI Elements
http://iconlibrary.iconshock.com/icons/ipad-vector-gui-elements-tabs-buttons-menus-icons/
MobileMe Full iPhone GUI
http://kediashubham.deviantart.com/art/MobileMe-Full-iPhone-GUI-97267445
Matte iPhone UI
http://kediashubham.deviantart.com/art/Matte-iPhone-UI-v1-1-110768869
Matte iPhone UI
http://vector.tutsplus.com/freebies/vectors/sexy-vector-cell-phone/
MobileMe Full GUI
http://bg2009.deviantart.com/art/MobileMe-Full-GUI-Beta10-124389884
iPhone 3G-3GS PSD
http://-kol.deviantart.com/art/iPhone-3G-3GS-PSD-77479622
Apple iPad: Fully editable PSD
http://kevinandersson.deviantart.com/art/Apple-iPad-Fully-editable-PSD-152146899
Apple iPhone 4G .PSD
http://zandog.deviantart.com/art/Apple-iPhone-4G-PSD-161681253
iPhone Toolbar Icons
http://blog.twg.ca/2009/09/free-iphone-toolbar-icons/
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
4
Confidential & Proprietary

5. Resources (Page 3 of 3)
Glyphish
http://glyphish.com/
iPhone Toolbar Icon Set
http://www.app-bits.com/downloads/iphone-toolbar-icon-set.html
Free iPhone Toolbar Icons
http://www.pixelpressicons.com/?p=108
30 Free Vector Icons
http://www.dezinerfolio.com/freebie/30-free-vector-icons
iconSweets
http://www.iconsweets.com/
Touchscreen Hand Gestures v2 (OmniGraffle)
http://graffletopia.com/stencils/439
Gesturecons – Multi-Touch Icons
http://gesturecons.com/
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
5
Confidential & Proprietary

6. Ultimate iPhone Stencil (OmniGraffle)
Ultimate iPhone Stencil (OmniGraffle)
http://graffletopia.com/stencils/413
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
6
Confidential & Proprietary

7. iPad GUI PSD Design Template
iPad GUI PSD Design Template
http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
7
Confidential & Proprietary

8. iPhone Toolbar Icons
iPhone Toolbar Icons
http://blog.twg.ca/2009/09/free-iphone-toolbar-icons/
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
8
Confidential & Proprietary

9. Gesturecons – Multi-Touch Icons
Gesturecons – Multi-Touch Icons
http://gesturecons.com/
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
9
Confidential & Proprietary

10. iPhone 3G-3GS PSD
iPhone 3G-3GS PSD
http://-kol.deviantart.com/art/iPhone-3G-3GS-PSD-77479622
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
10
Confidential & Proprietary

11. iPad
iPad Design Elements
iPad Canvas
Keyboard: Portrait
Alerts
Copy/Paste
Images
Status Bar
Tab Bar
Navigation Bar
Toolbar
Search Bar
Button Bar
Picker
Popover: Top and Bottom
Popover: Left and Right
Popover: Table
Popover: Button
Popover: Action Sheet
Table View
Table View: Groips
Slit View
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
11
Tue Jun 08 2010 Confidential & Proprietary

12. UI: iPad
UIWindow
1024 x 768
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
12
Confidential & Proprietary

13. UI: iPad: Keyboard: Portrait
Q W E R T Y U I O P
A S D F G H J K L return
! ?
Z X C V B N M
, .
.?123 .?123
1 2 3 4 5 6 7 8 9 0
- / : ; ( ) $ & @ Done
#+= undo . , ? ! ! ” #+=
ABC ABC
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
13
Confidential & Proprietary

14. Common: Alerts
Title
Too-frequently requesting confirmation
is likely to be more annoying than
helpful.
OK
Title
Alerts, in particular, should be used
only rarely.
Cancel OK
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
14
Tue Jun 08 2010 Confidential & Proprietary

15. Common: Copy/Paste
Select Select All Paste
Select Select All Paste
Copy
Copy
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
15
Confidential & Proprietary

16. Common: Image
iPad
iPhone
Icon UIIMAGE
Icon
IMG
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
16
Confidential & Proprietary

17. UI: IPad: Status Bar
iPad 9:24 PM
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
17
Confidential & Proprietary

18. UI: iPad: Tab Bar
Tab 1 Tab 2 Tab 3 Tab 4 More
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
18
Confidential & Proprietary

19. UI: iPad Navigation Bar
Title Title
Title Title
Back Title Edit
Title Edit
Title
Title
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
19
Confidential & Proprietary

20. UI: iPad: Toolbar
Label

21. UI: iPad: Search Bar
Search Search
Search Search
Search ! Search !
Search Cancel Search Cancel
Scope Scope Scope Scope Scope Scope Scope Scope
Scope Scope Scope Scope Scope Scope Scope Scope
Scope Scope Scope Scope Scope Scope Scope Scope
Scope Scope Scope Scope Scope Scope Scope Scope
Scope Scope Scope Scope Scope Scope Scope Scope
Scope Scope Scope Scope Scope Scope Scope Scope
21
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
21
Confidential & Proprietary

22. UI: iPad: Button Bar
Done Edit Save Cancel Undo Redo Label Label
+ " # $ % ! & ' ( )
+ " # $ % ! & ' ( * + ) ,
Title Title Title Title Title
Title Title Title Title Title Title
Title Title Title Title Title Title
Title Title Title Title
Title Title TItle Scope
Title Title Title Title
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting 22
22
Confidential & Proprietary

23. UI: iPad: Picker
Top Label
Label A
Label B
Label C
Bottom Label
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
23
Confidential & Proprietary

24. UI: IPad: Popover: Top and Bottom
Title Title
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
24
Confidential & Proprietary

25. UI: iPad: Popover: Left and Right
Title Title
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
25
Confidential & Proprietary

26. UI: iPad: Popover: Table
Done Title Done Title
Default
Default
Default
Default
Default
Default
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
26
Confidential & Proprietary

27. UI: iPad: Popover: Button
Delete
Action
Choice
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
27
Confidential & Proprietary

28. UI: iPad: Popover: Action Sheet
Title Title
Description Description
Delete
Action
Choice
Delete
Action
Choice
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
28
Confidential & Proprietary

29. UI: IPad: Table View
Group Name
Default
IMG
Default
Default Style1
Name
Style2
Title
Subtitle
IMG
Title
Subtitle
Title
IMG Subtitle with multiple lines of text
that wrap lines.
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
29
Confidential & Proprietary

30. UI: iPad: Table View: Groups
Group Title
Style Default
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
30
Confidential & Proprietary

31. UI: iPad: Split View
Title Title
Application
Default
Default
Default
Default
IMG
Default
Name Style1
Name Style2
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
31
Confidential & Proprietary

32. iPhone
iPhone Design Elements
Portrait
Landscape
Keyboard
Bars
Controls
Pickers
Table View
Table View: Grouped
Alerts
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
32
Tue Jun 08 2010 Confidential & Proprietary

33. UI: iPhone: Portrait
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
33
Confidential & Proprietary

34. UI: iPhone: Landscape
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
34
Confidential & Proprietary

35. UI: iPhone: Window Views
UIWindow UIView
320x480 320x460 UTableView
Grouped
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
35
Confidential & Proprietary

36. UI: iPhone: Keyboard
Q W E R T Y U I O P 1 2 3 4 5 6 7 8 9 0 [ ] { } # % ^ * + =
A S D F G H J K L - / : ; ( ) $ & @ ” _ | ~ < > " £ ¥ •
Z X C V B N M #+= . , ? ! ! 123 . , ? ! !
.?123 space return ABC space return ABC space return
1 2 3
. ABC DEF
Q W E R T Y U I O P
4 5 6
A S D F G H J K L GHI JKL MNO
Z X C V B N M 7 8 9
PQRS TUV WXYZ
.?123 space return
0
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
36
Confidential & Proprietary

37. UI: iPhone: Bars
iPhone 10:15 PM
Title
iPhone 10:15 PM
Description
iPhone 10:15 PM
Title
Page Title
foo.com Search
Tab 1 Tab 2 Tab 3 Tab 4 More Search
1
Search !
Tab 1 Tab 2 Tab 3 Tab 4 More
Search Cancel
Scope Scope Scope Scope
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
37
Confidential & Proprietary

38. UI: iPhone: Controls
Done Edit Save Cancel Undo Redo
+ " # $ % ! & ' ( ) * + ,
Label Label
Done Edit Save Cancel Undo Redo + " # $ % ! & ' ( ) * + ,
Label Label
Search Browse Location
Title Rounded Button
Title i i 1 2 3
Title ON OFF Tab One Tab Two Tab Three
Title
Title
Download
Delete
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
38
Confidential & Proprietary

39. UI: iPhone: Pickers
Long Option Label All Events 1970
Option 2 One Month 1999
Option 3 Two Months 2038
January 23 2008
February 24 2009
March 25 2010
April 26 2011
May 27 2012
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
39
Confidential & Proprietary

40. UI: iPhone: Table View
Table Footer View
Group Header
Default
IMG
Default
Name Style1
Name Style2
Title
Subtitle
IMG
Title
Subtitle
IMG
Title
Subtitle with multiple lines of text that wrap lines.
Group Footer
Table Footer View
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
40
Confidential & Proprietary

41. UI: iPhone: Table View Grouped
Default Default Default
Default
IMG
Default IMG
Default
Name Style1 Name Style1
Default
Default Name Style2 Name Style2
Title Title
Subtitle Subtitle
Item A
Item B IMG
Title IMG
Title
Subtitle Subtitle
Add...
Title Title
IMG Subtitle with multiple lines of text IMG Subtitle with multiple lines of text
that wrap lines. that wrap lines.
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
41
Confidential & Proprietary

42. UI: iPhone: Alerts
Confirm Save
Save Cancel
ipad_iphone_design_templates_v01.graffle Mike Moir Consulting
42
Confidential & Proprietary