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
Title
Back
Done
Al Smith
Ben Smith
Carl Smith
Dave Smith
Eric Smith
Fred Smith
Greg Smith
Hal Smith
Jane Smith
>
>
>
>
>
>
>
>
>
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
#
3
item 1
item 1
item 1
item 1
item 1
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
Title
Back
Done
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
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
#
item 1
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
Back
Settings
Name
Required
Password
Required
Good
>
Not Connected
>
Status
Wi-Fi
>
Sound
Location
Auto-lock
Advanced Configuration
ON
Never
>
>
Use text descriptions to make the application better
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.
Back
Title
Al Smith
Done
>
10:23pm
This is a short message that I'm writing to tell
you that the thing you thought you did was…
Ben Smith
>
10:10pm
I can't believe you didn't tell me you where going
to be in town. I just talked to Peter and he…
Carl Smith
>
9:13pm
Did you get my message about the meeting next
Wednesday I think we should go as it couldi…
Dave Smith
>
7:25pm
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Phasellus sed quam. Vesti…
Eric Smith
>
5:19pm
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Phasellus sed quam. Vesti…
Fred Smith
item 1
item 1
5:123pm
item 1
item 1
>
item 1
Basic Edit Pattern
Title
Edit
+
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
Title
Done
+
•
-
Al Smith
|
Ben Smith
- Carl Smith
- Dave Smith
- Eric Smith
- Fred Smith
- Greg Smith
- Hal Smith
- Jane Smith
Delete
•
item 1
item 1
item 1
item 1
item 1
item 1
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
• 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
http://www.raizlabs.com
<
>
+
Landscape Example
Al Smith
Ben Smith
Carl Smith
Dave Smith
Eric Smith
>
>
>
>
>
• For certain applications landscape may make sense
• In this view the keyboard takes almost 50% of the space when
shown
Alert Message
• Avoid when possible
• Place actionable text in the
buttons
• Use helpful alerts
Trouble connecting
to the server.
Try again
Ignore
Panel Message
• Use to confirm delete
• Use to quickly present a
couple choices
Are you sure you want to delete?
Delete
Archive
Cancel
Common Title bars
Basic Title
Any title bar can have an optional description line
Back
Back
View Item Name
Back
Edit Item
Edit
View List
Back
1 of 7
Cancel
New Object
Day
Week
Back
Edit
+
/\
\/
Save
Month
Edit
Title
View Item Name
Basic List
Al Smith
Ben Smith
Carl Smith
Dave Smith
Eric Smith
Fred Smith
Greg Smith
Hal Smith
Jane Smith
Secondary Action
>
>
>
>
>
>
>
>
>
Al Smith
Ben Smith
Carl Smith
Dave Smith
Eric Smith
Fred Smith
Greg Smith
Hal Smith
Jane Smith
Alphabetical long lists
Al Smith
Ben Smith
Carl Smith
Dave Smith
Eric Smith
Fred Smith
Greg Smith
Hal Smith
Jane Smith
>
>
>
>
>
>
>
>
>
Searchable
>
>
>
>
>
>
>
>
>
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
#
Al Smith
Ben Smith
Carl Smith
Dave Smith
Eric Smith
Fred Smith
Greg Smith
Hal Smith
Jane Smith
>
>
>
>
>
>
>
>
>
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
#
Grouped List
Multi-line List
Al Smith
Fruits
Apples
Peach
Grapes
>
>
>
Spinach
Lettuce
Potato
Zucchini
This is a short message that I'm writing to tell
you that the thing you thought you did was…
Ben Smith
>
>
>
>
>
10:10pm
I can't believe you didn't tell me you where going
to be in town. I just talked to Peter and he…
Carl Smith
Vegetables
>
10:23pm
>
9:13pm
Did you get my message about the meeting next
Wednesday I think we should go as it couldi…
Dave Smith
>
7:25pm
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Phasellus sed quam. Vesti…
Eric Smith
>
5:19pm
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Phasellus sed quam. Vesti…
Fred Smith
List in editing Mode
-
Al Smith
|
Ben Smith
- Carl Smith
- Dave Smith
- Eric Smith
- Fred Smith
- Greg Smith
- Hal Smith
- Jane Smith
Delete
5:123pm
>
List that is sortable
Al Smith
Ben Smith
Carl Smith
Dave Smith
Eric Smith
Fred Smith
Greg Smith
Hal Smith
Jane Smith
≡
≡
≡
≡
≡
≡
≡
≡
≡
Text Editable
Selected Table Cells
Name
Required
Daily
Password
Required
Weekly
Monthly
Details Editable
Good
>
Not Connected
>
Status
Wifi
Yearly
>
Sound
Actionable in-place
Wifi
ON
Location Services
OFF
High
Low
Low
Medium
Text message
High
Add to favorites
Password
a
Normal
Spinner
Choice One
Choice Two
Choice Three
Choice Four
Choice Five
Number Pad
Landscape
Begin Mockups Here
• Use this space to describe
the purpose of the page and
any interaction notes
- description