Basic iPhone Wireframe

• This is a sample wireframe that shows how to use various parts to create a basic design

• Remember– Keep it simple

– Less is more

– Use the list design patterns

item 1 item 1 item 1 item 1 item 1

Title DoneBack

Al Smith >Ben Smith >Carl Smith >Dave Smith >Eric Smith >Fred Smith >Greg Smith >Hal Smith >Jane Smith >

ABCDEFGHIJKLMNOPQRSTUVWXYZ#

3

Basic List Search Pattern

• This shows a basic list search pattern

• Use this when you have a very large list that may need to be searched.

• I consider large to be over 100 items

• Use the ABC along the right if the list is alphabetical

item 1 item 1 item 1 item 1 item 1

Title DoneBack

Al Smith >Ben Smith >Carl Smith >Dave Smith >Eric Smith >Fred Smith >Greg Smith >Hal Smith >Jane Smith >

ABCDEFGHIJKLMNOPQRSTUVWXYZ#

Basic Table Pattern

• Tables are grouped into logical sections

• Each table cell is usually one of the following:– Text field

– Label with details arrow

– Label with status and arrow

– Label with toggle

• Use a short descriptive footer to provide additional help

Status >Good

Wi-Fi >Not Connected

Sound >

Location ON

Auto-lock >Never

Name Required

Advanced Configuration >

Password Required

Use text descriptions to make the application better

SettingsBack

item 1 item 1 item 1 item 1 item 1

Title DoneBack

Al Smith >

Ben Smith >

Carl Smith >

Dave Smith >

Eric Smith >

Fred Smith >

10:23pm

10:10pm

9:13pm

7:25pm

5:19pm

5:123pm

This is a short message that I'm writing to tell you that the thing you thought you did was…

I can't believe you didn't tell me you where going to be in town. I just talked to Peter and he…

Did you get my message about the meeting next Wednesday I think we should go as it couldi…

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sed quam. Vesti…

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sed quam. Vesti…

Multi-line List Pattern

• Use the multi-line pattern to give users a peek at what may be in the details page.

• This uses up more vertical space so don't use it if you expect a lot of scrolling.

• Email is a good example where you usually read from the top and decide if you want details.

item 1 item 1 item 1 item 1 item 1

Title +

Basic Edit PatternEdit

Al Smith >Ben Smith >Carl Smith >Dave Smith >Eric Smith >Fred Smith >Greg Smith >Hal Smith >Jane Smith >

item 1 item 1 item 1 item 1 item 1

Title +Done

- Al Smith Ben Smith Carl Smith Dave SmithEric Smith Fred SmithGreg SmithHal Smith Jane Smith

|

----

---

Delete

• The editing pattern allows you to add, edit and delete items from a list

• Consider supporting the swipe delete action

Web Page Pattern

Web Page Title

http://www.raizlabs.com

< > +

• If you open up a web-page or are doing mobile web-design you can use this to show how users may browse the web

• The address bar may be hidden after the page loads

Landscape Example

• For certain applications landscape may make sense• In this view the keyboard takes almost 50% of the space when

shown

Al Smith >Ben Smith >Carl Smith >Dave Smith >Eric Smith >

Alert Message

• Avoid when possible• Place actionable text in the

buttons• Use helpful alerts Trouble

connecting to the server.

IgnoreTry again

Panel Message

• Use to confirm delete• Use to quickly present a

couple choices

Are you sure you want to delete?

Delete

Archive

Cancel

Day MonthWeek

Back View Item Name

View List +Edit

Back Edit Item Edit

Back

Title

1 of 7 /\ \/Back

New ObjectCancel Save

Edit

Common Title bars

Back View Item NameAny title bar can have an optional description line

Basic Title

Al Smith >Ben Smith >Carl Smith >Dave Smith >Eric Smith >Fred Smith >Greg Smith >Hal Smith >Jane Smith >

Al Smith Ben Smith Carl Smith Dave Smith Eric Smith Fred Smith Greg Smith Hal Smith Jane Smith

>>>

>>

>>>>

Basic List Secondary Action

Alphabetical long lists

Al Smith >Ben Smith >Carl Smith >Dave Smith >Eric Smith >Fred Smith >Greg Smith >Hal Smith >Jane Smith >

ABCDEFGHIJKLMNOPQRSTUVWXYZ#

Al Smith >Ben Smith >Carl Smith >Dave Smith >Eric Smith >Fred Smith >Greg Smith >Hal Smith >Jane Smith >

ABCDEFGHIJKLMNOPQRSTUVWXYZ#

Searchable

Grouped List

Apples >Peach >Grapes >

Spinach >Lettuce >Potato >Zucchini >

Fruits

Vegetables

Al Smith >

Ben Smith >

Carl Smith >

Dave Smith >

Eric Smith >

Fred Smith >

10:23pm

10:10pm

9:13pm

7:25pm

5:19pm

5:123pm

This is a short message that I'm writing to tell you that the thing you thought you did was…

I can't believe you didn't tell me you where going to be in town. I just talked to Peter and he…

Did you get my message about the meeting next Wednesday I think we should go as it couldi…

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sed quam. Vesti…

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sed quam. Vesti…

Multi-line List

- Al Smith Ben Smith Carl Smith Dave SmithEric Smith Fred SmithGreg SmithHal Smith Jane Smith

|

----

---

Delete

List in editing ModeList that is sortable

Al Smith ≡Ben Smith ≡Carl Smith ≡Dave Smith ≡Eric Smith ≡Fred Smith ≡Greg Smith ≡Hal Smith ≡Jane Smith ≡

Text Editable

Status >Good

Wifi >Not Connected

Sound >

Wifi ON

Name Required

Password Required

Details Editable

Text message Add to favorites

Actionable in-place

Location Services OFF

Low High

Low HighMedium

Selected Table Cells

Daily

Weekly

Monthly a

Yearly

Password

Normal

Number Pad

Choice OneChoice TwoChoice ThreeChoice FourChoice Five

Spinner

Landscape

Begin Mockups Here

• Use this space to describe the purpose of the page and any interaction notes

- description

We have a new template with additional of parts and additional examples of how to construct a user interface page. Learn more about our new library here:

http://bit.ly/iOSWireframe

We hope you found this template helpful.