ipad/iphone - ui design resources

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.

1Mike Moir Consulting

Confidential & Proprietary

ipad_iphone_design_templates_v01.graffle

Tue Jun 08 20101

2

Overview

Mike Moir Consulting


ipad_iphone_design_templates_v01.graffle 2

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.

3

Resources (1 of 3)




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 Libraryhttp://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 GUIhttp://developers.freshbooks.com/blog/view/freshbooks_iphone_application_gui/

iPhone GUI as Rich Symbols for Fireworkshttp://jcorrea.es/2008/08/07/iphone-gui-as-rich-symbols-for-fireworks/

iPhone UI Vector Elementshttp://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements

iPad GUI PSD Design Templatehttp://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/

Designer Resources

4

Resources (2 of 3)




iPad Vector GUI Elementshttp://iconlibrary.iconshock.com/icons/ipad-vector-gui-elements-tabs-buttons-menus-icons/

MobileMe Full iPhone GUIhttp://kediashubham.deviantart.com/art/MobileMe-Full-iPhone-GUI-97267445

iPad Vector GUI Elementshttp://iconlibrary.iconshock.com/icons/ipad-vector-gui-elements-tabs-buttons-menus-icons/

MobileMe Full iPhone GUIhttp://kediashubham.deviantart.com/art/MobileMe-Full-iPhone-GUI-97267445

Matte iPhone UIhttp://kediashubham.deviantart.com/art/Matte-iPhone-UI-v1-1-110768869

Matte iPhone UIhttp://vector.tutsplus.com/freebies/vectors/sexy-vector-cell-phone/

MobileMe Full GUIhttp://bg2009.deviantart.com/art/MobileMe-Full-GUI-Beta10-124389884

iPhone 3G-3GS PSDhttp://-kol.deviantart.com/art/iPhone-3G-3GS-PSD-77479622

Apple iPad: Fully editable PSDhttp://kevinandersson.deviantart.com/art/Apple-iPad-Fully-editable-PSD-152146899

Apple iPhone 4G .PSDhttp://zandog.deviantart.com/art/Apple-iPhone-4G-PSD-161681253

iPhone Toolbar Iconshttp://blog.twg.ca/2009/09/free-iphone-toolbar-icons/

5

Resources (Page 3 of 3)




Glyphishhttp://glyphish.com/

iPhone Toolbar Icon Sethttp://www.app-bits.com/downloads/iphone-toolbar-icon-set.html

Free iPhone Toolbar Iconshttp://www.pixelpressicons.com/?p=108

30 Free Vector Iconshttp://www.dezinerfolio.com/freebie/30-free-vector-icons

iconSweetshttp://www.iconsweets.com/

Touchscreen Hand Gestures v2 (OmniGraffle)http://graffletopia.com/stencils/439

Gesturecons – Multi-Touch Iconshttp://gesturecons.com/

6

Ultimate iPhone Stencil (OmniGraffle)




Ultimate iPhone Stencil (OmniGraffle)http://graffletopia.com/stencils/413

7

iPad GUI PSD Design Template




iPad GUI PSD Design Templatehttp://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/

8

iPhone Toolbar Icons




iPhone Toolbar Icons

http://blog.twg.ca/2009/09/free-iphone-toolbar-icons/

9

Gesturecons – Multi-Touch Icons




Gesturecons – Multi-Touch Iconshttp://gesturecons.com/

10

iPhone 3G-3GS PSD




iPhone 3G-3GS PSDhttp://-kol.deviantart.com/art/iPhone-3G-3GS-PSD-77479622

iPad Design Elements




Tue Jun 08 201011

iPad CanvasKeyboard: PortraitAlertsCopy/PasteImagesStatus BarTab BarNavigation BarToolbarSearch BarButton BarPickerPopover: Top and BottomPopover: Left and RightPopover: TablePopover: ButtonPopover: Action SheetTable ViewTable View: GroipsSlit View

iPad

12

UI: iPad




UIWindow1024 x 768

13

UI: iPad: Keyboard: Portrait




Q W

A

E R T Y U I O P

return

.?123.?123

Z X C V B N M!,

?.

LKJHGFDS

1 2

-

3 4 5 6 7 8 9 0

Done

ABCABC

. , ? ! ! ”

@&$)(;:/

#+= #+=undo

14

Title

Alerts, in particular, should be used

only rarely.

OKCancel

Title

Too-frequently requesting confirmation

is likely to be more annoying than

helpful.

OK

Common: Alerts




Tue Jun 08 201014

15

Select Select All Paste

Select Select All Paste

Copy

Copy

Common: Copy/Paste




16

Common: Image




UIIMAGE

IMG

iPhoneIcon

iPadIcon

17

UI: IPad: Status Bar




iPad 9:24 PM

18

UI: iPad: Tab Bar




MoreTab 4 Tab 3Tab 2Tab 1

19

UI: iPad Navigation Bar




Title

Title EditTitleBack Edit

Title

Title Title

Title

Title

UI: iPad: Toolbar

Label

21

UI: iPad: Search Bar

21

ScopeScopeScopeScope

Scope ScopeScopeScope


ScopeScopeScope Scope


Search Cancel


Search

Search

Search !

Search

Search

Search Cancel

ScopeScope ScopeScope


Scope ScopeScope Scope

ScopeScope Scope Scope



Search !




22

UI: iPad: Button Bar




Done

+ " # $ % ! & ' ( )

+ " # $ % ! & ' ( )* + ,

Label LabelEdit Save Cancel Undo Redo

Title Title

Title TitleTitle

Title Title

TitleTitleTitleTitle

Title TitleTitleTitle

TitleTitleTitleTitle

TitleTitleTitle Title

ScopeTitleTitle TItle

TitleTitle

23

UI: iPad: Picker




Label A

Label C

Top Label

Bottom Label

Label B

24

UI: IPad: Popover: Top and Bottom




Title Title

25

UI: iPad: Popover: Left and Right




TitleTitle

26

UI: iPad: Popover: Table




TitleDoneTitleDone

Default

Default

Default

Default

Default

Default

27

UI: iPad: Popover: Button




Delete

Action

Choice

28

UI: iPad: Popover: Action Sheet




Action

Choice

Delete

TitleDescription

TitleDescription

Action

Choice

Delete

29

UI: IPad: Table View




Group Name

Default Style1

NameStyle2

TitleSubtitle with multiple lines of text

that wrap lines.

IMG

TitleSubtitle

Default

DefaultIMG

TitleSubtitle

IMG

30

UI: iPad: Table View: Groups




Style Default

Group Title

Style Default

31

UI: iPad: Split View




Title Title

Default

Application

DefaultIMG

Name Style1

Name Style2

Default

Default

Default

iPhone Design Elements




Tue Jun 08 201032

PortraitLandscapeKeyboardBarsControlsPickersTable ViewTable View: GroupedAlerts

iPhone

33

UI: iPhone: Portrait




34

UI: iPhone: Landscape




35

UI: iPhone: Window Views




UIView320x460

UIWindow320x480 UTableView

Grouped

36

UI: iPhone: Keyboard




Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

1 2 3 4 5 6 7 8 9 0

- / : ; ( ) $ & @

. , ? ! !#+=

spaceABC return

”

[ ] { } # % ^ * + =

_ \ | ~ < > " £ ¥

. , ? ! !123

spaceABC return

•

0

8TUV

9WXYZ

7PQRS

5JKL

6MNO

4GHI

2ABC

3DEF

1.

Q W E R T Y U I O P

A S D F G H J K L

Z X C V B N M

space.?123 return

37

UI: iPhone: Bars




Page Title

foo.com Search

iPhone 10:15 PM

iPhone 10:15 PM

10:15 PM10:15 PMiPhone

CancelSearch


Search !

SearchMoreTab 3Tab 2Tab 1 Tab 4

MoreTab 3Tab 2Tab 1 Tab 4

1

Title

Title

Description

38

UI: iPhone: Controls




Rounded Button

ON OFF

Done CancelSave

Save +

Download

Title

Title

Title

Title

Title

"

Edit Undo Redo " # $ % ! & ' ( +

# $ % ! & ' ( )

+

Edit Undo RedoCancelDone

*)

* + ,

,

i i

Label

Label

Label

Label

Delete

Tab ThreeTab One Tab Two

Search LocationBrowse

1 32

39

UI: iPhone: Pickers




Long Option Label

Option 2

Option 3

1970

1999

2038

All Events

One Month

Two Months

23

24

25

26

27

January

February

March

April

May

2008

2009

2010

2011

2012

40

UI: iPhone: Table View




Group Header

Table Footer View

Table Footer View

Group Footer

Name Style1

Name Style2

TitleSubtitle

TitleSubtitle

IMG

IMGTitleSubtitle with multiple lines of text that wrap lines.

Default

DefaultIMG

41

UI: iPhone: Table View Grouped




Name Style1

Name Style2

TitleSubtitle

TitleSubtitle

IMG

IMG


that wrap lines.

Default

DefaultIMG

Default

Default

Default

DefaultName Style1

Name Style2

TitleSubtitle

TitleSubtitle

IMG

IMG


that wrap lines.

Default

DefaultIMG

Item A

Item B

Add...

42

UI: iPhone: Alerts




Cancel

Save

Save

ConfirmConfirm

ipad/iphone - ui design resources

Technology

iphone design omnigrafe

iphone guihttp

iphone app design

iphone gui elements

iphone toolbar iconshttp

matte iphone uihttp

editabl apple iphone

ipad vector gui elementshttp