8/13/2019 [Smashing Magazine] 01 - Professional Web Design
1/242
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
2/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!"#$%
8%&$ *96,,- :,';#&'$ # $*4*:;&,' ,3 ;%* 6*$; #.;&:4*$ #6, 4&'-$ I*.*
.*",?*> ;, "#-* ;%* 6,,- *#$&*. ;, .*#> #'> =.&'; ,*$&('$'
8%&$ 6,,- &$ ',; =.,;*:;*> 6F 7L@E M :,=F :,$;$ ,'4F NDEDC #'> &$
#?#&4#64* *K:4
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
3/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!"#$% '( )'*+%*+,
-.%("/%88888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888889
0".,1 !.2+1, 3#'2+ )'.4'."+% 5%#,6+%,888888888888888888888888888888888888888888:
;,< =**> ? !*@#.#A* 5*6 7&B&$&,'8888888888888888888888888888888888888888888888:
C#'#(&'( ;,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
4/242
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
5/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
7*B*4,@ X,'(FG*." S,#4$88888888888888888888888888888888888888888888888888888888888888[W
?%++%. @,%. AB4%.6%*/% 56+1 9+'.;+%$$6*888888888888888888888888888888888888888[9DA +*(&'$ 5&A% # !A,.M88888888888888888888888888888888888888888888888888888888888888888888888[9
J*B*#4&'( A%* 7*$&(' &' !A,.&*$8888888888888888888888888888888888888888888888888888[N
G%* 2,P*. ,3 K",A&,'8888888888888888888888888888888888888888888888888888888888888888888888[Q
G%* +#$&I$ ,3 !A,.MA*44&'( 3,. ^$*. K\@*.&*'I*88888888888888888888888[`
V#@@&4M KB*. ?3A*./ G%* J*#4&AM88888888888888888888888888888888888888888888888888888U9
? E*P C,>*.'F7#M !A,.MA*44*.$888888888888888888888888888888888888888888888888888UN
G%* !A,.MA*44&'( K\@*.&*'I*$ ?., ?>B*.A&$&'( G*#I% ^$ =,A%&'(8888888888888888888119
%
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
6/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
G%* CMA% O3 D'',B#A&'( K\I4.,"* O3 +#> D'A*.3#I*$88888888888888888888888811[
G%&$ D$ =,A ?6,#.>$_C*#'$888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888199
2.,(.*$$&B* K'%#'I*"*'A 5,.-$888888888888888888888888888888888888888888888819N
+*$A 2.#IA&I*$ L,"* E.," ?@@4&I#A&,' ?'> DA*.#A&B*
D"@.,B*"*'A888888888888888888888888888888888888888888888888888888888888888888888888888888888888819Q
G,(*A%*. 5* L#' 7, G%&$88888888888888888888888888888888888888888888888888888888888819[
)'$'. !1%'.; ('. -.'(%,,6'*"$ 7%,68*%.,888888888888888888888888888888888888819`
5#." L,4,.$888888888888888888888888888888888888888888888888888888888888888888888888888888888888881NWL,,4 L,4,.$88888888888888888888888888888888888888888888888888888888888888888888888888888888888888881NZ
=*
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
7/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
^'>*.$A#'>88888888888888888888888888888888888888888888888888888888888888888888888888888888888888881[[
D'I4* H,%' D' G%* 2.,I*$$888888888888888888888888888888888888888888888888888888881[U
K>*.$A#'> G%* O6b*IA&B*888888888888888888888888888888888888888888888888888888888881``
L%*I- ;,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
8/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
5%# 7%,68*%.N, O26:% +' -.'(%,,6'*"$ G%+L'.P6*88888888888888881:[
5%M =*AP,.-Y88888888888888888888888888888888888888888888888888888888888888888888888888888888881:[=*AP,.-&'( G&@$ 3,. 7*$&('*.$888888888888888888888888888888888888888888888888889WW
O.'24 C*+%.E6%L< AB4%.+ 3:E6/% D'. 9+2:%*+, "*: J'2*8
5%# 7%,68*%.,8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888889W:
(
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
9/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
0".,1 !.2+1, 3#'2+ )'.4'."+% 5%#,6+%,
!" $%&' !(%)
5* #44 "#-* "&$A#-*$ .>.*$$*$
I,"",' "&$A#-*$ "#>* 6M 4#.(* ,.(#'&a#A&,'$8
C,$A ,3 A%* I4&*'A$ D P,.- P&A% #.* 4#.(* ,.(#'&a#A&,'$/ &$@*4 A%*$* &44 *'I,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
10/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
D' .*#4&AMd @d &$ 4&AA4* 6*AA*.8 ?$ H*33.*M f*4>"#' @
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
11/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
&2+-2 31 %66+22393'35"@ %1/ 5=+ -+25 (, 5=+ 2?3''2 %1/
+H7+-3+16+ 5=%5 /(1C5 ,%'' &1/+- >%-?+531)C2 7&-:3+D;
D'$A*#>d A%* P*6$&A* $%, 6* "#'#(*> 6M # $&'(4* "#' $ A, .* A%*&. ]>#M b,68_ 5%*' # 5*6 A*#" 32&' @4#I*d &A &$ ,3A*'
,B*.F$A.*AI%*>8 G%* B#$A "#b,.&AM ,3 &A$ A&"* &$ $@*'A ,' >#MFA,F>#M
"#&'A*'#'I* .#A%*. A%#' ,' 4,'(*.FA*." $A.#A*(&I A%&'-&'(8
G%&$ $&A, ',A
%#B* A%* *\@*.&*'I* ,. #
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
12/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
",B* A%*&. 5*6 $A.#A*(&*$ 3,.P#.> 6M %&.&'( 3$ ,3 A&"*8 G%*M $4,P4M 6*I,"* ,#A* &'
A%*&. I,'A*'Ad >*$&(' #'> A*I%',4,(M8 KB*'A >*"#'>$ A%#A
&A 6* $,.A*>8 G%&$ &'*B&A#64M 4*#>$ A, # I,"@4*A* .*>*$&(' #A
I,'$&>*.#64* *\@*'$*8 G%&$ &$ # 34#P*> #@@.,#I%8 DA &$ # P#$A* ,3
",'*Md 6*I#* *B*.M 3*P M*#.$8
E%0+-(1 >('' +16(&-%)+2 8+9 /+23)1+-2 5( -+%'3)1@ 1(5 -+/+23)1;
"+
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
13/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
? 6*AA*. P#M &$ I,'A&' 7*$&('*.$
J*>*$&('d S.*#A 7*$&('*.$ J*#4&('8
J'2. 5%#,6+% )"**'+ 344%"$ !' AE%.;'*%
O'* ,3 A%* 3&.$A c >*A#&4*> 4&$A ,3 >&B*.$* @*,@4*8 D'*B&A#64Md
"M '*\A c*",(.#@%&I (.,M8 V,P*B*.d A%*
P*6$&A* >,*$ '**> A, 6* @.&"#.&4M #&"*> #A # I4*#.4M >*3&'*>
#&*'I*8
J'2 3.% 5",+6*8 Q'*%; >* 9'/6"$ G%+L'.P6*8
D 3&'> &A *'I,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
14/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
&'I.*#$* A%*&. .*#I% #'> *'(#(* P&A% '*P #&*'I*$8 V,P*B*.d
#4A%, I,.@,.#A&,'$8 G%*MP#'A A, A#4- A, ,A%*. @*,@4*8 G,, "#'M ,.(#'&a#A&,'$ A%.,P "&44&,'$
&'A, E#I*6,,- #@@$ #'> B&.#4 B&>*,$ P%*' A%*M I, $@*'> A%#A
",'*M ,' *'(#(&'( P&A% @*,@4* &' # A.#'$@#.*'A #'> ,@*' P#M8
"$
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
15/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
D'$A*#> ,3 I.*#A&'( # I,.@,.#A* GP&AA*. #II,**> *B*' #
I,.@,.#A* 64,(d *'I,* (*4&'*$ ,' #II*@A#64* 6*%#B&,. #'>
P%#A A,,4$ A%*M '**> A, $A#.A *'(#(&'( >&.*IA4M P&A% A%* I,"" $*.B&I*$8 G%&$ >*",'$A.#A*$
M,&.*IA,.R$ @*.$,'#4 @.*3*.*'I*$ #'> &' I,'A*'A A%#A &$ 3
6*I#,*$'RA 4&-* (.**'8_ X&-*P&$*d A,, " A*."$ ,'4M P&A%&' A%* ,.(#'&a#A&,'8
J'2N.% G'+ O%++6*8 S"$2% D.'F J'2. 5%# !%"F
5%*A%*. A%*M %#B* #' &'F%,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
16/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
5*6 >*$&('*.$ #.* ",&'( $,d M,< #.* .*> #.* P#$A&'( A%* P*#4A% ,3 *\@*.&*'I* A%*M 6.&'(8
"&
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
17/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
D3 M,< P#'A A, (*A A%* "#\&"*$&('*. %#$ A%*
3.**>," A, 3&'> # $,48
7%,68* ?; )'FF6++%% ?.6*8, 7%"+1
G%* *.#A&,'$ 6* A#-*' &'A, #II,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
18/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
M+23)1 9" 6(00355++ '+%/2 5( /+23)1 (1 5=+ ,'";
7*$&(' &$ $ 6MI 6M #',A%*.8 G%&$ &$ P%M &A &$ $, &"@,.A#'A A%#A
>*$&(' >*I&$&,'$ 6* &'3,."*> 6M 8 O'* @*.$,' %#A*$ A%* 64
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
19/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
I,4,. $I%*"*d P%&4* #',A%*. 4,B*$ &A8 G%&$ 4*#>$ A, >*$&('&'( ,' A%*
34Md P&A% A%* I,""&AA** &'$A.&33*.*'A
64&'( "&>>4* (., A%,$* P%, %#B*
,'* ",#' 6*I#>&'( I,'A*'Ad
! #44,P&'( ",.* @*,@4* A, #>> #'> *>&A I,'A*'Ad
! 3#I&4&A#A&'( 3#$A*. #A*$d
! #'> #44,P&'( (.*#A*. I,'A.,48
+*"#'>$ ,3 A%* P*6$&A*$ A%*M #.* # @4#A3,."
3,.8 5*6$&A* "#'#(*.$ #4$, I,"@4#&' A%#A A%*&. LC! &$ %#.> A,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
20/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
E&'#44Md # LC! "#M #44,P I,'A*'A A, 6* *#$&4M #A*>d 6,*$ ',A
*'$ ,. *B*' A%#A A%* c_ ,B*. M*#.$d P&A% ",.* #'> ",.*
I,'A*'A 6*&'( #>>*>8 ?A ', @,&'A >&> #'M,'* .*B&*P A%* I,'A*'A #'>
#$- P%#A I, 6* A#-*' #P#M8
C#'M P*6$&A* "#'#(*.$ 3&44 A%*&. P*6$&A* P&A% I,@M A%#A ',6,>M P&44
.*#>8 G%&$ %#@@*'$ 6*I# P%#A*B*. A%*M P#'A8
^'3,.A
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
21/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
'**> A, @.,B&>* *'>4*$$ &'$A. A%&$ I,@M8
! ? >*$@*.#A* >*$&.* A, I,'B&'I*/ A%*M #.* >*$@*.#A* A, $*44 A%*&.
@.,>"#-* A%* I%#'(&'( A%* P#M
A%*M I,'A.,4 A%*&. 6.#'>8 7,&'( A%&$ P&44 (&B* M,< # $&('&3&I#'A
I,"@*A&A&B* #>B#'A#(* #'> "#-* M,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
22/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-'.+('$6' 7%,68* 9+2:;< 7%,68* -"++%.*, "*:
)2..%*+ -."/+6/%,
!" Q35%'" R-3+/0%1
E,44,P&'( A%* .*c,a*'$ ,3 >*$&(' #'> 5*6 >*B*4,@"*'A #(*'I&*$d #'#4Ma*> A%*&.
@,.A3,4&, P*6$&A*$ #'> &>*'A&3&*> @,@*$&(' @#AA*.'$8 G%* "#&'
(,#4 ,3 A%* $AM P#$ A, @.,B&>* 3.**4#'I*.$ #'> >*$&(' #(*'I&*$ P&A%*I&$&,'$ A%*M ,3A*' %#B* A,
"#-* P%*' >*$&('&'( # @,.A3,4&, P*6$&A*8 5* #4$, #$-*> >*$&('*.$
P%#A c ,. #'#4Ma*> &' ,d P* I#"* @,.A3,4&,F.*4#A*>
c .#'-*> #II,.>&'( A, &"@,.A#'I*8
5* $*#.I%*> 3,. # (,,> "&\ ,3 *$A#64&$%*> >*$&(' #(*'I&*$ #'> P*44F
>*$&('*> @,.A3,4&, P*6$&A*$ ,3 $"#44 #'> 4#.(* #(*'I&*$8
E&'#44Md P* I.*#A*> # c 3&44&'( ,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
23/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
G%&$ #.A&I4* @.*$*'A$ A%* &'&A .*$*$&(' >*A#&4$ ,3
*B*.M $&'(4* @#(*d &'I4&'( A%* #6, I,'A#IA @#(*$8 O3 I,, ',A '*I*$$#.&4M %#B*
A, 3,44,P A%* 3&'>&'($ @.*$*'A*> %*.*k .#A%*.d (*A 3.," A%*" # (*'*.#4
&>*# ,3 P%#A ,A%*. @,.A3,4&,$ 4,,- 4&-*d #'> A%*' I,"*
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
24/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
O3 I,*@*'>$ $A.,'(4M ,' M, &'>&B&>_ $A.,'(4M 3#B,.$ 4&(%A >*$&('$ P, 6* &'#II ",.* I,4
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
25/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
?II,.>&'( A, , #
$&"@4*d I,'B*'&*'A '#B&(#A&,' "*' @#(*$ P&A%.*4#A&B*4M >**@ $
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
26/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
C*+.':2/+'.; ?$'/P >* !'4K
2,.A3,4&, P*6$&A*$ I,"",'4M %#B* # 4#.(* &'A.,>B#'A#(*$ # I4M8 !
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
27/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
?II,.>&'( A, ,*6#. ,. %,.&a,'A#4 '#B&(#A&,' '*#. A%*
%*#>8 5&A% (.,P&'( #>,@A&,' ,3 P&>*$I.**' >&$@4#M$d A%&$ %#$
I%#'(*>8 C,.* #'> ",.* >*$&('*.$ #.* %,.&a,'A#44M I*'A*.&'( A%*&.
4#M, ',A&I* # A.*'> A,P#.>$ ",.* ,.&(&'#4d *B*' .&(%AF#4&('*>d
4#M,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
28/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
?II,.>&'( A, ,d
! `:l ,3 @,.A3,4&, 4#M,d
! A%* .*$A %#B* *&A%*. ,.&(&'#4 #>#@A&B* 4#M,
6#I-(.,*$I.**' .*$,4
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
29/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
G"E68"+6'* 3$68*F%*+
5%*.* A, @
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
30/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
T*.A&I#4 '#B&(#A&,' &$ .#.*4M d #'> ,A%*. #@@.,#I%*$ g$ ,'
&A$ >*$&('
@.,I*$$d $,"* @,.A3,4&,$ (, A%* 4*'(A% #'> @.*$*'A # B#.&*AM ,3 I#$*
$A&*$d 64,($ #'> >*A#&4*> &'3,."#A&,' #6,*$&('*.$ j #A 4*#$A #",'( >*$&('*.$
#*
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
31/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
,3 @,.A3,4&, P*6$&A*$8 G%* .*#$,' &$ @.,6#64M A%#A I*.A#&' E4#$% *33*IA$
I#' 6* .*@4#I*> 6M #>B#'I*> H#B#!I.&@A A*I%'&c*$%,P$d #'&"#A&,' *33*IA$ #'> A.#'$&A&,' *33*IA$ I#' ',P 6*
I.*#A*> P&A% H#B#!I.&@A $,4 c 6M $&"@4*.d $
*B*' A%*' &> ',A &'I4* #'M &'A*.#IA&B* ",A&,' >*$&('
#(*'I&*$d E4#$% >*$&(' $A&,$ ,. B&>*, @.,> @.,"&'*'A4M #A A%* A,@ ,3
A%* @#(*Y O. >, ",$A >*$&('*.$ @ @
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
32/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
#.*# ,3 A%* @#(*/ A,@d .&(%Ad 4*3Ad 6,AA,"d *B*' A%* "&>>4*8 + &'d
3&.$Ad P%*.* A%* 4&'- A, A%* ]L,'A#IA #'>d
$*I,'>4Md P%*.* A%* #IA&$@4#M #' *"#&4 #>>.*$$ &' A%* %*#>*.d
#+
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
33/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
! ? @,$A#4 #>>.*$$
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
34/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
T3#'2+ @,U -"8%
G%* ?6, @.,3*$$&,'#4&$"8 G%* @#(* (&B*$ A%* >*$&('
$A&, # @*.$,'#4 A, @.,@*.4M j *4&I&A$ A%* A. # (,,> .*@
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
35/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
A*$A&",'$ P%*' $*#.I%&'( 3,. # >*$&(' #(*'IM8 !, P* P*.*
$ A, 3&'> A%#A ,'4M # 3*P #(*'I&*$ %#B* # $A#'>#4,'* @#(*
4&$A&'( A%*&. I4&*'A$8
O3 A%* @,.A3,4&,$ P* #'#4Ma*>d ,'4M ZU89l %#B* # I4&*'A @#(* g*&A%*. #$
# $A#'>#4,'* @#(* ,. @#.A ,3 # @,.A3,4&, @#(*h8 D' ",$A I#$*$d I4&*'A$
#.* .*@.*$*'A*> 6M A%*&. 4,(,$d P%&I% #.* ,3A*' 4&'-*> A, >*A#&4*> I#$*
$A&*$ A%#A >&$I,'* 6M A%* #(*'IM #'> I4&*'A
A*$A&",'$8 G%* ",$A @,@&'( 3,. A%* 4&'- A, A%&$ @#(* &$
]O#4,'* $*.B&I*$ @#(* &$ .*#$,'#64*8
2,A*'A I4&*'A$ &'( ,3 P%#AA%*M #.* 4,,-&'( 3,. g",A&,' >*$&('d @.&'A >*$&('d 5*6 >*$&('d
L7n7T7 b#I-*A >*$&('d *AI8hd $, @#4,'* $*.B&I*$ @#(*
,3 $,"* -&'>8 G%* .*$A @
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
36/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
X&'-&'( M, @.#IA&I* #'> $%,P$ *\#IA4M P%#A
M, *$&('$ 3**4 &'A*$&(' #(*'IM8 !,d # $,4&> $%,PI#$* ,3 @.*B&,*#4 #'> I,'B&'I* A%*" A, I,'A#IA A%* #(*'IM8
D' (*'*.#4d 6* $*4*IA&B* P&A% A%* P,.- M,< $%,PI#$*d #'> 4*A B&$&A,.$,.>*. #'> 3&4A*. A%* @.,b*IA$ 6M $AM4*d &'> &'$&(%A &'A, M,, A%#A8
?II,.>&'( A, ,,'RA %#B* # @,.A3,4&, #A #44d
! 198Ul %#B* ,'4M 4,(,$ ,. $I.**'$%,A$d P&A%,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
37/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
,. I#$* $AMd
!
1[8Zl 6.&*34M >*$I.&6* *#I% @.,b*IA '*\A A, # 4,(, #'>n,.$I.**'$%,Ad
! [N8[l %#B* # B*.M >*A#&4*> @#(* 3,. *#I% @.,b*IAd &'I4&'(
I#$* $AMd A*$A&",'$d $4&>*$%,P ,3 $I.**'$%,A$d >.#3A$ #'>
$-*AI%*$8
! P%#A *\@*IA#A&,'$ 6,A%
@#.A&*$ $%, %#B*8
S&B&'( @,A*'A I
]?@@.,#I%_ gU81lh8
#'
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
38/242
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
39/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
! X&'-$ A, $,I '*AP,.-&'( P*6$&A*$ $D' #.* ,3A*' g1Z8Qlh8
94%/6"$, 3*: AB+.",
5* #4$, ',A&I*> # 3*P >&$A&'IA&B* *4*"*'A$ A%#A $,"* >*$&(' #(*'I&*$
,33*. @,A*'A I A, 3&44 ,*A#&4$ P%*' $*$&(' #(*'I&*$ ,33*. # @.,b*IA @4#''*. ,. %*4@ I,P$ ,'
A%* I,'A#IA @#(* g*8(8 ?(#"& L.*#A&B*hd # ]!A.*$$F,F"*A*._ A%#A
>&$@4#M$ A%* I,"@#'MR$ I #
]L#@#6&4&A&*$ #'> L.*>*'A$_ @.*$*'A#A&,' g A%#A/
! =,'* ,3 A%* @,.A3,4&, P*6$&A*$ %#B* #' E?o @#(*d
! U[8Nl ,3 P*6$&A*$ %#B* #A 4*#$A ,'* 64,(8 ?'> "#'M @,.A3,4&,$
%#B* AP, ,. ",.* 64,($d
! 1Z8QQl %#B* # '*P$4*AA*. ,. "#&4&'( 4&$Ad
! :l @.,B&>* # >*A#&4*> $&A* "#@8
#)
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
40/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
92FF".;
! `9l ,3 A%* @,.A3,4&, P*6$&A*$ P* #'#4Ma*> %#B* # 4&(%A >*$&('dP&A% '* # $&"@4*d I,'B*'&*'A4M 4,I#A*>
'#B&(#A&,' "*'n,. &' A%* 3,,A*. ZQ8Zl ,3 A%* A&"*d
! `:l 4&'- A, A%* ?6,*A#&4*> @#(* 3,. *#I% @.,b*IAd &'I4&'( I#$*
$*
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
41/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
$AMd A*$A&",'$d $4&>*$%,P P&A% $I.**'$%,A$d >.#3A$ #'>
$-*AI%*$d
! UZ8Ql ,3 P*6$&A*$ %#B* ', P,.-34,P @#(*d
! G%* I,'A#IA @#(* $%, I,'A#&' >.&B&'( >&.*IA&,'$d # @%,'*
'>.*$$d @,$A#4 #>>.*$$d BL#.> #'> ,'4&'* 3,."8
Q35%'" R-3+/0%1@ +/35(-GS1GE=3+, (, F0%2=31) >%)%431+;
$"
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
42/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
).%"+6*8 3 92//%,,(2$ >*$6*% -'.+('$6'
9" F+%1 I(/)+
;, *#$M A, M, #'> *\*I P*44d P&44 >*4&B*. c#(2,/"+6*8
L4#.&AM #'> 3,I*.&'( &' M,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
43/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
A,, >**@d 6 $%,.A $*'A*'I*$d $A.,'( 3,.I*3 I4#.&AM/ #44 @.&'I&@4*$ A%#A "#-* 3,. *33*IA&B* P.&A&'( ,' A%* 5*68
D' A%* #.A&I4* L.*#A&'( G%* 2*.3*IA 2,.A3,4&,dL,44&$ G#R**> ,33*.$@,.A3,4&, #>B&I* 3.," A%* @*.$@*IA&B* ,3 # @,A*'A *"@4,M*.8 G%*
$*IA&,' A&A4*> qS*A A, DAq (&B*$ .*#$,'$ 3,. 4&"&A&'( A%* '8 ?' *"@4,M*. %#$ A, .*B&*P "#'M #@@4&I#'A$ c A, @
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
44/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
I,'$ #'> L,4*#$ ,' %,P A, A, M,B#'A#(* P%*' @.*$*'A&'( # 4,A ,3 &'3,."#A&,'8
-6+("$$ VY< >E%.:'6*8 C+
;, ,.(#'&a*>8
7, A%&$ 3,. #44 #.*#$ ,3 M,, &' M,.,P'
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
45/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
TH%07'+2 (, 1%:3)%53(1 6=(36+2 5( %:(3/;
-6+("$$ V[< S6,2"$ )$2++%.
L,'$&>*. A%* @*.$A#'>&'( T&$ A, B&$
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
46/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
?'> &' A%* &'A*.B&*P 5%*.* T&$ B&$.*$$*>8 X*> $%,P A%#A ,'* I#'
#I%&*B* ,8+*4,P #.* $,"* I,"",' @,.A3,4&, (,#4$8 ?4$,d 6* #P#.* A%#A
@,.A3,4&,$ #.* ,3A*' "*#'A A, #II,"@4&$% ",.* A%#' ,'* (,#48 O. #A
4*#$A I,'$&>*. I.*#A&'( "&33*.*'A @
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
47/242
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
48/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
KB*' &3 M,< 3&44 A%* $*I,'> @,.A3,4&, P&A% A%* $#"* P,.-d M,< P&44 $A&44
6*'*3&A 6M A#.(*A&'( M,&33*.*'A (., ,B*. 1 "&44&,' B&$&A$8
$(
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
49/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
=&- %#$ # @ ,.A3,4&, ,' +*%#'I*8V*R$ &'B,4B*> &' ' ',P %#$ ,B*. `W @,.A3,4&, @&*I*$ #'>
,B*. 1dWWW I,""*'A$ ,' %&$ P,.-8 ? 4,A ,3 3#'$ %#B* "#.-*> %&$
P,.-$ #$ 3#B,.&A*$8
G%,,*$ # @,.A3,4&, A%*.*d
A,,8 ?'> %&$ @,.A3,4&, ,' 7*@A%I,.* &$ (,,>8 G%#A P*6$&A* 3*#Ad $, A%* c *\@,$&'( A%*" A, M,
I,.@,.#A* I4&*'A$ &' # I,'$*.B#A&B* &'>
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
50/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
G%* #.A&I4* G%* !*I.*A A, S*AA&'( # X,A ,3 5*6 7*$&(' 5,.-%#$ #
$*IA&,' *'A&A4*>d ]7*$&(' A%* @,.A3,4&, M,< A%&'- M, *\@*.A &' A%* 3&*4> ",.* *#$&4M8
G#.(*A&'( # "#.-*A >&33*.*'AA*$ M,*$&('*. ,. #(*'IM8
%*
http://freelanceswitch.com/designer/the-secret-to-getting-a-lot-of-web-design-work/http://www.digitaloutput.net/content/ContentCT.asp?P=843http://www.digitaloutput.net/content/ContentCT.asp?P=843http://freelanceswitch.com/designer/the-secret-to-getting-a-lot-of-web-design-work/http://www.digitaloutput.net/content/ContentCT.asp?P=8438/13/2019 [Smashing Magazine] 01 - Professional Web Design
51/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
7*$&('*.$ #.* ",.* 4&-*4M A, $A#'> ,&'( '&I%* b,6$ #'> 6*&'( @*.I*&B*> #$
*\@*.A$ &' A%*&. 3&*4> P&44 &'I.*#$*8 G#-* 7#' S&4.,M p$ @ ,.A3,4&, #$ #'
*\#"@4* ,3 ,'* A%#A $
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
52/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-.6'.6+6]% @,"#6$6+;
=#B&(#A&,' &$ ,3 @#.#",$8 G%&$ &$
*$@*I,M .*4*B#'A &3 M,&$I, M,< &' $*#.I%
*'(&'*$8
@,% +1% M681+ !%/1*'$'8;
D3 I*.A#&' A*I%',4,(&*$ #.* 3&\A*$I.&@A&,'$ M,*$&(' #(*'IMd A%*'
&Ap$ A%* .&(%A I%,&I*8
G%* '#B&(#A&,' &' A%* @, .A3,4&, ,3 '*P "*> >*$&('*. C#A%*P T8
J,6&'$,'g$** '*\A @#(*h &$ *#$M A, &$ *$$*'A A, A%*
$
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
53/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
L,'$&>*. "#&'A#&'#6&4&AM P%*' >*I&>&'( ,' A*I%',4,(&*$8 !&"@4&3M&'(
M, .*",B* @,.A3,4&, @&*I*$Y G%* *#$&*. &A &$d A%*
",.* 4&-*4M M, *33*IA&B* ,'*F@#(* @,.A3,4&,8 V* P, %#B* ',A.,>&'( ,. $P#@@&'( ,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
54/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
L,'$&>*. *'%#'I*"*'A P%*' 4,,-&'( #A A*I%',4,(M8 ? P&$* I%,&I* &$
,3A*' A, #>> b 6M
A%* *4*(#'A H#B#!I.&@AF6#$*> $,4 #
c A, M,, P*6$&A* .*>*$&('$d A%*' M,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
55/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
M,< "#M %#B* >,'*8 D3 M, %&$ P*6$&A*d N1A%.**8I,"d6#I-
&' C#M 9WWU8 V* A, %#B* @.&'A #'> 4,(, >*$&('$ &' %&$ @,.A3,4&,8
D' A%* .*>*$&('d %* I4#.&3&*> %&$ A#.(*A "#.-*A 6M 3,I&'( >*$&(' #$$&$A#'I* A, >*B*4,@*.$8
V&$ I &'A*.3#I* >*$&('$
6*I#, 4,(, ,. &>*'A&AM >*$&('8 V*
>,*$d 6*$&(' "&(%A %#@@*' A, 6* @#.A ,3 A%* @#I-#(*8 !** ",.* #6,&$@4#M A, #
"&'&"
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
56/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-.'E6:% 3:%_2"+% )'*+"/+ C*('.F"+6'*`
7'/2F%*+"+6'* 3*: AB4$"*"+6'*,L,'A#IA &'3,."#A&,' $%, 6* *#$M A, 3&'>d #'> I,'A#IA 3,."$ $%,
6* *#$M A, # P*6$&A* 6
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
57/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
A&"* ,' M,*. *B*.M B&$
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
58/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
C*(2,% J'2. -%.,'*"$6+; C* !1% 7%,68*
=&I- X#p$ @,.A3,4&, I#@A*$&(' $AM4* #'> &'A*.*$A$8 G%* &44$ ,,*$'RA &"@*>* >*$&('8 G%* P,.- $%,P' $,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
59/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!*A% S,>&' "#-*$ $,"* *\I*44*'A @,&'A$ #6, $
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
60/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-.'F'+% 3*: H%E%."8% J'2. 5'.P
G%*.* #.* "#'M P#M$ A, @.,",A* M, #A $,"* I,""*.%,4"
P#$ #' *#.4M #>,@A*. ,3 A%&$ $A.#A*(M #'> #I%&*B*> 3#"* P&A% %&$ 64,(
!&"@4*6&A$8 V&$ @,.A3,4&, .*$&>*$ $$ P&44 *B,4B* #$
M,< A#-* ,' >&33*.*'A @.,b*IA$ ,B*. A%* I,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
61/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
? $ ,3 @*.$,'#4&AMd
@.,"&'*'I*d $&"@4&I&AM #'> *#$* ,3 $*.B* M,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
62/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
?%++%. @,%. AB4%.6%*/% 56+1 9+'.;+%$$6*8
!" R-%16326( S16=%&25+
!A,.&*$ >*3&'* ,8 G%*M %#B* 6**' P&A% @#$$ ,' A.#>&A&,'$8
G,>#M P* I,"" >,P'd
I4,'*>d #'> &$ I%*$&('*.$ #.*
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
63/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
I.*#A*> ,. &' 3&4""#-&'( @.&,. A, &A$ .*4*#$*8 G%* #&$.*(#.>*> P%#A P#$ @,@ >&$#$A*. ",B&*$h A, 3,44,P %&$ ,P' B&$&,'8 G%* 3&4"
$A#..*> A%* (*'.* P#$ # .*4&I ,3 1:NW$ $*.
",B&*$8 DA P#$ A ,B*. A%, #$ #' #4",$A "#(&I#4 ,.
.#'>," @.,I*$$8 G%* # @.,I*$$,.d #'> 6*(&'$ A, AM@* P%#A*B*. &'$@&.*$ A%*" #A A%*
","*'A8 S.*#A $A,.&*$d A%,,'RA b,"4Mk A%*M #.*
>*$&('*>8 G%*.* &$ # @#AA*.' #A P,.- %*.*8 D' ,.>*. A, 6* *'A*.A#&'&'(d
3&'> A%* .&(%A >.#"#A&I I
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
64/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
#&*'I* *",A&,'#44M #'> %,4> A%*&. #AA*'A&,' @.,6#64M >&> ',A $&"@4M #'
.%MA%" &' A%* 6#I-(.,
A%#A P* #.* #44 6,.' P&A% # $
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
65/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
L#"@6*44 $A&*> A%* $A.$ $A.&B* 3,. A%&$ *",A&,'#4 &'B*$A"*'A *B*.M >#M8 !A#.6,*$'RA b
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
66/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
D3 P* #.* #64* A, #II,"@4&$% P%#A P* $*A ,,m $#Md A.#'$3*.
",'*M &' # 6#'-&'( #@@4&I#A&,' m A%*' &A %#$ 6**' # (,,> *$&('8 G%* .*$&33*.*'A 4*B*4$ #'>
A.#'$4#A*$ &'A, A%.** AM@*$ ,3 >*$&('/
&&
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
67/242
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
68/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!1% ?",6/, '( 9+'.;+%$$6*8 ('. @,%. AB4%.6%*/%
?A # 6#$&I 4*B*4d $A,.MA*44&'( #'> A%* @.,> A%* #&*'I*
&A &$ 6&'( &A 3,.8
!A,.&*$ *'#64* A%* ",$A I,"@4*\ ,3 &>*#$ A, 6* *33*IA&B*4M
I,"" *",A&,' A, &A$ , $, &' B#$A4M
>&33*.*'A P#M$8 G%* 3,44,P&'( $*IA&,'$ ,&'( ,' A%* AM@* ,3 *\@*.&*'I*
'**>*>d A%&$ "#M .*c 6* @.*,II P&A% A%*&. .*$@*IA&B* >,"#&'$k 3,.
*\#"@4*d A%* "#.-*A&'( @*.$,' P&44 3,I ,3A*' .*$
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
69/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
G%* &I#4 >*B&I* 3,. >,IA,.$8 ?$ "*'A&,'*>d A%* *\@*.A$ #A I.#3A&'(
$A,.&*$ -',P %,P A, A#@ &'A, # P#M ,3 I,"" 3,. A%, B#4*$&(' @.,I*$$ A, .*#44M >*3&'* P%#A A%*M #.*
6&'(8
&)
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
70/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
L&'>M L%#$A#&' .*3*.$ A, &A #$ #' +H7+-3+16+ 5=+0+8 !%* $#M$ A%&$ A%*"*
&$ ]A%* I,.* B#48 L%.&$A' !#M4,.
.*3*.$ A, &A #$ 3&'>&'( A%* '+%/ 6=%-%65+-8 5&A%, #.,&'#A*> *4*"*'A$ ,3 #' *\@*.&*'I* #44 "*.(* &'A, # I4*#. (,#4
#'> @ &$ #' #&.@4#'* &3 A%* *'(&'* &$'RA
@,P*.3Y D3 M,< $A*@ 6#I- A%,,*$ A%* @#$$*'(*. '**> A,
(,Y D3 &AR$ ,'4M # 3*P "&4*$ >,P' A%* .,#>d A%*' &A .*#44M >,*$'RA "#AA*.
&3 A%* @4#'* &$ 3*'A&3M&'( P%#A P* .*#44M '**> A, 6 &$ -*M &' A%* &'&A @%#$* ,3
6&'( A%* *.$A#'>&'( A%* *> #$ @#.A ,3 I.*#A&'( A%* $A,.M8 +M 6&'( #' &"#(&'*>
.*@.*$*'A#A&,' ,3 A%* ,' .*#4 .*$*#.I% #'> ,6$*.B#A&,'d P*
'*
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
71/242
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
72/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
! 2.M >#A#d
! !&"@4&3M&'( I,"@4*\ &>*#$ 3,. A%* A*#"d
! C#-&'( A*#" I,44#6,.#A&,' ",.* *33&I&*'Ad
! L4#.&3M&'( @#A&'( I,*.$A#'> A%*
@ $A*@$ A, A%* ",.*# *",A&,'#4 *\@*.&*'I* ,3 >#A&'(8 DA P#$ # @,P*.3&33*.*'A ,@&'&,'$ ,' %,P 6*$A A, I.#3A A%*
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
73/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
@.,I*$$*$ A, I.*#A* $,4$8 G%*
',P' A,
P%#A &$ 6*$A 3,. A%* AM@* ,3 @.,b*IA$ A%#A # A*#" AM@&I#44M P,.-$ ,'8
;, (,#4$8 D' .*#4&AMd >,&'( *B*.MA%&'( #$
,&'(8 G%* *\@*.&*'I*$ P* I.*#A* A#-* $%#@* A%.,*$&('d
I,'A*'A #'> $** %,P A%*M #.* #@@4M&'( $A,.MA*44&'( A, A%*&. P,.-8
7'.%$$% M"#6*'L6+]
7,.*44* &$ # $A,.MA*44*. P%, >*$&('$d &44
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
74/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
a2%,+6'*< 0'L :' ;'2 "44.'"/1 ,+'.;+%$$6*8 6* @bK
M(-+''+L D $** &A #$ #',A%*. A,,4 P* I#' P*6$&A* I#44*> ]O $%,.A ,'4&'* >&(&A#4 $A,.&*$ P&A% ,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
75/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
#&*'I*8 5* I#44*> &A I,FI.*#A&,'d #'> P%*' D ",B*> ",.* &'A,
>*$&('&'( *.$A#'> "M &> ",.* #'> ",.* P,.-d D .*#4&a*>
A%#A $A,.MA*44&'( 3#I&4&A#A*$ I,"" $%#.* $A,.&*$ #(#&' #'>
#(#&'d #'> A%#A A%* ",.* D &'A*(.#A*> $A,.MA*44&'( &'A, "M P,.-d A%*
6*AA*. A%* P,.- P#$8
!, ", &$'RA ,'4M #6,*$&(' 6 @4#'8 !A,.MA*44&'( I#' 6* *33*IA&B* &'#44 ,3 A%*$* $&A.&B&'( A,P#.>$ $,4*'A ,3 A%* AM@* ,3 *\@*.&*'I* &' P%&I%
A%*M #.* 8
a2%,+6'*< C* +1% %*:` #2,6*%,, 8'"$, c6=%= 4.'(6+d .2$% +1% :";= 0'L
:'%, ,+'.;+%$$6*8 +6% 6*+' +16,K
M(-+''+L!A,.&*$ %*4@ 6.&>(* &'(d $, $A,.MA*44&'( I#' %*4@
A*#"$ (*A ,' A%* $#"* @#(* #'> $@*#- A%* $#"* 4#'(&'(
A, *\@*IA*> .*$ A% I,"* A, 6*AA*. $,4M L%#$A#&'R$ #.A&I4* &' +,\*$ #'> ?..,P$ ,' K\@*.&*'I*
G%*"*$&$ # (.*#A .*#>8
'%
http://www.boxesandarrows.com/view/experience-themeshttp://www.boxesandarrows.com/view/experience-themeshttp://www.boxesandarrows.com/view/experience-themeshttp://www.boxesandarrows.com/view/experience-themes8/13/2019 [Smashing Magazine] 01 - Professional Web Design
76/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
)2.+ )$'*6*8%.
L P.&A*.8 V* $#M$ %&$ #.A >,*$'RA .*#44M A*44 # $A#'>#.>
'#..#A&B* P&A% # I4&"#\ #'> .*$,4
,3 *B*'A *\@*.&*'I*8
a2%,+6'*< 0'L :' ;'2 "44.'"/1 ,+'.;+%$$6*8 6* @bK
E&-5L 7*$&('d @#.A&I*$&('d I#' 6* $A,.MA*44&'( &$ # %&$A,.&I#44M A*$A*>
3,." ,3 I,""*$&(' &$ ",.* 4&-*
$,"*A%&'( A, -**@ &' "&'> P%*' I,'$&>*.&'( A%*
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
77/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
G, "*d '#..#A&B* >*$&(' b &A "*#'$ #44,P&'( A%* &33*.*'I* 6*AP**' # ',B*4 gP%*.* A%* ,3 '#..#A&B*8
L,.@,.#A&,'$ $@*'> #44 -&'>$ ,3 ",'*M A.M&'( A, I,'B&'I* h #.* A%* (,,> ( # 3..,33R$ K\@*.&*'I* 7*$&('6,,-8 DAR$ ",.* #6,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
78/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
A%*#A*.d A.&6#4 .&A8
'(
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
79/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
G%&$ &>*# ,3 #>,@A&'( ]$A,.MA*44&'(_ #$ # "*#'$ A, "*#'&'(34*$$ ,3 A&"*d >*B&I* ,.
*B*' 4,I#A&,'8 5* *.$A#'> ',A ,'4M A%* A#.(*A #&*'I* 6,4,(M #'> .*4#A&,'$%&@ &$
>*$@*.#A*4M $**-&'( ,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
80/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
a2%,+6'*< C* +1% %*:` #2,6*%,, 8'"$, c6=%= 4.'(6+d .2$% +1% :";= 0'L
:'%, ,+'.;+%$$6*8 +6% 6*+' +16,K
E=-3253%1L D3 M, &$ I,'$A#'A4M 4,,-&'( #A A%* 6,AA,"
4&'*8 5* 4&B* &' # P,.4> $#A 6M @.,> A%* *\@*.&*'I* j A%* P#M &' P%&I% # $A,.M 6.#'>$hq 6M !##AI%& s
!##AI%&8 DA %#$
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
81/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
E31/"L !A,.MA*44&'( &$ #',A%*. >&$I&@4&'* A%#A I#' 6* &' A%*
I,'A*\A ,3 >*$&(' #$ 1h # >*B&I*d 9h # 3.#"*P,.- #'>n,. Nh # I.#3A A,
>.#P $d P* I#' *#k P* I#' *. I%#,$d @.,B&>* "*#'&'( #'> *'(#(*
A%* *",A&,'$ ,3 ,, P*44 #A 3#I&4&A#A&'( A%* >,( A%* &'A*.#IA&B* @.,> &"#(&'#A&,'$ ,3
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
82/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
$*A ,3 4&3*4*$$ 3*#A* A#'(&64* A%., &3 A%* *\@*.&*'I*&$ ",.* I,"@*44&'(d 6&$I*.'&'( I 6*$A @.#IA&I*$ A, >.#P ,'d 6*$&('&'( 3,. *",A&,' #'> "*#'&'(8
a2%,+6'*< 51%.% 6, +1% #%,+ 4$"/% +' $%".* F'.%K
E31/"L !A#.A P&A% A%* >&$I&@4&'* &A$*43d 4&-* F5(-"d J,6*.A CIe**R$ 6,,-
#6,&B* &'A, A%*,.Md D .*I,""*'> V%--%53(1 31
5=+ R3653(1 R3'0d 6M 7#B&> +,.>P*44d #'> A%* I4#$$&I E(07&5+-2 %2 3,. A%* 3&.$A P,.> ,' $A,.MA*44&'(d .*#>
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
83/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!1% 9+'.;+%$$6*8 AB4%.6%*/%, 3.'2*: @,
G%*.* #.* "#'M *\@*.&*'I*$ &' P%&I% $A,.MA*44&'( &$ A, I.*#A* #I,"@*44&'( "*$$#(* A%#A >.#P$ *.'*#A% "#'M (,,>
*\@*.&*'I*$ P* 3&'> (.*#A $A,.&*$8 G%*M I#' #@@*#. &' # $*.&*$ ,3
&'A*.#IA&,'$ A%#A A&* &'A, # 4#.(*. $A,.M ,. $&"@4M &' #' *",A&,'#4
I,''*IA&,' A%#A P* 3,." P&A% # @.,> &'
@#.A 1h A%#A ",$A $I.**'@4#M$ #'> ',B*4$ 3,44,P8 2 I,"@*44&'( @%,A,(.#@%M
#'> I4*B*. P.&A&'(8 G%*$* 6 # $,.A ,3 $#A&$3M&'( A*'$&,'
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
84/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
C* !%/1*'$'8;< Q6/.','(+ )'2.6%.
G%* C&I.,$,3A L,*B&I* &$ &' A%* ]4#A* @.,A,AM@*_ $A#(* ,3
>*B*4,@"*'A8 G%&$ &$ ",.* ,3 # 6,,-4*A A%#' ?@@4*R$ &2#>d P&A% >
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
85/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
C* Q".P%+6*8< 96B 9/%*+, -%.(2F%
G%*!&\ !I*'A$.#'(* ,3 3.#(.#'I*$ &$ I.*#A*> #'' @%,A,(.#@%M8 G%*
B&>*, #'> &"#(*.M I.*#A* # $A,.M #.,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
86/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
C* 3./16+%/+2.%< 0?> 9+'.%
G%* V+O !A,.* g&' "&>A,P' C#'%#AA#'h &$ >*$&('*> P&A% $A,.MA*44&'(
6&$* ,3 V+O $%,P$8 G%* (,#4 3,. A%* $A,.*
g>*$&('*> &' @#.A 6M >*$&(' #'> 6.#'>&'( $A&, D"#(&'#.M E,.I*$h
P#$ A, I.*#A* #' &'A*44&(*'A #'> "*",.#64* *\@*.&*'I* 3,. B&$&A,.$8
C* 7"+"< !"B6ef
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
87/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
X&",M L%#$A#&' #'> A%* A*#" #A
D'A*.#IA&B* 2#.A'*.$ I.*#A*> #' *'(#(&'( *\@*.&*'I* 3,. 3#'$ ',A b
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
88/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!1% A*: C, !1% ?%86**6*8 >( !16, 9+'.;
C#'M #$@*IA$ ,3 $A,.MA*44&'( #'> &' A%&$ #.A&I4*8 G%&$ $*.&*$ &$ "*#'A A, (&B* M,< # $A#.A&'( @,&'A
A, *\@4,.* #'> 4*#.' ",.*8 G%* *'> ,3 A%&$ $A,.M %#$'RA 6**' P.&AA*'8
G%&$ &$ b
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
89/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
7%,68*6*8 @,%. C*+%.("/%, D'. ?2,6*%,, 5%#
344$6/"+6'*,
!" *%1?( *(:%1(:36
+*$&(' &$ A,, ,3A*' '*(4*IA*>8 D $** # 4,A ,3
#@@4&I#A&,'$ A%#A >,'RA "**A A%* '**>$ ,3 *&A%*. 6 A% @,,. &' A%* @.,I*$$ ,3I.*#A&'( #@@4&I#A&,'$ #A #44d @ 3.,'AF*'> >*B*4,@"*'A *\@*.&*'I* 6*$&(' 3,. 6
@.&'I&@4*$ A, ^D >*$&(' &' (*'*.#4d ,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
90/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*$$*'I* #'> &' $, "#'M ,A%*. P#M$d P%&I% P*R44 *\@4,.* &' A%&$ #.A&I4*8
? P*6$&A* &$ # I,44*IA&,' ,3 @#(*$ I,'$&$A&'( ",$A4M ,3 $A#A&I I,'A*'Ad&"#(*$ #'> B&>*,d P&A% 4&"&A*> &'A*.#IA&B* 3 $*#.I% 3*3&'*> 6(* ,3 A%* $M$A*" ,' A%* @#.A ,3 A%* ,'RA b $P&AI% A, #',A%*.
&3 A%*M >,'RA 4&-* %,P &AR$ P,.-&'(d #$ &$ A%* I#$* P&A% P*6$&A*$8
76((%.%*+ !;4%, '( 5%# 344$6/"+6'*,
+
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
91/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
5* I#' >&$A&'(,*$'RA "*#'d A%,8 DA &$ 3#. ",.* I,"@4*\ A%#A A%#A8
D6.,+` g*'L J'2. @,%.,
;, A%&$ # A%, 3,. (,,> .*#$,'8 ?
$ A,, "#'M >*B*4,@*.$ %#B* 3#&4*> A, I.*#A* # (,,> &$I,B*.&'( %,P $,"*A%&'( P,.-$8_
)"
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
92/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
5%*' &>*'A&3M&'( M,*'A&3M&'(
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
93/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
P%&4* $%#>,P&'( I#' M&*4> ",.* >*A#&4*> &'3,."#A&,' #6,*'A&3M
",A&B#A&,'$8 +*I# P%#A *..,.$ A%*M "#-*8
)#
http://carsonified.com/blog/design/how-to-understand-your-users-with-personas/http://www.usability.gov/analyze/analysis.htmlhttp://carsonified.com/blog/design/how-to-understand-your-users-with-personas/http://www.usability.gov/analyze/analysis.html8/13/2019 [Smashing Magazine] 01 - Professional Web Design
94/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!,"*A&"*$ I4&*'A$ P&44 6* B*.$&,' ,3 A%* #@@4&I#A&,' A%#A
M,< #.* >*$&('&'( A, .*@4#I*8 C#-* $M$A*" #'> P#AI%
%,P &'( A%*&. A#$-$ #'> I%#44*'(*$ P&44 6*
*#$&*. A%#A P#M8
J*(#.>4*$$ ,3 P%, M,*$&('&'( A%* I4&*'A$hd A%* ,'RA I#.* #6,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
95/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
&A*.#A&B* #@@.,#I%8 K#I% &A*.#A&,' I,'$&$A$ ,3 #44 ,3 A%* @%#$*$ >*3&'*>
6M M,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
96/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
?.* $-*AI%*$ A%* $#"* #$ P&.*3.#"*$Y 5*44d A%* >&33*.*'I*$ I#' 6*
64*>
g$,'RA 6,A%*. P&A% A%* I,>*k b
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
97/242
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
98/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
(., #@@.,#I% A, I,'$&$A*'IM &$ A, >*3&'* *.$A#'> M,*I&$&,'$8
L,'$&$A*'A .#P ,' I,'I*@A$ 3.," A%* A%* *\@4#&'
P%M I.*#A&'( #' #@@4&I#A&,' 3,. *"@4,M**$d I4&*'A$ #'> @#.A'*.$ g&8*8
A%*&.
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
99/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
$&('&3&I#'A4M >&33*.*'A @.,I*$$*$d 3,.I&'( M,< A, (, 6*M,'> P%#A &$
3#"&4. #'> $A#.A A, &'',B#A*8 G%&$ @#.A ,3 A%* >*$&(' @.,I*$$ I#' 6*
B*.M &'A*.*$A&'(d #4A%, 3#$A*$A P#M8
+$d A%*
@.,64*" &$ .*#4 #'> I, (&B* M,< # %*#>#I%*8 G%&$ &$ ,'* .*#$,' P%M
(,,> I,"" $*$&('&'( 3,.
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
100/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
P,.-&'( ,' I,""#'>F4&'* ,@*.#A&'( $M$A*"$ #'> A%* #@@4&I#A&,'$
"#>* 3,. A%*"8 G%*M P&44 6* -**' A, %#B* -*M6,#.> $
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
101/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
>,'* &' "#'M P#M$/ I%,,$&'( P&>(*A$ 3,. A%* >#$%6,#.>k >*3&'&'(
$%,.AI 3#B,.&A*$k I%#'(&'( A%* ,.>*. ,3 *4*"*'A$k *AI8
2#M #AA*'A&,' A, #II*$$&6&4&AM8 ?4A%,,*$'RA "#AA*. &' 5*6 #@@4&I#A&,'$d &A I*.A#&'4M >,*$8 G.*#A A%*
#@@4&I#A&,' #$ &3 &A P*.* # @ >*I4#.* A%#A *,d &"#(*$ #'> A*\Ah8
"*"
http://www.jankoatwarpspeed.com/post/2009/11/01/usability-tips-visualizing-ajax-requests.aspxhttp://www.jankoatwarpspeed.com/post/2009/11/01/usability-tips-visualizing-ajax-requests.aspxhttp://www.jankoatwarpspeed.com/post/2009/11/01/usability-tips-visualizing-ajax-requests.aspxhttp://www.jankoatwarpspeed.com/post/2009/11/01/usability-tips-visualizing-ajax-requests.aspx8/13/2019 [Smashing Magazine] 01 - Professional Web Design
102/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
)"*N+ O%+ G' 9"+6,("/+6'*
q!#A&$3#IA&,'q &$ # $&'( A%*
$&"@4*$A P#M A, $,4B* # @.,64*"8
?*$A%*A&I$d A%,M8
D' A%* *'>d *A*."&'&'( %,P (,,>
&A &$8
"*+
http://www.alistapart.com/articles/indefenseofeyecandy/http://www.alistapart.com/articles/indefenseofeyecandy/http://www.alistapart.com/articles/indefenseofeyecandy/8/13/2019 [Smashing Magazine] 01 - Professional Web Design
103/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
A,,%*+6"$ )'F4'*%*+, >( 5%# 344$6/"+6'*,
KB*.M 5*6 #@@4&I#A&,' &$ * &'4&'* B#4&>#A&,'
#'> (,,> 3**>6#I-8 ^$* >*3# g,. &'3.*c
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
104/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
7",1#'".:,
C#'M 5*6 #@@4&I#A&,'$ %#B* >#$%6,#.>$8 ? >#$%6,#.> &$ # B&*P ,3
A%* ",$A &"@,.A#'A &'3,."#A&,' '**>*> A, A#-* #IA&,' #'> "#-*
>*I&$&,'$8 DA &$ I,'3&'*> A, # $&'(4* @#(* #'> &$ $ #.* &"@,.A#'A 6*I#*#4 P&A% 4#.(* c $,.A#64*d A#64*$ #.* A%&'(8 D' 3#IAd A#64*$ P*.* "#>* 3,. A%&$ @>&A&,'#4 &'3, #'> *B*' ",>&3M A%* >#A# A%*M I,'A#&'8
M%4'.+,
C,$A 6 ,3 .*@,.A$8 2.&'A*> .*@,.A$ #.*
g,.
"*$
http://designshack.co.uk/articles/css/15-tips-for-designing-terrific-tableshttp://designshack.co.uk/articles/css/15-tips-for-designing-terrific-tableshttp://designshack.co.uk/articles/css/15-tips-for-designing-terrific-tables8/13/2019 [Smashing Magazine] 01 - Professional Web Design
105/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*\@,.A*>h .*@,.A$ #.* 3,. ",',I%.,"* @.&'A*.$8
7'*N+ D'.8%+ @C 7%,68* -"++%.*,
5*R.* $, A, %*#.&'( #'> A#4-&'( #6,*$&(' @#AA*.'$ A%#A P*
$,"*A&"*$ 3,.(*A #6,*#44M #A A%* $-*AI%&'( $A#(*8
+*I# &'I.*#$* A%* $@**>
#A P%&I% A%*M 4*#.' &A8
"*%
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
106/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
107/242
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
108/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
D6*"$ !1'281+,
7*$&('&'( &'( ,3 @#AA*.'$8 7*$@&A* A%* >&33&I
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
109/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-.'8.%,,6E% A*1"*/%F%*+ 3*: 9+"*:".:, 7'
G'+ H6F6+ 5%# 7%,68*!" E=-3253%1 I+3'0%11
X#A*4M D %#B* 6**' (*AA&'( 6,.*> #'> #'',M*> P&A% @*,@4* (*AA&'( A%* &>*#$ ,3 @.,(.*$$&B*
*'%#'I*"*'Ad I4#&"&'( A%#A A%*M %,4> #MR$ A*I%',4,(&*$8
G%* @.,64*" P&A% I4#&"$ $ ,' #
"&$&'( ,3 $A#'>#.>$ #'> @.,(.*$$&B* *'%#'I*"*'A #'> j
#A 4*#$A A, "* j ,' #..,(#'I* #'> &(',.#'I* #6, &$ # @.,>d A%, (.*#A ",B&*$ P* %#B* A,
"#-* ",'*M 3.," A*..&64* ,'*$ A%#A #@@*#4 A, A%* 4,P*$A I,"",'
>*',"&'#A,. ,. .*%#$% &>*#$ A%#A P*.* $ A, $%&3A ,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
110/242
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
111/242
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
112/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
J*A A%* 3 ,3 # A#( $,> # I4#$$
A%#A (&B*$ M,< # $AM4* %#'>4* A, P,.- P&A%8 =,P (*$&(' $%,PI#$* &' P%&I%
A*\A$ #.* *\@*IA*> A, 6* # I*.A#&' 4*'(A% #'> @.,>
'*@*'> ,' *\@*.A$ A, "#-* I%#'(*$ A, A%*&. P*6$&A*$8 5*6$&A*$
I%#'(* I,'$A#'A4Mk A%&$ &$ P%#A "#-*$ A%*" &'A*.*$A&'( #'> "
0'$$;L'': 3*: 3:E%.+6,6*8 !%"/1 @, G'+16*8
? 4,A ,3 $%,PI#$*$ %#&4 ",B&* P*6$&A*$ 3,. %#B&'( A%* ",$A 3*#A B&$
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
113/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
#'> M,< P&44 $** A%#A ",$A #.* ZWZ *..,.$ ,. ]=,A #B#&4#64* #'M ",.*_
g3,. *\#"@4*d A.M A, 3&'> , #>> , P%#A $#A&$3&*$ ,*$&(' $,"*A%&'( A%#A &$
#B#&4#64* A, "&44&,'$ ,3 @*,@4* P,.4>P&>* #'> #B#&4#64* 4,'(*. A%#'
>#A# $A,.*> ,' # I%*#@ L7 gP%,$* 4&3*$@#' &$ #@@.,\&"#A*4M 1W M*#.$d
&' I#$* M,< P*.* P,'>*.&'(hY
!1% Q;+1 >( C**'E"+6*8 AB/$2,6E%$; !1.'281
!%/1*'$'8;
e',P P%#AY D' ",$A I#$*$d P* #.* 1(5&'',B#A&'(/ A%&$ &$ 1(5A%*
.*B,4,'* 6*3,.*8
7 A%&$ P#$ A%* 38 7&> M,< -',Pd 3,. &'$A#'I*d A%#A M, @ ,'RA '**> 3*#$ A, I,.@,.#A* DG
%#43 # M*#. 4#A*.8 C,$A ,3 A%* A&"*d A%* &'',B#A&,' &$ $,4> #$ @#.A ,3 #
6&((*. $,3AP#.* @#I-#(*/ ]O% M*#%d ,F
?'>F^'>*.$@*IR*>F,A.,' ',P $
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
116/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
D3 P* .*#44M A%&'- A%#A 4#.(* I,.@,.#A&,'$ ,. *'> A%* D'A*.'*A
*\&$A A, $,4B* A%* @.,64*"$ ,3 @*,@4*8 ?'> $#>4Md A%* @*,@4* >*I&>&'(
,' A%* 6*$A $,4 $**"&'(4M A%* ",$A $*I A, A.#&' A%* @*,@4* P%, P,.- P&A%
A%* $,3AP#.* #.* $*44&'( "M ,B*.4,#>*> DG >*I&$&,'F"#-*.Y
!1% 9+'/P1'$F 9;*:.'F% >( ?": C*+%.("/%,
G%&$ 6.**>$ # 4,A ,3 ,.>&'#.M &'A*.3#I*$ ,' A%* 5*6 A%#A #.* @#&'3 &' I,.@,.#A* A.#&'&'(d #'>
A%*$* #.* A%* @.,>,.$*> 6M A%* I,"@#'M8
C*",.&a&'( 3&B* I,'B,4 $A*@$ #'> "*I%#'&I#44M (,&'( A%.,&'( A%* A&"* A, 4*#.' '*P A%&'($8
G%*.* &$ # I,"3,.A &' -',P&'( %,P A, (*A A%* .*$ A,
(*A &' # @.*>&I#64* P#M &3 M,< .*#44M >,'RA P#'A A,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
117/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
D3 M,< >,'RA P#'A A, 6* ,'* ,3 A%* @*,@4* P%, 6$ A%* 5*6d A%*'
*B*.M I%#'(* 6*I,"*$ #' #'',M#'I* j &'( 6*&'( ,'* ,3
A%*"8
G%&$ &$ P%M P* %#B* ,#A*> $*AF (&B&'( A%*" $,"*A%&'( A, I,'$&>*. #$ # (.*#A (#&'d P*
$A#M &' ,*. "#.-*A ',A I#.&'(8
5#'A A, >.&B* A%* 5*6 3,.P#.>Y E&'> # P#M A, >&$. ,$ .&I%*.
&'A*.#IA&,' #'> ",.* 6*#
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
118/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
! ^r @*,@4* P#'A A, "#-* &A >#.'*> *#$M 3,. @*,@4* A, #I%&*B*
A%*&. (,#4$k #'> &3 # @#AA*.' P,.-$ P*44 ,' A%* >*$-A,@d &A
$%, #4$, P,.- P*44 ,' A%* 5*68
! K'(&'**.$ @d P&A% ]6*$A @.#IA&I*$ ,'
@*.3,."#'I*_ A%#A #.* .*4*B#'A A, $*#.I% .*$,' A%* &>*# ,3 5*6
A*I%',4,(&*$ #$ A%* P#M 3,.P#.> 6*I# A,, 3#. .*",B*> 3.," A%* I#@#6&4&A&*$ ,3 A%*
@4#A3,."8
? 4,A ,3 A%*$* #.* "$ ,3 A%*
*'> #A# A%#A %#$ # I4*B*. ",.@%&'( &'A*.3#I* A%#A (&B*$ *#I%
$8 G%#A A%* 5*6 6*(#' #$ # A*\A @4#A3,."
#'> *B,4B*> &'A, # .&I% "*> $M$A*" &$ (.*#Ak A%#A P* P#'A A, .*@4#I*
,'* P&A% A%* ,A%*. &$ b
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
119/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
51%.% C, !1% ?%"2+; >( !1% 5%#K
V*.* &$ A%* .*#4 6*#*$&('/ #>#@A#6&4&AMk &'A*.3#I*$ A%#A#>#@A A, A%* '**>$ ,3 A%* *'A ,3 A%*&. A*I%',4,(M ,.
@%M$&I#4 #6&4&AM8 5* 3,.(,A A%&$ 3,. # 3*P .*#$,'$/
! 5%N.% /'*+.'$ (.%"P,
5* 4&-* A, I,'A.,4 P%#A P* >, #'> #.* #3.#&> ,3 I%#,$ #'>
@*,@4* "*$$&'( P&A% ,
",.* 6*#4M *B*. I#.*>8 5* P*.*
I,'$A#'A4M @.,"&$*> A, 6* #44,P*> A, 6 $,"*A%&'(
#"#a&'(d #'> A%*' ,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
120/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
! D.2,+."+6'* "#'2+ +1% %*: 4.':2/+
5* #.* %#.>4M *B*. #64* A, 4,,- #A # 4&B* @.,> 4,,-$ *\#IA4M #$ P* @4#''*>8_ KB*' P,.$*d #3A*. #M*#. ,3 "#&'A*'#'I*d P* #.* 4 >*$&(' &'@ *#I% ,A%*. #$ $%,PF$A,@@*.$ ,. P%&'*.$ P%,
#4P#M$ P#'A &A A%*&. P#M8
!' M%/"4< >2. C,,2%,
!, %*.* #.* A%* &$$
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
121/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
#$ %#@@M A, * #'> I%#$* #3A*. A%* '*P*$A A*I%d 6,&'( &A b A,
>*4&B*. # .*#4 @.,b*IA8
! >2+:"+%: +%/1*'$'8; 6, 1%.% +' ,+";=
2*,@4* *&A%*. #.* ',A #44,P*> A, * ,. $&"@4M >,'RA I#.*8
5%*' D P#AI% GTd D >,'RA P#'A A, -',P %,P &A$ &'A*.'#4$ P,.-d
#'> # 4,A ,3 5*6 , "#'#(* A, (*A ,,
A%* 3,44,P&'(/ P,.- 3,. %&33*.*'A "#.-*A$ #'> 4#'( #>#@A
#'> 6* I%*#@ A, . "&(.#A* A, #',A%*. *'B&.,'"*'A8 D3
M,< I#' >, #44 ,3 A%#Ad @4*#$* $*'> "* M,
A%,,'RAd 6*I#
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
122/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
?44 ,3 A%&$ @,&'A$ A, # A.#.>$ #'> *'%#'I&'( @.,(.*$$&B*4M "*#'$ 6&'( $A,P' A%* 4&'*8
51; 9+"*:".:, Q"++%.` 3*: 51"+ TD'$$'L6*8
9+"*:".:,U Q%"*,
5,.-&'( A,P#.>$ # $A#'>#.> "*#'$ AP, A%&'($/ "#-&'( &A *#$M 3,.
,A%*.$ A, 6 ,' M, @,&'A A, $A#.A 3.,"8
G%* A%&'( #6,*B*4,@*.$ 3,44,P*> # $A#'>#.> j *B*' &3 A%*
@.,>,I 4*(, I#.$ A,(*A%*.
3.," A%* @#.A$ *B*' A%, $#P*> ,33 @#.A$
,3 A%* 4*(,$ ,. 6*'A A%*" A, "#-* A%*" @.*AA&*.d D P,'RA 6* #64* A,
>, A%#A8
+M 3,44,P&'( $A#'>#.>$d M,< #.* $&('&'( #' #(.**"*'A P&A% A%* @*,@4*
P%, A#-* ,B*. 3.," M,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
123/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
G%#A $#&>d >,'RA 4,,- #A $A#'>#.>$ #$ # ]6M #'M "*#'$ '*I*$$#.M_
@.,@,$&A&,'8 ?>>&'( ?JD? .,4*$ A, M,*4&B*.&'( P%#A I#' 6* $ A,
A%* .&(%A @4#A3,."8 G%&$ "*#'$ A%* 3,44,P&'(/
! C*/$2:6*8 %E%.;+16*8 +1"+ 6, "#,'$2+%$; *%/%,,".; ('. +1%
/'F4.%1%*,6'* "*: (2*/+6'*"$6+; '( +1% L%#,6+% 6* 0!QH=
=,A $A#A&I VGCXd "&'> M,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
124/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
H#B#!I.&@Ad ,. E4#$%d ,. !&4B*.4&(%Au %*I-d A%.,P &' H#B# #@@4*A$
&3 M,< P#'A8 ?$ 4,'( #$ M,< #>> A%*" ,'4M P%*' #@@.,@.A*d
M,C#'#(*.8D'$A*#> ,3 @,I 4*A A%* $I.&@A >, A%*
.*$A8 DA I%*I-$ P%*A%*. E4#$% &$ $ 6M A%* 6.,P$*. #'> I.*#A*$
A%* .&(%A "#.-*@A% ,3 # 4#-* 6*3,.*b #$$&(' *#I%
@#.A A, # >&33*.*'A A*#"8
? @.,(.*$$&B*4M *'%#'I*> @.,> A%* ^r #'> >*$&(' A*#"8 D3
M,< $A#.A P&A% A%* >*$&(' #'> A.M A, A.#I* M,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
125/242
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
126/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
E A, 6* #>>*> A, "#-* &A P,.- &' A%* ].*#4 P,.4>_Y 5.&A* #6,>F,'$ #'> 3&\*$d #>>&'( A%*" #$ I,""*'A$ A, A%* ,.&(&'#4
#.A&I4*8
!'8%+1%. 5% )"* 7' !16,
G%* 4#$A A%&'( D P#'A A, 6.&'( $,"*,'* P%, @,$$*$$*$ #44 ,3 A%*" ,. A,
3&'> A%* A&"* A, 4*#.' A%*" #44 M,&'( A%#A P* I, >,A%*&. b,6$ #'MP#M &3 ,'4M @*,@4* P, * A%*&. 6.,P$*.$d A%*'
P* $%,'RA 6* $ A%#A P* >,'RA (*A A%* A&"* #'> ,@@,.A
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
127/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
"+'
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
128/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
)'$'. !1%'.; ('. -.'(%,,6'*"$ 7%,68*%.,
!" E%0+-(1 E=%70%1
L,4,. &' >*$&(' &$ B*.M $&B&>
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
129/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!,"*A%&'( #$ $&"@4* #$ I%#'(&'( A%* %
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
130/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
5".F )'$'.,
5#." I,4,.$ &'I4* .*>d ,.#'(* #'> M*44,P #'> B#.A&,'$ ,3 A%*
A%.**8 G%*$* #.* A%* I,4,.$ ,3 3&.*d 3#44 4*#B*$ #'> $ $ A%*M #.* (*'*.#44M *'*.(&a&'(d @#$$&,'#A* #'> @,$&A&B*8
J*> #'> M*44,P #.* 6,A% @.&"#.M I,4,.$d P&A% ,.#'(* 3#44&'( &' A%*"&>>4*d P%&I% "*#'$ P#." I,4,.$ #.* #44 A. *'*.(M8
M%: c-.6F".; )'$'.d
"#*
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
131/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
J*> &$ # %,A I,4,.8 DAR$ #$$,IA*> P&A% 3&.*d B&,4*'I* #'> P#.3#.*8 DAR$
#4$, #$$,IA*> P&A% 4,B* #'> @#$$&,'8 D' %&$A,.Md &A %#$ 6**'#$$,IA*> P&A% 6,A% A%* >*B&4 #'> L8 J*> I#' #IA @.*$$h8
O* A%* P*$A*.' P,.4>d .*> %#$ >&33*.*'A #$$,IA&,'$8 E,.
*\#"@4*d &' L%&'#d .*> &$ A%* I,4,. ,3 @.,$@*.&AM #'> %#@@&'*$$8 DA I#'
#4$, 6* A, #AA.#IA (,,> 4>&'( >#M8 D' !,
%#$ 6*I,"* A%* I,4,. #$$,IA*> P&A% ?D7! #P#.*'*$$ &' ?3.&I# >
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
132/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
D' >*$&('d .*> I#' 6* # @,P*.3 I#' 6* B*.$#A&4*d A%,*$ 6*&'( *'*.(*A&I
#'> >#.-*. $%#>*$ *B,-&'( @,P*. #'> *4*(#'I*8
>."*8% c9%/'*:".; )'$'.d
O.#'(* &$ # B&6.#'A #'> *'*.(*A&I I,4,.8 D' &A$ " 3,."$d &A &$#$$,IA*> P&A% K#.A% #'> A%* # &'B&A&'(d
#'> 4*$$ &' M,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
133/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
J%$$'L c-.6F".; )'$'.d
;*44,P &$ ,3A*' I,'$&>*.*> A%* 6.&(%A*$A #'> ",$A *'*.(&a&'( ,3 A%*
P#." I,4,.$8 DA &$ #$$,IA*> P&A% %#@@&'*$$ #'> $ I,P#.>&I* gI#44&'( $,"*,'*
M*44,P &$ A, I#44 A%*" # I,P#.>h8
;*44,P &$ #4$, #$$,IA*> P&A% %,@*d #$ I#' 6* $**' &' I, P&A% >#'(*.d A%,8 D'$,"* I, &AR$ # I,4,. 3,. "*.I%#'A$8
D' M,*$&('$d 6.&(%A M*44,P I#' 4*'> # $*'$* ,3 %#@@&'*$$ #'>
I%**.3.*'8 X&(%AM*44,P$ #4$, (&B* ",.* ,3 # 3**4&'( ,3 I#4" #'> %#@@&'*$$ A%#' 6.&(%A
M*44,P$8 7#.- M*44,P$ #'> (,4>F% M*44,P$ I#' 4,,- #'A&c*$&('$ P%*.* # $*'$* ,3 @*."#'*'I* &$ >*$&.*>8
"##
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
134/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
)''$ )'$'.,
L,,4 I,4,.$ &'I4* (.**'d 64 A%*M #.* ,3A*' ",.*
$ A%#' P#." I,4,.$8 G%*M #.* A%* I,4,.$ ,3 '&(%Ad P#A*. #'>
'#A $,"*P%#A .*$*.B*>8
+4 @
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
135/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
O.%%* c9%/'*:".; )'$'.d
S.**' &$ # >,P' A, *#.A%8 DA .*@.*$*'A$ '*P 6*(&''&'($ #'> (.,PA%8 DA
#4$, $&('&3&*$ .*'*P#4 #'> #6 &A &$ $A#64*8 DAR$ #@@.,@.A* 3,.
>*$&('$ .*4#A*> A, P*#4A%d $A#6&4&AMd .*'*P#4 #'> '#A B&6.#'Ad P%&4* ,4&B* (.**'$ .*@.*$*'A A%*
'#A8 7#.- (.**'$ #.* A%* ",$A $A#64* #'> .*@.*$*'A#A&B* ,3
#334
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
136/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
?$2% c-.6F".; )'$'.d
+44M8 7#.- 64
",.* .*4@*8 +4 P&A% @*#I* #'> %#$ $@&.&A8 X&(%A 64
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
137/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-2.4$% c9%/'*:".; )'$'.d
2 P&A% .,M#4AM8 DAR$ # I,"6&'#A&,' ,3 .*>
#'> 64 P&A% P*#4A% #'> .,M#4AMd P%&4* 4&(%A*.
@*.*> ",.* .,"#'A&I8
D' >*$&('d >#.- @ 4
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
138/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
G%2+."$,
=**$&('8 G%*MR.* I,"",'4M
I,"6&'*> P&A% 6.&(%A*. #II*'A I,4,.$8 + "#-* 3,. B*.M $,@%&$A&I#A*> 4#M,*d &AR$
#$$,IA*> P&A% @,P*.d *4*(#'I* #'> 3,."#4&AM8 O' A%* '*(#A&B* $&>*d &A
"#(
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
139/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
&$ #$$,IA*> P&A% *B&4d >*#A% #'> "M$A*.M8 +4#I- &$ A%* A.#>&A&,'#4 I,4,.
,3 ", P&A%
.*6*44&,' &' $,"* I*$&('$8
DA I#' 6* *&A%*. I,'$*.B#A&B* ,. ",>*.'d A.#>&A&,'#4 ,. *@*'>&'( ,' A%* I,4,.$ &AR$ I,"6&'*> P&A%8 D' >*$&('d 64#I- &$
I,"",'4M 3,. AM@,(.#@%M #'> ,A%*. 3 B&.A>&'( >#M8 DAR$ #4$, #$$,IA*> P&A% A%* %*#4A% I#.*
&'>,IA,.$d '
P&A% (,,>'*$$/ #'(*4$ #.* ,3A*' >*@&IA*> &' P%&A* >.*$$8
"#)
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
140/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
D' >*$&('d P%&A* &$ ,3A*' #$ # '*.,@ A, (&B* ,A%*.
I,4,.$ # 4,*. B,&I*8 DA I,'B*M$ I4*#'4&'*$$ #'> $&"@4&I&AM #'> &$
@,@ &A8
O.";
S.#M &$ # '**.*> A, 6* ,' A%* I,,4 *'> ,3A%* $@*IA.M ,. >*@.*$$&'(8 X&(%A (.#M$
I#' 6* &' @4#I* ,3 P%&A* &' $,"* >*$&('$d #'> >#.- (.#M$ I#' 6*
&' @4#I* ,3 64#I-8
S.#M &$ (*'*.#44M I,'$*.B#A&B* #'> 3,."#4 6 I,4,.8 2*$ ,3 64#I-d A%, &'8 D' >*$&('d (.#M
6#I-(.,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
141/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
?.'L*
+.,P' &$ #$$,IA*> P&A% K#.A%d P,,> #'> $A,'*8 DAR$ # I,"@4*A*4M
'#A*@*'>#6&4&AM #'> .*4&4&AMd P&A% $A*#>3#$A'*$$ #'> P&A% *#.A%&'*$$8 DA
I#' #4$, 6* I,'$&>*.*> > $,"*A&"*$ &' $A,'* A*\A P%,4*$,"*'*$$ A, # >*$&('8 DAR$ $,"*A&"*$ &' &A$ >#.-*$A 3,."$ #$ # .*@4#I*"*'A 3,. 64#I-d &' *&A%*.
6#I-(.,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
142/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
?%68% "*: !"*
+*&(* &$ $,"*P%#A &'( ,' A%* I,4,.$ #.,
&$
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
143/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
).%"F "*: CE'.;
DB,.M #'> I.*#" #.* $,@%&$A&I#A*> I,4,.$d P&A% $,"* ,3 A%* P#."A% ,3
6.,P' #'> # 4,A ,3 A%* I,,4'*$$ ,3 P%&A*8 G%*MR.* (*'*.#44M c P&A% P%&A*d 6
P&A% *#.A%M I,4,.$ 4&-* @*#I% ,. 6.,P'd &A I#' A#-* ,' #' *#.A%M
c#.-*. I,4,.$d P&A%,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
144/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
! >."*8%
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
145/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
146/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
#'> A&'A$ ,3 # @#.A&I4&'*$8 G%* $*I,'> P, 6* 3,. 6,>M A*\A
,. @,$$&64M A%* 6#I-(., g,. 3,. A%* 6,>M A*\A &3 A%* $*I,'> I,4,. P#$ #$ A%*
6#I-(., A%* 4#$A AP, I,4,.$ P, 6* #$ #II*'A$ ,. &'
(.#@%&I$8
"$&
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
147/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
3*"$'8'2,
?'#4,(, A&'A$ P* #>>
&'A*.*$A #'> #>#@A A%* $I%*"*$ A, ,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
148/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
149/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
6M I,"6&'&'( I,4,.$ 3.,"
,@@,$&A* $&>*$ ,3 A%* I,4,. P%**48 D' A%*&. ",$A 6#$&I 3,."d A%*$*
$I%*"*$ I,'$&$A ,3 ,'4M AP, I,4,.$ 6*> $%#>*$8 ? P,.> ,3 P#.'&'(d A%,n,. B#4*. &'
*\A.*"* I#$*$h8 ?B,&> A%&$d *&A%*. 6M 4*#B&'( P%&A* $@#I* 6*AP**'A%*" ,. 6M #>>&'( # A.#'$&A&,'#4 I,4,. 6*AP**' A%*"8
AB"F4$%,
"$)
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
150/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
B D3/+ -%1)+ (, 53152@ 2=%/+2 %1/ 5(1+2 0%?+2 5=32 % :+-2%53'+ 6('(-
26=+0+;
B1(5=+- 6(07'+0+15%-" 6('(- 26=+0+ D35= % D3/+ -%1)+ (, 6=-(0%2;
M(1C5 ,(-)+5 5=%5 9+3)+ %1/ 9-(D1 %-+ -+%''" 53152 %1/ 2=%/+2 (,
(-%1)+;
94$6+ )'F4$%F%*+".;
!@4&A I,"@4*"*'A#.M $I%*"*$ #.* #4",$A #$ *#$M A, ,3 * ,3 A%* %
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
151/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
AB"F4$%,
B 26=+0+ 31 D=36= "+''(DG)-++1 32 5=+ 9%2+ =&+; S1 5=32 26=+0+@ =%:31)+1(&)= /3,,+-+16+ 31 6=-(0% %1/ :%'&+ 9+5D++1 5=+ 6('(-2 "(& 2+'+65 32
307(-5%15;
B1(5=+- 7%'+55+ D35= % D3/+ -%1)+ (, 6=-(0%2;
!.6":6/
G.>&I $I%*"*$ #.* "#>*
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
152/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
AB"F4$%,
N231) % :+-" 7%'+ (- /%-? :+-23(1 (, (1+ 6('(- 31 5=+ 5-3%/@ %'(1) D35=
5D( 2=%/+2@ 5(1+2 (- 53152 (, 5=+ (5=+- 5D( 6('(-2@ 0%?+2 5=+ 231)'+6('(- D(-? %'0(25 %2 % 1+&5-%';
B'5+-1%5+'"@ 7%3-31) (1+ :+-" 9-3)=5 =&+ D35= 0&5+/ =&+2 0%?+2 5=+
9-3)=5 (1+ 25%1/ (&5 0(-+;
7'2#$%R)'F4$%F%*+".; c!%+.":6/d
G*A.#>&I I,4,. $I%*"*$ #.* @.,6#64M A%* ",$A >&33&I
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
153/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
AB"F4$%,
B -%5=+- &1307-+223:+ 26=+0+;
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
154/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
)2,+'F
L*$A A, I.*#A*8 +M ',A 3,44,P&'( A%*
@.*>*3&'*> $I%*"*$ >&$I #6,B*d M,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
155/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
N231) (1+ 6('(- D35= % =3)= 6=-(0% %0(1) (5=+- 6('(-2 D35= '(D+-
6=-(0%2 32 %1(5=+- +,,+653:+ 0+5=(/ `5=+ =3)=+-G6=-(0% 6('(- 2+-:+2 %2
%1 %66+15a;
).%"+6*8 " )'$'. 9/1%F%
L.*#A&'( M, M,< I#' *"@4,M c I.*#A* $,"*
I %,P
A.#>&A&,'#4 $I%*"*$ #.* I.*#A*> &$ &"@,.A#'Ad 3,. ",$A >*$&(' @.,b*IA$M,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
156/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!,d 3,. ,*.'
#.I%&A*IA*$&(' 64,( #'> # %&(%F*'> P,"*'R$ I4,A%&'( .*A#&4*.
A%#A $@*I&a*$ &' T&IA,.'F&'34
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
157/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
E,. ,*$&(' 64,(d P*RB* (,'* P&A% # I,4,. $I%*"* "#>* *$ #'> A&'A$ ,3 (.#M8
G%&$ &$ #4",$A #' #'#4,(,* *$ ,3 @ P,.- P*44
A,(*A%*.d *$@*I,M P%*' (&B*' >&33*.*'A B#4>&'( # I,*$ ,3 .*> A, A%&$ (.#M I,4,. $I%*"* #>>$ # 4,A
,3 B&$ A%* @,A*'A A, %&(%4&(%A I*.A#&' @#.A$ ,3 M,*$&('8
"%'
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
158/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
V*.*d P*RB* (,AA*' .&> ,3 A%* @M8
?(#&'d A%&$ &$ '*\A A, A%* .*>>&$%F@ .*> @#4*AA*8 V,P*B*.d (.#M$ #.* #IA .*> "#-* $ ,3 # A*A.#>&I I,4,. $I%*"*d 6 >,P' A, A%* @,&'A ,3 #4",$A 6*&'( (.#M8
"%(
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
159/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
51; 91":%,` !'*%, "*: !6*+, 3.% CF4'.+"*+
?$ M,< I#' $** 3.," A%* I,4,. $I%*"*$ #6,B*d
$%#>*$ &' M,$ A, I,4,. $I%*"*$ A%#A #.*
,B*.P%*4"&'( #'> 6,.&'( #A A%* $#"* A&"*8
5%*' M,< "&\ &' A,'*$d $%#>*$ #'> A&'A$d M,< *\@#'> A%* 6#$&I 19F
$@,-* I,4,. P%**4 A, #' &'3&'&A* '>$ B&$ A, "#-* I,4,. $I%*"*$ P#."*.
g6*I# A&'A$ ,3 ,.#'(* #'>
M*44,Ph8 S.#M A#-*$ ,' # P#." ,. I,,4 3**4 >*@*'>&'( ,' A%*
$&'( ,' A%* $
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
160/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+4#I- #'> P%&A* #.* A%* *#$&*$A '*> A, b#.- $%#>* ,3 (.#M &'$A*#>8
?>>&'( 6.,P'$d A#'$ #'> ,33FP%&A* %#.- I%,I,4#A* 6.,P' &' @4#I* ,3 64#I-8 ? @#4* ,33FP%&A* I#' 6*
&'$A*#> ,3 P%&A* ,. 4&(%A (.#M &' "#'M I#$*$8 ?'> A#' I#' 6* &'
@4#I* ,3 (.#M gI.*#A* # A,'* 6M #>>&'( $,"* (.#M A, "#-* &A *B*'
*#$&*.h8
!1% A",6%,+ )'$'. 9/1%F%,
5*RB* A, ,' A%&$ #4.*#>M/ #>>&'( # 6.&(%A #II*'A I,4,. A, #'
,A%*.P&$* '*
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
161/242
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
162/242
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
163/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
3,. &44&$I %*.* #'> &A &$ # P,.-#64*
'8 +
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
164/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
G#-* #>B#'A#(* ,3 ,'* ,3 A%* "#'M P*6$&A*$ , *#$&*. A,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
165/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
C, I'1* !1% )$6%*+ 7%*,% '. 3.% J'2 D"6$6*8
06FK
!" $%&' !(%)
C**A H,%' A%* I4&*'A8 H,%' .d 6&'( # P*6$&A* &$ 4&-* 6&'( # %,
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
166/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
P#'A A, "#-* $,'RA I%#.(* %&" 4*$$ A%#' P%#A %* &$ P&44&'(
A, (&B*8 +*$&>*$d %* >,*$'RA .*#44M -',P %&$ 6(*A8 V,P A%* %*I- &$
%* $ A, -',P %,P " A, 3&'> # 5*6 >*$&('*. P%, >,*$'RA P#'A A,
A#-* #>B#'A#(* ,3 %&"8 E,.A8 D' %&$ *M*$d
M,< #.* #44 ,3 # $>*' A.M&'( A, $c M,< "*'A&,'*> H#-,6
=&*4$*'8 ;,< #.* 6*(&''&'( A, P,'>*. &3 H,%' &$ # 6&A A%&I-8
"&&
8/13/2019 [Smashing Magazine] 01 - Professional Web Design
167/242
!"#$%&'( *+,,- !*.&*$/ 01 2.,3*$$&,'#4 5*6 7*$&('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
2*.%#@$ &3 M,< %#> A#4-*> #6,8 ?$ &A &$d H,%' @,P' #'> .*3 A, %#B* # $&('*>
I,'A.#IA8 +4*$$d M,< A.M A, 6*
,@A&"&$A&Id #'> M,< >&B* &'A, A%* >*$&(' @.,I*$