Mobile app wireframes

!"#$%&$&%'$&(")*+,"#'
*-)'(./01#'+&2'3&%")#
4)"%'5+$6'''7%)+$6

Disclosure, duplication, or use of the document, or any of its contents, for purposes other than those authorize by Raizlabs without
the written permission of Raizlabs is prohibited.

© Raizlabs Corporation 2011. All Rights Reserved.

Wednesday, February 23, 2011

8"9:"',-0"'+';-&%'<+=

Photo: Telefon AB LM Ericsson

February 18, 2011 Raizlabs © 2010 • Proprietary and Confidential
2


>+&2'.";2'$&(")*+,"#

3


?';-('.+#',.+&%"2

./%0#),,-- !"#$%!&''()*+,- 012/3&),45)6&3

4


8.+(9#'&"<@
• 8"9)"'0-)"',-&&",("2
– 8"'+;<+=#'.+:"'$&(")&"(
• ?2+AB:"'C,)""&
– D#"'":")='A$E";
• F-,+B-&
– 4GCH'I-0A+##
• J&2K/#")'+AA#
– L-&K(",.&$,+;'/#")#'+)"'$&#(+;;$&%'+AA#

5


!"#$%&$&%'*-)'0-1$;"
MN G.=#$,+;''
ON P=A$&%'+&2'P+AA$&%
QN 5"+2$&%'I-&("&(
RN F-,+B-&
SN I-&("E(

6


MN'G.=#$,+;

7


ON'T&A/('I-&#$2")+B-&#

73&)8#39):'&& ./)8#394):'&&

8


QN'5"+2$&%'I-&#$2")+B-&#

February 18, 2011
U&-<'+&=-&"';$V"'(.$#@
Raizlabs © 2010 • Proprietary and Confidential
9


RN'F-,+B-&'F-,+B-&'F-,+B-&
• ?,B-&+1;"'G)-E$0$(=
• !"#$%&$&%'*-)'#-0"-&"'<.-9#'&-('
$&'*)-&('-*'(."$)'2"#V'

10


!"#$%&'*-)';-,+B-&
• >-0"
• 8-)V
• I+)WX/#WC/1<+=
• 8+;V$&%
• 5"#(+/)+&(
• C.-AA$&%
• C,.--;
• X+(.)--0

11


SN'I-&("E('+)-/&2'=-/


SN'Y1Z",('I-&("E(

13


P."'A.-&"'$#'&-('+'GI
!"#$%&'A+[")&#'
(.+('<-)V'-&'+'GI'
0+='&-('<-)V'-&'+'
(-/,.'A.-&"'

14


-1$;"':#N'!"#V(-A

+)#,-" !"#$%"&'()*
MRKM]A('*-&(#'(=A$,+; M_KMOA('*-&(#'(=A$,+;
F+)%"'.$('(+)%"(#'^_KM__AE >$('(+)%"(#'M^KQOAE'#b/+)"
YAB0$6"'*-)'^R_E`^_ YAB0$6"'M_OREc^]
?,B-&#a ?,B-&#a
P+A I;$,V
P+A'>-;2 5$%.('I;$,V
C<$A" !-/1;"'I;$,V
G$&,. I;$,V'!)+%
5-(+("
C.+V"

15


d$#/+;'!"#$%&

• D#"';+)%"'A)"#"&(+B-&'*-&(# Back Title Done

search

• D#"';+)%"'3&%")'BA'#$6"' S
Al Smith
(+)%"(# Ben Smith
Carl Smith
Dave Smith
Eric Smith
Fred Smith
Greg Smith
Hal Smith
Jane Smith
Favorites Recents Contacts Keypad Voicemail


Minimize on-screen
elements

Quantity, not size


Make things easy to tap


I-00-&'I-&()-;#
• X/[-&
• C;$2")
• G$,V")WCA$&&")
• P+1#
• L+:$%+B-&
• ./0,&(&/.

21


F$#(#'+&2'L+:$%+B-&

22


M'#,)""&'M'(+#V



e"#f'X/('/#")#'2-&9('<+&('(-'2$%



Wire framing an
iPhone Application

Also called storyboarding and pencil prototyping


Basic List Pattern

• We use wireframes to Back Title Done
tell a story of how the
Al Smith
interface is used.
Ben Smith
– Keep it simple Carl Smith
– Less is more Dave Smith
– Use established Eric Smith
design patterns Fred Smith
when possible Greg Smith
Hal Smith
Jane Smith

Favorites Recents Contacts Keypad Voicemail


Basic List Secondary Action
Al Smith Al Smith
Ben Smith Ben Smith
Carl Smith Carl Smith
Dave Smith Dave Smith
Eric Smith Eric Smith
Fred Smith Fred Smith
Greg Smith Greg Smith
Hal Smith Hal Smith
Jane Smith Jane Smith

Alphabetical long lists Searchable

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

Basic Table Pattern

• Tables are grouped into logical
Back Settings
sections
• Each table cell is usually one of the Name Required

following: Password Required

– Text field
– Label with details arrow Status Good

– Label with status and arrow Wi-Fi Not Connected

– Label with toggle Sound
• Use a short descriptive footer to
Location
provide additional help
Auto-lock
• Each grouping is usually connected
logically Advanced Configuration

Use text descriptions to make the application better


Multi-line List Pattern

• Use the multi-line pattern to give
Back Messages Done
users a peek at what may be in the
details page. Al Smith 10:23pm
This is a short message that I'm writing to tell

• This uses up more vertical space so you that the thing you thought you did was…

Ben Smith 10:10pm
don't use it if you expect a lot of I can't believe you didn't tell me you where
going to be in town. I just talked to Peter…
scrolling. Carl Smith 9:13pm

• Email is a good example where you Did You get the message about the meeting
Next Wednesday? I think we should take…
usually read from the top and Dave Smith 7:25pm

decide if you want details. Hey! Nice presentation. Before we sign the
contract, let’s get a head start on the wire…

Eric Smith 5:19pm
Should we order some pizzas? There’s a lot to
do before we can ship this app, and we want…

Fred Smith 5:13pm
I’m the finance minister of a remote island
nation with a proposition for you. Please se…


Show
Interaction

Edit Title Edit Title • The editing pattern
allows you to add,
Al Smith Al Smith edit and delete
items from a list
Ben Smith Ben Smith Delete
• Consider
Carl Smith Carl Smith supporting the
swipe delete
Dave Smith Dave Smith action
Eric Smith Eric Smith
Fred Smith Fred Smith
Greg Smith Greg Smith
Hal Smith Hal Smith
Jane Smith Jane Smith
Swipe to delete gesture

Favorites Recents Contacts Keypad Voicemail Favorites Recents Contacts Keypad Voicemail


Landscape Example

Al Smith
Ben Smith
Carl Smith
Dave Smith

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


Are you sure?

• Simple modal UI to make decisions
• Located near the thumb area, easy
to tap. Al Smith 10:23pm
This is a short message that I'm writing to tell
you that the thing you thought you did was…
• Quickly present a couple choices 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…

Are you sure you want to delete?

Delete

Archive

Cancel


Progress Indicators

• There are three types of progress
Title
commonly used.
– Title bar or tool bar spinner such as
in email. You can keep working.
– Heads up display spinner. You have
to wait and we don't know how long.
– Panel progress. You have to wait
but we can tell you how far along
we are.

Downloading 2 of 4


-)"'8$)"*)+0"#'Y&;$&"
Free version: bit.ly/WireframeFree
Pro version coming soon bit.ly/WireframePro


Mobile Web


-1$;"'8"1'X+#$,#
• I+&9('A$&,.W6--0'<$(.'-&"'.+&2
• !"(",('0-1$;"'1)-<#")#
• T*'=-/'.+:"'(."',-&("&('(."'.+)2'A+)('$#'2-&"

39


JEA",('(."'/&"EA",("2
• L-'&"(<-)V
• P-/,.'$#'&-('(."'#+0"'+#'I;$,V
• I+;;#'+&2'P"E('0"##+%"#
• 5"%$-&'!$g")"&,"#

40


P+1;"(#'+)"'P-/,.

41


>+&2K.";2

42


P-A'P+1;"('?)"+#
• +%+6$&"'W'I-&("&(
– h;$A1-+)2'W'8$)"2'
• h$";2'2+(+',-;;",B-&
• h$";2'#+;"#'(--;
• ?/%0"&("2'Pd'"EA")$"&,"
• 4+0"#

43


iI-g""'C.-A9'/#+1$;$(=
• D#+1$;$(='-/('$&'(."')"+;'<-);2
• C.-/;2")'#/)3&%
• 5",)/$(H'$&#(+;;H'-1#"):"'-:")',-g""
• h+#('$(")+B-&'

44


C;$2"#'&-(',/j&%'$(@

T*'=-/'0$##"2'(."'
A)"#"&(+B-&'+&2'<-/;2'
;$V"'(-'.$)"'5+$6;+1#'(-'
%$:"'(.$#'(+;V'A;"+#"'
,-&(+,('/#N

%)+$67)+$6;+1#N,-0

46


Thank You
Gregory Raiz
graiz@raizlabs.com

Follow me @graiz


?1-/('5+$6;+1#
• X+#"2'$&'X-#(-&
• ?'%)-<$&%'("+0'-*'M_'2":";-A")#'W'2"#$%&#
• !":";-A"2'-:")'R_'0-1$;"'+AA;$,+B-&#
– Q_'$G.-&"'?AA;$,+B-&#
– S'?&2)-$2'?AA;$,+B-&#
– S'$G+2'?AA;$,+B-&#
– G;/#'0+&='A)-(-(=A"#
• !$:")#"'"EA")$"&,"'$&'0/;BA;"'*+,"(#'-*'0-1$;"'
#()+("%='2"#$%&'+&2'2":";-A0"&('N

47


5+$6;+1#'!-0+$&'JEA")$"&,"
• +AA$&%'(",.&-;-%=
• C-,$+;'&"(<-)V$&%'(--;#
• ?/2$-'+AA;$,+B-&#
• JK,-00"),"
• 4JYK;-,+B-&'()+,V$&%
• h$";2'2+(+',-;;",B-&'+&2',+;,/;+B-&
• +%+6$&"'+&2'1--V',-&("&('A)"#"&(+B-&
• ?AA;$,+B-&'2"A;-=0"&(
• J&(")A)$#"'+AA#

48


/;BA;"'G;+k-)0#
• JEA")B#"'$&';"+2$&%'0-1$;"'
A;+k-)0#a
– ?&2)-$2
– $G.-&"W$G+2
• ?AA',)"+B-&'(+)%"B&%'
0/;BA;"'A;+k-)0#
– I-00-&'<"1'?GT#'(-'B"'
0-1$;"'+AA#'(-%"(.")

• F"+)&'0-)"'+('5+$6;+1#N,-0

49


Mobile app wireframes

Recommended

Recommended

More Related Content

What's hot

What's hot (15)

Viewers also liked

Viewers also liked (20)

Similar to Mobile app wireframes

Similar to Mobile app wireframes (20)

More from Gregory Raiz

More from Gregory Raiz (11)

Recently uploaded

Recently uploaded (20)

Mobile app wireframes