Excessive homepage treatment in release one...Illustrator CS4 One-on-One: Master with Deke...
Transcript of Excessive homepage treatment in release one...Illustrator CS4 One-on-One: Master with Deke...
Excessive homepage treatment in release one:
Account management that can be deferred in phase I:
Also can be deferred: new member registration and expired member activation:
Think big, start small, focus on the core: a case study of a mobile site overdueStart Small Focus on the Core
1 / 4Page
Go search lynda.com, movies, tutorials
Course Listing: <Acrobat>
lynda.com
Home Subjects Software Vendors Authors
Sort by --Relevance--
Narrow your 55 results in <Acrobat>
Illustrator CS4 One-on-One: Masterwith Deke McClelland02/11/2010 | Duration 01:12:21 | 6 transcript matches
Fireworks CS4: Rapid Prototypingwith Jim Babbage02/11/2010 | Duration 01:12:21 | 6 transcript matches
Course listings 1-15 OF 55
Narrow your 55 results for "<Acrobat>" by:
VersionAcrobat 9 (25)Acrobat 8 (20)Acrobat 7 (8)Acrobat 6 (2)
[+] view more versions
Subject3D (4)Graphic Design (7)Photography (6)Web Design (3)
[+] view more software
TopicCreative Inspirations (6)Digital Photography (7)Print Design (7)Business Applications (3)
[+] view more vendor
My Training Log OutMy Account | |
One example of functionality deviation in visual design from the interaction design: filter treatment
Think big, start small, focus on the core: a case study of a mobile site overdueInteraction Design v.s. Visual Design
2 / 4Page
A few examples of design changes from user research:
increased font size and header treatment
increased font size and header treatment
Increased row height and font size per usability testing:
!"#$%&
!"#$%&% %#'(")*!% +"!#,&-(.$*&% '/"0
#'()"*+
1*/(&$2(3*%2/*%(2"12!"#$%&%2456
*%
*%
!"#$%&'(!) *%+%,
-..)/'+$0,)
%"$(7222$&/&.%&+
!"#$%&'()"*&'+,-
./'01#2&345'%$64'7,8&
122 4896
34'5-$'%42 45:6
3".'%2 45;6
6"!'40!!2 4<=>6
20!'742 4<=96
2080+%&0,2 4?=6
9%50)(%5&"$'472 4<8=6
:;%$%7,-&;<2 4<@86
='.0%2 4<5<6
>0#)?)'4$0,-($'802 4:@?6
2%("504$-,'0!2 45:6
!"#$%&'()"*&'+,-
9/'01#2&345'$*$4$,%':$&;5'&<,=7%&'>&6$8*
'.!A2("2(")
B2/*%(2!"-(*-#&%
3.8-4(0.):;%$%!;%&)@
C"&2D.//&$E2F$#!&2G&.H*-2 @>7:@7;:2I2@8J:@@:
3,$'!$)A0,'0!)B'$;)9'++5-4)*",$'!
G*//,.-2K#$(*%2 @@78<7<82I2@:J:@@?
60,$)C%4,%<D)2'7'$-+):-'4$0,)-4.)E++"FFF
F&$(2D"-$"L2 I2@@7;?7@@2I2@;J:@<@
60<%4.)AG'4H)I%'47)200&0,)B'$;):;%FFF
M&&2N.$*%2 @57897<<2I2@=J:@@?
*%,0+2J3>)I,-&;'()A"'$0)K1)L!!04$FFF
D.$A2O'+&/-"#$2 <@78<75=2I2@:J:@@=
!"#$%&'()"*&'+,-
M"+0,)L!!04$'-+)N,-'4'47
D"$+L2P"/+*-02 I2@@7;97::2I2@<J:@@>
:;%$%!;%&)*A1)*%+%,)*%,,0($'%4
Q.R2Q.//L2 @97<575?2I2@=J:@@9
>%,G'47)B'$;)*%+%,
F$#!&2G&.H*-2 @;78;7;>2I2<@J:@@;
%3"S*-02<T<82"12<=9
1*/(&$2(3*%2/*%(2"12!"#$%&%24<=96 %"$(7222$&/&.%&+
-..)/'+$0,) *%
O:,08)))<222:2225222;2228222=2229222U222<<222<:222P0Q$R
!"#$%&
!"#$%&% %#'(")*!% +"!#,&-(.$*&% '/"0
!"#$%&
!"#$%&% %#'(")*!% +"!#,&-(.$*&% '/"0
!"#$%&'()"*&'+,-
?/'01#2&345'61#4"7$36'%$64'7,8&
*%+%,
2'7'$-+)'++"!$,-$'%4
2'7'$-+)'5-7'47
S-<%"$
:,'4$)?)&,0&,0!!
:,%T0($!
N<&%7,-&;<
>%,G/+%B
!"#$%&
!"#$%&% %#'(")*!% +"!#,&-(.$*&% '/"0
!"#$%&'()"*&'+,-
@/'01#2&345'61#4"7$365'>&6$8*5'A"%"-
M"+0,)L!!04$'-+)N,-'4'47
D"$+L2P"/+*-02 I2@@7;97::2I2@<J:@@>
:;%$%!;%&)*A1)*%+%,)*%,,0($'%4
Q.R2Q.//L2 @97<575?2I2@=J:@@9
>%,G'47)B'$;)*%+%,
F$#!&2G&.H*-2 @;78;7;>2I2<@J:@@;
1*/(&$2(3*%2/*%(2"12!"#$%&%2456 %"$(7222$&/&.%&+
*%!"#$%&'(!) *%+%,
-..)/'+$0,) *%
!"#$%&
!"#$%&% %#'(")*!% +"!#,&-(.$*&% '/"0
%"$(7222$&/&.%&+
!"#$%&'()"*&'+,-
B/'01#2&345'>&6$8*5'C"31=&*4,-$&6
'.!A2("2(")
B2/*%(2!"-(*-#&%
60,$)C%4,%<D)2'7'$-+):-'4$0,)-4.)E++"!$,-$%,
F&$(2D"-$"L2 I2@@7;?7@@2I2@;J:@<@
M'$)9'4,'(;!D)I,-&;'()20!'740,
V*(2G*-$*!3%2 I2@<7@@7@@2I2@:J:@<@
2"-,$0)20!'74D):,0!04$-$'%4)20!'74
W.-!L2X#.$(&2 I2@@78<7@@2I2@?J:@@>
N,%'G-U!)36*)6,-4.)*-5&-'74H)A$-,$)$%)V'W
Q$"*A.2X&%*0-2P$"#)2 I2@@7:<7582I2@<J:@@>
$%G'.%G'D)*;-,-($0,)E++"!$,-$%,
Y*,"-&2M&0-"E2("A*+"A*2 I2@<7@<7@@2I2@<J:@@?
D/'01#2&345'>&6$8*5'#%"8
!"#$%&
!"#$%&% %#'(")*!% +"!#,&-(.$*&% '/"0
Z3&(3&$2L"#[$&2)/.--*-02("2)#'/*%32.2#-*\#&2
%3"$(T$#-2-"H&/2.(2F/#$'2"$2-&&+2("2!$&.(&2.2'$.-+2
'""A21"$2L"#$2!",).-LE2X&%*0-*-02.2F""A2K"H&$2
G.-+%T]-2Z"$A%3")20*H&%2*-%($#!(*"-%2.-+2(*)%2
1$",2%&(#)2("2&-+1/.)%^
Q.0%72O+"'&2KYE2'""A2!"H&$E2_//#%($.("$E2_-X&%*0-E2W*0&/2
`$&-!3
a"%(&+2*-2+&%*0-2I2W"2K",,&-(%2b
c2]/+&$2d-($*&%2 W&S&$2d-($*&%2b
X.H*+2W*/&%2Z3*(&E2)$"+#!&$E2+"!#,&-(.$*&%
`$*+.LE2]!("'&$2:>(3E2:@<@
,"-./0"1+$2".3$01+$5.&"-.75081+9.!5:1;<.=5'&%6.>5%5+:4".!"#$%&"0
!"#$%&'()"*&'+,-
'.!A2("2(")
B2/*%(2!"-(*-#&%
Y*-!&2C.-#.$L2:@@?E2(3&2+"!#,&-(.$L2(&.,2.(2
/L-+.^!",23.%2'$"#03(2L"#2*-("2(3&2/*H&%2"12
&e&,)/.$L2!$&.(*H&2)$"1&%%*"-./%2("2.11"$+2L"#2.2
#-*\#&2"))"$(#-*(L2("2/&.$-2.-+2'&2*-%)*$&+2'L2
(3&*$2S*%+",2.-+2&e)&$*&-!&^2O1(&$2-&.$/L2(3$&&2
L&.$%2.-+2:520#&%(%2*-2(3&2K$&.(*H&2_-%)*$.(*"-%2
%&$*&%E2S&[$&2&,'.$A*-02"-2.2-&SE2$*!3&$2.))$".!32
("2(3&2%&$*&%2.-+2S&2!.-[(2S.*(2("2%3.$&2*(2S*(32
L"#f
g-(*/2-"SE2S&[H&2)$&%&-(&+2%3"$(E21"!#%&+2,"H*&%2
!"H&$*-02.2'$".+2%)&!($#,2"12(")*!%2(3.(23&/)20*H&2
*-%*03(2*-("2(3&2S"$A%).!&E2)$"h&!(%E2%("$LE2.-+2
)3*/"%")3*&%2"12(3&20#&%(%2S&[H&21&.(#$&+^2Z&[H&2
-"S2%3*1(&+2"#$2.))$".!32("21"!#%2"-2(&//*-02
#-*\#&2%("$*&%2*-2.2,"$&2*-T+&)(32.-+2)&$%"-./2
S.L̂ 2]#$20"./2*%2("2)$&%&-(2.2!"3&%*H&2%("$L2(3.(2
1/"S%21$",2'&0*--*-02("2&-+2S*(32.-2&-0.0*-02
-.$$.(*H&2%("$Li.2!",)&//*-02H*&S2*-("2(3&2/*H&%2"12
!$&.(*H&2*-+*H*+#./%2(3.(2(&//2L"#E2*-2(3&*$2"S-2
S"$+%E23"S2.-+2S3L2(3&L2'&!.,&2S3"2(3&L2.$&^2
Q3*%2.//"S%2#%2("2)$&%&-(2.2!",)/&(&2H*&S2"12"#$2
%#'h&!(%2.-+2.//"S%2L"#2("2&e)&$*&-!&2*(2(3&2%.,&2
S.L2L"#2S"#/+2.%2*12L"#[$&2S.(!3*-02+"!#,&-(.$L2
1*/,^2`"$2&.%&2"12H*&S*-02"-/*-&E2S&2.$&2"11&$*-02
(S"2S.L%2("2H*&S2(3&2+"!#,&-(.$L72.//2("0&(3&$2.%2
"-&2)*&!&2"$2.%2%,.//&$2%&!(*"-%24/*A&2XNX2
!3.)(&$%6^
Q"+.LE2S&2.$&2$&/&.%*-02"#$21*$%(2+"!#,&-(.$L2*-2
(3*%2-&S21"$,.(72X"L./+2j"#-0E2M"0"(L)&2
X&%*0-&$̂ 2`$",23#,'/&2'&0*--*-0%2*-2.2%,.//2Q&e.%2
.'"#(22 !"-(.!(
-&S2$&/&.%&%2 #)0$.+&
)$*H.!L2)"/*!L2 %*(&2,.)
(&$,%2k2!"-+*(*"-%2 1#//2%*(&
K")L$*03(2l<>>8T:@<@2/L-+.^!",E2_-!^2O//2$*03(%2$&%&$H&+^
2 searchZ3.(2S"#/+2L"#2/*A&2("2/&.$-m
3",&22222!"#T0($222222%"1(S.$&22222.#(3"$22222-&S
5<)$,-'4'472I2,L2.!!"#-(2I2/"02"#(
2 searchZ3.(2S"#/+2L"#2/*A&2("2/&.$-m
3",&22222!"#T0($222222%"1(S.$&22222.#(3"$22222-&S
5<)$,-'4'472I2,L2.!!"#-(2I2/"02"#(
.'"#(22 !"-(.!(
-&S2$&/&.%&%2 #)0$.+&
)$*H.!L2)"/*!L2 %*(&2,.)
(&$,%2k2!"-+*(*"-%2 1#//2%*(&
K")L$*03(2l<>>8T:@<@2/L-+.^!",E2_-!^2O//2$*03(%2$&%&$H&+^
.'"#(22 !"-(.!(
-&S2$&/&.%&%2 #)0$.+&
)$*H.!L2)"/*!L2 %*(&2,.)
(&$,%2k2!"-+*(*"-%2 1#//2%*(&
K")L$*03(2l<>>8T:@<@2/L-+.^!",E2_-!^2O//2$*03(%2$&%&$H&+^
E/'01#2&345'%,*C63,7&':$&;'&<,=7%&
;%50222222222222222%#'h&!(22222222222222222%"1(S.$&22222222222222.#(3"$222222222222222-&S
2 searchZ3.(2S"#/+2L"#2/*A&2("2/&.$-m
5<)$,-'4'472I2,L2.!!"#-(2I2/"02"#(
2 searchZ3.(2S"#/+2L"#2/*A&2("2/&.$-m
3",&22222!"#T0($222222%"1(S.$&22222.#(3"$22222-&S
5<)$,-'4'472I2,L2.!!"#-(2I2/"02"#(
.'"#(22 !"-(.!(
-&S2$&/&.%&%2 #)0$.+&
)$*H.!L2)"/*!L2 %*(&2,.)
(&$,%2k2!"-+*(*"-%2 1#//2%*(&
K")L$*03(2l<>>8T:@<@2/L-+.^!",E2_-!^2O//2$*03(%2$&%&$H&+^
2 searchZ3.(2S"#/+2L"#2/*A&2("2/&.$-m
3",&22222!"#T0($222222%"1(S.$&22222.#(3"$22222-&S
5<)$,-'4'472I2,L2.!!"#-(2I2/"02"#(
.'"#(22 !"-(.!(
-&S2$&/&.%&%2 #)0$.+&
)$*H.!L2)"/*!L2 %*(&2,.)
(&$,%2k2!"-+*(*"-%2 1#//2%*(&
K")L$*03(2l<>>8T:@<@2/L-+.^!",E2_-!^2O//2$*03(%2$&%&$H&+^
2 searchZ3.(2S"#/+2L"#2/*A&2("2/&.$-m
3",&22222!"#T0($222222%"1(S.$&22222.#(3"$22222-&S
5<)$,-'4'472I2,L2.!!"#-(2I2/"02"#(
.'"#(22 !"-(.!(
-&S2$&/&.%&%2 #)0$.+&
)$*H.!L2)"/*!L2 %*(&2,.)
(&$,%2k2!"-+*(*"-%2 1#//2%*(&
K")L$*03(2l<>>8T:@<@2/L-+.^!",E2_-!^2O//2$*03(%2$&%&$H&+^
2 searchZ3.(2S"#/+2L"#2/*A&2("2/&.$-m
3",&22222!"#T0($222222%"1(S.$&22222.#(3"$22222-&S
5<)$,-'4'472I2,L2.!!"#-(2I2/"02"#(
.'"#(22 !"-(.!(
-&S2$&/&.%&%2 #)0$.+&
)$*H.!L2)"/*!L2 %*(&2,.)
(&$,%2k2!"-+*(*"-%2 1#//2%*(&
K")L$*03(2l<>>8T:@<@2/L-+.^!",E2_-!^2O//2$*03(%2$&%&$H&+^
MOCKUP: Mobile subject pageNote: 7 mockups
design approvedmockup date: 11-22-10
need new artwork (mobile only not full site)
tab color:bottom color on the gradient should match below
tab color:bottom color on the gradient should match below
tab color:bottom color on the gradient should match below
tab color:bottom color on the gradient should match below
F&&7'4)&'$*C$3,4&C'$4&=6',%$8*&C'%&G4'"-'-$8)4'H*"4&C'#&%";I',*C',%%";'4)&'-&64'"G'4)&'7,8&4"'3&*4&-',*C'-&6$J&/
lock
lock
lock
lock
lock
lock
lock
lock
32px
increased footer font size and line space
redesigned pagination
Before:
Think big, start small, focus on the core: a case study of a mobile site overdueTest Early & Test Often
3 / 4Page
User study also indicated that mobile app users' user familiarity to expect tappable rows is migrating to mobile sites: a site wide effort to make the entire row tappable when applicable was initiated after the findings were concluded:
Think big, start small, focus on the core: a case study of a mobile site overdueTest Early & Test Often (cont'd)
4 / 4Page