Smashing Ebook 1 Professional Web Design

Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________
1
_____________________________________________________________
Preface
This e-book contains a selection of the best articles about
professional Web design that have been published on Smashing
aga!ine in "##$ and "#1#% The articles have been carefull& edited
and prepared for this PD' version( some screenshots and links )ere
removed to make the book easier to read and print out%
This book presents guidelines for professional Web development*
including communicating )ith clients* creating a road map to a
successful portfolio* rules for professional net)orking and tips on
designing user interfaces for business Web applications% The book
shares e+pert advice for students and &oung Web designers* and it
also helps &ou learn ho) to respond effectivel& to design criticism*
use stor&telling for a better user e+perience and appl& color theor& to
&our professional designs.
This book is not protected b& D,% - cop& costs onl& .$%$# and is
available e+clusivel& at http://shop.smashingmagazine.com% Please
respect our )ork and the hard efforts of our )riters% /f &ou received
this book from a source other than the Smashing Shop* please
support us b& purchasing &our cop& in our online store% Thank &ou%
Published in March 2010 by Smashing Media GmbH - Werthmannstr.
15 - 7909 !reiburg " Germany - Gesch#$ts$%hrer& S'en (ennart)*
+italy !riedman - ,mtsgericht !reiburg& H-. 70/01.
2
_____________________________________________________________
Table of Contents
Preface%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%"
Harsh Truths About Corporate Websites%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%$
0ou 1eed - Separate Web Division%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%$
anaging 0our Website /s - 'ull-Time 2ob%%%%%%%%%%%%%%%%%%%%%%%%%%%%%11
Periodic ,edesign /s 1ot 3nough%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1"
0our Website 4annot -ppeal To 3ver&one%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%15
0ou -re Wasting one& 6n Social 1et)orking%%%%%%%%%%%%%%%%%%%%15
0our Website /s 1ot -ll -bout 0ou%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%17
0ou8re 1ot 9etting :alue 'rom 0our Web Team%%%%%%%%%%%%%%%%%%%%17
Design B& 4ommittee Brings Death%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1;
- 4S /s 1ot - Silver Bullet%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1$
0ou <ave Too uch 4ontent%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%"#
4onclusions%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%"1
Portfolio Design Stud: Design Patterns and Current
Practices....................................................................................""
=ight vs% Dark Design%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%"5
<o) an& 4olumns>%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%"?
/ntroductor& Block 6n Top>%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%"@
=a&out -lignment%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%";
1avigation -lignment%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%"$
Search Bo+ Design%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%5#
'lash 3lements%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%5#
Where To Put 4ontact /nformation>%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%51
A-bout BsC Page%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%5?
3
_____________________________________________________________
4lient Page%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%5?
Services Page%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%57
Portfolio Page%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%5@
Workflo) Page%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%5;
4ontact Page%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%5D
Specials -nd 3+tras%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%5$
6ther 'indings%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%5$
Summar&%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%?#
Creating A Successful !nline Portfolio%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%?"
Pitfall #1: 6bfuscating%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%?"
Pitfall #": 4ramming /nformation%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%?5
Pitfall #5: 6verdoing /t%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%??
Pitfall #?: Bnusual 1avigation%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%??
Pitfall #7: :isual 4lutter%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%?7
Principles of 3ffective Portfolio Design%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%?@
Define &our 4riteria and Strategies for Success%%%%%%%%%%%%%%%%%%%%%?@
4onsider ultiple Portfolios%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%?;
Target 0our arket%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%?$
Prioriti!e Bsabilit&%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%7"
Bse the ,ight Technolog&%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%7"
Plan The ProEect%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%7?
=imit The Scope -nd T&pe of Work 0ou Promote%%%%%%%%%%%%%%%%%7?
Provide -deFuate 4ontact /nformation* Documentation
-nd 3+planations%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%7@
Present 0our Work /n The 4onte+t of 0our 9oals%%%%%%%%%%%%%%%%%%7;
/nfuse 0our Personalit& /n The Design%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%7D
Promote -nd =everage 0our Work%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@#
4
_____________________________________________________________
Develop =ong-Term 9oals%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@#
"etter #ser $%perience With Stortelling%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@"
/t Begins With a Stor&%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@"
,evealing the Design in Stories%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@5
The Po)er of 3motion%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@7
The Basics of Stor&telling for Bser 3+perience%%%%%%%%%%%%%%%%%%%%%%%@D
<appil& 3ver -fter: The ,ealit&%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%;"
- 'e) odern-Da& Stor&tellers%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%;5
The Stor&telling 3+periences -round Bs%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%D5
Designing #ser &nterfaces 'or "usiness Web Applications% %D$
Websites vs% Web -pplications%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%D$
'irst* Gno) 0our Bsers%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%$1
Design Process%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%$?
Design Principles%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%$;
3ssential 4omponents 6f Web -pplications%%%%%%%%%%%%%%%%%%%%%%%%1#5
Don8t 'orget B/ Design Patterns%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1#7
4ase Stud&: 6nline Banking -pplication%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1#;
'inal Thoughts%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1#D
Progressi(e $nhancement And Standards Do )ot *imit Web
Design%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1#$
Shin& 1e) Technologies vs% 6utdated Best Practices>%%%%%11#
The ess That /s The Web%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%11#
4reating 4elebrities -nd - Place We
Wish We Were -t%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%111
<oll&)ood -nd -dvertising Teach Bs 1othing%%%%%%%%%%%%%%%%%%%11"
5
_____________________________________________________________
The &th 6f /nnovating 3+clusivel& Through Technolog&
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%115
/nnovation /sn8t -bout 1e) To&s%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%11?
The 4orporate Spin 6n /nnovation* -nd /ts 4onseFuences
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%117
The Stockholm S&ndrome 6f Bad /nterfaces%%%%%%%%%%%%%%%%%%%%%%%%11@
This /s 1ot -bout Technolog& 6r Design%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%11;
Where /s The Beaut& 6f The Web>%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%11$
To ,ecap: 6ur /ssues%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1"#
Wh& Standards atter* -nd What A'ollo)ing StandardsC
eans%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1""
Progressive 3nhancement Works%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1"5
Best Practices 4ome 'rom -pplication -nd /terative
/mprovement%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1"7
Together We 4an Do This%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1"@
Color Theor for Professional Designers%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1"D
Warm 4olors%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%15#
4ool 4olors%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%15?
1eutrals%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%15;
/n Brief%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1?5
Traditional 4olor Scheme T&pes%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1??
4reating a 4olor Scheme%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%177
4onclusion%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1@5
&s +ohn The Client Dense or Are ,ou 'ailing Him-%%%%%%%%%%%%%%%%%%1@7
3+plain Wh& 0ou -re -sking -bout one&%%%%%%%%%%%%%%%%%%%%%%%%%%1@7
2ustif& 0our ,ecommendations /n =anguage 2ohn 4an
6
_____________________________________________________________
Bnderstand%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1@@
/nclude 2ohn /n The Process%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1@;
3ducate 2ohn -bout Design%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1@D
4ommunicate With 2ohn ,egularl&%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1@$
3+plain 2ohn8s 6ngoing ,ole%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1;#
The oral 6f The Stor&%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1;1
Ho. To &dentif and Deal With Different Tpes !f Clients
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1;5
The Passive--ggressive%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1;5
The 'amil& 'riend%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1;7
The Bnder-:aluer%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1;@
The 1it-Picker%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1;;
The Scornful Saver%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1;D
The A/-4ould-Do-This-&selfC-er%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1;$
The 4ontrol 'reak%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1D1
The Dream 4lient%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1D"
Wrap-up%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1D5
Ho. To /espond $ffecti(el To Design Criticism%%%%%%%%%%%%%%%%%%%%1D?
<ave The ,ight -ttitude%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1D;
Bnderstand The 6bEective%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1DD
4heck 0our 'irst ,eaction%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1$#
Separate Wheat 'rom The 4haff%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1$#
=earn 'rom /t%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1$1
=ook 'or - 1e) /dea%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1$"
Dig Deeper When 1ecessar&%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1$5
Thank The 4ritic%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1$7
7
_____________________________________________________________
Web Designer0s 1uide to Professional )et.or2ing%%%%%%%%%%%%%%%1$@
Wh& 1et)ork>%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1$@
1et)orking Tips for Designers%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%"##
1roup &nter(ie.: $%pert Ad(ice 'or Students and ,oung
Web Designers%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%"#$
8
_____________________________________________________________
Harsh Truths About Corporate Websites
.y Paul .2ag
We all make mistakes running our )ebsites% <o)ever* the nature of
those mistakes varies depending on the si!e of &our compan&% -s &our
organi!ation gro)s* the mistakes change% This article addresses
common mistakes made b& large organi!ations%
ost of the clients / )ork )ith are large organi!ations: universities*
large charities* public sector institutions and big companies% 6ver the
last seven &ears* / have noticed certain recurring misconceptions
among these organi!ations% This article aims to dispel these illusions
and encourage people to face the harsh realit&%
The problem is that if &ou are reading this* &ou are probabl& alread&
a)are of these things% But hopefull& this article )ill be helpful to &ou
as &ou convince others )ithin &our organi!ation% /n an& case* here are
some of the harsh truths about )ebsites of large organi!ations%
,ou )eed A Separate Web Di(ision
/n man& organi!ations* the )ebsite is managed b& either the
marketing or /T department% <o)ever* this inevitabl& leads to a turf
)ar* )ith the )ebsite becoming the victim of internal politics%
9
_____________________________________________________________
/n realit&* pursuing a Web strateg& is not particularl& suited to either
group% /T ma& be e+cellent at rolling out comple+ s&stems* but it is not
suited to developing a friendl& user e+perience or establishing an
online brand%
3e$$rey 4eldman urges 2rgani)ati2ns t2 create a se5arate Web di'isi2n.
arketing* on the other hand* is little better% -s 2effre& Heldman puts
it in his article =et T here B e Web D ivisions :
6he Web is a c2n'ersati2n. Mar7eting* by c2ntrast* is a
m2n2l2gue8 ,nd then there9s all that messy business
:ith semantic mar7u5* ;SS* un2btrusi'e scri5ting*
card-s2rting e<ercises* H6M( run-thr2ughs* in'2l'ing
10
_____________________________________________________________
users in accessibility* and the rest 2$ the s7ills and
e<5erience that d2n9t $all under Mar7eting9s 5ur'ie:.
/nstead* the )ebsite should be managed b& a single unified team%
-gain* Heldman sums it up )hen he )rites:
Put them in a di'isi2n that rec2gni)es that y2ur
:ebsite is n2t a bastard 2$ y2ur br2chures* n2r a
natural 2utgr2:th 2$ y2ur gr2u5 calendar. (et there be
Web di'isi2ns.
3anaging ,our Website &s A 'ull4Time +ob
1ot onl& is the )ebsite often split bet)een marketing and /T* it is also
usuall& under-resourced% /nstead of there being a dedicated Web
team* those responsible for the )ebsite are often e+pected to run it
alongside their Ada& Eob%C When a Web team is in place* it is often
over-stretched% The vast maEorit& of its time is spent on da&-to-da&
maintenance rather than on longer-term strategic thinking%
This situation is further aggravated b& the fact that the people hired
to AmaintainC the )ebsite are Eunior members of the staff% The& do not
have the e+perience or authorit& to push the )ebsite for)ard% /t is
time for organi!ations to seriousl& invest in their )ebsites and finall&
11
_____________________________________________________________
move their Web strategies for)ard b& hiring full-time senior Web
managers%
Periodic /edesign &s )ot $nough
Because corporate )ebsites are under-resourced* the& are often
neglected for long periods of time% The& slo)l& become out of date in
their content* design and technolog&% 3ventuall&* the )ebsite becomes
such an embarrassment that management steps in and demands that
it be sorted% This inevitabl& leads to a complete redesign at
considerable e+pense% This is a fla)ed approach% /t is a )aste of
mone&* because )hen the old )ebsite is replaced* the investment that
)as put into it is lost* too% /t is also tough on finances* )ith a large
e+penditure having to be made ever& fe) &ears%
;amer2n M2ll enc2urages Web designers t2 realign* n2t redesign.
12
_____________________________________________________________
- better )a& is continual investment in &our )ebsite* allo)ing it to
evolve over time% 1ot onl& is this less )asteful* it is also better for
users* as pointed out b& 4ameron oll in his post 9ood Designers
,edesign* 9reat Designers ,ealign%
,our Website Cannot Appeal To $(erone
6ne of the first Fuestions / ask a client is* AWho is &our target
audience>C / am regularl& shocked at the length of the repl&% Too
often* it includes a long and detailed list of diverse people% /nevitabl&*
m& ne+t Fuestion is* AWhich of those man& demographic groups are
most important>C Depressingl&* the ans)er is usuall& that the& are all
eFuall& important%
The harsh truth is that if &ou build a )ebsite for ever&one* it )ill
appeal to no one% /t is important to be e+tremel& focused about &our
audience and cater &our design and content to it% Does this mean &ou
should ignore &our other users> 1ot at all% 0our )ebsite should be
accessible b& all and not offend or e+clude an&bod&% <o)ever* the
)ebsite does need to be primaril& aimed at a clearl& defined
audience%
,ou Are Wasting 3one !n Social )et.or2ing
/ find it encouraging that )ebsite managers increasingl& recogni!e
that a Web strateg& involves more than running a )ebsite% The& are
beginning to use tools such as T)itter* 'acebook and 0ouTube to
13
_____________________________________________________________
increase their reach and engage )ith ne) audiences% <o)ever*
although the& are using these tools* too often the& do so ineffectivel&%
T)eeting on a corporate account or posting sales demonstrations on
0ouTube misses the essence of social net)orking%
Micr2s2$t dramatically im5r2'ed its image am2ng the de'el25ment
c2mmunity by all2:ing sta$$ t2 s5ea7 2ut 'ia the ;hannel 9 :ebsite.
Social net)orking is about people engaging )ith people% /ndividuals
do not )ant to build relationships )ith brands and corporations% The&
)ant to talk to other people% Too man& organi!ations thro) millions
into 'acebook apps and viral videos )hen the& could spend that
mone& on engaging )ith people in a transparent and open )a&%
14
_____________________________________________________________
/nstead of creating a corporate T)itter account or indeed even a
corporate blog* encourage &our emplo&ees to start t)eeting and
blogging themselves% Provide guidelines on acceptable behavior and
)hat tools the& need to start engaging directl& )ith the communit&
that is connected to &our products and services% This demonstrates
&our commitment not onl& to the communit& but also to the human
side of &our business%
,our Website &s )ot All About ,ou
While some )ebsite managers )ant their )ebsite to appeal to
ever&one* others )ant it to appeal to themselves and their colleagues%
- surprising number of organi!ations ignore their users entirel& and
base their )ebsites entirel& on an organi!ational perspective% This
t&picall& manifests itself in inappropriate design that caters to the
managing director8s personal preferences and in content that is full of
Eargon%
- )ebsite should not pander to the preferences of staff but should
rather meet the needs of its users% Too man& designs are reEected
because the boss Adoesn8t like green%C =ike)ise* too much )ebsite
cop& contains acron&ms and terms used onl& )ithin the organi!ation%
,ou0re )ot 1etting 5alue 'rom ,our Web Team
Whether the& have an in-house Web team or use an e+ternal agenc&*
man& organi!ations fail to get the most from their Web designers%
15
_____________________________________________________________
Web designers are much more than pi+el pushers% The& have a )ealth
of kno)ledge about the Web and ho) users interact )ith it% The& also
understand design techniFues* including grid s&stems* )hite space*
color theor& and much more%
6reating designers as 5i<el 5ushers :astes their e<5erience& here* a
designer laments his 5redicament 2n 6:itter.
/t is therefore )asteful to micro-manage b& asking them to Amake the
logo biggerC or to Amove that element three pi+els to the left%C B&
doing so* &ou are reducing their role to that of a soft)are operator
and are )asting the )ealth of e+perience the& bring%
16
_____________________________________________________________
/f &ou )ant to get the ma+imum return on &our Web team* present it
)ith problems* not solutions% 'or e+ample* if &ou8re targeting &our
)ebsite at teenage girls* and the designer goes for corporate blue*
suggest that &our audience might not respond )ell to that color% Do
not tell him or her to change it to pink% This )a&* the designer has the
freedom to find a solution that ma& be even better than &our choice%
0ou8re allo)ing &our designer to solve the problem &ou have
presented%
Design " Committee "rings Death
The ultimate s&mbol of a large organi!ation8s approach to )ebsite
management is the committee% - committee is often formed to tackle
the )ebsite because internal politics demand that ever&one have a
sa& and that all considerations be taken into account%
To sa& that all committees are a bad idea is naive* and to suggest that
a large corporate )ebsite could be developed )ithout consultation is
fanciful% But )hen it comes to design* committees are often the kiss of
death%
17
_____________________________________________________________
=esign by c2mmittee leads t2 design 2n the $ly.
Design is subEective% The )a& )e respond to a design is influenced b&
culture* gender* age* childhood e+perience and even ph&sical
conditions Isuch as color blindnessJ% What one person considers great
design could be hated b& another% This is )h& it is so important that
design decisions be informed b& user testing rather than personal
e+perience% Bnfortunatel&* this approach is rarel& taken )hen a
committee is making the decisions%
/nstead* designing b& committee becomes about compromise%
Because committee members have different opinions about the
design* the& look for common ground% 6ne person hates the blue
18
_____________________________________________________________
color scheme* )hile another loves it% This leads to designing on the
fl&* )ith the committee instructing the designer to Atr& a different
blueC in the hopes of finding middle ground% Bnfortunatel&* this leads
onl& to bland design that neither appeals to nor e+cites an&one%
A C3S &s )ot A Sil(er "ullet
an& of the clients / )ork )ith have ama!ingl& unrealistic
e+pectations of content management s&stems I4SJ% Those )ithout
one think it )ill solve all of their content )oes* and those )ho have
one moan because it hasn8tK
/t is certainl& true that a 4S can bring a lot of benefits% These
include:
reducing the technical barriers of adding content*
allo)ing more people to add and edit content*
facilitating faster updates*
and allo)ing greater control%
But man& 4S8 are less fle+ible than their o)ners )ould like% The& fail
to meet the changing demands of the )ebsites the& are a platform
for% Website managers also complain that their 4S is hard to use% /n
man& cases* this is because the ones using it have not been
adeFuatel& trained or are not using it regularl& enough%
19
_____________________________________________________________
'inall&* a 4S ma& allo) content to be easil& updated* but it does not
ensure that content :ill be updated or even that the Fualit& of
content )ill be acceptable% an& 4S-based )ebsites still have out-
of-date content or poorl& )ritten cop&% This is because internal
processes have not been put in place to support the content
contributors%
/f &ou look to a 4S to solve &our )ebsite maintenance issues* &ou
)ill be disappointed%
,ou Ha(e Too 3uch Content
Part of the problem )ith maintaining content on large corporate
)ebsites is that there is too much content in the first place% ost of
these )ebsites have AevolvedC over &ears* )ith more and more
content being added% -t no point did an&one revie) the content and
ask )hat could be taken a)a&%
an& )ebsite managers fill their )ebsite )ith cop& that nobod& )ill
read% This happens because of one or more of the follo)ing:
- fear of missing something: b& putting ever&thing online*
the& believe users )ill be able to find )hatever the& )ant%
Bnfortunatel&* )ith so much information available* it is hard to
find an&thing%
- fear users )ill not understand: )hether from a lack of
confidence in their )ebsite or in their audience* the& feel the
20
_____________________________________________________________
need to provide endless instruction to users% Bnfortunatel&*
users never read this cop&%
- desperate desire to convince: the& are desperate to sell their
product or communicate their message* and so the& bloat the
te+t )ith sales cop& that actuall& conve&s little valuable
information%
Steve Grug* in his book =2n9t Ma7e Me 6hin7* encourages )ebsite
managers to Aget rid of half the )ords on each page* then get rid of
half of )hat8s left%C This )ill reduce the noise level on each page and
make the useful content more prominent%
Conclusions
=arge organi!ations do a lot right in running their )ebsites% <o)ever*
the& also face some uniFue challenges that can lead to painful
mistakes% ,esolving these problems means accepting that mistakes
have been made* overcoming internal politics and changing the )a&
the& control their brand% Doing this )ill give &ou a significant
competitive advantage and make &our Web strateg& more effective
over the long term%
Paul .2ag is the $2under 2$ >? Web design agency Headsca5e* auth2r
2$ the Website @:ner9s Manual and h2st 2$ a:ard-Winning Web
design 52dcast .2ag:2rld.
21
_____________________________________________________________
Portfolio Design Stud: Design Patterns and
Current Practices
.y +italy !riedman
'ollo)ing the reFuests of our readers* )e have carefull& selected
do!ens of design and Web development agencies* anal&!ed their
portfolio )ebsites and identified popular design patterns% The main
goal of the stud& )as to provide freelancers and design agencies )ith
useful pointers for designing their o)n portfolio%
We have brainstormed on the most important design issues and
asked designers across the globe )hat decisions the& often have to
make )hen designing a portfolio )ebsite% We also asked designers
)hat Fuestions the& )ould like ans)ered or anal&!ed in our case
stud&%
/n the end* )e came up )ith a bag of ?# solid portfolio-related
Fuestions L sorted* grouped and ranked according to importance%
We searched for a good mi+ of established design agencies and )ell-
designed portfolio )ebsites of small and large agencies%
'inall&* )e created a Fuestionnaire of ?# Fuestions and )ent through
the )ebsites of all of these design agencies* noticing design patterns
and filling out our Fuite length& forms% 6verall* the stud& took over ;7
hours to prepare%
22
_____________________________________________________________
This article presents the initial results of our big portfolio design
stud&% Belo)* )e discuss the visual design* structure* la&out and
navigation of portfolio )ebsites% We also get into the design details of
ever& single page* including the about* clients* services* portfolio*
)orkflo) and contact pages% 6f course* &ou do not necessaril& have
to follo) the findings presented here( rather* get from them a general
idea of )hat other portfolios look like* and then come up )ith
something of &our o)n that is usable* distinctive and memorable% We
thank ark 1utter for helping us gather data for this stud&%
*ight (s. Dar2 Design
- general Fuestion that comes up often is )hether to design a
visuall& appealing dark )ebsite Ithat is* use big bold t&pograph& and
vivid colors to give the user a colorful and memorable e+perienceJ or
a softer lighter )ebsite Ione that has a simple structure and clean
t&pograph&J%
Surprisingl&* according to our studies:
D"M of portfolio )ebsites have a light design )ith neutral calm
colors% The backgrounds of these )ebsites are generall& a light
shade of gra& or &ello)* rather than pure )hite%
"$M of portfolio )ebsites have vibrant* striking colors%
Dark )ebsites are much more likel& to have big t&pograph&
and strong visuals%
23
_____________________________________________________________
6f course* picking a dark or light design depends strongl& on &our
personal approach and individual goals for the portfolio% Sa&ing that
the AtrendC strongl& favors light designs )ould be inaccurate because
each t&pe serves its purpose in its particular conte+t%
Ho. 3an Columns-
/nterestingl&* man& of the portfolio )ebsites )e researched tend to
var& the number of columns bet)een sections% 4lient and about
pages usuall& have t)o columns* )hile front pages often have three
to four columns and present the most important sections of the
)ebsite in a compact overvie)% /n fact* )e see pages getting more
and more columns: ever& si+th portfolio )ebsite )e sa) has at least
one page )ith four columns%
24
_____________________________________________________________
-ccording to our stud&* fe) )ebsites risk e+perimenting )ith so-
called out-of-the-bo+ la&outs and navigation like 2avaScript scrolling
and other kinds of original la&outs% ost portfolios have traditional
block-st&le la&outs* )ith t)o to three clearl& separated columns and a
simple* convenient navigation menu%
-lso* most portfolio )ebsites consist of multiple detailed pages )ith
relativel& deep sub-sections% inimalist one-page portfolios )ere
rarel& encountered: onl& 7%?M of the portfolio )ebsites )e sa) have
simple and minimalist designs%
25
_____________________________________________________________
&ntroductor "loc2 !n Top-
Portfolio )ebsites commonl& have a large introductor& block in the
header of the page* essentiall& a short friendl& statement about )hat
the agenc& offers and )hat advantages a customer )ill gain b& using
its services% The block usuall& blends vivid imager& )ith big
t&pograph&% /t conve&s both the compan&8s overall image and the
personal tone of the agenc&8s staff* making it eFuall& professional and
friendl&% Such blocks usuall& appear immediatel& belo) the logo on
the front page%
26
_____________________________________________________________
-ccording to our stud&* ;$M of portfolio )ebsites have some kind of
introductor& block in the upper region% We noticed* though* that
some portfolios forgo an introductor& block in favor of sho)casing
recent proEects% /n such designs* a small A-bout usC block is placed
some)here else on the page* often belo) the fold%
*aout Alignment
Back in 8$#s* )ebsite la&outs )ere traditionall& left-aligned* )ith either
vertical navigation in the left sidebar or hori!ontal navigation near the
head% With gro)ing adoption of )idescreen displa&s* this has
changed% ore and more designers are hori!ontall& centering their
la&outs so that the passive )hite space around the page balances the
la&out%
We did notice a trend to)ards more original* even right-aligned*
la&outs at the beginning of the &ear* but not a single portfolio in our
current surve& has a right-aligned la&out%
27
_____________________________________________________________
-ccording to our stud&*
no portfolio la&outs are right-aligned*
D$M of portfolio la&outs are hori!ontall& centered*
the rest have either original adaptive la&outs* a vivid
background image that fills the remaining screen space or Eust
empt& space N of course* &ou )ould see the remaining screen
space onl& if &our displa& has a )idescreen resolution%
28
_____________________________________________________________
)a(igation Alignment
Where to put the main navigation in the la&out> The Fuestion isn8t
trivial and often leads to debate among designers% Surprisingl&* our
stud& revealed that most portfolio designers place the main
navigation in the upper-right corner of the la&out% /n fact:
D#M of portfolios have large hori!ontal navigation*
71M of )ebsites have hori!ontal navigation )ith right-aligned
elements*
1@%?M have hori!ontal navigation )ith left-aligned elements*
11M have full-)idth hori!ontal navigation )ith large clickable
elements%
29
_____________________________________________________________
:ertical navigation is rarel& used* and other approaches Isuch as
hori!ontal navigation at the bottom of the pageJ are found on
unconventional out-of-the-bo+ la&outs* though still uncommon%
Search "o% Design
While man& portfolio )ebsites are Fuite small* presenting visitors )ith
onl& some general information about the studio and its design
process* some portfolios go the length and present a variet& of case
studies* blogs and detailed information about their ever& maEor
proEect%
/n general* if a )ebsite contains a lot of information* search
functionalit& )ould ver& likel& benefit some visitors to the )ebsite% -s
it turns out* ver& fe) companies integrate search functionalit& into
their )ebsite%
D$M of the portfolio )ebsites )e studied have no search
functionalit&*
6nl& 11M of )ebsites have a search bo+* usuall& a simple clean
one% ost of the o)ners of these portfolios have a blog that
the& update regularl&%
'lash $lements
'lash* an established tool for rich interactive design* seems to be
losing popularit& among Web designers L at least among designers
30
_____________________________________________________________
of portfolio )ebsites% The reason is probabl& that certain 'lash effects
can be replaced b& advanced 2avaScript techniFues* )hich are often
available from popular 2avaScript libraries as eas&-to-use plug-ins%
Slidesho)s* animation effects and transition effects can no) be
created )ith 2avaScript solutions that are light)eight and Fuicker and
much easier than 'lash% ,ich 'lash animation and video effects are
being replaced b& simpler* subtler 2avaScript techniFues% 'lash is still
sometimes used* though L for instance* for d&namic te+t
replacement%
/n our stud&* onl& 5%;M of portfolio )ebsites used 'lash heavil&* and
even then usuall& for slidesho)s and presentationsJ% The reason is
ver& likel& that )e did not include an& interactive motion design
agencies* 'lash design studios or video production studios in our
stud&%
Where To Put Contact &nformation-
6ne important obEective of our stud& )as to understand ho)
designers conve& information about contact options% Do visitors have
to click on a A4ontact usC button to get in touch )ith a design
agenc&> 6r is contact information placed prominentl& at the top of
the page> 6r do most designers put contact information in the footer
N )here most users e+pect it an&)a&>
The )ebsites )e anal&!ed put contact information in almost ever&
31
_____________________________________________________________
area of the page: top* right* left* bottom* even the middle% But )e also
noticed some interesting patterns N note that )e )ere interested in*
first* )here the link to the A4ontact usC page )as located and*
secondl&* )here the actual contact information itself )as positioned%
/t turns out that:
6nl& 1"%;M of )ebsites displa& a phone number in the header
of the page*
6nl& $%1M of )ebsites displa& an email address in the header*
32
_____________________________________________________________
- postal address usuall& isn8t displa&ed at all I7?%7MJ or else is
placed in the footer I?#MJ or upper area of the )ebsite I7%?MJ*
- A4ontactC link usuall& appears in the upper-right corner
I;1MJ andOor in the footer I?7%?MJ*
A4ontactC I7$%;MJ and A4ontact usC I"1MJ are the most popular
)ordings for the link to the contact page%
33
_____________________________________________________________
6About #s7 Page
The -bout page is used on portfolio )ebsites to present the members
of the team* e+plain the philosoph& of the agenc& and prove the
compan&8s e+pertise and professionalism% The page gives the design
studio a personal touch and L if designed properl& L elicits the trust
of potential customers%
-n -bout page is clearl& a must for portfolios: D$M of those )e
anal&!ed included a link to the page in their main navigation%
The level of detail &ou use to describe &our agenc& is* of course* up to
&ou% 7$%1M of -bout pages )e surve&ed have no sub-pages and offer
visitors a brief* compact overvie)% Photos of team members* their
personal information and information about the design process are
ver& common on such pages% The tone of the main cop& is usuall&
informal* friendl& and sometimes even funn&% The most popular
)ordings for the link to the page is A-boutC I?5%@MJ* A-bout usC
I";%5MJ and AWho )e areC I;%"MJ%
Client Page
6ne of the surest signs of professionalism and a good reputation in
the industr& is a solid list of clients )ith )hom &our compan& has
)orked% 6f course* the more prominent the companies in the list* the
more likel& potential customers )ill give &ou their attention% /n our
e+perience* man& customers seek out a client list* case studies and
34
_____________________________________________________________
testimonials )hen searching for a design agenc&% So )e )ere
surprised to find that onl& a fe) agencies have a standalone page
listing their clients%
6f the portfolios )e anal&!ed* onl& ?;%"M have a client page Ieither as
a standalone page or part of a portfolio pageJ% /n most cases* clients
are represented b& their logos* )hich are often linked to detailed case
studies that discuss the )ork done b& the agenc& and client
testimonials% The most popular )ording for the link to this page is
A6ur clientsC I?@%1MJ* A4lientsC I5$%@MJ and A4lient listC I17%?MJ%
Ser(ices Page
9iven that visitors usuall& come to such )ebsites because the& are
looking for services* validating their search )ith clear introductor& te+t
on the front page or )ith a standalone services page is reasonable%
Potential clients usuall& have a prett& good understanding of )hat
the& are looking for Imotion design* print design* Web design*
4DOD:D Eacket design* etc%J* so putting &our maEor offerings on the
services page is a good idea%
@;%"M of the portfolios )e looked at have a standalone services page
of some kind% The rest put their information on the -bout page or the
front page% The services pages sometimes have sub-pages I57%1MJ*
but in most cases the single page is Fuite long and detailed%
35
_____________________________________________________________
=inking &our portfolio page to &our services page is definitel& a good
idea because it bridges theor& and practice and sho)s e+actl& )hat
&our agenc& is capable of% The most popular )ording for links to such
pages is AServicesC or A6ur ServicesC I;7%;MJ* follo)ed b& AWhat )e
doC I1#%DMJ%
Portfolio Page
Potential customers obviousl& )ant to see )hat a design agenc& is
capable of% Does its st&le match theirs> What aesthetic does it
communicate for visual design* t&pograph& and usabilit&> Do its
designs feel intuitive and look pleasant> These are the Fuestions
potential customers )ant ans)ered )hen the& become interested in a
design agenc&% So* a solid sho)case of previous )ork could close the
deal and convince them to contact the agenc&%
/n general* be selective )ith the )ork &ou sho)case* and let visitors
order and filter the proEects b& st&le* industr& and &ear% -lso provide
some information about each proEect* or even conduct a detailed case
stud& )ith testimonials and insight into &our )orkflo)% Bnfortunatel&*
fe) portfolios do that%
-ccording to our stud&:
;%"M of )ebsites don8t have a portfolio at all*
1"%;M have onl& logos or screenshots* )ithout an& description
36
_____________________________________________________________
or case stud&*
1@%?M briefl& describe each proEect ne+t to a logo andOor
screenshot*
@5%@M have a ver& detailed page for each proEect* including
case stud&* testimonials* slidesho) of screenshots* drafts and
sketches%
Surprisingl&* the most popular )ording for the link to the portfolio
page is AWorkC or A6ur )orkC I?;%"MJ* follo)ed b& APortfolioC I";%"MJ%
Wor2flo. Page
-ctuall&* the )orkflo) page )orks rather )ell as a sub-section of the
-bout page* rather than as a standalone page% <o)ever* some
designers )ant to make their e+planation of their )orkflo) more
prominent% While ;?%7M of )ebsites do not have a )orkflo) page at
all* the rest go to rather great lengths to e+plain to potential
customers ho) their process )orks and )hat e+pectations both
parties should have%
9iving potential customers a better understanding of ho) the& )ill be
involved throughout the design process is certainl& a good idea% The
most popular )ordings for the link to this page are A<o) )e )orkC or
AWorking )ith usC I?"%DMJ* AProcessC or A6ur processC I57%;MJ and
A-pproachC I;%1MJ%
37
_____________________________________________________________
Contact Page
/f ever&thing goes right* and &our portfolio has earned the interest of
visitors* then the contact page )ill be their final destination% Do
ever&thing &ou can to make it as eas& as possible for them to contact
&ou% ake sure customers provides all necessar& information b&
presenting a simple* clean form that can accommodate the essential
information about their proEect% 0ou could also provide &our phone
number* postal address and email address: the more* the better%
Driving directions* social profile buttons and v4ards are a good idea*
too%
-ccording to our stud&:
$M of )ebsites don8t have a contact page Iinstead* contact
information is included in the footer of each pageJ*
Driving directions Ioften )ith an interactive 9oogle mapJ are
given on ?7%?M of portfolio )ebsitesIKJ*
D5%@M provide a phone number and email address on the
contact page*
;@%;M provide a postal address on the contact page*
@$M of )ebsites have a contact Web form*
1?%7M offer a v4ard for do)nloading* usuall& ne+t to the email
address*
38
_____________________________________________________________
=inks to social net)orking )ebsites such as 'acebook* T)itter
and =inked/n are often used I1?%7MJ%
Specials And $%tras
We also noticed a fe) distinctive elements that some design agencies
offer potential customers% 6ne popular approach is to offer some kind
of proEect or proposal reFuest form* )hich prospective clients are
e+pected to fill out )ith ke& details )hen submitting a reFuest% -lso*
some design agencies offer a proEect planner or help customers
estimate costs or offer a more detailed pricing guide%
-mong the other interesting things )e noticed )ere chat )indo)s on
the contact page Ie%g% -gami 4reativeJ* a AStress-o-meterC that
displa&s the compan&8s current availabilit&* a Fuote calculator* and a
A4apabilities and 4redentialsC presentation Iusuall& in PD'J%
!ther 'indings
We also found that:
1one of the portfolio )ebsites have an '-P page*
;@%5M of )ebsites have at least one blog% -nd man& portfolios
have t)o or more blogs*
1?%77M have a ne)sletter or mailing list*
$M provide a detailed site map%
39
_____________________________________________________________
Summar
D"M of the portfolio )ebsites )e anal&!ed have a light design*
)ith neutral* calm colors*
;$M have traditional AblockC la&outs* )ith t)o to three
columns clearl& separated and a simple* convenientl& located
navigation menu*
;$M of )ebsites have some kind of introductor& block in the
upper area*
D$M have hori!ontall& centered la&outs*
D#M have large hori!ontal navigation*
71M have hori!ontal navigation )ith right-aligned elements*
D$M do not have search functionalit&*
6nl& 5%;M use 'lash heavil& throughout the )ebsite*
- contact link appears in the upper-right corner ;1M of the
time* andOor in the footer ?7%?M of the time*
D$M link to the -bout page in the main navigation*
6nl& ?;%"M have a client page*
@;%"M of portfolios have some form of standalone services
page*
@5%@M have a detailed page for each proEect* including case
40
_____________________________________________________________
stud&* testimonials* slidesho) )ith screenshots* drafts and
sketches*
;?%7M of )ebsites have no )orkflo) page*
The contact page should contain driving directions* a phone
number* email address* postal address* v4ard and online form%
+italy !riedman* edit2r-An-;hie$ 2$ Smashing Maga)ine.
41
_____________________________________________________________
Creating A Successful !nline Portfolio
by Sean H2dge
0our portfolio is the sho)case of &our )ork* skills and potential for
future emplo&ers% The more time and effort &ou dedicate to creating a
usable and good-looking design* the higher &our chances of getting a
better account balance at the end of the month% So ho) do &ou make
sure &our portfolio is better than that of competitors> <o) do &ou
dra) the attention of emplo&ers to &our )ork>
4reating a successful portfolio is easier than &ou think% ake it simple
and eas& to use and hit &our obEectives* and &ou8ll end up )ith a
successful portfolio% /n this article* )e8ll revie) five pitfalls that plague
portfolio designs% Then )e8ll cover portfolio tips that* if carefull&
heeded and e+ecuted )ell* )ill deliver Fualit& results%
=et8s revie) the common mistakes that designers make to ensure that
&ou don8t fall into one of these traps%
Pitfall 89: !bfuscating
4larit& and focus should permeate &our portfolio% Don8t use t)ent&
)ords )hen seven )ould do% Push &our best content to the front%
Where possible* place important content above the fold% -void
meandering in &our language% DonQt make the levels of &our portfolio
42
_____________________________________________________________
too deep* but make sure that the section still accomplishes &our
obEectives%
4op&blogger has an article that features a simple list of )riting tips
based on the earl& "#th-centur& )riter kno)n for cutting out the fluff%
See the article 3rnest <eming)a&8s Top 7 Tips for Writing Well%
<eming)a& championed short sentences* strong forceful language
and clarit&: all principles that make for effective )riting on the Web%
/n the article 4reating The Perfect Portfolio* 4ollis Ta8eed offers
portfolio advice from the perspective of a potential emplo&er% The
section titled R9et to /tR gives reasons for limiting the number of
portfolio pieces &ou present and for making &our best pieces eas& to
find% -n emplo&er has to revie) man& applicants Fuickl&% 0ou are
more likel& to make the cut if &our best )ork is prominent% The
p ortfolio of 3van 3ckard is an e+ample of a )ebsite that promotes his
best )ork right on the first page and Rgets to itR Fuickl&%
Pitfall 8:: Cramming &nformation
-nother pitfall is )anting to sa& too much in too little space% -
balance needs to be achieved in the number of pages users have to
click for more information and the amount of information &ou fit on a
page% Be a)are of this )hen constructing &our portfolio%
The more tightl& packed &our portfolio* the more likel& it )ill look
cluttered% /f &ou do need to put a lot of information on the page*
43
_____________________________________________________________
consult the post 9rid and 4olumn Designs over on WebDesigner Wall%
/t )ill give &ou some great ideas on ho) to use the grid to &our
advantage )hen presenting a lot of information%
Pitfall 8;: !(erdoing &t
0ou8re less likel& to go )rong b& keeping things simple and organi!ed%
Do this for all areas of &our portfolio% =ess is more% The more &ou tr&
to do in &our portfolio* the more likel& things )ill go )rong%
Sho)casing 1D of &our services )ill be less successful than prioriti!ing
a fe)% Too man& t&pes of )ork or too much )ork of a single t&pe )ill
likel& dro)n users% The& )on8t spot those prominent pieces that sho)
ho) great &our )ork is%
Pitfall 8<: #nusual )a(igation
Designers have an urge to stand out as uniFue% The last place to act
on this urge is in &our )ebsite8s navigation% /t8s a numbers game% /f
enough visitors to &our portfolio have difficult& navigating it* the
portfolio )ill have failed to achieve its goals%
/n the post & =ast Portfolio Sucked* 0ours ight Too* G&le e&er
points out some perfect e+amples of navigation choices to avoid% <e
revie)s "## portfolios* and points out their problems% 1avigation
accounted for over 5"M of the problems%
44
_____________________________________________________________
B<am5les 2$ na'igati2n ch2ices t2 a'2id.
Pitfall 8=: 5isual Clutter
4onsider the purpose of an& decorative element% /f it meets &our
goals and complements &our )ork* then great% 6ther)ise* remove it%
White space lends a professional feel to &our portfolio% The more
elements &ou cram into an area* the more difficult it )ill be to
maintain a semblance of professionalism%
Bse hierarch& to guide users through the page% 6n Bo+es and -rro)s*
the article :isible 1arratives: Bnderstanding :isual 6rgani!ation
e+plains the principles related to visual hierarch&%
45
_____________________________________________________________
-nd in the intervie) Where :isual Design eets Bsabilit&* both page
hierarch& and visual clutter are addressed% =uke summari!es some of
3d)ard Tufte8s teachings on avoiding superfluous data%
Principles of $ffecti(e Portfolio Design
Belo) &ou8ll find some suggestions for improving &our portfolio or
getting it right the first time from scratch% Bear in mind that some of
these suggestions reFuire patience* time and a lot of planning% But
the&8re )orth it% -nd the e+amples provided sho) that one can
achieve outstanding results Eust b& follo)ing these 1" simple rules%
Define our Criteria and Strategies for Success
-s )ith an& proEect* clarif& &our goals before beginning% 6nce &ou
kno) &our goals* then ever& decision &ou make )ill be affected%
Belo) are some common portfolio goals% -lso* be a)are that
portfolios are often meant to accomplish more than one goal% 6r at
least consider creating multiple portfolios for different purposes%
46
_____________________________________________________________
The >hire me> portfolio focuses on getting &ou a Eob% /f &ou
are activel& searching for emplo&ment* then the primar& goal
of &our portfolio is to get &ou hired% 0ou can target this t&pe of
portfolio to the t&pe of compan& &ou )ant to )ork for%
The sales generation portfolio focuses on keeping the flo)
of )ork coming through the door% The goal here is to generate
leads and move potential customers through the sales
channel%
The reputation4building portfolio builds &our name in the
industr& and online% This could take the form of an artist8s
sho)case* or &ou could tie &our )ork together in a portfolio
blog%
The net.or2ing portfolio builds relationships% an&
net)orks have e+cellent portfolio-building tools and offer
some advantages to placing &our portfolio on their )ebsite%
4hief among them is leveraging the )ebsiteQs space for
net)orking%
Consider 3ultiple Portfolios
There are multiple reasons to have more than one portfolio% 0ou ma&
have more than one skill set to promote% 0ou ma& )ant to send one
portfolio to a particular marketing director to land &ou a specific Eob%
The director )ill appreciate that% /t saves them time and sho)s that
&ou reall& )ant the Eob N even if itQs a one-page portfolio%
47
_____________________________________________________________
3ven if &ou fill the second portfolio )ith the same )ork* &ou )ill still
benefit b& targeting &our portfolios to different groups%
Take the case of 1ik -inle&* a BG-based designer and illustrator% <e
has multiple portfolios that all serve complementar& goals% <e
participates in multiple portfolio-based communities to build his
reputation and to net)ork )ith other designers% <is )ebsite* Shin&
Binar&* has received over 1 million visits%
48
_____________________________________________________________
1ik has a p ortfolio on Behance % <e8s involved in numerous groups
there and has a large inner circle% The portfolio prominentl&
communicates that he is available for freelancing* long-term
contracts* full-time )ork and consulting Eobs%
<e also has a ver& popular p ortfolio on Deviant-rt % <e8s been a
member there since "##? and no) has over D# portfolio pieces and
over 1*### comments on his )ork% - lot of fans have marked his
)orks as favorites%
Though less active on 9aller& on 4P=B:* he does a portfolio there*
too% -nd his portfolio on Depthcore is good% That )ebsite features
onl& artists )hose )orks have been solicited* so the Fualit& is high%
6verall* 1ik -inle& sho)s ho) one can benefit from having multiple
portfolios online* even )hen the )ork being sho)cased in the
portfolios is similar% <e is tapping into a different communit& )ith
each one% B& doing this &ourself* &ou8re making connections )ith ne)
people and e+posing them to &our )ork%
Target ,our 3ar2et
The more targeted &our design is to a specific market* the more it )ill
speak to the people in that market% /f &ou are looking to land
corporate clients in a conservative industr&* then present them )ith
clean* marketable and professional )ork% Don8t sho)case edg&*
grung& or art& )ork unless that8s the market &ou8re going after%
49
_____________________________________________________________
The article The Secret to 9etting a =ot of Web Design Work has a
section entitled* ADesign the portfolio &ou think &our clients )ant to
see%C -nd that is precisel& the point% 'ocus &our portfolio on &our
target market% /f &ou8re tr&ing to get certain clients* then design )ith
those clients in mind%
There are &et more benefits to targeting a market% /n the article
'inding a Target arket* Barbara Pello) discusses both vertical and
hori!ontal approaches to target marketing% She identifies some of the
other benefits of target marketing% Speaking to a specific audience
allo)s &ou to become a recogni!ed e+pert in the field more easil&%
Targeting a market differentiates &our services%
4onsider the e+ample of a Web designer )ho speciali!es in la) firm
)ebsite% <is target market )ill be different than that of a designer
)ho builds rock band )ebsites% The language* graphics and approach
of their respective portfolios )ill differ greatl&% - Web designer )ho
has numerous successful la) firm )ebsites in his portfolio )ill make it
easier for other potential la) firm clients to choose him over another
designer or agenc&%
50
_____________________________________________________________
Designers are more likel& to stand out b& targeting a specific market%
Their success rate at landing niche Eobs and being perceived as
e+perts in their field )ill increase% Take Dan 9ilro& Qs p ortfolio as an
e+ample of one that successfull& targets a particular market%
<aving a target market is essential to selecting portfolio pieces and
designing &our )ebsite%
51
_____________________________________________________________
Prioritize #sabilit
1avigation is of paramount importance% See the point above about
unusual navigation% -nother consideration is Web standards% This is
especiall& relevant if &ou8re currentl& looking for a Eob% ,ead the article
'ive S teps to a B etter D esign P ortfolio b& 2effre& :een% /n it* he
discusses best practices for portfolios in the conte+t of ho) &ou )ill
be perceived b& emplo&ers%
-lso* don8t discount search bots% Work to)ards better search engine
optimi!ation% The blog S36Book is a rich resource on the topic% 9ood
S36 improves the abilit& of potential clients to find &ou in search
engines%
#se the /ight Technolog
/f certain technologies are fi+tures of the Eob descriptions &ouQre
interested in* then it makes sense to build &our portfolio )ith that
technolog&% Sure 'lash is cool* but is it right for &our )ebsite>
Probabl& not if &ou8re a logo designer% But if &ou8re tr&ing to land a
Eob as a 'lash designer at a top-notch interactive design agenc&* then
itQs the right choice%
The navigation in the po rtfolio of ne) media designer athe) :%
,obinson Isee ne+t pageJ is eas& to use% Speed is essential to the
success of a 'lash )ebsite% atthe)Qs portfolio is highl& usable and
looks great%
52
_____________________________________________________________
4onsider maintainabilit& )hen deciding on technologies% Simplif&ing
&our portfolio as much as possible )ill reduce the time &ou spend
upgrading and making changes%
<o) eas& is it to add and remove portfolio pieces> The easier it is* the
more likel& &ou8ll update the portfolio regularl&% 2amie 9regor& has an
simple* elegant and effective one-page portfolio% <e )ould have no
trouble adding or s)apping out pieces%
53
_____________________________________________________________
4onsider enhancement )hen looking at technolog&% - )ise choice is
often to add Eust a little 2avascript or other technolog&* rather than
rel& on them heavil&% /t )ill help achieve &our goals )ithout
complicating &our design% 6n arius ,oosendaal8s p ortfolio * take a
moment to e+plore ho) clean the source code is* complemented b&
the elegant 2avaScript-based solutions%
Think first before choosing bet)een a static )ebsite and a content
management s&stem% 6ne-page portfolios are eas& to update and a
Fuick )a& to sho) &our best )ork% 0ou8ll also have no issues )ith
navigation* )ith onl& one page% But &ouQll have little fle+ibilit&* and &ou
)on8t be able to leverage the additional features that content
management s&stems have to promote &our )ork* like a blog%
Plan The Pro?ect
- ke& factor in creating a successful portfolio is to approach it as &ou
)ould a client proEect% anage the proEect as professionall& as &ou
)ould an& other Web proEect &ou take on% Set aside sufficient time to
achieve the goals &ou8ve outlined% ake sure also to set deadlines to
keep &ou on track%
*imit The Scope And Tpe of Wor2 ,ou Promote
0our portfolio should be limited to &our best )ork )ithin the scope of
&our goals% /f &ou are looking to do )ebsite redesigns* then &our
portfolio should consist onl& of those* not logo designs or print )ork
54
_____________________________________________________________
&ou ma& have done% /f &ouQre not looking for a particular t&pe of )ork*
then don8t sho)case it% 0ou )ill be more successful%
2esse Bennett-4hamberlain redesigned his )ebsite* 51three%com* back
in a& "##;% <e used to have print and logo designs in his portfolio%
/n the redesign* he clarified his target market b& focusing on
providing design assistance to developers%
<is current portfolio presents onl& )ebsite and interface designs
because that is the t&pe of )ork he is looking for% This portfolio is ver&
successful on man& fronts and has been cited throughout the
blogosphere%
That doesn8t mean that 2esse doesn8t do logo or identit& design% <e
does* but he recogni!es that logo design is not )h& people come to
him% The& come to him for designs for ne) or e+isting )ebsites( logo
design might happen to be part of the package% See more about his
process in the article ,edesigning the 3+pression3ngine Site %
4ertainl& some designers and firms )ill have mi+ed bas% The more
t&pes of )ork &ou do )ell* the greater the challenge &ou8ll have in
promoting that )ork% When possible* keep the )ork on displa& to a
minimum% Ten of &our best pieces often )ork better than fift& good
pieces%
55
_____________________________________________________________
Pro(ide Ade@uate Contact &nformationA
Documentation And $%planations
4ontact information should be eas& to find* and contact forms should
be eas& to use% ake this information prominent% The <icksdesign
p ortfolio displa&s contact information )ell on ever& page%
4larif&ing &our role in the proEects in &our portfolio instills confidence
in potential clients% /f &ou designed a )ebsite but someone else coded
it* state that% /f &ou did ever&thing* then confidentl& declare that* too%
4ameron oll demonstrates this principle%
4ase studies give a deeper vie) into &our process% 6nce a potential
client has narro)ed their list* the& ma& come back to spend more
56
_____________________________________________________________
time on &our portfolio% 4ase studies sho) ho) competent and
thorough &our process is% David -ire& makes his c ase studies eas& to
find%
4lient testimonials are effective in persuading visitors that &ou deliver
on promises% The& increase professionalism )hen tastefull&
incorporated in a portfolio% David -ire&Qs article The /mportance of
4lient Testimonials has useful information on the subEect%
Present ,our Wor2 &n The Conte%t of ,our 1oals
0our )ork should stand out the most in &our portfolio% /f the design
or page la&out overpo)ers the )ork on displa&* then &ou8re not likel&
to meet &our goals% 4onsider ever& visual element that &ou add to the
page carefull&% When unsure* favor simplicit&%
57
_____________________________________________________________
&nfuse ,our Personalit &n The Design
1ick =aQs portfolio captures his design st&le and interests% The uniFue
background illustration stands out% /t doesn8t impede usabilit& but
acts as a beautiful )rapper% 'or some* this )ould interfere too much
)ith the )ork being presented Ithough his portfolio )orks fineJ%
1ick sets his pieces against a solid )hite background in a strong
column-based design% The )ork sho)n suits the background
illustration% Pulling off this kind of infusion of personalit& is difficult*
but it makes &our portfolio not onl& memorable but remarkable%
1ick has achieved tremendous success )ith his 1%design Studio
portfolio% /nfusing personalit& in a design ultimatel& means giving
e+pression to the aesthetic &ou have been cultivating over the &ears%
58
_____________________________________________________________
Seth 9odin makes some e+cellent points about being remarkable in
his post <o) to B e , emarkable % <e sa&s* A,emarkabilit& lies in the
edges: the biggest* fastest* slo)est* richest* easiest* most difficult%C This
is a good point* but in pursuing that edge* &ou run the huge risk of
riding right off the cliff%
4arefull& consider ho) &ou )ill blend such remarkable personal
elements into &our portfolio )ithout sacrificing usabilit& and )ithout
upsetting the balance bet)een the prominence of &our portfolio and
the overall )ebsite design%
59
_____________________________________________________________
Promote And *e(erage ,our Wor2
There are man& )a&s to promote &our portfolio% 4onsider Eoining
professional online communities to net)ork )ith other members%
We8ve alread& looked at some communities )here &ou can submit a
portfolio% -dd a thread to a design forum about &our portfolio%
Submit &our design to galler& )ebsites% -lmost an& strateg& for
promoting a )ebsite can be used to promote a portfolio%
-dd a blog to &our )ebsite% The more traffic &ou dra) to &our
)ebsite* the more e+posure &our portfolio )ill get% Dan 4ederholm
)as an earl& adopter of this strateg& and achieved fame )ith his blog
Simplebits% <is portfolio resides successfull& on the same )ebsite%
=everaging &our )ork involves linking to it )hen &ou send emails% -dd
a link to &our portfolio in &our 'acebook profile or an& other
communit& &ou belong to% /ntegrate &our portfolio into &our
communications and online identit&%
De(elop *ong4Term 1oals
<aving a vision of the future al)a&s helps% 0our needs )ill evolve as
&ou take on different proEects over the course of &our career% -ll the
same* looking at the recent past can also affect the choices &ou make
in creating &our portfolio%
60
_____________________________________________________________
- successful portfolio finds that perfect blend of personalit&*
prominence* simplicit& and ease of use% ake &our portfolio stand out
from the cro)d and serve &our goals%
Sean H2dge is the creati'e mind behind ,i.>-C* a :ebl2g ab2ut
design* creati'ity* ins5irati2n and gra5hics.
61
_____________________________________________________________
"etter #ser $%perience With Stortelling
.y !rancisc2 Anchauste
Stories define our )orld% The& have been )ith us since the da)n of
communication* from cave )alls to the tall tales recounted around
fires% The& continue to evolve* but their purpose remains the same: to
entertain* share common e+periences* teach and pass on traditions%
Toda& )e communicate a bit differentl&% 6ur information is
fragmented across various mass-media channels and delivered
through ever-changing technolog&% /t has become )atered do)n*
cloned* and is churned out Fuickl& in 1?#-character blurbs% We8ve lost
that personal touch )here )e find an emotional connection that
makes us care%
Bsing stor&telling* ho)ever* )e can pull these fragments together in a
common thread% We can connect as real people* not Eust computers%
/n this article* )e8ll e+plore ho) user e+perience professionals and
designers are using stor&telling to create compelling e+periences that
build human connections%
&t "egins With a Stor
/n 1$;;* a simple stor& turned the film industr& on its head% The
special effects technolog& used to construct this stor& had not been
62
_____________________________________________________________
created or used in filmmaking prior to its release% The author
disregarded )hat )as popular and marketable at the time
Iapocal&ptic and disaster moviesJ to follo) his o)n vision% The film
starred unkno)n actors* and the genre )as a relic of 1$5#s serial
movies% /t )as turned do)n b& man& film studios and at one point
almost shelved%
The movie* if &ou haven8t &et guessed* is Star Wars% The author is
9eorge =ucas% Star Wars )ent on to become one of the most
successful films of all time and a pop culture phenomenon% /t
inaugurated the blockbuster trilog& and completel& changed the )a&
special effects )ere done% an& of toda&8s most influential film
companies )ere spa)ned from the success of these movies:
=ucas'ilm* T<S* /ndustrial =ight T agic I/=J and Pi+ar%
Star Wars )asn8t a ne) stor&* though% /t dre) on the m&thic
archet&pes from stories told over thousands of &ears%
/e(ealing the Design in Stories
The creation of a stor& is often vie)ed as an almost magical or
random process% The author sits in front of their canvas* the blank
)ord processor* and begins to t&pe )hatever inspires them at the
moment% 9reat stories* though* don8t Eust happen randoml&( the& are
designed% There is a pattern at )ork here% /n order to be entertaining*
find the right dramatic cues and tap deep into our collective ps&che* a
)riter must follo) a specific method% - stor& that fails to pull in the
63
_____________________________________________________________
audience emotionall& and hold their attention probabl& did not use
enough of these patterns as a guide* as sho)n in the arc of a t&pical
stor& belo)%
6he st2ry DarcD is :idely used in screen:riting and n2'els.
This stor& structure has been around since long before screen)riting
)as taught% There )as a point )hen it remained simpl& an unnoticed
rh&thm in the background of ever& stor&% Some aspects of this
structure L such as the hero8s Eourne& and comparative m&tholog& L
)ere first populari!ed b& 2oseph 4ampbell% <e )rote about his studies
in the book The <ero )ith a Thousand 'aces%
4ampbell )as a disciple of S)iss ps&chiatrist 4arl 2ung* )ho believed
that )e are all born )ith a subconscious idea of )hat a AheroC*
AmentorC and AFuestC should be%
64
_____________________________________________________________
4ampbell studied the structure of religions and m&ths across man&
cultures% <e discovered that* consciousl& or not* ever& stor& Ior m&thJ
)as created )ith the same basic formula% This is )h& great stories
transcend even language barriers% This assessment b& 4ampbell set
off large ripples in the )aters of m&th and religion%
The stories that captivate us on the silver screen and in novels follo)
these same patterns% We talk about dialogue and scenes at the )ater
cooler as if the& happened to a personal friend* rather than a fictional
character% -ll because )e become emotionall& invested in the
characters and stor&%
Brands strive for this emotional investment ever& da&% Starbucks
doesn8t Eust )ant to sell us coffee N it )ants customers to become
invested in its stor&: the ambience* aromas* communit&% /ts goal is to
become the Athird abodeC Ihome* )ork* StarbucksJ% /t claims that* A/t8s
reall& about the human connection%C
The Po.er of $motion
When speaking of stories* )e describe more of an emotional
e+perience* something that affects us at a ver& personal level% This is
much different than the )a& )e usuall& describe our e+perience )ith
products such as )ebsites and applications% These are seen more as
utilitarian and task-oriented%
65
_____________________________________________________________
/f )e are able to accomplish )hat )e set out to doN sa&* transfer
mone& in a banking application N then it has been a good user
e+perience% /f to achieve our goals* the interface should be usable and
should function the )a& )e e+pect% This vie) is preached b& man&
usabilit& e+perts* including Donald 1orman* professor of cognitive
science and a usabilit& consultant for the 1ielsen 1orman 9roup%
Bpon hearing people sa& that if his rules )ere follo)ed* then
Aever&thing )ould be ugl&*C 1orman decided to e+plore people8s
relationship to design% The result )as the book Bm2ti2nal =esign%
Through his research* 1orman found that design affects ho) people
e+perience products* )hich happens at three different levels and
translates into three t&pes of design:
66
_____________________________________________________________
5isceral design
This design is from a subconscious and biologicall& pre-)ired
level of thinking% We might automaticall& dislike certain things
Ispiders* rotten smells* etc%J and like others ICattractiveC people*
s&mmetrical obEects* etc%J% This is our initial reaction to
appearance%
"eha(ioral design
This is ho) the product or application functions* the look and
feel* the usabilit&: our total e+perience )ith using it%
/eflecti(e design
This is ho) the product or application makes us feel after the
initial impact and interaction* )here )e associate it )ith our
broader life e+perience and attach meaning and value to it%
There is a lot more to emotion than can be covered here* but
understanding these basic levels of processing gives us some insight
into )h& stor&telling is so po)erful% 4onsider ho) the levels pla& off
each other at an amusement park: people pa& to be scared% -t the
visceral level* )e have a fear of heights and danger% -t the reflective
level* )e trust that it is safe to go on the ride( and )e anticipate that
emotionall& charged rush and sense of accomplishment Iin
overcoming our fear of heightsJ )hen the ride is over%
9iven ho) vital emotion is to ho) )e think* it becomes all the more
important not Eust to create a functional and usable e+perience but to
seek out and create a meaningful connection%
67
_____________________________________________________________
The "asics of Stortelling for #ser $%perience
-t a basic level* stor&telling and user e+perience have common
elements L planning* research and content creation L that can be
used to create a satisf&ing e+perience% Stor&telling offers a )a& for a
team to reall& understand the product it is building and the audience
it is building it for%
Stories enable the most comple+ of ideas to be effectivel&
communicated to people% This crafted product or e+perience then
delivers meaning and emotion to its users% Professionals )ho
currentl& e+ploit the po)er of narrative in their proEects do so in vastl&
different )a&s% The follo)ing sections outline some of the modern
uses and benefits of stor&telling%
"ring Teams Together
Bser e+perience professionals t&picall& have to )ork )ith people from
man& different backgrounds% Depending on the t&pe of e+perience
needed* this ma& reFuire the effort of an&one from an engineer to a
user interface designer% -nd the approach often taken in creating
)ebsites or applications is to first consider the technolog&* or the
limits of that technolog&% To make matters more comple+* members of
large teams tend be preoccupied )ith their respective domains( for
e+ample* the marketing person )ill focus on his o)n obEectives and
strategies based on his e+perience% This is not al)a&s in the end user8s
best interest and often results in a poor* diluted e+perience%
68
_____________________________________________________________
The user e+perience team selected to create an iPhone application for
the masses )ould be Fuite different than the one selected to develop
a medical device for doctors% -s mentioned* the e+perts at crafting
stories kno) ho) to tap into a )a& of communicating that has been
around for thousands of &ears% Bsing stor&telling* user e+perience
teams can also inEect emotion and value into their product for users%
#ser4Centered 1oal
/n hearing about the stor&telling approach* one might think that itQs
Eust another )a& of talking about Astrateg&%C But stor&telling carries
)ith it a more user-centered goal% 4ompanies like -pple have used
similar methods in their design process to reall& define )hat the& are
building%
69
_____________________________________________________________
4ind& 4hastain refers to it as an e<5erience theme% She sa&s this theme
is Athe core value of the e+perienceC being offered% 4hristian Sa&lor
refers to it as finding the lead character% Without this user-centered
goal* he states* )e are Eust Adesigning for the sake of designing%C
6riented around a specific theme or character* the other)ise
uncoordinated elements of an e+perience all merge into a clear goal
and purpose% With stor&telling* a diverse team creating a )ebsite or
application can collectivel& link the tangible elements and create
something that is a meaningful e+perience and more than Eust bits
and b&tes%
Defining the #ser
- lot of discussion and articles are circulating about usabilit& and
functionalit& on )ebsites and in applications% 'unctionalit&* of course*
is important% 'or instance* )hat good is an airplane if the engine isn8t
po)erful enough to get it off the ground> /f &ou step back though*
the more important Fuestion is* ho) far does the passenger need to
go> /f it8s onl& a fe) miles do)n the road* then it reall& doesn8t matter
if the plane is functional: it8s the )rong solution altogether% So*
identif&ing )hat )e reall& need to build is ke& in the initial phase of
building the user e+perience%
When the research is finished* )e t&picall& move on to create
personas as a )a& to understanding the user* and this can be
regarded as part of creating the stor&% B& building an imagined
representation of the user based on real research and observation* )e
70
_____________________________________________________________
are able to empathi!e )ith users and trul& understand their needs% B&
creating stories around these personas* )e are able to conceive a
more meaningful vision of the proEect%
Stor&telling allo)s us to translate this research into anecdotes* )hich
people have been sho)n to have a better rate of recall% /n addition*
being able to empathi!e )ith users through stories helps us better
understand the emotional side of the e+perience% 'ilms and video
games deliver e+periences that affect people at an emotional level%
This is something people )ill begin to e+pect more from the )ebsites
and applications the& use ever& da&%
We can thus shift our focus from creating simple task-driven )ebsites
and applications to cultivating valuable human connections% This is*
after all* a Aglobal campfireC as 4urt 4loninger refers to it% <e goes on
to sa&* AThe Web is not a global net)ork of connected computers% The
Web is a global net)ork of connected people% -nd stor&telling is still
the most effective )a& to emotionall& impact people%C
The "enefits
ost proEects have a lot of documentation outlining their goals and
strategies% These come in the form of business reFuirements*
functional documentation and other supporting research and
information% Stor&telling can improve the overall productOe+perience
b& doing the follo)ing:
71
_____________________________________________________________
Putting a human face to dr& data*
Simplif&ing comple+ ideas for the team*
aking team collaboration more efficient*
4larif&ing purpose*
9aining insight into primar& users*
Setting a proEectQs direction more Fuickl&*
'acilitating communication )ithin large organi!ations*
Delivering meaning and value to users%
Stor&telling helps teams focus on ever&thing from )ebsite content to
understanding their business problem in a ne) )a&% 'or e+ample* &ou
could Fuickl& define a proEectQs scope )ithout designing or
)ireframing screens% The BS team for 0ahoo Personals created a stor&
about a fictional dating couple going through certain scenarios%
Through this stor&* the team )as able to better understand the
purpose of the )ebsite and the t&pe of e+perience users should go
through% /t opened up the task- and strateg&-based steps to the more
authentic and emotional e+perience of dating% /t )as a po)erful )a&
to get the team to speak directl& RtoR the e+perience* rather than
create documentation RaroundR it%
Happil $(er After: The /ealit
There are man& different opinions on ho) best to craft the user
e+perience% an& of them stem from the basic approaches developed
b& -lan 4ooper* a pioneer in building soft)are )ith user-driven
e+periences% But as technolog& evolves* so do the approaches and
72
_____________________________________________________________
processes used to create solutions that meet users8 needs% The
number of approaches to user e+perience is close to the number of
frame)orks available to develop soft)are% /t usuall& comes do)n to
)hat is best for the t&pe of proEects that a team t&picall& )orks on%
0our abilit& to follo) a particular process depends on man& things*
including timeline* budget and goals% /n realit&* doing ever&thing as
outlined is not al)a&s possible%
Stor&telling is a )a& to connect teams Fuickl&* to gain insight and
understanding% The e+periences )e create take shape through design*
content and user interaction% Stor&tellers have been communicating
successfull& for much longer than )ebsites have been around L
)hich makes stor&telling a valuable tool for the business side of
design%
A 'e. 3odern4Da Stortellers
-lthough the idea of using stor&telling )ithin the user e+perience
process is fairl& ne)* a fe) professionals are using it in their proEects% /
spoke )ith some of these modern-da& stor&tellers to get their
perspective and see ho) the& are appl&ing stor&telling to their )ork%
Dorelle /abino.itz
Dorelle is a stor&teller )ho designs* illustrates and tells stories in a
variet& of media and conte+ts% ostl& she tells stories%
73
_____________________________________________________________
Buestion: Ho. do ou approach stortelling in #C-
=2relle& / see it as another tool )e can use as a catal&st to
communicate during our design activities% 'or me as a designer* it8s
about putting a human face to the design process and bringing
people together% 0ou can get designers* engineers* product managers*
strategists and e+ecs Ea!!ed about a proposed feature because of a
stor&* and it can be e+tremel& fulfilling% -s a person* it8s all about the
emotional connection%
Back in the da&* / )orked on an 6+&gen media )ebsite called A6ur
Stories*C )here )e created short online digital stories )ith our
74
_____________________________________________________________
audience% We called it co-creation* and )hen / moved more into
designing user e+periences* / reali!ed that stories helped me
understand m& users better% -s / did more and more )ork* / reali!ed
that stor&telling facilitates communication* that people respond
emotionall& to stories* bond over stories and share stories again and
again* and that the more / integrated stor&telling into m& )ork* the
better the )ork )as%
So much of )hat )e do isn8t onl& about the design but about ho) )e
deal )ith people* negotiate and plan% Stor&telling can be effective in
all of these situations as )ell as in driving to)ards solutions% / think
the value of stories is independent of the t&pe of e+perience in )hich
the& are used%
Buestion: &n the endA business goals Di.e. profitE rule the da. Ho.
does stortelling tie into this-
=2relle& Stories help bridge understanding* so stor&telling can help
teams get on the same page and speak the same language L leading
to e+pected results% Stories can help people )ork more collaborativel&
and thus help teams get proEects done faster* )ith a faster time to
market% Stories can help reframe business problems so that proEects
solve the right problems and come to better solutions%
Buestion: Where is the best place to learn more-
=2relle& 4ind& 4hastain8s article in Bo+es and -rro)s on 3+perience
Themes is a great read%
75
_____________________________________________________________
Curt Cloninger
4urt is an artist and )riter% <e sa&s his art doesn8t reall& tell a standard
narrative )ith a clima+ and resolution but rather tries to create a kind
of event e+perience%
;urt& Design* particularl& graphic design* can be understood as a
visual form of communication* and stor&telling is a historicall& tested
form of communication% Stor&telling or narrative design is more like
something to keep in mind )hen considering the user8s e+perience%
76
_____________________________________________________________
To me* narrative design Eust means having a consistent AvoiceC and
having ever& design element contribute to the same goal or
conclusion% /t also means allo)ing for an arc in the user e+perience%
-nd it means allo)ing the user to have some kind of personal sa& in
completing her e+perience%
This is the difference bet)een a novel I)here the user mentall& fills in
lots of visual blanksJ and a <oll&)ood action film I)here all the blanks
are filled in for the userJ% - novel is arguabl& more engaging%
;urt& <oll&)ood tells stories* and it seems to make a lot of mone&
from it% Politicians* Eournalists and large corporations often tell stories
Ii%e% liesJ* and the& make mone&% The evolution of an& brand over time
is a kind of narrative%
4orporations spend all kinds of mone& tr&ing to convince us that their
characters Ie%g% ,onald cDonaldJ are the good gu&s% 1arrative and
capitalism have al)a&s enEo&ed a fruitful relationship%
;urt& / like 1athan Shedroff8s 3+perience Design book% /t8s more about
ASDC than ABS*C but it addresses narrative at several points
throughout% ,ichard Schechner8s Performance Theor& is good% /t has
nothing to do )ith user e+perience design per se* but it is about
77
_____________________________________________________________
theater* tribal ritual and the cultural interfaces that people construct
to give meaning to their )orlds%
Christian Salor
4hristian is a stor&teller )ho designs user e+periences% <e believes
that the things around us have ver& po)erful stories to tell%
;hristian& Stor&telling gives us purpose and a sense of place% So* it
hasn8t been so much a Adiscover&C of stor&telling as a natural
progression to)ards uncovering an e+perience buried deep )ithin a
narrative that )ants to be told%
78
_____________________________________________________________
This idea of adopting Astor&tellingC as a means to uncover a rich
e+perience for the AendC user* )hoever the& ma& be* Eust makes sense%
-t the end of the da&* the Eob of the IBSJ designer is to help tell a
stor& that is relevant and meaningful* regardless of time* device or
even location% We use ApersonasC Icharacters in our stor&J and
AscenariosC Inarratives that tell a stor& about the personaJ in order to
full& understand not onl& the target audience but also their goals and
desires* )hich ultimatel& helps to create a meaningful e+perience for
them%
/ strongl& believe that ever&thing has a stor& associated )ith it% 3ver&
business* social group* concept* methodolog& and relationship is
desperatel& seeking out better )a&s to engage )ith its audience%
Some Eust happen to do it on a large scale I-ppleJ* )hile others
Fuietl& establish a pattern of life that goes unnoticed until it
disappears Ithe remote controlJ% 'rom packaging that sits on the store
shelf to the applications that follo) us throughout our da&s* stor&
influences Eust about ever& aspect of our lives% Stor& is all around us% /t
gives us a sense of understanding and kno)ledge of the people and
things that are important to us%
/ think the most important aspect of stor&telling for me is that it has
the abilit& to change the )a& )e vie) and interact )ith our )orld%
79
_____________________________________________________________
;hristian& /f &ou8re telling the right stor& to the )rong audience* or
even telling the right stor& the )rong )a&* then &our business or
product )ill ultimatel& fade a)a&% Design and technolog& are the
catal&sts of change in the Ae+perience econom&%C -nd if )e don8t seek
out better )a&s to tell our stor&* then the vitalit& of our business*
product or service )ill be Eeopardi!ed%
-s )e all kno)* the business )orld is constantl& looking at the bottom
line% We live in a )orld saturated b& products and services that vie for
our attention* and the e+perience L the )a& in )hich a stor& unfolds
L )ill be the difference bet)een a compan&8s success and failure%
;hristian& R=ovemarks Ithe future be&ond brandsJR b& Saatchi T
Saatchi% /t has unbelievable insight into the )a& )e fall in love )ith the
companies and products that surround us%
Cind Chastain
4ind& is a trained filmmaker and screen)riter )ho makes films and
)rites scripts and considers herself a visual and dramatic stor&teller%
80
_____________________________________________________________
;indy& Stor&telling is another discipline that can be used in the
conte+t of design as 1J a device* "J a frame)ork andOor 5J a craft to
dra) upon% /n other )ords* )e can use stor& as a )a& to capture and
sell an idea( )e can use it as a )a& to frame an approach to the
design of a product or service( or )e can use narrative techniFues to
craft an interaction and* hence* a variet& of behavioral and emotional
responses to a stor&%
We tell stories that seek to order chaos* provide meaning and engage
the emotions of our listeners% We design e+periences that hopefull&
do something similar% But in the conte+t of design* meaning is also
about )hat this e+perience* product or service )ill do for a person% /t8s
about ho) something fits into or enhances his life% /t8s about
understanding ho) something is supposed to function%
-s designers* )e do )ell at facilitating the dialogue bet)een people
and the interactive products the& use% But )e often neglect to
consider the more intangible la&er of e+perience* the stories that
evolve d&namicall& through interactions that people have )ith the
things )e make%
We also lack an approach to holistic design% /f )e can learn to
approach design more like )riters approach stories* )e )ill not onl&
build richer e+periences but start to develop a craft in our )ork that
kno)s ho) and )hen certain narrative techniFues can be used to
engage the minds* emotions and imaginations of users% Gno)ing the
craft of narrative helps us build better stories* )hich helps us turn a
81
_____________________________________________________________
set of lifeless features and functions into a )hole e+perience that
engages the minds and emotions of customers%
;indy& Brand message is no longer the thing that sells% 3+perience
sells% /f the intangible pleasure* emotion or meaning )e seek can be
made tangible through the use of stor& and narrative techniFues* )e
)ill build more compelling product e+periences% -nd if the e+perience
is more compelling* businesses )ill profit from droves of lo&al*
e+perience-discerning customers%
Without this understanding* choices about )hat features should be
included and ho) the& should behave seem both uninspired and
disconnected% Sure* )e have business goals* user needs* design
principles and best practices to dra) on* but these things )on8t get a
team to a place )here it is collaborating in the same conceptual
space* let alone designing for emotion and meaning%
;indy& Start )ith the discipline itself* like St2ry* ,obert cGee8s book
about screen)riting% 'or a dive into theor&* / recommend Carrati2n in
the !icti2n !ilm* b& David Bord)ell* and the classic ;2m5uters as
6heatre b& Brenda =aurel% -nd for the first )ord on stor&telling* read
6he P2etics b& -ristotle%
82
_____________________________________________________________
The Stortelling $%periences Around #s
There are man& e+periences in )hich stor&telling is used to create a
compelling message that dra)s users in% The stories are not al)a&s
visible or apparent right a)a&* but underneath man& good
e+periences )e find great stories% The& can appear in a series of
interactions that tie into a larger stor& or simpl& in an emotional
connection that )e form )ith a product or brand%
&n Pac2aging: Apple
6ne compan& the e+cels at delivering a po)erful stor& is -pple% =aid
over the image of the iPhone bo+ above is the stor& arc Iintroduced in
part 1J that most screenpla&s and novels follo)% Purchasing an -pple
product and opening the man& beautiful la&ers of packaging follo) a
similar stor& arc in building anticipation%
-s &ou move through the process* &ou find compelling photograph&
and clever )riting% These build a sort of satisf&ing tension until &ou
finall& arrive at the clima+ of the e+perience and uncover the iPhone%
- more common anti-climactic approach )ould be to )rap the
iPhone in bubble plastic* reducing the stor& to a mere ABu& me%C
83
_____________________________________________________________
&n Technolog: 3icrosoft Courier
The icrosoft 4ourier device is in the Alate protot&peC stage of
development% This is more of a booklet than -pple8s iPad* )ith dual
multi-touch screens% This video uses stor&telling to take &ou through
the user e+perience of the booklet% /nstead of simpl& running through
some of its cool features* it tells us the compelling stor& of a proEect in
)hich the potential of the 4ourier is e+ploited%
84
_____________________________________________________________
&n 3ar2eting: Si% Scents Perfume
The Si+ Scents range of fragrances is created annuall& b& pairing si+
prominent artists )ith si+ celebrated perfumers% The goal is to help
raise a)areness for a charitable cause% 'or the second series* each
bottle comes )ith a D:D that contains a video and photograph&% The
video and imager& create a stor& around each scent to evoke a certain
feeling and theme%
85
_____________________________________________________________
&n Architecture: H"! Store
The <B6 Store Iin midto)n anhattanJ is designed )ith stor&telling
built seamlessl& into an immersive e+perience% The architecture and
technolog& allo) the space to become a ne) )a& to e+perience the
props and merchandise of <B6 sho)s% The goal for the store
Idesigned in part b& design and branding studio /maginar& 'orcesJ
)as to create an intelligent and memorable e+perience for visitors%
&n Data: Ta%iFG:/oads 'or.ard
/n her comments on stor&telling* Dorelle ,abino)it! sho)s ho)
stor&telling can be used to communicate other)ise boring data and
turn it into a more accessible e+perience% 6ne e+ample of this )as
Ta+i#;:,oads 'or)ard% /t )as a report for the 1e) 0ork 4it& Ta+i T
86
_____________________________________________________________
=imousine 4ommission on the current state of the ta+i cab industr& in
1e) 0ork% The information )as presented through stories in comic
book form and beautiful infographics%
&n Websites: Sho.time Sports
/n a proEect for Sho)time Sports* 4ind& 4hastain and the team at
/nteractive Partners created an engaging e+perience for fans using
e+perience themes% 'ans )ould be able to follo) and learn about an
entire fight stor& online interactivel& through video% The e+perience
themes guided not Eust the content but the functional reFuirements
and )ebsite architecture%
87
_____________________________________________________________
The $nd &s The "eginning !f This Stor
an& aspects of stor&telling and user e+perience could not be
covered in this article% This series is meant to give &ou a starting point
to e+plore and learn more% The end of this stor& hasn8t been )ritten%
This is Eust the beginning of using stor&telling in ne) )a&s%
!rancisc2 Anchauste is a >E designer :h2 enF2ys :riting. G2uHll $ind
m2re ab2ut his ad'entures in the :2rld 2$ design and user e<5erience
2n his bl2g !inch.
88
_____________________________________________________________
Designing #ser &nterfaces 'or "usiness Web
Applications
.y 3an72 32'an2'ic
Business Web application design is too often neglected% / see a lot of
applications that don8t meet the needs of either businesses or users
and thus contribute to a loss of profit and poor user e+perience% /t
even happens that designers are not involved in the process of
creating applications at all* putting all of the responsibilit& on the
shoulders of developers%
This is a tough task for developers* )ho ma& have plent& of back-end
and front-end development e+perience but limited kno)ledge of
design% This results in unsatisfied customers* frustrated users and
failed proEects%
So* )e )ill cover the basics of user interface design for business Web
applications% While one could appl& man& approaches* techniFues and
principles to B/ design in general* our focus here )ill be on business
Web applications%
Websites (s. Web Applications
4onfusing Web applications and )ebsites is eas&* as is confusing user
interface design and )ebsite design% But the& are different both in
89
_____________________________________________________________
essence and in so man& other )a&s* )hich )e8ll e+plore in this article%
- )ebsite is a collection of pages consisting mostl& of static content*
images and video* )ith limited interactive functionalit& Ii%e% e+cept for
the contact form and search functionalit&J% The primar& role of a
)ebsite is to inform% Some )ebsites use content management
s&stems to render d&namic content* but their nature is still
informational%
Web applications* on the other hand* are d&namic* interactive s&stems
that help businesses perform business-critical tasks and that increase
and measure their productivit&% Thus* the primar& role of a Web
application is to perform a function that serves the user8s tasks and
according to defined business rules%
Web applications reFuire a higher level of involvement and
kno)ledge of the s&stem on the part of the user% Bsers don8t Eust
stumble upon an application* do their )ork and bounce off% The& use
it as a tool to perform critical tasks in their dail& )ork% /n the end* the&
cannot easil& discontinue using the application and s)itch to another
if the& don8t like ho) it8s )orking* as is the case )ith )ebsites%
Different Tpes of Web Applications
Business applications range in t&pe from invoicing for freelancers to
content management s&stems to document management s&stems to
banking and financial s&stems%
90
_____________________________________________________________
We can distinguish bet)een 25en and cl2sed a55licati2ns% 6pen
s&stems are online applications that are easil& accessible to an&one
)ho opens an account% Bsers can access such applications via the
Web and can open an account for free or b& pa&ing a fee%
4losed s&stems Ior line-of-business applicationsJ are usuall& not
accessible outside of the compan& that uses it* and the& can be
considered AofflineC applications Ithough man& s&stems e+pose their
functionalit& to business partners via either services or speciali!ed
interfacesJ% Such s&stems usuall& run on the compan&8s local net)ork
and are available onl& to emplo&ees%
/ don8t kno) )ho coined it* but one term / especiall& like is
:eblicati2n* )hich describes )hat a Web application is in general% This
doesn8t mean* though* that a Web application is a half-)ebsite half-
application h&brid% /t is far more comple+ that that%
'irstA Hno. ,our #sers
0ou8ve probabl& heard this a thousand times* and for good reason% -
successful user interface focuses on users and their tasks% This is ke&*
and too man& developers have failed to create a good user
e+perience% -s Steve Grug said* ADevelopers like comple+it&( the&
enEo& discovering ho) something )orks%C
91
_____________________________________________________________
When identif&ing &our users* keep in mind that clients are not users*
and &ou are not a user% -lthough a client8s management team )ill
usuall& be interested in the proEect and tr& to influence decisions*
remember that the& )on8t be sitting in front of the computer several
hours a da& Iunless the application is specificall& for themJ%
Ho. to &dentif #sers-
/dentif&ing users can be done using several techniFues* such as user
intervie)s* business stakeholder intervie)s and the Ashado)ingC
method of observation% /ntervie)s can give &ou ans)ers to Fuestions
about the users8 kno)ledge of the s&stem and computers in general*
92
_____________________________________________________________
)hile shado)ing can &ield more detailed information about ho)
users perform tasks and )hat errors the& make% The method is called
shado)ing because the observer is like a shado)* )atching and
noting the steps a user takes%
/f &ou don8t have access to real users L either because &ou don8t have
permission or are designing an open application L &ou can use
personas* a tool that helps identif& users% Personas are a
representation of real users* including their habits* goals and
motivations% Because certain information about users is often
identified through business anal&sis* &ou can make use of it to create
personas% /f &ou are not familiar )ith the tool* a comic b& Brad 4olbo)
)ill help%
Task anal&sis helps identif& )hat tasks users perform in their Eobs* ho)
the& do them* ho) long the& take and )hat errors the& make%
93
_____________________________________________________________
Sometimes clients )ill be using an old version of the application that
&ou are designing to replace% ake use of that old s&stem and )atch
ho) users use it% Bnderstanding their tasks and challenges )ill be
easier that )a&%
,egardless of )ho &our users are* one thing is certain: in most cases*
&ou )ill have to consider both novices and e+perts% 1ovice users
should be enabled to learn as fast as possible* )hile e+pert users
should be enabled to perform their tasks e+tremel& efficientl&% This
ma& mean creating separate interfaces% But in man& cases &ou )ill be
able to accommodate both t&pes of users in the same interface
through various techniFues* such as progressive disclosure%
Such research is usuall& done b& business anal&sts% But if no one else
is responsible for it* &ou should do it% 6nce &ou have the necessar&
information* &ou can begin )ith the design%
Design Process
0ou can follo) one of an& number of processes in designing the user
interface% 0ou might alread& have one% <o)ever* / )ould suggest that
&ou consider the -gile approach% Wh&* &ou ask> Well* because for
users Iand clientsJ* the user interface is the product% The bottom line is
that the& don8t care about &our sketches or fantastic back end or
po)erful server% -ll the& )ant to see is the user interface%
So* ho) does -gile help> /t helps through its ke& principle: the
94
_____________________________________________________________
iterative approach% 3ach iteration consists of all of the phases defined
b& &our process% This means that at the end of the first iteration* &ou
)ill have a product that can be tested* a protot&pe%
S2etching
Sketching is a po)erful )a& to e+plore ideas% The goal is to arrive at
the solution b& sketching different concepts% ost sketches )ill be
thro)n out* but that is oka&% -s Bill Bu+ton sa&s in his S7etching >ser
B<5erience book* sketches are fast to create and eas& to dispose of*
)hich is )h& the& are so po)erful%
95
_____________________________________________________________
-re sketches the same as )ireframes> Well* the differences can be
blurr&* but / )ould sa& no% Wireframes don8t capture rough ideas but
rather develop them% ,ead a fantastic discussion on /+D-: Sketching
Before the Wireframes%
6nce &ou get the ArightC sketches* or at least the ones that &ou think
are right* &ou can create more detailed )ireframes or go straight to
creating interactive protot&pes%
Prototping
The ne+t step in the process is to create protot&pes that simulate the
real application% - protot&pe can contain one or more features Ior all
of themJ* but it actuall& does nothing% /t merel& simulates the behavior
of a real application* and users )ill feel that the& are actuall& doing
something% Protot&pes ma& contain some functionalit& if needed
Isuch as comple+ calculationsJ%
Because the nature of a protot&pe done in <T= is temporar& L its
purpose* after all* is to test ideas L don8t bother )ith the code( Eust
make it )ork )ith minimal bugs% 0ou )ill thro) it a)a& an&)a&% 0ou
can also use speciali!ed protot&ping soft)are% Some people even
protot&pe in Po)erPoint%
96
_____________________________________________________________
Testing
Protot&pes are useless unless &ou test them% This is not rocket science%
People like 2akob 1ielsen and Steve Grug support so-called Adiscount
usabilit& testing*C )hich is cheap and fast and &ields valuable insight
into &our design decisions% 0ou )ill use this information as the basis
of another iteration of sketching* protot&ping and testing% Do this at
least until maEor issues have been fi+ed% We all kno) that soft)are
proEects are tight on time and budget* so to be more efficient* test
early and test 2$ten.
6ne of the best resources for discount usabilit& testing is a ne) book
b& Steve Grug* -2c7et Surgery Made Basy% Pick up a cop& and read it%
Design Principles
There are man& design principles* but there doesn8t seem to be a
general consensus on definitive ones% So* )e8ll go through design
principles more informall&* leaving out strict definitions%
)o !ne *i2es Surprises
Probabl& the ke& factors in a good B/ are consistenc& and familiarit&% -
user interface should be consistent across all parts of the application*
from navigation to color to terminolog&% This is kno)n as internal
consistenc&% But a user interface should also be consistent )ithin its
conte+t* such as the operating s&stem or other applications in its
97
_____________________________________________________________
group or famil&% - t&pical e+ample is the applications in the icrosoft
6ffice famil&% This is called e<ternal c2nsistency%
- good approach to consistenc& is to define user interface guidelines
for each proEect or group of proEects% These should guide the
decisions &ou make for all of the details% This )ill not onl& maintain
consistenc& but also serve as documentation to help team members
better understand &our decisions%
4onsistent user interfaces have a shorter learning curve* because
users )ill recogni!e parts of the s&stem and be able to fall back on
prior e+perience% But familiarit& is sometimes confused )ith
consistenc&% 'amiliar user interfaces dra) on concepts from the users8
previous e+periences and use appropriate metaphors% 'olders* for
e+ample* are a )ell-kno)n metaphor for file organi!ation* and the&
have replaced Adirectories*C )hich )ere used previousl& in command-
line operating s&stems% /n short* speak the language of &our users%
- common belief among business o)ners is that a great user
interface should look like a icrosoft 6ffice product* especiall&
6utlook% / )on8t go into e+plaining ho) pointless this is% ,ather* / )ill
offer alternative advice: defend the user-centric approach* and e+plain
)h& creating an application for emplo&ees* clients and partners Ii%e%
their usersJ is so important%
-ll the same* most businesses are uniFue* as are their )ork processes%
'or e+ample* t)o businesses from the same branch could have
98
_____________________________________________________________
significantl& different processes* forcing &ou to go be&ond )hat is
familiar and start to innovate% This part of the design process can be
ver& interesting* although &ou have to be careful in ho) much &ou
innovate%
#sers Should "e Able to "e $fficient
Without a doubt* users should be able to be efficient )hen using
business applications% This is )hat the& are paid for* and this is )hat
managers e+pect from the application% Bser interfaces should allo)
users to be efficient and should focus them on completing tasks in
the easiest and fastest )a&%
But this is not al)a&s the case% There is an opinion* or at least practice*
among developers that sa&s the user interface should be as comple+
as the back-end s&stem% 1o matter ho) ridiculous this sounds* the
problem is real and could give &ou a headache% This is one reason )h&
good communication and collaboration bet)een developers are a
must%
Bsers are efficient )hen the& focus on a particular task% -s mentioned*
task anal&sis helps &ou identif& tasks and determines ho) users
perform them% /f tasks are long* accelerate them b& breaking them up
into smaller units% 0ou can also increase efficienc& b& providing
ke&board support and shortcuts% Think ho) inefficient it is for a user
to have to s)itch back and forth bet)een mouse and ke&board% /n
some cases* &ou )ill be designing for users )ho are accustomed to
99
_____________________________________________________________
)orking on command-line operating s&stems and the applications
made for them% The& )ill be keen to have ke&board support% 6ne
suggestion: )hen defining ke&board shortcuts* keep them consistent
)ith those of common applications% 'or e+ample* ;trl I S should
al)a&s be save* and so on%
G22gle =2cs S5readsheet enables users t2 be e$$icient by 5r2'iding
7eyb2ard sh2rtcuts and c2nte<t menus* as :ell as by ta7ing ad'antage
2$ users9 $amiliarity :ith c2mm2n des7t25 a55licati2ns.
3fficienc& can also be enhanced through personali!ation% Bsers )ho
can personali!e an environment )ill learn it faster and* more
importantl&* )ill be more confident using it% Personali!ation can be
100
_____________________________________________________________
done in man& )a&s: choosing )idgets for the dashboard( defining
shortcut options and favorites( changing the order of elements( etc%
Pa& attention to accessibilit&% -lthough man& assume that accessibilit&
doesn8t matter in Web applications* it certainl& does% Treat the
application as if it )ere a public )ebsite%
- Web application also has to be efficient in the speed )ith )hich it
processes information% So* consider heav& interactions that result from
partial renderings and -2-S reFuests%
HelpI
-n interface should provide meaningful feedback that describes the
state of the s&stem to users% /f an error occurs* users should be
notified and informed of )a&s to recover% /f an operation is in
progress* users should be notified about the progress%
We can go even further and declare that user interfaces should
prevent users from making errors% This principle* called $2rgi'eness*
can be follo)ed )ith confirmation dialogs* undo options* forgiving
formats and more% 'orgiveness makes it safe to e+plore the interface*
decreases the learning curve and increases overall satisfaction%
Because of the comple+it& of business Web applications* &ou )ould
also need to provide a comprehensive help s&stem% This could be
done )ith inline help* a support database* a kno)ledge base and
guided tours I)hich mi+ video* images and te+tJ%
101
_____________________________________________________________
Can0t 1et )o Satisfaction
RSatisfactionR is a subEective term that refers to ho) pleasant an
interface is to use% 3ver& design principle )e have described here
affects satisfaction% -nd a fe) more principles are )orth mentioning%
Simplicit& is a basic principle of B/ design% The simpler a user
interface* the easier it is to use% But keeping user interfaces for
business applications simple is a challenge because the apps often
have a lot of functionalit&%
The ke& is to balance functionalit& and simplicit&% ,estraint is one of
the most efficient )a&s to achieve this balance: i%e% finding the
simplest )a& to solve a problem%
-esthetics* though subEective and some)hat arbitrar&* pla& an
important role in overall satisfaction% Bsers respond positivel& to
pleasing user interfaces* sometimes even overlooking missing
functionalit&% But &ou8re not creating a )ork of art% 6ne of the best
articles that e+plains aesthetics is /n Defense of 3&e 4and&%
/n the end* users )ill be spending a lot of time in front of the business
application* and no matter ho) usable* consistent or forgiving the
user interface is* satisfaction )ill be critical in determining ho) good
it is%
102
_____________________________________________________________
$ssential Components !f Web Applications
3ver& Web application is uniFue* but man& of them contain common
features% -lthough the implementation of an& one of these features
)ill var&* let8s look at the basic idea of the three most common ones%
Web 'orms
'orms in general are important to Web applications% But as =uke
Wroble)ski sa&s in his book Web !2rm =esign* A1o one likes filling in
forms%C That includes sign-up forms in business applications )ith
do!ens of fields%
inimi!e the frustration of filling in forms% Provide inline validation
and good feedback% Bse defaults )hen possible% Don8t forget about
novice users% Bse )i!ards to help them complete tasks faster* or use
progressive disclosure to hide advanced Ior infreFuentl& usedJ
features%
3aster4Detail 5ie.s
This is the techniFue of sho)ing data in t)o separate but related
vie)s% 6ne vie) sho)s a list of items* )hile the other sho)s details of
the selected item% aster-detail vie)s can be implemented across
multiple pages or on individual ones%
103
_____________________________________________________________
Dashboards
an& Web applications have dashboards% - dashboard is a vie) of
the most important information needed to take action and make
decisions% /t is confined to a single page and is usuall& the starting
point of an application% Dashboards are important because the&
enable users to access information and take action )ithout having to
dig through the application%
Hea( #se of Tables
Because Web applications t&picall& deal )ith large Fuantities of data
that are easil& accessible and sortable* tables are unavoidable% But this
is not a bad thing% /n fact* tables )ere made for this purpose% Don8t
confuse this )ith table-less la&outs%
3ffective tables are easil& readable% So* in most cases &ou )ill need a
meaningful header* an optimal number of columns* pagination*
alternating ro) colors* proper column alignment* sorting and filtering
capabilities and much more%
Tables can also be interactive* meaning the& are able to generate
additional info and even modif& the data the& contain%
/eports
ost businesses )ork )ith some kind of reports% Printed reports are
usuall& reFuired* so pa& attention to the design of reports% Printed Ior
104
_____________________________________________________________
e+portedJ reports are usuall& simplified versions of online reports*
optimi!ed for monochrome printers%
Don0t 'orget #& Design Patterns
We8re so used to hearing and talking about B/ design patterns that )e
sometimes forget about themK B/ design patterns are helpful for
designing user interfaces% The important thing is to consider them
earl& on in the design process* ideall& at the sketching stage%
Because patterns often solve common problems* the right pattern can
facilitate the user8s familiarit& )ith an interface and increase the speed
at )hich the& learn it%
105
_____________________________________________________________
6his screensh2t is $r2m the article 12 Standard Screen Patterns* :hich
g2es 2'er the m2st c2mm2n screen 5atterns.
106
_____________________________________________________________
Case Stud: !nline "an2ing Application
To take an e+ample from the real )orld* / )ill briefl& e+plain the
process of designing the user interface for one small bank8s online
banking s&stem% The team / )orked )ith )as hired to improve the
s&stem% The main reason for the redesign )as that* according to
management* Ausers complained and man& stopped using it%C
-fter onl& a couple of hours spent )ith actual users* the main
problems )ere uncovered% /nformation about accounts and credit
cards )as buried in poor navigation% Bnderstanding ho) much
mone& users )ere spending and the state of their accounts and credit
cards )as also hard% The application* ho)ever* )as obvious to bank
emplo&ees( the& )ere familiar )ith the terminolog& and could
interpret the numbers in the application perfectl& )ell%
9ive the tight deadlines* )e follo)ed the process / have described*
and )e partiall& succeeded% Despite the short time* the maEor
problems )ere so obvious that )e clearl& understood our main task
and ho) to go about it% We created a dashboard that provided clear
information on the state of all accounts and credit cards% With this
ne) navigation* finding information became easier% ,eports )ere
easier to understand* and several ne) features )ere implemented%
-lthough )e made onl& a fe) changes* the changes affected critical
user tasks and resulted in significant improvements to the overall
e+perience%
107
_____________________________________________________________
'inal Thoughts
Designing user interfaces for business Web applications is a
challenging Eob* full of compromise% 0ou have to make compromises
bet)een client and user needs( business reFuirements and users(
novice and e+pert users( functionalit& and simplicit&%
/t reFuires a solid understanding of users and their tasks* as )ell as of
B/ design principles and patterns% Despite the difficulties* the Eob is
interesting* and &ou learn man& ne) things on each proEect that
influence the )a& &ou design )ebsites%
3an72 32'an2'ic is a s2$t:are engineer* bl2gger and s5ea7er $2cused 2n
>A engineering. An his $ree time* he :rites ab2ut >A engineering 2n his
bl2g 3an72,tWar5S5eed.
108
_____________________________________________________________
Progressi(e $nhancement And Standards Do
)ot *imit Web Design
.y ;hristian Heilmann
=atel& / have been getting bored and anno&ed )ith people getting up
in arms against Web standards and the ideas of progressive
enhancement* claiming that the& hold us back from creating a rich*
beautiful Web% There are also claims that these tools limit us from
pushing the boundaries of )hat is possible )ith toda&8s technologies%
The problem )ith claims such as these is that the& are based on a
misunderstanding of standards and progressive enhancement and L
at least to me L on arrogance and ignorance about )hat our Eob on
the Web is% The Web is out there for ever&bod& and is a product and a
medium like an& other%
'or e+ample* / am a big film buff and love good movies% / also
understand* though* that in order to fund great movies )e have to
make mone& from terrible ones that appeal to the lo)est common
denominator or rehash ideas that )ere successful in the past%
The same applies to the Web: )e need to shift our focus to )hat
people use it for and )hat content should go on it* not ho) prett& )e
can make it or )hat cool technolog& )e can appl&% The beaut& of Web
technologies is that the& can be used to build adaptive products% /
cannot drive a tall truck through a lo) tunnel )ithout damaging
109
_____________________________________________________________
either the tunnel or the truck% Websites and apps* ho)ever* can easil&
make Transformers look clums&: if )e build them adaptivel& and
collaborativel& )ith a team of e+perts%
Shin )e. Technologies (s. !utdated "est
Practices-
Do!ens of case studies featuring 4SS transformation and animation*
and demos of the canvas element and <T=7 audio and video that
A)ork onl& in the latest build of bro)ser S*C give us the illusion of a
Web that could be so much richer and more beautiful% The& also lead
to claims that )e are stalling because of the grump& old people of the
Web )ho claim that )e have to follo) rules and support outdated
technolog&% -ctuall&* none of this is about stalling: it is about
maturing as an industr& and embracing the adaptive nature of the
Web% /f &ou start a design and tr& to make it )ork all b& &ourself* then
&ou have not understood the Web and its collaborative nature%
The 3ess That &s The Web
9ood Web products are the result of successful collaboration% 6ne-
man armies )ith a limited vie) of the impact of putting something up
on the Web lead to a stead& stream of mediocre* unsecure*
unmaintained and hard-to-upgrade Web products% This includes all of
those )ebsites that look terrible but Ado the Eob*C the ver& big group
of )ebsites that are incredibl& hard to use but still Acommunicate the
110
_____________________________________________________________
brand8s messageC and the fe) that are stunningl& beautiful at first
glance and boring seconds later% 'inding a trul& usable* accessible*
beautiful* maintained Iand eas&-to-maintainJ )ebsite out there is
almost impossible%
The reason is that e+perts tend to advocate for their field of e+pertise
as being the most important one* instead of partnering )ith other
e+perts and making both a better offer and subseFuentl& a better
product%
Creating Celebrities And A Place We
Wish We Were At
We look up to the Arock starsC of Web design* the people )ho Apush
the envelope*C rather than praise teams that did an ama!ing Eob of
delivering a great Web product in an e+isting but deficient
infrastructure% 9reat technolog& al)a&s happen in environments
)here the designers or developers have full control over the content
and technolog& and free reign to build something great%
This is pure escapism* because in the real )orld &ou never get an& of
this* unless &ou build )ebsites for &ourself%
/t8s frustrating* )hich is )h& instead of tr&ing to change our )ork
environment and make our mark as Web developers* )e escape to
-)esomeland* )here ever&thing is shin& and ne) and the client-side
is reall& popping%
111
_____________________________________________________________
,eturning from a conference at )hich &ou8ve glimpsed the future of
4SS gives &ou the feeling of being part of something )orth)hile% =ess
fulfilling is having to argue )ith &our team to reserve time to )rite a
plug-in that ensures &our corporate 4S spits out clean* semantic
<T= instead of a tag soup* or that at least allo)s &ou to add a class
that gives &ou a st&le handle to )ork )ith% 1o) guess )hich in the
long run )ill change the game> Probabl& both* but b& fi+ing the
underl&ing infrastructure* )e enable cool ne) technologies to
become relevant to the mass market%
We can build ama!ingl& fast* lo)-riding cars that reach top speeds of
17# mph* but if the roads are full of potholes and crammed )ith cars*
then the& become little more than to&s for rich people )ho o)n their
o)n racetrack% The same applies to an& design sho)case in )hich
te+ts are e+pected to be a certain length and products to be a fi+ed
number* and )here 4SS kno)ledge is needed to make the )ebsite
look right )hen &ou add a product%
This is not ho) people use the Web* and maintainers should not have
to depend on e+perts to make changes to their )ebsites% Websites
change constantl&( this is )hat makes them interesting and much
more versatile than* sa&* print media%
Holl.ood And Ad(ertising Teach #s )othing
- lot of sho)cases hail movie )ebsites for having the most feature
richness and visual beaut&% Well* tr& to find )ebsites for older movies
112
_____________________________________________________________
and &ou )ill see that most are ?#? errors or A1ot available an& moreC
Ifor e+ample* tr& to find out )hat e+actl& is the atri+* and &ou8ll be
)aiting a )hileJ% /s this the Web )e should be putting our efforts into>
/s this innovation> 6r should )e start to )ork as teams and add our
uniFue talents to produce something better and more durable than
)hat is merel& prett& and )hat satisfies our o)n ideas of a great
)ebsite> /sn8t the main premise of Web design something that is
available to millions of people )orld)ide and available longer than
data stored on a cheap 4D I)hose lifespan is appro+imatel& 1# &ears*
in case &ou )ere )onderingJ>
The 3th !f &nno(ating $%clusi(el Through
Technolog
Gno) )hat> /n most cases* )e are n2t innovating: this is n2t the
revolution( it has been done before%
During the first bro)ser )ars* )e )ere in e+actl& the same boat* and
people )ere building things that )orked onl& in certain bro)sers* and
the& claimed this )as the future% / am sure &ou can guess )hich
bro)ser )as the )orst offender and )h& )e8re having a hard time
getting rid of it no)%
0es* /3@% - lot of the )ebsites in 4SS5 sho)cases toda&* especiall& the
animated ones* remind me painfull& of the /3@ 4SS e+pressions and
page transition sho)cases of old% Did &ou kno)* for instance* that &ou
could rotate te+t in /37%7 )ith the matri+ filter> The difference is that*
113
_____________________________________________________________
back then computers )ere so slo) that all of these effects looked bad(
no)ada&s* on fast computers and shin& iPhones and iPads* the& look
much more impressive% While / am ver& happ& that )e don8t use a
h&brid technolog& that comes )ith a boatload of performance issues
and a s&nta+ that must have been defined in a feverish dream* / am
also not convinced that the A4SS5U bro)ser-forking that )e do no) to
make )ebsites )ork in this or that bro)ser is future-proof either%
&nno(ation &sn0t About )e. Tos
We generall& tend to regard the use of the ne)est technolog& as
Ainnovation%C This is )h& &ou see old problems being solved )ith ne)
technologies over and over again* even though the& have alread&
been solved% Pure-4SS menus* for e+ample* )ere ne)er technolog&
but )ere a step back in usabilit&: &ou cannot dela& the hiding of a
menu and &ou cannot test if it )ill fit the screen before opening it%
'or this* &ou need a technolog& that has t)o-)a& communication:
&ou set something and then check that it )orked% 4SS does not have
this checking mechanism( )e are at the merc& of the bro)ser doing it
right% With 2avaScript )e have that option% We also have a sensible
s&nta+ in 2avaScript( )hereas 4SS* )ith all of its -browser e+tensions*
is slo)l& but steadil& turning into a s&ntactic nightmare%
4SS has developed some great defensive features: for e+ample* media
Fueries* )hich allo) different designs to be served to different screen
si!es automaticall&* are )onderful% <o)ever* does 4SS need all of
114
_____________________________________________________________
these features* and should )e have to )ait for universal bro)ser
support* or )ould it make more sense to use 2avaScript no) in
conEunction )ith 4SS to achieve the same effect> - good 4SS
designer and someone )ith rudimentar& kno)ledge of 2avaScript
libraries are all it takes% But oh no* )h& share the fame )hen )e can
do it )ith 4SS5 alone>
/nnovation is not about using the ne)est technolog& e+clusivel&%
/nnovation also happens )hen &ou combine e+isting tools and make
good use of them% 'lints )ere great as spearheads for killing each
other or skinning animals% <itting them )ith another rock or against
each other all of a sudden gave us fire% 1o one sho)ed up )ith a
lighter to teach people ho) it )orks% /nstead* )e anal&!ed )hat )e
had and put it to good use% -nd guess )hat> 'lints don8t need fuel
either%
The Corporate Spin !n &nno(ationA And &ts
Conse@uences
The other thing )e should never forget is that ever& time )e innovate*
some people )ill one )a& or another sell these ideas to corporate /T
half a &ear later% ost of the time* the innovation is sold as part of a
bigger soft)are package: A6h &eah* our 4S package 6verpriced-
-nd-Bnderspec8ed-otron no) supports -2-SV in multiple colorsKC
Sadl&* this also happens to be the onl& time )hen the innovation )ill
have a real impact on the mass market%
115
_____________________________________________________________
/f )e reall& think that large corporations or end users care about )hat
)e do* )e8re fooling ourselves% /n the end* soft)are and the /nternet
e+ist to solve the problems of people% -nd sadl&* the people deciding
on the best solutions are not us but rather those )ho onl& go for
)hat8s cheapest and seemingl& the most secure%
- large compan& that offers a corporation its soft)are package at a
fi+ed price* promising to solve all of the issues plaguing the
corporation8s dail& )orkflo) and to train the people )ho )ork )ith
the soft)are are selling much more easil& than us )ith our AWe )ill
help &ou understand the Web and make it easier for &our emplo&ees
to be more effectiveC pitch% Which sounds like more )ork for an
alread& overloaded /T decision-maker>
The Stoc2holm Sndrome !f "ad &nterfaces
This breeds a lot of ordinar& interfaces on the Web that are painful to
use and terrible to look at% The ama!ing thing* though* is that people
love to use them% This is )hat the& learned in corporate training* and
these are the products supported and endorsed b& the compan&%
emori!ing five convoluted steps and mechanicall& going through
them ever& time is easier than finding the time to learn ne) things%
There is a comfort in kno)ing ho) to get the results &ou are asked to
get in a predicable )a& if &ou reall& don8t )ant to use something to
begin )ith%
116
_____________________________________________________________
/f &ou don8t )ant to be one of the people )ho builds the Web* then
ever& change becomes an anno&ance L upgrading being one of
them%
This is )h& )e have outdated set-ups: not because of evil companies
that refuse to embrace ne) technologies* but rather because people
couldn8t be bothered to upgrade because no perceptive gain comes
from it%
/nstead of targeting the people )ho reall& prevent the Web from
evolving and giving them something to consider as a great gain* )e
sta& in our comfort !one* talking to each other about pushing the
envelope and suffering from the )ider market not caring%
Want to drive the Web for)ard> 'ind a )a& to disrupt the five-&ear
upgrade c&cle of corporate environments% Whenever &ou talk to the
leading lights of Web design about this* &ou get an ans)er like* AThis
is a battle )e can8t )in%C
This &s )ot About Technolog !r Design
/n the end* )e deliver products% We are passionate about the Web*
and )e )ant to push it for)ard% The problem is that )e sta& in our
comfort !one rather than e+pand our kno)ledge:
Designers )ant to push the envelope to)ards richer
interaction and more beautiful designs )ith rich t&pograph&%
117
_____________________________________________________________
BS people )ant to make it darned eas& for people to achieve
their goals( and if a pattern )orks )ell on the desktop* it
should also )ork )ell on the Web%
3ngineers push for speed* )ith Abest practices on
performanceC that are relevant to search result pages and Web
apps like 9mail but not so much to content-heav& )ebsites%
6ther engineers )ant to build the most versatile and fle+ible
platform ever so that people can use it )ithout ever having to
bother the engineers again Ibecause the& )ould have alread&
moved on to solving other problemsJ%
obile enthusiasts start to abandon the idea of Web
technologies as the )a& for)ard because the technologies are
too limited and too far removed from the capabilities of the
platform%
- lot of these are mutuall& e+clusive* and the latter is especiall& not
true and onl& happens because )e as Web developers forgot the
nature of the Web: a technolog& stack that adapts to the needs of the
end user L data that has a clever morphing interface that gives each
use case the interface it needs% That the Web began as a te+t platform
and evolved into a rich media s&stem is great( that )e )ant to replace
one )ith the other is Eust plain )rong or at least ver& premature%
118
_____________________________________________________________
Where &s The "eaut !f The Web-
<ere is the real beaut& of Web design: adaptabilit&( interfaces that
adapt to the needs of the user independent of their technolog& or
ph&sical abilit&% We forgot this for a fe) reasons:
We0re control frea2s
We like to control )hat )e do and are afraid of chaos and
people messing )ith our products% Sure* )e love to be
disruptive and break conventions* but onl& )hen :e can
choose the font-face and colors%
We0re bitter
'or &ears* )e )orked tirelessl& to make the Web better and
more beautiful* and our clients hardl& ever cared% We )ere
constantl& promised to be allo)ed to build something
ama!ing* and then our budgets )ere cut or )e had to move
on to the ne+t proEect before adding that last little element
that )ould have made it a)esome%
Cheap thrills
/t is eas& to dra) praise for Athinking outside the bo+C b&
telling people that progressive enhancement is dead or that
/3@ should no longer be supported or that ever&one &ou kno)
has a 1$"#-pi+el resolution% 0ou get applauded* and people
look up to &ou because this is e+actl& )hat the& )ant to tell
their boss ever& da&% But does it help us> 6r are )e getting
praise b& escaping to our o)n )orld>
119
_____________________________________________________________
'rustration about the end product
We are hardl& ever able to look at a live product and sa&* AThis
is cool and looks e+actl& as )e planned%C 3ven )orse* after a
&ear of maintenance* )e are luck& even to be able to recogni!e
it as our )ork% Portfolios are outdated as soon as )e put them
up I/ kno) because / am hiring people right no) and cannot
assess their Fualit& of )ork that )a&J%
Arrogance and ignorance
6ur market* our <, practices and even our Eob boards clearl&
distinguish bet)een designers and developers% /nstead of
challenging this and ackno)ledging AWeb developersC )ho
grasp both the user e+perience and the command line* )e are
content to sta& in our o)n silos%
- developer )ho claims not to need design input is as useless
as a designer )ho doesn8t care about the technical
implementation of their design% We should encourage each
other to build the best products through collaboration* and
not regard each other as sho)-stoppers or )hiners )ho
al)a&s )ant it their )a&%
To /ecap: !ur &ssues
So here are the issues &ou have to face as someone )ho )ants to
build great Web products:
The technolog stac2 ou0re as2ed to support is un2no.n.
0ou can fool &ourself into believing that ever&one out there is
120
_____________________________________________________________
as happ& to upgrade and chase after the ne)est tech* but
doing it Eust sho)s that it8s been a )hile since &ou had to
deliver a real proEect%
!utdated technolog is here to sta.
People either are not allo)ed to upgrade or simpl& don8t care%
When / )atch T:* / don8t )ant to kno) ho) its internals )ork*
and a lot of Web users think this )a&* too%
,our .or2 .ill be butchered.
The )ebsite &ou plan to build )ill be changed over the course
of the proEect Ie%g% the client runs out of mone&* )hich al)a&s
happensJ* and )hat &ou do manage to get out )ill be changed
over the &ears to something &ou never intended to build%
,ou can0t 2no. e(erthing.
When &ou put a product on the Web* &ou need to make it do
the follo)ing: )ork for humans* look pleasing* perform )ell*
be secure* be e+tensible* have the option to be locali!ed to
different markets and languages* be eas& to change and adapt
and be cheap to run and migrate to another environment% /f
&ou can do all of that* please send me &our 4:V on second
thought* don8t* because /8m sure &ou8ll be a poor team pla&er%
,ou can0t rel on solutions standing the test of time.
- lot of Agreat tricksC and Abest practicesC come )ith a massive
price that gets paid a fe) months do)n the line% an&
solutions that )ere once the bee8s knees are no) considered
bad practice Itable la&outs* for e+ample* )ere at one time the
bulletproof solution for flak& 4SS la&outsJ%
121
_____________________________________________________________
-ll of this points to a truth that / learned long ago: follo)ing
standards and enhancing progressivel& means building stuff that )ill
not come back to haunt &ou do)n the line%
Wh Standards 3atterA And What 6'ollo.ing
Standards7 3eans
Working to)ards a standard means t)o things: making it eas& for
others to build on &our )ork* and having a fi+ed point to start from%
The thing about standards in an& professional environment is that
the& )ork% The& might not be the best or most elegant solution* but
b& sticking to them &ou are at least delivering a )orkable solution%
This is )h& )e standardi!ed scre)s and print si!es and also )h& one
can find boilerplate contracts around%
Products built some)here else b& someone unkno)n )ill still be
maintainable if the developers follo)ed a standard L even if the
product lacks documentation% / can still put m& old lego cars together
from the parts even though / lost the booklets% /f / had sa)ed off parts
of the legos or bent them to make them prettier* / )ouldn8t be able to
do that%
B& follo)ing standards* &ou are signing an agreement )ith the people
)ho take over from &ou* sa&ing: no big surprises ahead L /8m a
professional%
122
_____________________________________________________________
That said* don8t look at standards as a Ab& an& means necessar&C
proposition% -dding -,/- roles to &our <T= right no)* for e+ample*
)ould make the W54 validator complain* but the roles allo) people
to Fuickl& navigate &our document )ithout &our having to )rite
custom ke&board navigation )ith AskipC links%
Progressi(e $nhancement Wor2s
Progressive enhancement is not about supporting old platforms:
an&one )ho sa&s this totall& misunderstands the concept% Progressive
enhancement means one thing: delivering )hat can be supported to
the right platform% This means the follo)ing:
&ncluding e(erthing that is absolutel necessar for the
comprehension and functionalit of the .ebsite in HT3*.
1ot static <T=* mind &ou* but <T= rendered b& a )ell-
)ritten back end that gets the data via an -P/%
Heeping the loo2 and feel as much in CSS as possible.
/f &ou need a fe) <T= elements to achieve a certain look*
that is not an issue )hatsoever% This is actuall& )h& )e have
elements like SP-1 and D/:% 0ou )ill find standards !ealots
)ho fro)n upon ever& e+tra D/: on the page% Tell those
people to chill out%
$nhancing the beha(ior of the product .ith a richer
interacti(e laer.
This could be 4SS for hovers* transitions and animations* or
123
_____________________________________________________________
2avaScript* or 'lash* or SilverlightV heck* thro) in 2ava applets
if &ou )ant% -s long as &ou add them onl& )hen appropriate*
&ou8re not doing an&thing )rong%
- great pragmatic e+ample of progressive enhancement in action is
SW'obEect and Soundanager% /nstead of putting a 'lash movie into
the document and hoping it )orks* put a do)nload link to the audio
or video in the document* add a 2avaScript and let the script do the
rest% /t checks )hether 'lash is supported b& the bro)ser and creates
the right markup for the given bro)ser to embed the audio or video
onl& )hen it is able to be pla&ed% 3ver&one gets to see the movie or
hear the sound* but onl& those bro)sers that can support a pla&er )ill
sho) one%
The main test of good progressive enhancement is this: are &ou
offering functionalit& that &ou are not sure )ill )ork> /f not* then
congratulations: &ou have built a great Web product% Testing before
implementation is as obvious as checking the depth of a lake before
Eumping in% There is no magic to it%
6ne big benefit of progressive enhancement that is often forgotten is
that b& separating the different tasks of a Web product into different
technologies* &ou are able to segment the )orkflo) and assign each
part to a different team%
- progressivel& enhanced product can be built in parallel b& the back-
end team* the front-end developers and the BS and design team% /f
&ou start )ith the design and tr& to trace &our )a& back* &ou aren8t
124
_____________________________________________________________
)orking together but rather thro)ing )ork over a )all and probabl&
causing e+isting code to be changed or even totall& re-architected% To
save time* enhance progressivel& and measure t)ice* cut once%
The product c&cle should begin )ith a definition of basic functionalit&(
once this is agreed on* all groups can )ork in parallel and reconvene
at later stages in an iterative fashion and make the product a bit
better ever& time% This also means that if there is an emergenc& and
funding gets canned* &ou can at least deliver a )orking product%
-gile* isn8t it>
"est Practices Come 'rom Application And &terati(e
&mpro(ement
To improve our entire market* )e have to stop advertising ever&thing
)e do as a Abest practice%C Best practices should come from real
products built b& real teams for real clients* )ith all of the anno&ances
and problems the& bring% Test cases that cover all AcurrentC bro)sers
are nice* but man& more things can thro) a spanner in the )orks
)hen )e build real products%
So* if &ou )ork at a compan& and managed to implement some cool
ne) technolog& in an e+isting product or have stories to tell about
ho) shifting to a 4SS la&out saved &our client thousands of dollars*
please )rite about those% We need tangible stories to tell clients* not
tales of a bright future%
125
_____________________________________________________________
'urthermore* scrutini!e ever& Abest practiceC &ou find in &our o)n
environment: does it reall& deliver on its promise> Does something
need to be added to make it )ork in the Areal )orldC> Write about
these add-ons and fi+es* adding them as comments to the original
article%
Together We Can Do This
The last thing / )ant to bring up here is that / am tired of the debate
about developer vs% designer vs% proEect manager% -s listed above* real
Web proEects reFuire a lot of different skill sets* and &ou )ould be
hard pressed either to find someone )ho possesses all of them or to
find the time to learn them all &ourself and sta& up to date%
/t is all about team)ork* trust* delegation and communication% /f )e
sta& cooped up in our respective ivor& to)ers and complain that )e
can8t )ork )ith the other groups* )hile pretending that )e could do
their Eobs an&)a& if onl& people )ould upgrade their bro)sers* then
)e shouldn8t be surprised that )e don8t get the time and opportunit&
to o)n and deliver a real Web product* as opposed to some piece of
soft)are )ith a Web interface%
;hristian Heilmann is an internati2nal =e'el25er B'angelist :2r7ing
$2r the Gah22 =e'el25er Cet:2r7 in the l2'ely t2:n 2$ (2nd2n* Bngland
126
_____________________________________________________________
127
_____________________________________________________________
Color Theor for Professional Designers
.y ;amer2n ;ha5man
4olor in design is ver& subEective% What evokes one reaction in one
person ma& evoke a ver& different reaction in someone else%
Sometimes this is due to personal preference* and other times due to
cultural background% 4olor theor& is a science in itself% Stud&ing ho)
colors affect different people* either individuall& or as a group* is
something some people build their careers on% -nd there8s a lot to it%
128
_____________________________________________________________
Something as simple as changing the hue or saturation of a color can
evoke a completel& different feeling% 4ultural differences mean that
something that8s happ& and uplifting in one countr& can be
depressing in another%
129
_____________________________________________________________
Warm Colors
Warm colors include red* orange and &ello) and variations of the
three% These are the colors of fire* fall leaves and sunsets and sunrises*
and the& are generall& energi!ing* passionate and positive%
,ed and &ello) are both primar& colors* )ith orange falling in the
middle* )hich means )arm colors are all trul& )arm and aren8t
created b& combining a )arm color )ith a cool color% Bse )arm colors
in &our designs to reflect passion* happiness* enthusiasm and energ&%
/ed DPrimar ColorE
130
_____________________________________________________________
,ed is a hot color% /t8s associated )ith fire* violence and )arfare% /t8s
also associated )ith love and passion% /n histor&* it has been
associated )ith both the devil and 4upid% ,ed can actuall& have a
ph&sical effect on people* raising blood pressure and respiration rate%
/t has been sho)n to enhance human metabolism* too%
,ed can be associated )ith anger* but it is also associated )ith status
Ithink of the red carpet at a)ards sho)s and celebrit& eventsJ% ,ed
also indicates danger I)hich is the reason stop lights and signs are
red and )h& most )arning labels are redJ%
6utside the )estern )orld* red has different associations% 'or
e+ample* in 4hina* red is the color of prosperit& and happiness% /t can
also be used to attract good luck% /n other eastern cultures* red is
)orn b& brides on their )edding da&% /n South -frica* though* red is
the color of mourning% ,ed is also associated )ith communism% ,ed
has become the color associated )ith -/DS a)areness in -frica due to
the popularit& of the ,3D campaign%
131
_____________________________________________________________
/n design* red can be a po)erful accent color% /t can have an
over)helming effect if used too much in designs* especiall& in its
purest form% /t8s a great color to conve& po)er or passion in a design%
,ed can be versatile* though* )ith brighter shades being energetic
and darker shades evoking po)er and elegance%
!range DSecondar ColorE
6range is a vibrant and energetic color% /n its muted forms* it is
associated )ith 3arth and the autumn season% Because of its
association )ith the changing seasons* orange can represent change
and movement in general%
Because orange is also a fruit* it can be associated )ith health and
vitalit&% /n designs* orange commands attention )ithout being as
overpo)ering as red% /t8s often considered more friendl& and inviting*
and less in &our face%
132
_____________________________________________________________
,ello. DPrimar ColorE
0ello) is often considered the brightest and most energi!ing of the
)arm colors% /t is associated )ith happiness and sunshine% But &ello)
can also be associated )ith deceit and co)ardice Icalling someone
&ello) is to call them a co)ardJ%
0ello) is also associated )ith hope* as can be seen in countries )here
&ello) ribbons are )orn b& families that have loved ones at )ar%
0ello) is also associated )ith danger* though not as strongl& as red% /n
some countries* &ello) has ver& different connotations% /n 3g&pt* for
e+ample* &ello) is for mourning% /n 2apan it represents courage* and
in /ndia it8s a color for merchants%
/n &our designs* bright &ello) can lend a sense of happiness and
cheerfulness% Softer &ello)s are commonl& used as a gender-neutral
color for babies Irather than blue or pinkJ and &oung children% =ight
&ello)s also give more of a feeling of calm and happiness than bright
&ello)s% Dark &ello)s and gold-hued &ello)s can look antiFue and be
used in designs )here a sense of permanence is desired%
133
_____________________________________________________________
Cool Colors
4ool colors include green* blue and purple* and the& are often more
subdued than )arm colors% The& are the colors of night* )ater and
nature and are usuall& calming* rela+ing and some)hat reserved%
Blue is the onl& primar& color in the cool spectrum* )hich means that
the other colors are created b& combining blue )ith a )arm color
I&ello) for green and red for purpleJ% 9reens take on some of the
attributes of &ello)* and purple takes on some of the attributes of red%
Bse cool colors in &our designs to give a sense of calm or
professionalism%
134
_____________________________________________________________
1reen DSecondar ColorE
9reen is a do)n to earth% /t represents ne) beginnings and gro)th% /t
also signifies rene)al and abundance% -lternativel&* green can
represent env&* Eealous& or a lack of e+perience%
9reen has man& of the same calming attributes as blue* but it also
carries some of the energ& of &ello)% /n design* green can have a
balancing and harmoni!ing effect* and it is stable% /t8s appropriate for
designs related to )ealth* stabilit&* rene)al and nature% Brighter
greens are energi!ing and vibrant* )hile olive greens represent the
natural )orld% Dark greens are the most stable and representative of
affluence%
135
_____________________________________________________________
"lue DPrimar ColorE
Blue is often associated )ith sadness in the 3nglish language% Blue is
also used e+tensivel& to represent calmness and responsibilit&% =ight
blues can be refreshing and friendl&% Dark blues are stronger and
more reliable% Blue is also associated )ith peace and has spiritual and
religious connotations in man& cultures and traditions Ifor e+ample*
the :irgin ar& is generall& depicted )earing a blue robeJ%
The significance of blue depends largel& on its shade and hue% The
shade of blue &ou select )ill have a huge impact on ho) &our design
is perceived% =ight blues are often rela+ing and calming% Bright blues
can be energi!ing and refreshing% Dark blues are e+cellent for
corporate )ebsites and )ebsites )here strength and reliabilit& are
important%
136
_____________________________________________________________
Purple DSecondar ColorE
Purple has long been associated )ith ro&alt&% /t8s a combination of red
and blue and takes on attributes of both% /t is associated )ith
creativit& and imagination* too%
/n Thailand* purple is the color of mourning for )ido)s% Dark purples
are traditionall& associated )ith )ealth and ro&alt&* )hile lighter
purples Ilike lavenderJ are considered more romantic%
/n design* dark purples give a sense )ealth and lu+ur&% =ight purples
are softer and associated )ith spring and romance%
137
_____________________________________________________________
)eutrals
1eutral colors often serve as a backdrop in design% The&8re commonl&
combined )ith brighter accent colors% But the& can also be used on
their o)n and make for ver& sophisticated la&outs% Surrounding colors
affect the meaning of neutral colors much more than )arm and cool
colors%
"lac2
Black is the strongest of the neutral colors% 6n the positive side* it8s
associated )ith po)er* elegance and formalit&% 6n the negative side* it
138
_____________________________________________________________
is associated )ith evil* death and m&ster&% Black is the traditional color
of mourning in man& Western countries% /t8s also associated )ith
rebellion in some cultures and is tied to <allo)een and the occult%
Black is commonl& used in edg& designs* as )ell as in elegant designs%
/t can be either conservative or modern* traditional or unconventional*
depending on the colors it8s combined )ith% /n design* black is
commonl& used for t&pograph& and other functional elements
because of its neutralit&% Black conve&s a sense of sophistication and
m&ster&%
White
White is at the opposite end of the spectrum* but like black* it )orks
)ell )ith Eust about an& other color% White is often associated )ith
purit&* cleanliness and virtue% /n the West* )hite is commonl& )orn b&
brides on their )edding da&% /t8s also associated )ith the health care
industr&* especiall& doctors* nurses and dentists% White is associated
)ith goodness: angels are often depicted in )hite dress%
139
_____________________________________________________________
/n design* )hite is often used as a neutral backdrop to give other
colors a louder voice% /t conve&s cleanliness and simplicit& and is
popular in minimalist designs% White is also used to represent either
)inter or summer* in conEunction )ith the design motifs and colors
around it%
1ra
9ra& is a neutral color* generall& considered to be on the cool end of
the spectrum% /t can be considered mood& or depressing% =ight gra&s
can be used in place of )hite in some designs* and dark gra&s can be
used in place of black%
9ra& is generall& conservative and formal but can also be modern% /t is
sometimes considered a color of mourning% /t8s commonl& used in
corporate designs* )here formalit& and professionalism are needed% /t
can be a sophisticated color% Pure gra&s are shades of black* though
other gra&s ma& have blue or bro)n hues mi+ed in% /n design* gra&
backgrounds are ver& common* as is gra& t&pograph&%
140
_____________________________________________________________
"ro.n
Bro)n is associated )ith 3arth* )ood and stone% /t8s a completel&
natural color and a )arm neutral% Bro)n can be associated )ith
dependabilit& and reliabilit&* )ith steadfastness and )ith earthiness% /t
can also be considered dull%
/n design* bro)n is commonl& used as a background color% /t8s also
seen in )ood te+tures and sometimes in stone te+tures% /t gives a
feeling of )armth and )holesomeness to a design% /t8s sometimes
used in its darkest forms as a replacement for black* in either
backgrounds or t&pograph&%
141
_____________________________________________________________
"eige and Tan
Beige is some)hat uniFue in the color spectrum* because it can take
on cool or )arm tones depending on the colors around it% /t has the
)armth of bro)n and the coolness of )hite and* like bro)n* is
sometimes seen as dull% /t8s a conservative color in most instances and
is usuall& reserved for backgrounds% /t also s&mboli!es piet&%
Beige is generall& used for backgrounds* often ones )ith a paper
te+ture% /t takes on characteristics of the colors around it* minimi!ing
its effect on the overall design%
142
_____________________________________________________________
Cream and &(or
/vor& and cream are sophisticated colors* )ith some of the )armth of
bro)n and a lot of the coolness of )hite% The&8re generall& Fuiet and
often evoke a sense of histor&% /vor& is a calm color* )ith some of the
pureness associated )ith )hite* but a bit )armer%
/n design* ivor& lends elegance and a sense of calm% When combined
)ith earth& colors like peach or bro)n* it can take on an earth&
Fualit&% /t can also be used to lighten darker colors* )ithout the stark
contrast of )hite%
&n "rief
While the information presented here might seem Eust a bit
over)helming* color theor& is as much about the feeling a particular
shade evokes as an&thing else% But here8s a Fuick reference guide for
the common meanings of the colors discussed above:
/ed: Passion* =ove* -nger
143
_____________________________________________________________
!range: 3nerg&* <appiness* :italit&
,ello.: <appiness* <ope* Deceit
1reen: 1e) Beginnings* -bundance* 1ature
"lue: 4almness* ,esponsibilit&* Sadness
Purple: 4reativit&* ,o&alt&* Wealth
"lac2: &ster&* 3legance* 3vil
1ra: ood&* 4onservative* 'ormal
White: Purit&* 4leanliness* :irtue
"ro.n: 1atural* Wholesome* Dependable
Tan or "eige: 4onservative* Pious* Dull
Cream or &(or: 4alm* 3legant* Pure
Traditional Color Scheme Tpes
There are a number of color scheme standards* )hich make creating
ne) schemes easier* especiall& for beginners% Belo) are the traditional
schemes* )ith a fe) e+amples of each%
144
_____________________________________________________________
6he basic 12-s527e c2l2r :heel is an im52rtant t22l in creating c2l2r
schemes.
3onochromatic
onochromatic color schemes are made up of different tones* shades
145
_____________________________________________________________
and tints of a particular hue% These are the simplest color schemes to
create* because the&8re all of the same hue* making it hard to create a
Earring or ugl& scheme Ithough that is still possibleJ%
$%amples
<ere are three e+amples of monochrome color schemes% 'or the most
part* the first color Iif )e8re looking at the scheme from left to rightJ
)ould be used for headlines% The second )ould be used for bod& te+t
or possibl& the background% The third color )ould be used for the
background Ior for the bod& te+t if the second color )as used as the
backgroundJ% -nd the last t)o colors )ould be used as accents or in
graphics%
146
_____________________________________________________________
Analogous
-nalogous color schemes are the ne+t easiest to create% -nalogous
schemes consist of three colors that lie ne+t to each other on the 1"-
spoke color )heel% 9enerall&* analogous color schemes all have the
same chroma level* but b& using tones* shades and tints )e add
interest and adapt the schemes to our needs%
$%amples
147
_____________________________________________________________
6his is a traditi2nal anal2g2us c2l2r scheme* and :hile it9s 'isually
a55ealing* there isn9t en2ugh c2ntrast bet:een the c2l2rs $2r an
e$$ecti'e :ebsite design.
Here9s a c2l2r scheme :ith the same hues as the 2ne ab2'e* but :ith
the chr2ma adFusted t2 gi'e m2re 'ariety. At9s n2: much m2re suitable
$2r use 2n a :ebsite.
,n2ther e<am5le 2$ a traditi2nal anal2g2us scheme.
148
_____________________________________________________________
6his scheme m2di$ies the last 2ne $2r use 2n a :ebsite.
Complementar
4omplementar& schemes are created b& combining colors from
opposite sides of the color )heel% /n their most basic form* these
schemes consist of onl& t)o colors but can be easil& e+panded using
tones* tints and shades% - )ord of )arning* though: using colors that
are e+act opposites )ith the same chroma andOor value right ne+t to
each other can be Earring Ithe&8ll seem to vibrate along their border in
e+treme casesJ% -void this* either b& leaving )hite space bet)een
them or b& adding a transitional color bet)een them%
$%amples
149
_____________________________________________________________
, :ide range 2$ tints* shades and t2nes ma7es this a 'ersatile c2l2r
scheme.
,n2ther c2m5lementary c2l2r scheme :ith a :ide range 2$ chr2mas.
=2n9t $2rget that beige and br2:n are really tints and shades 2$
2range.
Split Complementar
Split complementar& schemes are almost as eas& to use as
complementar& schemes% <ere* instead of using opposites colors* &ou
)ould use colors on either side of the hue that is opposite to &our
base hue%
150
_____________________________________________________________
$%amples
, scheme in :hich yell2:-green is the base hue. An this scheme* ha'ing
en2ugh di$$erence in chr2ma and 'alue bet:een the c2l2rs y2u select is
im52rtant.
,n2ther 5alette :ith a :ide range 2$ chr2mas.
Triadic
Triadic schemes are made up of hues that are eFuall& spaced around
the 1"-spoke color )heel% These make for more vibrant color
schemes%
151
_____________________________________________________________
$%amples
>sing a 'ery 5ale 2r dar7 'ersi2n 2$ 2ne c2l2r in the triad* al2ng :ith
t:2 shades* t2nes 2r tints 2$ the 2ther t:2 c2l2rs* ma7es the single
c2l2r :2r7 alm2st as a neutral.
,lternately* 5airing 2ne 'ery bright hue :ith muted hues ma7es the
bright 2ne stand 2ut m2re.
Double4Complementar DTetradicE
Tetradic color schemes are probabl& the most difficult to pull off%
152
_____________________________________________________________
$%amples
, rather unim5ressi'e scheme. 6he best tetradic schemes use 2ne c2l2r
as the 5rimary c2l2r and the 2thers as accents.
6etradic c2l2r schemes :ith similar chr2mas and 'alues :2r7 :ell. 3ust
add a neutral Jsuch as dar7 gray 2r blac7K $2r te<t and accents.
At :2r7s Fust as :ell $2r dar7er c2l2r schemes.
153
_____________________________________________________________
Custom
4ustom color schemes are the hardest to create% B& not follo)ing the
predefined schemes discussed above* &ou8re abandoning an& formal
rules% Geep in mind things like chroma* value and saturation )hen
creating custom color schemes%
$%amples
6he c2l2rs here all ha'e similar chr2ma and saturati2n le'els.
-gain* using colors )ith similar chroma and saturation is effective and
creates a sense of cohesion%
154
_____________________________________________________________
>sing 2ne c2l2r :ith a high chr2ma am2ng 2ther c2l2rs :ith l2:er
chr2mas is an2ther e$$ecti'e meth2d Jthe higher-chr2ma c2l2r ser'es as
an accentK.
Creating a Color Scheme
4reating &our o)n color schemes can be a bit intimidating% But it8s not
as complicated as man& people think% -nd &ou can emplo& Fuite a
fe) tricks to create great color palettes right from the start%
We8ve gone over the different t&pes of color schemes% 1o)* let8s tr&
creating a fe) of our o)n% Plent& of tools are online that )ill help &ou
create a color scheme* but let8s forget about those for no) and Eust
use Photoshop%
=et8s break a)a& from the t&pes alread& mentioned and create some
custom schemes% While kno)ing ho) colors interact and ho)
traditional schemes are created is important* for most design proEects
&ou8ll likel& create schemes that don8t adhere strictl& to an&
predefined patterns%
155
_____________________________________________________________
So* for our purposes here* )e8ll create a set of three color schemes for
t)o different )ebsites% 6ur h&pothetical clients are a modern
architecture design blog and a high-end )omen8s clothing retailer
that speciali!es in :ictorian-influenced apparel%
We8ll start )ith a basic monochromatic scheme* Eust to get a feel for it%
While traditional color schemes aren8t used as much in design*
monochromatic color schemes are the e+ception% 0ou8ll likel& find
&ourself using monochromatic schemes on a fairl& regular basis%
'or our apparel store* here8s a traditional monochromatic scheme*
)ith )hite added as a neutral%
156
_____________________________________________________________
'or our design blog* )e8ve gone )ith a color scheme made up of
shades and tints of gra&%
This is almost an analogous color scheme* but )e8ve left out one
color% /t8s made up of shades of purple and reddish-purple% These t)o
colors fall ne+t to each other on the color )heel and )ork )ell
together* especiall& )hen given different values and saturation levels%
-dding a couple of shades of red to this gra& color scheme adds a lot
of visual interest and the potential to highlight certain parts of &our
design%
157
_____________________________________________________________
<ere* )e8ve gotten rid of the purple hues and s)itched to a burgund&%
-gain* this is ne+t to the reddish-purple on the color )heel% We8ve
also added a ver& pale &ello) tone* )hich sits opposite purple on the
color )heel% This serves as our neutral and looks more like an off-
)hite compared to our other hues%
While this color scheme at first glance looks like another standard
gra& and red palette% <o)ever* gra&s are actuall& tones of blue% Blue
and red make up t)o thirds of a tetradic color scheme* but the& )ork
Eust fine together )ithout &ello)* especiall& )hen the red is pure and
the blue is toned do)n to the point of almost being gra&%
158
_____________________________________________________________
Wh ShadesA Tones and Tints Are &mportant
-s &ou can see from the color schemes above* using tints* tones and
shades in &our color schemes is vital% Pure hues all have similar values
and saturation levels% This leads to color schemes that are
over)helming and boring at the same time%
When &ou mi+ in tones* shades and tints* &ou e+pand the basic 1"-
spoke color )heel to an infinite number of possible colors% 6ne of the
simplest )a&s to create a professional-looking scheme is to take a fe)
tones* tints and shades of a given color Iavoiding the pure hueJ* and
then add another pure Ior close to pureJ hue that is at least three
spaces a)a& on the color )heel Ii%e% that8s part of a tetradic* triadic or
split-complementar& schemeJ as an accent color% This adds visual
interest )hile still retaining a sense of balance%
Adding in )eutrals
1eutrals are another important part of color schemes% 9ra&* black*
)hite* bro)n* tan and off-)hite are generall& considered neutral%
Bro)ns* tans and off-)hites tend to make color schemes )armer
Ibecause the&8re reall& Eust tones* shades and tints of orange and
&ello)J% 9ra& takes on a )arm or cool feel depending on the
surrounding colors% Black and )hite also look either )arm or cool
depending on the surrounding colors%
159
_____________________________________________________________
Black and )hite are the easiest neutrals to add to Eust about an& color
scheme% To add a bit more visual interest* though* consider using a
ver& light or ver& dark shade of gra& instead%
-dding bro)ns* tans and off-)hite hues is a bit trickier* but )ith
practice &ou8ll find it gets easier% 'or bro)ns* consider using a ver&
dark chocolate bro)n in place of black% - pale off-)hite can be used
instead of )hite or light gra& in man& cases% -nd tan can be used in
place of gra& Icreate a tone b& adding some gra& to make it even
easierJ%
The $asiest Color Schemes
We8ve touched on this alread&: adding a bright accent color to an
other)ise neutral palette is one of the easiest color schemes to create%
/t8s also one of the most striking% /f &ou8re unsure of &our skill in
160
_____________________________________________________________
creating custom schemes* start out )ith these t&pes of palettes%
<ere are a fe) e+amples to give &ou an idea:
161
_____________________________________________________________
G2u can see here h2: using br2:ns instead 2$ grays ma7es the entire
scheme :armer* e'en :ith the blue accent c2l2r.
0ou can use tones of an& color instead of gra& or bro)n in this t&pe of
scheme( Eust keep it close to the gra& end of the spectrum for the
most foolproof results% -s a general rule* cool gra&s and pure gra&s
are best for modern designs% 'or traditional designs* )armer gra&s
and bro)ns )ork better%
Ho. 3an Colors-
0ou8ll notice that throughout this post )e8ve used color schemes )ith
five different colors% 'ive is a good number: it gives plent& of options
162
_____________________________________________________________
for illustrating the concepts discussed here and it is a )orkable
number in a design% But feel free to use more or fe)er colors in &our
o)n schemes%
- lot of )ebsites might have onl& three colors% 6thers onl& t)o% -nd
some might have eight or ten I)hich is a lot trickierJ% 3+periment* and
use as man& or fe) colors as &ou need% But &ou ma& )ant to start
)ith a palette of five* and then add or subtract as &ou see fit and as
&ou progress%
The easiest )a& to add a color is to start )ith a predefined traditional
color scheme and go from there% This gives &ou at lease a bit of
direction as far as )hich other colors to consider%
Conclusion
We8ve reall& onl& touched on color theor& in this article% Specialists
out there have spent literall& &ears refining their abilit& to choose the
appropriate colors for the situation%
The best )a& to learn ho) to create beautiful color schemes is to
practice% 4reate a scheme ever& da&% 0ou can either start )ith
automated tools or Eust fire up Photoshop and begin% /f &ou come
across a particularl& beautiful or striking color* tr& creating a scheme
around it%
163
_____________________________________________________________
Take advantage of one of the man& )ebsites out there that let &ou
upload &our color schemes and organi!e them for later reference%
The& make &our librar& more practical and easier to use in future%
;amer2n ;ha5man is a 5r2$essi2nal Web and gra5hic designer :ith
2'er 1 years 2$ e<5erience. She :rites $2r a number 2$ bl2gs* including
her 2:n* ;amer2n ;ha5man @n Writing. She9s als2 the auth2r 2$
Anternet !am2us& , Practical Guide t2 .ec2ming an @nline ;elebrity.
164
_____________________________________________________________
&s +ohn The Client Dense or Are ,ou 'ailing
Him-
.y Paul .2ag
eet 2ohn the client% 2ohn runs a reasonabl& large )ebsite% <e is a
marketer )ho considers himself smart* articulate and professional%
That said* he doesn8t kno) much about Web design* and so he needs
&our help% 2ohn comes to &ou )ith a clear set of business obEectives
and asks for a Fuote% But )hat happens ne+t leaves 2ohn confused*
frustrated and e+tremel& unhapp&%
$%plain Wh ,ou Are As2ing About 3one
Before giving 2ohn his Fuote* &ou ask a little more about the proEect%
-fter chatting for a fe) minutes* &ou ask him about his budget% - fair
Fuestion* &ou think% -fter all* &ou could approach the proEect in so
man& )a&s%
Without kno)ing the budget* kno)ing )here to begin is impossible%
/n &our mind* building a )ebsite is like building a house% Without
kno)ing the budget* &ou can8t possibl& kno) ho) man& rooms the
client can afford or )hat materials &ou should use to build%
2ohn* on the other hand* is instantl& suspicious% Wh& )ould &ou )ant
to kno) about his budget> The onl& reason he can think of is that &ou
165
_____________________________________________________________
)ant to make sure &ou don8t charge him less than )hat he is )illing
to give% Besides* he doesn8t reall& kno) his budget% <o) the heck is
he supposed to kno) ho) much a )ebsite costs>
2ohn leaves* determined to find a Web designer )ho doesn8t )ant to
take advantage of him% 'ortunatel& for &ou* all of the other designers
he speaks )ith also neglect to e+plain )h& the& need to kno) about
his budget* and so &ou manage to )in the proEect after all%
+ustif ,our /ecommendations &n *anguage +ohn
Can #nderstand
6nce &ou have )on the Eob* &ou arrange a kick-off meeting to nail
do)n the specifications% <o)ever* 2ohn instantl& regrets his decision
to hire &ou because his )orst fears have been confirmed% /n his e&es*
&ou are all of a sudden tr&ing to sFuee!e more mone& out of him as
&ou blab on about the importance of usabilit& and accessibilit&% 2ohn
doesn8t care about disabled users% <e doesn8t e+pect disabled users to
visit his )ebsite an&)a&%
-nd as for usabilit&* surel& the Eob of the Web designer is to make the
)ebsite usable% Wh& do )e need e+pensive usabilit& testing> <e is
prett& certain that usabilit& testing involves e+pensive things like
cameras* labs and t)o-)a& mirrors% 0ou thought &ou had e+plained
these issues clearl&% 0ou spoke of W4-9 "* and &ou mentioned 2akob
1ielsen% 0ou are beginning to )onder if 2ohn is a bit thick%
166
_____________________________________________________________
Perhaps if &ou had talked about accessibilit& in terms of assessing
search engine rankings and testing usabilit& as a )a& to increase
conversion* then 2ohn might have listened% -s it is* 2ohn puts his foot
do)n and refuses to pa& for an& of these Aunnecessar& e+tras%C
&nclude +ohn &n The Process
0ou )alk a)a& from the kick-off meeting pleased to have a signed
contract% But that feeling in the pit of &our stomach tells &ou that this
might be another one of those proEects% ,egardless* &ou tr& to be
optimistic* and &ou dive into the design process% -lmost immediatel&*
&ou get a phone call from 2ohn asking if there is an&thing for him to
see% 0ou e+plain that it is still earl& in the process and that &ou are not
read& to present an&thing% 2ohn sounds disappointed but resigned%
- short )hile later* &ou are read& to present the design to 2ohn% 0ou
are pleased )ith the result% /t took &ou a lot more time than &ou had
budgeted for* but it )as )orth it% The final design is e+tremel& eas& to
use and )ill make for a great portfolio piece%
When 2ohn sees the design* he is horrified% 'rom his perspective* &ou
have entirel& missed the point% The design clashes )ith his offline
marketing materials and doesn8t hit the right selling points% -lso* he is
convinced that his suppliers )ill hate it and* although the& are not his
end users* their opinion matters%
167
_____________________________________________________________
-fter a tense conference call* &ou feel demorali!ed but have struck a
compromise that hopefull& )ill make 2ohn happ&% 0ou )onder in
hindsight )hether sho)ing 2ohn some of &our initial ideas and
sketches )ould have been better% Perhaps &ou should have presented
a )ireframe first%
$ducate +ohn About Design
-fter much agoni!ing and compromise* &ou are once again read& to
present to 2ohn% 2ohn is much happier )ith the ne) design and feels
it is heading in the right direction% <o)ever* he does have some
concerns% 'or starters* he has to scroll to see most of the content* and
&et )hite space takes up either side of the design% <e tells &ou to
move ke& content into this )asted space% -lso* as he thinks about his
&oung male target audience* he reali!es that the color scheme is too
effeminate* so he tells &ou to change it to blue%
While 2ohn feels some)hat happier* &ou feel crushed% 0ou feel as
though he is tr&ing to do the Eob for &ou% The instructions to move
this there and change this color to that makes &ou feel like &ou have
been reduced to pushing pi+els%
B& this point* &ou are sure the client is dim* and no) &ou Eust )ant
him to sign off on a design% -t no stage do &ou think to ask 2ohn )h&
he is reFuesting these changes% Perhaps if &ou had appreciated his
thinking* &ou could have e+plained concepts such as screen resolution
and suggested an alternative to corporate blue* )hich is so over-used
168
_____________________________________________________________
on the Web% /nstead* &ou )ash &our hands of the design and Eust give
2ohn )hat he )ants%
Communicate With +ohn /egularl
1o) that the design is complete* &ou turn &our attention to building
it% 2ohn certainl& )on8t care about &our code% 1o) &ou can finall& do
things right%
/t8s a big Eob and takes a lot of time% 3ven though &ou put too much
time into the design and )ashed &our hands of it* &ou still have &our
pride% 0ou are not about to cut corners )ith the code% -fter all* other
designers might look at it and Eudge &ouK
0ou )ork reall& hard* putting in more )ork than &ou probabl& should
have% 2ohn even manages to slip in some e+tra functionalit& at the
scoping phase* )hich turns out to be a pain in the butt%
'or his part* 2ohn is )ondering )hat8s going on% <e hasn8t heard from
&ou in )eeks% Surel& the )ebsite must be read& no)> <e decides to
email &ou to ask ho) things are progressing% 0ou repl& )ith a short
email telling him that ever&thing is progressing smoothl&% 0ou never
did like proEect management* and &ou are sure 2ohn )ould prefer that
&ou spend time building his )ebsite instead of )riting him detailed
reports%
169
_____________________________________________________________
2ohn receives &our email and is becoming increasingl& frustrated%
What does Aprogressing smoothl&C mean> <e )rites back asking for
an e+pected date of completion* and &ou repl& )ith a rough estimate%
The date comes and goes )ithout a )ord from &ou% -fter all* it )as
merel& an estimate* and several complications have dela&ed
completion b& a fe) da&s% 2ohn finall& loses his temper and calls &ou%
<e tells &ou that he has arranged a marketing campaign to coincide
)ith the launch date* and because he hadn8t heard from &ou* he
presumed ever&thing )as on schedule%
0ou defend &ourself* citing Ascope creepC and unanticipated dela&s%
But responding is difficult )hen 2ohn sa&s* A-ll / needed )as a )eekl&
email keeping me up to date on progress%C
$%plain +ohn0s !ngoing /ole
B& this stage* the relationship has broken do)n entirel&% 0ou finish
&our )ork* and the )ebsite finall& launches% Begrudgingl&* 2ohn pa&s
the invoice after dela&ing it for as long as possible% What ama!es &ou
most is 2ohn8s pronouncement that he is bitterl& disappointed )ith
the result% <o) can that be )hen &ou gave him e+actl& )hat he asked
for> This gu& isn8t Eust thick: he8s a EerkK
6f course* 2ohn sees things differentl&% <e came to &ou )ith a list of
his business obEectives* and the )ebsite has failed to meet an& of
them% <e had hoped to launch the )ebsite* )atch it achieve his
170
_____________________________________________________________
obEectives and then move on to the ne+t proEect% /nstead* after an
initial spike in interest* the number of users and inFuiries dropped
over time* and the )ebsite stagnated%
What 2ohn does not reali!e is that )ebsites need continued love and
support% 0ou cannot build a )ebsite and then abandon it% 2ohn has to
nurture it b& adding ne) content* engaging )ith visitors and planning
for ongoing development% /f onl& someone had told him%
The 3oral !f The Stor
/t8s ama!ing ho) Fuick )e are to Eudge our clients% -s Web designers*
)e communicate and empathi!e for a living% 6ur Eob is to
communicate messages to our clients8 users% We create usable
)ebsites b& putting ourselves in the position of our users* )hich
allo)s us to design around their needs%
Wh&* then* do )e so often seem incapable of empathi!ing or
communicating )ith our clients> Perhaps it is time for us to appl& the
skills )e have cultivated as Web designers to our o)n customers%
Paul .2ag is the $2under 2$ >? Web design agency Headsca5e* auth2r
2$ the Website @:ners Manual and h2st 2$ a:ard-Winning Web design
52dcast .2ag:2rld.
171
_____________________________________________________________
172
_____________________________________________________________
Ho. To &dentif and Deal With Different
Tpes !f Clients
.y -2bert .2:en
/n business* being able to read people and Fuickl& get a sense of )ho
&ou8re dealing )ith is an invaluable skill% /t turns &our encounter )ith a
client into an opportunit& to catch a glimpse of the upcoming proEect
and ho) it )ill need to be handled% /t is one of the building blocks of
a professional relationship%
/n toda&8s digital age* the arena has shifted to the Web* and the online
office space that most freelancers inhabit limits personal interaction%
Though sussing out a client8s personalit& via online communication is
difficult* it still remains an invaluable tool in &our arsenal%
/n the freelancing field* &ou )ill encounter a range of client t&pes%
Being able to identif& )hich &ou are dealing )ith allo)s &ou to
develop the right strateg& to ma+imi!e &our interactions )ith them*
and it could save &our sanit&% Belo) is a list of the most common
personalit& t&pes and the tell-tale signs that )ill tip &ou off%
The Passi(e4Aggressi(e
This is the client )ho is ver& passive )hen &ou ask for initial input* but
)hen &ou submit the finished product* the& aggressivel& attack it*
173
_____________________________________________________________
demanding a lot of detailed changes* both maEor and minor% The& had
an idea of )hat the& )anted all along but kept it mostl& to
themselves% 3ven though the& sho)ed appreciation of certain ideas
and elements throughout the development process* do not e+pect
the passive-aggressive client to keep an& of them as the& send
revisions &our )a&%
&dentifing Characteristics
4ommunication is mostl& one-sided and unhelpful during
proEect development%
akes statements such as:
A/8m not reall& sure )hat )e8re looking for%C
A2ust do something that )ould appeal to us generall&%C
A0ou totall& missed the point of )hat )e )anted%C
Ho. to Deal With &t
Patience is ke&% 3+pecting the last-minute reFuests for revisions ma&
soften the blo) of the client8s aggressive behavior% Geep &our original
la&ered design intact so that &ou can easil& refine and change it later
Inot that &ou )ouldn8t* but it does happenJ% -lso* make sure &our
contract specifies a limited number of revisions%
174
_____________________________________________________________
The 'amil 'riend
This is the client )hom &ou have kno)n for &ears either through
personal or famil& interaction* and this connection has landed &ou the
Eob% The relationship )ill be tested and perhaps marred forever b&
)hat could ver& )ell be a nightmare of a proEect% This famil& friend
believes he deserves a AspecialC price and unbridled access to &our
)ork% The& )ill sometimes un)ittingl& belittle &our )ork or not take it
seriousl& because of their personal connection to &ou%
These clients are eas& to identif& becauseV )ell* &ou kno)
them%
akes such statements as:
A4ould &ou Eust thro) something together for me>C
A/ don8t )ant &ou to think that Eust because / kno) &ou
/ )ant &ou to cut me a deal%C
A0ou8re going to charge me )hat>K But )e go )a&
backKC
Ho. to Deal With &t
The )a& to deal )ith this client depends on ho) )ell &ou kno) them
and ho) much &ou value &our relationship )ith them% But remember
that an&one )ho )ould take advantage of such a relationship is not
175
_____________________________________________________________
trul& a friend* so respond accordingl&% -n honest approach could end
up saving the relationship% But start off )ith a professional* not
personal* tone* and the& ma& follo) &our lead% 6f course* if &ou trul&
value the relationship* &ou ma& )ant to pass on the Eob altogether%
The #nder45aluer
=ike the famil& friend described above* this client devalues &our
creative contributions% But there is a difference: &ou do not actuall&
kno) this person% There is no rationale for their behavior% The& feel
the& should get a Afriend8sC pricing rate not because the& )ant to be
friends )ith &ou* but because the& do not see &our )ork as being
)orth that muchV even if the& couldn8t do it themselves% 1ot coming
from a creative background or even having had e+posure to the arts
can mar someone8s appreciation of the )ork that &ou do% -fter &ears
in our field* )e make it look eas&* and that is )hat the under-valuer
sees%
Does not respond to Fuestions in a timel& fashion%
A/t8s not like it takes much effort on &our part%C
A4ouldn8t &ou Eust thro) something together for me>C
A<o) hard can this reall& be>C
176
_____________________________________________________________
Ho. to Deal With &t
4onfidence is ke& here% 0ou kno) )hat &our )ork demands and ho)
)ell &ou do &our Eob% The under-valuer )ill recogni!e this confidence%
Don8t back do)n or concede a point to the client )hen discussing
&our role in the proEect% Standing firm )ill establish the professional
and respectful tone &ou deserve% /f the client does not respond in
kind* cut &our losses and decline their proEect%
The )it4Pic2er
This client is never full& satisfied )ith the )ork &ou do and constantl&
picks on minor details here and there that the& dislike and )ant
changed% Do not be surprised if the& ask &ou to change these same
details over and over ad nauseam% /t is not a sign of disrespect Ias it is
)ith the other clientsJ* but simpl& the nature of the person% The& ma&
have been burned in some other proEect and are no) unsatisfied )ith
ever&thing in their path* including &our )ork%
4omplains almost constantl& about unrelated things%
Personal outlook comes )ith a scathing bite%
A<o) hard is it reall& to Wfill in the blank )ith an& rantX>C
177
_____________________________________________________________
A/8m not sure about this element here% /t Eust doesn8t
popKC
A/ don8t think &ou8re reall& getting it%C
Ho. to Deal With &t
6nce again* patience is important Iespeciall& if &ou have some sadistic
reason for taking on nit-picking clientsJ% Tr& to detach &ourself from
the proEect as much as possible* so that the constant nit-picker& does
not affect &ou personall&% /t is eas& to feel hurt or get defensive )hen
&our )ork is repeatedl& Fuestioned* and &ou ma& begin to doubt &our
skill% But understand that this is not about &ou or &our talent( it is
simpl& a personalit& trait of the person &ou are dealing )ith% -nd once
again* protect &ourself in the contract%
The Scornful Sa(er
This client has similarities to the nit-picker and under-valuer but is
actuall& impressed )ith &our )ork and skill set% The& critici!e &ou
merel& to undermine &our confidence in an attempt to lo)er &our
pricing rate% Bnlike some other client t&pes* the scornful saver
understands creative people and their processes% But the& are cheap
and manipulative* and their scheme ma& have )orked in their favor
once or t)ice in the past% So* the& continue to subtl& abuse the
people the& hire in the hope of saving ever& last penn&%
178
_____________________________________________________________
4ompliments al)a&s come )ith a less-than-flattering Fualifier%
Takes time to respond to Fuestions* sometimes making &ou
ask more than once%
A/ reall& like )hat &ou8ve done overall* but /8m unsure
about one or t)o things%C
A0ou ma& not have gotten e+actl& )hat )e8re looking
for* but &ou8re close%C
Ho. to Deal With &t
6nce again* it is all about confidence% <aving a solid understanding of
&our field and being confident in &our kno)ledge and abilities )ill
keep this client8s manipulation in check% Standing &our ground and
even calling the client on some of their tactics could shift the balance
of po)er over to &ou% Be prepared to )alk a)a& from the proEect if
the disrespect and manipulation continues% There )ill be other
proEects and other clients%
The 6&4Could4Do4This43self74er
Where to beginV When this client farms a proEect out to &ou* the&
make clear to &ou that the& kno) ho) to do )hat the&8re hiring &ou
to do but the& Eust don8t have the time to actuall& do it% The& ma& be
179
_____________________________________________________________
)orking at a firm or as an entrepreneur( either )a&* &ou are there to
pick up their slack% /f the&8re at a firm* &ou could be in for an
interesting situation( the& )ere likel& hired for their particular st&le
and proposals* and no) &ou )ill have to please t)o sets of people:
the person )ho hired &ou and the people )ho hired him%
Will generall& be Ior lookJ hectic and rushed%
4ommunication from them often takes the form of short
bursts of information%
A/ could easil& handle this if m& schedule )eren8t so
full%C
A,eall&> 1ot sure that8s the direction / )ould8ve gone in*
but )hatever%C
A,emember* &ou are filling m& shoes* and the&8re prett&
big%C
Ho. to Deal With &t
The A/-4ould-Do-This-&selfC-er )ill likel& have recogni!ed &our
talent and skill right a)a&* )hich is )h& the& hired &ou% The& merel&
)ant &ou to kno) that this proEect Iand thus &ouJ is not above their
abilit&% -nd though these reminders )ill grate on &ou periodicall&*
180
_____________________________________________________________
the& )ill let &ou run )ith &our ideas* perhaps offering suggestions or
feedback on the final design%
The Control 'rea2
This client desperatel& needs to micro-manage ever& little detail of
the proEect* no matter their Fualifications% 1o decision ma& be made
)ithout their e+plicit input and approval% This tiresome person forces
himself into &our )orkflo)* heedless of either invitation or protest*
and demands access to &ou at )him% The concepts of boundaries and
strict )ork processes are easil& lost on the control freak* )ho
constantl& disrupts the flo)% The& ma& also believe &ou lack
dedication or preparedness* further reinforcing their need to interfere%
/nitial contact is long* detailed and one-sided* )ith little input
sought from &ou%
0our input remains unsought as the proEect pushes for)ard%
AThis )a& )e can keep in contact "?O; in case &ou have
an& Fuestions* or / do%C
A/ reall& kno) best )hat is right for the proEect and
)hat is not%C
181
_____________________________________________________________
AWhat do &ou mean* /8m distracting &ou> / am the onl&
thing keeping this proEect on trackKC
Ho. to Deal
/f &ou absolutel& must take on this client* for )hatever reason* resign
&ourself to the fact that &ou )ill not be steering at an& point% 0ou )ill
have to detach &ourself from the )ork because &ou )ill have no
control at all% 0ou )ill merel& be constructing* not designing* so Eust
let go and let it happen% 0ou ma& )ant to e+clude this proEect from
&our portfolio%
The Dream Client
This client* )idel& dismissed as a m&th* does in fact e+ist and
understands the full scope and artistr& of &our )ork% The& value &our
role and creative contributions and )ant &ou in the driver8s seat as
soon as the proEect gets under)a&% The& are timel& )ith responses
and pa&mentsV pa&ments that the& did not AnegotiateC but rather
accepted for )hat the& are% The& reflect on &our suggestions and have
confidence in &our capabilities%
/s enthusiastic about the proEect and &our involvement in it%
4ommunication sho)s a)areness of and respect for &our role%
182
_____________________________________________________________
A<ere8s the brief )e prepared% The rest is prett& much
up to &ou%C
AWe like )hat )e8ve seen and trust &ou8ll do great
things for us%C
Ho. to Deal
Don8t bragK 2ust enEo& the ride and hold on to them for as long as &ou
possibl& canK
Wrap4up
Being able to identif& the t&pe of client &ou are dealing )ith )ill
prepare &ou for the Eob ahead% /t )ill also help &ou decide )hether to
accept the Eob in the first place% 0our contract )ill reflect the po)er
d&namics of the proEect* so the more &ou kno) about the client* the
better able &ou )ill be to adEust the contract as necessar&% <ave &ou
come across other t&pes of clients in &our freelancing career> Please
let us kno) in the comments%
-2bert .2:en is an emerging auth2r* celebrated 52dcaster and 52et*
and m2st recently the c2-!2under and imaginati'e c2-;2ntribut2r 2$
the creati'e design and bl2gging du2 at the ,rbenting !reebies .l2g
and =ead Wings =esigns.
183
_____________________________________________________________
Ho. To /espond $ffecti(el To Design
Criticism
.y ,ndre: !2llett
Winston 4hurchill once said: A4riticism ma& not be agreeable* but it is
necessar&% /t fulfills the same function as pain in the human bod&% /t
calls attention to an unhealth& state of things%C ,egardless of )here
&ou )ork or )ho &ou )ork for* being able to take criticism is part of
the Eob% Whether &ou8re getting feedback from &our boss or a client*
having a proper perspective on criticism and a sound understanding
of ho) to use it effectivel& is important%
184
_____________________________________________________________
Bnfortunatel&* not man& people enEo& criticism% /n fact* man& have
developed a thick skin and take pride in their abilit& to brush it off
and move on% <o)ever* despite its negative connotation* criticism
often presents an e+cellent opportunit& to gro) as a designer% Before
&ou can respond effectivel&* &ou need to understand )hat those
opportunities are%
=et8s look at some important aspects of getting constructive criticism:
#nco(er blind spots
Doing &our o)n thing is eas&* but &our habits )ill eventuall&
185
_____________________________________________________________
become deepl& ingrained and hard to break% 4riticism gives
&ou a vital outside perspective on &our )ork* uncovering
potential areas for improvement that &ou are unable to see b&
&ourself%
Challenge ourself
'eedback challenges &ou to be a better designer% ,ather than
settle for &our o)n standards* &ou are pushed to take &our
)ork to the ne+t level%
De(elop communication s2ills
/f nothing else* dealing )ith a critic can dramaticall& improve
the )a& &ou communicate L an essential skill for an&
successful design career%
!utside moti(ation
4onstructive criticism often gives &ou the kick in the butt &ou
need to learn a ne) design skill or techniFue% Self-motivation
is great* but ever&one could use a hand from time to time%
A lesson in humilit
1ever underestimate the importance of humilit&% -lthough
criticism can bruise the ego* it keeps &ou grounded* making
&ou easier to )ork )ith and more open to learning from
others%
- positive vie) of criticism isn8t enough% 0ou also need to kno) ho)
to respond effectivel& )hen it comes% <ere are eight tips &ou can use
to start making the most of criticism toda&%
186
_____________________________________________________________
Ha(e The /ight Attitude
Design is subEective and* like an& art form* has no rulebook% 1o one
can tell &ou )hat is ArightC and A)rongC )ith &our )ork* but that
doesn8t mean &ou can completel& ignore &our boss or client8s opinion
either% <o)ever* b& taking criticism and feedback )ith the right
attitude* &ou can use it to &our advantage and even enEo& it%
3ver&one looks at design through a filter shaped b& personal
e+perience* and this filter is usuall& ver& different from &our o)n%
While &ou ma& have a degree in design and 1# &ears of e+perience*
not ever&one )ill agree )ith &our Ae+pertC opinion* so don8t e+pect
them to% The important thing is to have a proper attitude from the
beginning% 3+pect others to disagree )ith &ou* and be open to ne)
perspectives% -lign &our e+pectations and understand that criticism is
part of the process% While harsh criticism can cut deep and even scar*
it can also motivate* instruct and do all of the good things mentioned
above%
=ast* but not least* tr& to remove &ourself from the criticism and vie)
it as a commentar& on &our actions or )ork and not as a personal
attack% While easier said than done* this distinction is ke& to
responding effectivel&% /f &ou can rise above the criticism and respond
calml& and effectivel&* &ou )ill not onl& earn the admiration of &our
critic but feel better doing it% Set the right e+pectations* understand
the benefits* remove &ourself from the eFuation* and remember*
attitude trul& is ever&thing%
187
_____________________________________________________________
#nderstand The !b?ecti(e
4learl& identif&ing the goal of a design before &ou share it )ith others
is al)a&s a good idea% -re &ou sho)ing it off to mom for some fridge
time> /s it a client )ho8s tr&ing to solve a business challenge through
design> 6r perhaps &ou8re consulting a friend )ith no e+perience or
stake in the proEect%
,egardless* a vague or confused obEective )ill al)a&s elicit off-target
feedback* so make sure ever&one involved Agets itC before taking
action% To respond effectivel& to criticism* &ou need to be sure that the
critic understands &our goals% Be specific% Present &our obEective in
clear and concise terms( the criticism &ou receive )ill be targeted and
actionable as a result%
188
_____________________________________________________________
189
_____________________________________________________________
Chec2 ,our 'irst /eaction
'or most people Ime includedJ* the first reaction to criticism is to get
defensive or even lash out% /f this sounds like &ou* take time to
develop the habit of taking a deep breath and counting to 1# before
responding% This simple &et effective method gives &ou a chance to
regain composure and allo) logic to prevail over emotion% The last
thing &ou )ant to do is get overl& emotional and give a response that
&ou )ill later regret% ,emember* in most cases* &our critic is onl&
tr&ing to help &ou%
Despite the initial sting* &ou need honest feedback to become a
better designer% This is especiall& important for enthusiasts or
beginners in the trade% -ll visual arts have an intrinsic re)ard
mechanism: the more &ou create* the more &ou sense the progression
of &our skill%
/t8s a loop that keeps all artists going* and )hen this euphoric
moment is crushed b& accurate and much-needed criticism*
recovering ma& be difficult% Geep in mind* though* that &our skill and
perceptiveness in this field )ill mature over time% /f &ou have the right
attitude to begin )ith* the proper response )ill follo)%
Separate Wheat 'rom The Chaff
Bnfortunatel&* not all criticism is constructive% Some people are in a
bad mood* bitter or Eust plain negative and )ill take an& chance to put
190
_____________________________________________________________
others do)n% Some are also ine+perienced or unFualified to give &ou
valuable feedback% While design is subEective* being able to separate
useful feedback from cheap shots and misinformation is important%
<o)ever* this is not an e+cuse to ignore comments that &ou don8t like%
Bnless &ou believe a critiFue )as given in malice or ignorance* don8t
be Fuick to dismiss it%
<ere are a fe) tips to distinguish bet)een the t)o:
Specific.
:aluable feedback is al)a&s specific% /t is clear* logical and
defined% AThe logo is ugl&C or A/ don8t like the color choiceC are
e+amples of useless criticism Iif &ou get a lot of this* see #;
belo)J%
Actionable.
4onstructive criticism should enable &ou to take immediate
action% 0ou should come a)a& )ith a clearer idea of ho) to
improve the concept and the path to follo)%
!b?ecti(e.
Bseful feedback is unbiased% /t gives &ou a uniFue perspective
)ithout an ulterior motive% 6bEective criticism )ill al)a&s be
even-tempered and appropriate%
*earn 'rom &t
This step is possibl& the hardest one in this learning e+perience but b&
far the most important% 'or criticism to serve its purpose* &ou need to
191
_____________________________________________________________
act on itK Don8t Eust go back to business as usual( make an effort to
improve% The great thing about criticism is that it uncovers our blind
spots* )eaknesses that onl& others can see% When &ou8re confronted
b& criticism* don8t let the opportunit& pass: )rite it do)n and do
)hatever it takes to change for the better%
/f someone critici!es &our cop&)riting skills* start )ith bab& steps%
,ead a relevant blog once a )eek% Bu& a book% Practice )riting
headlines for 1# minutes each da&% Small victories are often the
Fuickest path to success% 3ventuall& &ou )ill improve and have &our
critic to thank%
*oo2 'or A )e. &dea
/f &ou can8t learn an&thing ne)* look for a ne) idea% - different
perspective gives &ou a chance to e+amine &our )ork from a
vie)point that &ou )ould never have considered other)ise% 2ust as
&ou get inspiration from a galler& or another talented designer* &ou
can find ideas and inspiration in constructive criticism( seeing it Eust
reFuires &ou to step back% Be curious* and approach the criticism
obEectivel&( it could be incredibl& useful%
4riticism is sometimes the cold sho)er &ou need to )ake up and hit
the A,esetC button on a proEect% ,emember* &our )ork is based on
&our o)n preconceived notions of )hat the client )ants* and &ou
should al)a&s be open to the possibilit& that &ou have missed the
mark% /n the event that &ou do need to start over* discuss the
192
_____________________________________________________________
obEectives and e+pectations right a)a&% 4larif&ing this information in
the first place could have prevented a re-do altogether%
Dig Deeper When )ecessar
-t some point* ever&one has received vague* unclear or unactionable
feedback% /t8s a part of life% Bnfortunatel&* unless &ou take the
initiative* this t&pe of feedback is more or less useless to ever&one
involved% <o)ever* if &ou8re )illing to dig a little deeper* &ou ma&
uncover things that no one else )as )illing to tell &ou% Start b& asking
open-ended Fuestions that get to the core of the issue* Fuestions like*
A/ )ant to understand &our point of vie)% 4ould &ou please provide
more detail>C or A<o) can / improve>C -sk for specifics and* above all
else* honest&% These kinds of Fuestions )ill help keep communication
lines open and allo) &ou to )alk a)a& )ith practical and concrete
advice%
193
_____________________________________________________________
/f &ou feel uncomfortable asking &our critic for more detail* or if the&
are un)illing to provide it* approach someone &ou respect and trust
and ask them )hat the& think% Do the& agree )ith the criticism> Wh&
or )h& not> -ssuming this person is honest and kno)ledgeable* &ou
should be able to get the ans)ers that &ou need to move for)ard%
194
_____________________________________________________________
Than2 The Critic
Whether the criticism &ou receive is genuine or do)nright rude* make
a point of sa&ing AThank &ou%C Thanking even &our harshest critics can
create a lasting impression* keep &ou humble and open the door to
additional feedback in the future% 3+pressing gratitude )ill also make
&ou feel better about the e+perience and help &ou alleviate an& innate
avoidance of feedback and criticism &ou ma& have% /f &ou have
follo)ed the guidelines above and recogni!e the true value of the
criticism &ou have received* sa&ing AThank &ouC shouldn8t be too
difficult%
/f &ou respect the person and their opinion* go one step further and
develop a long-term mentoring relationship )ith them% uch like in
the old da&s of craftsman and apprentice* an individual )hose opinion
&ou value and hold in high esteem can go a long )a& in developing
&our skills and abilities% /f nothing else* a mentor can keep &ou
accountable to &our )ork and help &ou continuall& improve%
Do &ou have a techniFue to share or a real-life e+ample of criticism in
action> =et us kno)K
,ndre: !2llett is a small-.usiness mar7eting direct2r and $2under 2$
;2nce5t !eedbac7* a c2mmunity 2$ designers and mar7eters dedicated
t2 sharing ideas and $eedbac7 2n design 5r2Fects.
195
_____________________________________________________________
Web Designer0s 1uide to Professional
)et.or2ing
.y Ste'en Snell
Professional net)orking is a critical component to a successful career
as a designer% Whether it be for finding ne) clients or identif&ing
opportunities for gro)th and improvement* a strong net)ork of
contacts is e+tremel& valuable% /n this article* )e8ll take a detailed look
at the subEect of net)orking* the benefits it presents and tips that can
be used in &our o)n net)orking efforts%
1et)orking involves building connections and relationships )ith
people from various backgrounds and professions* including other
designers and developers% This article )as )ritten )ith Web designers
in mind* but the principles are generall& applicable to an& profession
L although the specifics ma& var&%
Wh )et.or2-
/f &ou haven8t been activel& involved in net)orking* &ou ma& be
)ondering )h& &ou should even bother )ith it% Before )e get into the
tips and suggestions for net)orking* let8s take a look at some of the
benefits%
196
_____________________________________________________________
/eferrals
Word-of-mouth advertising is a leading source of business for man&
designers% Simpl& put* if more people kno) about &ou and &our
services* &ou8ll have more opportunities for referrals% B& getting
connected and sta&ing in touch )ith those in &our net)ork &ou )ill be
on their mind )hen someone the& kno) is in need of the services that
&ou provide% - potential client )ho gets a personal recommendation
from someone )ho kno)s &ou or has )orked )ith &ou )ill be much
more likel& to become a pa&ing client than someone )ith another
t&pe of lead%
uch of the net)orking done b& designers is )ith others )ho offer
the same or ver& similar services% 6btaining referral business through
a net)ork of designers is more common than &ou might think%
-lthough &our services ma& have some overlap )ith another designer
in &our net)ork* &ou8re each going to have some uniFue strengths
and )eaknesses* as )ell as var&ing levels of e+perience )ith different
t&pes of clients% -dditionall&* there could be some t&pes of )ork that
others simpl& don8t like to take* or situations )here schedules and
deadlines make it impossible for a designer to )ork )ith a particular
client% /n situations like these* it8s ver& common for the designer to
recommend a friend or colleague%
Collaborations
3speciall& for freelancers and independent designers* having a strong
net)ork opens up countless possibilities for collaborating% This could
197
_____________________________________________________________
be a one-time thing that arises from the needs of a particular proEect*
or it could be an ongoing collaboration% /deall&* &our net)ork )ill
include a number of people )ho have skills that complement &ours%
This )ill allo) &ou to )ork )ith others and each focus on )hat &ou do
best%
Problem4Sol(ing
/f &ou trust and value the people in &our net)ork* &ou )ill not hesitate
to turn to them )hen &ou need some advice or help )ith a problem%
Do &ou kno) someone )ho has been through a similar situation and
could give &ou some advice from their o)n e+perience> 'or designers
and developers* this could be a technical issue* such as dealing )ith a
coding challenge or determining the best solution to a client8s needs*
or it could simpl& be a need for guidance in some aspect of running a
freelance business%
Stack 6verflo) is a collaborativel& edited Fuestion-and-ans)er
)ebsite )here programmers can solve problems and net)ork%
198
_____________________________________________________________
'uture !pportunities
- professional )ho is )ell-connected )ill t&picall& have more
opportunities than a comparabl& skilled professional )ho is not )ell-
connected% 0ou ma& have no pressing reason toda& for a strong
net)ork of contacts* but &ou could run into a situation in future )hen
having others &ou can count on )ould be invaluable%
'or freelance designers* ma&be &ou don8t )ant to freelance forever*
and )hen &ou8re read& to start looking for emplo&ment the process
)ill be much easier if &ou alread& have an established net)ork that
kno)s &ou and &our Fualit& of )ork% 0es* &ou could )ait to do &our
net)orking )hen &ou8ve officiall& stopped freelancing* but &ou8ll be
better off if &ou have some established relationships before then%
Help !thers
So far* ever&thing )e8ve discussed has focused on )hat &our net)ork
can do for &ou* but true net)orking is not one-sided% 6ne of the
benefits of being )ell connected is that &ou )ill have plent& of
opportunities to help others% Perhaps &ou )on8t be the freelancer )ho
is looking for emplo&ment* but ma&be &ou )ill be the contact )ho
puts a freelancing friend in contact )ith someone )ho8s looking to
hire a designer%
199
_____________________________________________________________
'riendships
-side from all of the professional benefits* net)orking can be a fun
)a& to meet ne) people and build friendships% This can be especiall&
valuable for freelancers and others )ho )ork from home% 1et)orking
ma& be one of the fe) opportunities &ou have to interact )ith other
professionals in &our field L not being able to go to an office ever&
da& to interact )ith co-)orkers%
)et.or2ing Tips for Designers
1o) that )e have looked at some benefits of net)orking* here are
some tips &ou can put into practice%
"e Accessible
6ne of the ke&s to being )ell connected is making it possible for
others to reach &ou% Sure* net)orking is about &our efforts to meet
others* but it also involves being accessible )hen people )ant to get
in touch )ith &ou% This could include having a contact form or email
address on &our portfolio )ebsite* being involved at social net)orks*
linking to &our social profiles from &our portfolio and responding to
people )hen the& reach out to &ou%
See2 3utual "enefit
The most successful t&pes of net)orking relationships are the A)in-
)inC ones L in )hich both parties benefit in one )a& or another% /f
200
_____________________________________________________________
&ou )ant net)orking to have a maEor impact on &our business or
career* make the effort to find opportunities for mutual benefit% These
situations )ill encourage both parties to keep the relationship strong
and improve it in an& )a& possible* bringing results that could not be
accomplished individuall&%
'inding )in-)in situations is not eas&* but the& )ill present
themselves )hen &ou get to kno) others ver& )ell and &ou all can see
each other8s uniFue strengths* abilities and opportunities% These t&pes
of net)orks )ill more likel& lead to stronger* long-lasting
relationships%
"log
an& designers maintain a blog on their portfolio )ebsite or other
domain% Blogging is not onl& effective in attracting potential clients
but is also a great )a& to get involved )ith other designers and build
a net)ork% Blogging is personal in nature and involves t)o-)a&
communication* making it e+tremel& conducive to interaction%
Bloggers tend to read other blogs as )ell* and the design blogging
communit& is ver& active% Blogging is a great )a& to get e+posure and
open up opportunities to meet other professionals%
'ocus on Depth of /elationships
=ike Eust about an&thing else in life* Fualit& is better than Fuantit&%
While having connections )ith a )ide variet& of people is good* &ou8ll
201
_____________________________________________________________
find that &our most significant benefits from net)orking come from
&our closest relationships% -s &ou connect )ith people* get to kno)
them on more than a superficial level% The people )ith )hom &ou
build strong relationships )ill likel& become part of the Ainner circleC
that &ou reach out to on a consistent basis%
"e Proacti(e
Don8t sit back and )ait for others to approach &ou% 9et involved in
social net)orks* go to local net)orking events* attend seminars and
approach people )ho &ou8d like to get to kno)% /f &ou8re at an event
or using an online social net)ork* the other people are there for the
same reasons as &ou L so don8t be intimidated b& the thought of
approaching them%
This could also include commenting on design blogs* participating in
forums and )riting guest articles% 0our net)ork )ill be a valuable part
of &our career* so be proactive and )ork to make it something special%
Hno. What ,ou0re *oo2ing 'or
/f &ou8re proactivel& getting to kno) other professionals* it helps to
kno) )hat &ou8re looking for in potential contacts% This allo)s &ou to
identif& the right people to approach* making &our net)orking efforts
more effective and efficient% 'or e+ample* if &ou8re a student )ho )ill
be graduating in a &ear and looking for a Eob as a designer* it )ould
be beneficial to connect )ith people )ho run design studios or
202
_____________________________________________________________
people )ho )ork at places that ma& be hiring designers% /f &ou8re a
designer )ho doesn8t do an& development )ork* it )ould be
beneficial to kno) some good developers )ho &ou could team up
)ith on proEects%
Think of &our strengths* )eaknesses and situation% Who or )hat
)ould help &ou get to )here &ou )ant to be> /dentif& people )ho are
in these ideal positions and get to kno) them%
Hno. What ,ou Ha(e to !ffer
2ust as important as kno)ing )hat &ou8re looking for in others* &ou
should also be a)are of )hat &ou can offer others and )h& &ou )ould
be a valuable member of their net)ork% Think about )hat is uniFue
and special about &our skills and the opportunities &ou could present
to others%
6f course* this doesn8t mean &ou should go around telling ever&one
e+actl& )hat &ou can offer them and )h& the& need &ou( but having a
clear sense of &our o)n )orth helps &ou identif& ideal situations of
mutual benefit and ho) to present &ourself in )a&s that make &ou
stand out%
)et.or2 &ndirectl
Some of &our best contacts )ill not be people )ho &ou actuall& need
to keep in touch )ith% ,ather* &ou ma& have a contact )ho kno)s the
203
_____________________________________________________________
t&pe of person &ou8re looking for and can act as a gate)a& or
messenger to them% 0our net)ork becomes e+ponentiall& more
po)erful and valuable )hen &ou reali!e that &ou8re connected not
onl& to the people )ho &ou kno) directl&* but also to all of the people
)ho the& kno)* too%
The social net)orking )ebsite =inked/n is a good )a& to visuali!e this
concept% 0ou ma& be connected to 7# people on =inked/n* but each of
those people )ill be connected to others )ho &ou don8t kno)% /f each
of &our contacts is connected to another 7# people* &ou8re onl& one
person a)a& from some potentiall& valuable relationships%
Practicall& speaking* if &ou8re looking for someone )ith a particular
skill or e+perience* talk to others in &our net)ork to see )ho the&
kno) )ho ma& fit the description% /ndirect net)orking is often more
effective than direct* because it leverages the net)orks of others and
gives &ou opportunities to get recommendations from people &ou
trust%
Don0t Wait #ntil ,ou )eed Something
1et)orking is more effective )hen it8s not done under the pressure of
needing to produce immediate results% ,eaching out to &our friends
and contacts )hen &ou need something is natural* but having a large
and established net)ork that stands read& to help )hen the need
arises is more effective% 1et)orking onl& )hen &ou need something is
unlikel& to result in mutual benefit and could give others the
204
_____________________________________________________________
impression that &ou8re interested onl& in helping &ourself%
Help Whene(er Possible
<elping others and making &ourself a valuable contact and friend to
others is a big part of net)orking% 0ou )ill not al)a&s be in a position
to help* but avoid the temptation of helping others onl& )hen there8s
something in it for &ou% - net)ork of people )ho are )illing and
eager to help each other )ill be positive for ever&one%
Don0t 6#se7 People
When looking for the right people to build &our net)ork* thinking
onl& of )hat other people can do for &ou is all too eas&% But that8s not
an effective )a& to interact* and the& )ill often see through &our
efforts%
The best )a& to avoid using people is b& looking for situations in
)hich &ou can help them% B& emphasi!ing &our value to them rather
than ho) the& can help &ou* &ou8ll avoid seeing them onl& for )hat
the& have to offer% /f &ou focus on helping others* the& )ill likel& )ant
to find )a&s to help &ou in return%
Don0t *et )et.or2ing Hurt ,our Producti(it
-lthough professional net)orking should be an integral part of &our
)ork* it8s not going to put mone& in &our pocket directl&% 'reelancers
205
_____________________________________________________________
in particular need to sta& focused on providing services to clients in
order to generate the income that keeps them going% 1et)orking is
important* but it should not interfere )ith &our core operations%
6nline net)orks and email especiall& can be distractions% Develop a
s&stem that allo)s &ou to interact )ith others in a )a& that doesn8t
hinder &our )ork% 'or e+ample* rather than leaving &our email and
T)itter account open all da&* set specific times to check them% 3ach
person is different and has a )a& that )orks best for them* so find
one that allo)s &ou to net)ork )ith ma+imum benefit and )ith
minimum disturbance to &our productivit&%
Don0t Al.as $(aluate People
When &ou8re focused on strengthening &our net)ork b& making
valuable connections* it8s eas& to start measuring people b& )hat the&
can bring to the table% This is a dangerous habit because it )ill make
&ou reluctant to get to kno) some people because &ou don8t think
the& have much to offer%
Don0t Tr to "e $(er.here !nline
Plent& of opportunities are available to net)ork* particularl& online%
But &ou can be active in onl& so man& places* so don8t spread &ourself
too thin% /nstead* choose a fe) net)orking )ebsites and groups that
sho) promise* and &ou8ll find that &ou have more time to be active%
206
_____________________________________________________________
Being active in a fe) circles &ields better results than having limited
activit& in man& circles% This goes back to the need for Fualit& over
Fuantit& in building relationships%
Attend $(ents
Web designers and other online professionals are fortunate to have a
number of high-Fualit& conferences and events in their industr& that
provide opportunities to learn and net)ork% /f an event is taking place
in &our area* check it out% 6f course* if &ou8re )illing to travel* &ou
could attend events an&)here%
9J. Pa Attention to *ocal !pportunities
6ne of the traps of online net)orking is that it can cause &ou to miss
opportunities for face-to-face net)orking in &our local area% an&
localities have chamber of commerce events* business card
e+changes* seminars and other events at )hich to connect )ith local
professionals% Pa& attention to these activities in &our area in case the&
offer something that )arrants &our involvement%
Ste'en Snell has been designing :ebsites $2r se'eral years. He acti'ely
maintains a $e: bl2gs 2$ his 2:n* including =esignM.ag* :hich
regularly 5r2'ides articles and res2urces $2r :eb designers.
207
_____________________________________________________________
208
_____________________________________________________________
1roup &nter(ie.: $%pert Ad(ice 'or Students
and ,oung Web Designers
.y Ste'en Snell
6ur readers have reFuested that Smashing aga!ine conduct an
intervie) )ith industr& leaders on issues that are relevant to students
and those Eust starting off in their design careers% With the help of our
panel of 1@ designers* )e8ll dispense advice that should help ne)
designers get their careers off to a promising start% We8ve asked a fe)
different Fuestions of each of the designers( &ou8ll see all of their
responses belo)% 'irst* here is a list of the designers )ho participated%
<enr& 2ones IWeb Design =edgerJ
Wolfgang Bartelme IBartelme%atJ
4hris 4o&ier I4SS-TricksJ
4hris Spooner ISpoon9raphics* =ine"7J
Soh Tanaka
2on Philips ISp&re StudiosJ
Paul Boag IBoag)orld* <eadscapeJ
David =eggett ITutorial$* BS BoothJ
2acob 9ube ISi+ ,evisionsJ
3lliot 2a& Stocks
Brian <off IThe Design 4ubicleJ
Darren <o&t
Walter -pai IWebdesigner DepotJ
209
_____________________________________________________________
2acob 4ass I2ust 4reative DesignJ
Hach Dunn I6ne ight& ,oar and Build /nternetJ
Paul -ndre) ISpeck&bo& Design aga!ineJ
9. 'or students .ho aspire to .or2 in designA .hat
.ould ou recommend the stud-
Da(id *eggett
'inding a good universit&-level design program that interests &ou )ill
greatl& increase &our chance of finding a)esome opportunities do)n
the road* but it8s ver& beneficial to get e+perience before and outside
of &our education% 'ind proEects to help )ith* start &our o)n* read up
and appl& as much as &ou can )hile &ou8re learning on the side% The
e+tra e+perience never hurts* and at the ver& least &ou8ll get to see if
design is something &ou reall& enEo&%
2ust to clarif&* / have never taken an& higher education courses in
design* but / kno) that the kno)ledge &ou get in that environment is
valuable* as /8m sure others )ill suggest%
Wolfgang "artelme
Well* / guess the most important thing is Apractice* practice* practice%C
To improve the Fualit& of &our )ork* &ou have to keep pushing
&ourself further and further% B& the )a&* man& great artists are self-
taught% But /8m also convinced that a profound education )ill sharpen
210
_____________________________________________________________
&our skills and help &ou be able to Eudge )h& and ho) certain designs
)ork% Personall&* / studied A/nformation DesignC at the Bniversit& of
-pplied Science in 9ra!* focusing on all different aspects of design:
print and advertising* e+hibitions* Web design* usabilit&* photograph&
and film L )hich )ould give students a broad kno)ledge base and
make them more generalists than specialists%
:. Ho. does a student determine .hether design is
for them or the should pursue another career-
+acob 1ube
This is a Fuestion &ou have to ask &ourself% There aren8t an& set rules
or algorithms to determine )hether &ou should be a designer% The
important thing is to have passion for the )ork% 3ven mediocre
designers )ill be able to sustain themselves* but the&8ll have to )ork
e+tra hard to compete )ith more talented and e+perienced designers%
So* it all boils do)n to ho) much &ou )ant to be a designer and ho)
much &ou8re )illing to )ork at it and push for)ard% / )on8t sugar-coat
the current situation: the truth is that the industr& is saturated* and
there are a lot more designers than Eobs* so &ou have to be sure that
this is the profession &ou )ant to invest &our time in%
Henr +ones
/ think it8s all about passion% /f &ou find &ourself up late at night
211
_____________________________________________________________
)orking on design proEects Eust for the fun of it* then that8s a good
sign that design is right for &ou% / think one of the )orst situations in
life is hating )hat &ou do% =oving )hat &ou do means &ou8ll probabl&
be doing it and thinking about it even outside of class or )hen &ou8re
not being paid to do it% 0ou8ll constantl& be honing &our skills and
sta&ing on top of the latest technologies* )hich is ver& important for
designers%
Da(id *eggett
3ver&one has a uniFue situation* and / don8t mean to suggest the
follo)ing is al)a&s true: if &ou8re alread& a student at a universit& and
have no outside e+perience* it ma& be difficult to reall& pursue a
career in design% / sa& this onl& because personal friends of mine have
struggled to find Eobs in this current economic climate% <aving
e+perience and something to sho) for &our kno)ledge goes a long
)a&%
6ther)ise* be sure that &ou trul& enEo& )hatever &ou decide to
pursue% an& designers and artists /8ve met thoroughl& enEo& their
lifest&les* even )hen the&8re struggling to find )ork% This is not to sa&
that &ou should undervalue &our )ork* but if &ou enEo& &our career
)hen &ou8re not making mone&* then it8s probabl& a good match for
&ou%
212
_____________________________________________________________
Wolfgang "artelme
'irst and foremost* designing stuff has to be fun: &ou have to love
)hat &ou do% /f that8s not the case* look for something else% Secondl&*
&ou should* of course* have a decent measure of talent and
imagination% 3ven though &ou )ill learn man& skills in the course of
&our studies* )ithout talent and imagination* &our )ork )ill be at best
mediocre%
Chris Spooner
-s )ith an& career* if &ou8re passionate about the subEect* &ou8re set to
succeed% 4areers in the design industr& can seem e+citing( after all* all
&ou do is sit and color things in all da&* right> / think this dra)s in a
lot of people )ho ma&be haven8t been particularl& creative in the past
and see the career as eas&%
This t&pe of person might then find it difficult to be motivated to
learn the reFuired skills and to continue developing those skills
throughout their career% That8s not to sa& that if &ou )eren8t a creative
child* &ou can8t pursue a career in design% We all stumble across
different interests throughout our lives* so as long as &ou feel &ou
have a passion for design* go for itK
213
_____________________________________________________________
;. Ho. do ou balance education and .or2-
Kach Dunn
B& m& last estimate* / spend about three to four hours on client )ork
for ever& one hour of academic )ork% / generall& learn speciali!ed
skills more from client )ork than from academics% /t8s eas& to get
caught up in client )ork and blogging% The hard part is making sure
&ou don8t lose touch )ith the )orld around &ou% /nteracting )ith
clients and blog communit& members is certainl& social* but &ou need
to take a break and interact )ith Aregular college studentsC from time
to time% / consider it like mental deto+%
/8m convinced &ou must put in e+tra time on personal proEects to trul&
become competent in the Web design industr&% 9oing through the
motions during class and home)ork hours onl& leaves &ou behind%
The /nternet moves faster than an& standard academic schedule%
Geeping current and practiced is up to &ou%
+acob Cass
'inding the right balance bet)een famil&* friends* )ork and all of life8s
other misdemeanors )ill al)a&s be a challenge* no matter )hat &our
career% 0ou must set priorities and goals relative to )hat &ou )ant to
achieve and get out of life% -lthough / have no) finished stud&ing
Iformall&J* / could sa& that m& biggest challenge then )as finding
enough time to give high-Fualit& attention to all proEects* )hether
214
_____________________________________________________________
the& )ere educational* personal or for pa&ing customers% -t times* /
found this nearl& impossible* and to be honest a lot of m& universit&
and personal )ork suffered from m& commitments to pa&ing
customers% /n sa&ing this* / guess a lot of it comes do)n to having
priorities* goals and good time management%
<. Ho. did .or2 outside of our studies prepare
ou for our career-
Kach Dunn
-lmost all of our AcareerC success so far has been a direct result of
)ork done outside of studies% 4ollege is a great incubator for a
number of things other than academics% / value school for reasons
that are different than those of the average person% 4ollege has
helped me sociall&% Sam recentl& )rote an article that does a great Eob
of e+plaining more about our college philosoph& in relation to Web
design* titled The ,ole of 4ollege for Web Designers%
4ertain careers cannot start before graduation% =a)&ers* for e+ample*
can8t have hobb& clients )hile putting themselves through school: it8s
all or nothing% Web design isn8t limited b& credentials for entr&% Web
design is largel& portfolio-based% When8s the last time a client )as
more interested in &our 9P- than in &our previous client )ork> /n this
industr&* )e have the lu+ur& of starting earl&% / like to take advantage
of that%
215
_____________________________________________________________
/ don8t kno) )hat the future holds for Sam and me* but /8m confident
that at least some of the proEects )e start toda& )ill have some role in
it%
+acob Cass
To be honest* / learned more in si+ months of blogging and follo)ing
other people8s blogs* than stud&ing for three full &ears at universit&%
Doing e+tra )ork outside of the education s&stem is vital%
=. What should students and ne. designers focus
on outside of their course .or2 to ad(ance in their
careers-
"rian Hoff
Students should definitel& consider taking man& business classes*
especiall& if the& )ant to go freelance or start their o)n studio one
da&% /8ve al)a&s been passionate enough about design to teach
m&self* but / )ish / took more business and marketing classes% -lso* /
)ould recommend collecting designs% <aving resources of inspiration
and an idea of good design is essential% / take photos of man& t&pes*
colors* designs* etc% as / pass them b&* and / use =ittleSnapper to
organi!e online media% Being a graphic designer is non-stop learning%
216
_____________________________________________________________
Chris Coier
1o individual program is going to cover ever& single angle of design*
especiall& the most modern technological stuff% Because &ou are
alread& reading Smashing aga!ine* &ou probabl& alread& have a
good grasp of )hat8s going on in modern design% ,eading and
follo)ing tutorials and doing &our o)n e+perimental proEects on the
side )ill definitel& help &ou e+cel% That being said* &our )hole life
doesn8t have to revolve around career enhancement% - )ell-rounded
life )ill serve &ou )ell% Perhaps some of &our other hobbies could
benefit from &our design talent% / have a friend )ho used to build
coffee tables and decorate the surfaces )ith patterns of partiall& burnt
matches% /f he )ere looking for a design Eob* / )ould absolutel& tell
him to put that stuff onto an online portfolio%
$lliot +a Stoc2s
Build &our portfolio% Do free )ebsites for &our mates8 bands or &our
um8s friend8s )ool shop% /t might not be glamorous )ork* but doing
as much as &ou can builds up &our portfolio* and &ou8ll learn loads on
ever& proEect% When / left universit& and got m& first Eob* m& portfolio
)as made up almost entirel& of stuff /8d done on an e+tracurricular
basis* not reall& the course )ork itself% But also don8t forget that it8s
about Fualit&* not Fuantit&* and a good portfolio strikes a balance
bet)een variet& Isho)ing that &ou8re versatileJ and continuit&
Isho)ing that &ou have &our o)n identit& as a designerJ%
217
_____________________________________________________________
Walter Apai
/t8s important to e+pand &our kno)ledge to an& areas that are related
to design% ost design courses concentrate on the basics or on ho)
to use the various pieces of soft)are that are available% These are Eust
basic tools for ne) designers* but the& )on8t make &ou a great
designer%
=earn about art* la&out and composition* and tr& to read at least one
ne) book on design ever& month* or even one per )eek% Subscribe to
design blogs such as Smashing aga!ine and Webdesigner Depot*
and never stop learning% Geep updating &our kno)ledge )henever
possible b& attending conferences* reading books and maga!ines and
becoming involved in the local artistic communit&% Tr& to become a
)ell-rounded designer* not Eust an operator of Photoshop or another
design soft)are tool%
9eorge =ois* the real-life inspiration for Don Draper in ad en* said
it best:
L6he c2m5uter has 5layed a r2le in destr2ying
creati'ity :ith Ph2t2sh25. B'eryb2dy thin7s they9re a
designer.M
While he ma& be generali!ing a bit* / believe )hat is meant is that &ou
can8t be a proper designer )ithout understanding the fundamentals
of art and design%
218
_____________________________________________________________
+acob 1ube
When / )as a college student* )hat trul& helped me in m& career )as
proactivel& attempting to get real-)orld e+perience b& doing
freelance )ork* part time% The purpose )as t)o-fold: to see )hat it
)as like to )ork )ith the kind of people )ho )ould become &our
emplo&ers once &ou )ere out of school* and to appl& )hat &ou
learned in class* )hich reinforces &our education and helps &ou
understand it hands on% 0ou might even end up )ith a fe) portfolio
pieces to sho) emplo&ers once &ou8re on the Eob hunt L and some
mone& to bu& those e+pensive classroom te+tbooks%
J. What one thing do ou .ish ou 2ne. before
starting our career-
Darren Hot
Being in touch )ith m& limitations and skills% The first fe) &ears of
designing for the Web I1$$D to "##1J* / kne) that being cross-trained
)as important* so / built m& skills in design and front-end code
I<T=* 4SSJ eFuall&% But then / made the mistake of thinking that* if /
)as to become a more complete designer and developer* / should
learn Perl* 'lash and Bni+ commands* too% / sucked at all of those
things and kept sucking until the& asked me to stop%
Deep do)n* / kne) / )asn8t )ired for an& of that stuff% -nd more
importantl&* / )asn8t actuall& interested in it* not compared to design
219
_____________________________________________________________
an&)a&% 3mplo&ers do value someone )ho is cross-trained* but not if
the results are mediocre%
Da(id *eggett
Pleasing ever&one is nearl& impossible% Be friendl& to those )ho enEo&
&our )ork and friendlier to those )ho attack it%
+acob 1ube
/ )ished / had reali!ed that Fualit& is more important than Fuantit&%
When / started out* / focused on lo)-cost* high-Fuantit& Eobs* )hich
resulted in late hours* not enough pa& and nothing reall& that / could
be proud to put in m& portfolio% / )anted to )ork )ith as man&
people and on as man& proEects as / could to Eumpstart m& e+perience
and resume% But the ProEect Triangle principle applies here: / did it fast
and cheap* and so the outcomes )eren8t good% /f / had slo)ed do)n
and focused on getting gigs that )ere interesting and better Fualit&* /
)ould have progressed more fruitfull&%
Paul "oag
That constraints are good% -s a Web design student* / )as given
endless freedom to design ho) / )anted and )hat / )anted% <o)ever*
the real )orld is not like that% When / Eoined /B out of universit&* m&
first Eob )as to design D-bit icons% :er& restrictive indeed% When /
started on the Web* it allo)ed onl& gra& backgrounds and te+t that
220
_____________________________________________________________
)as Eustified left* right or centered% The first time / )orked on a
multimedia 4D* it )as capable of running video at onl& 1@# + 1"#
pi+els%
-t the time* this frustrated me massivel&% <o)ever* in hindsight it )as
enormousl& beneficial% /t pushed me creativel&* and it has also given
me a lot more patience )ith the peculiarities of bro)sers such as /3@%
G. What ?ob search ad(ice do ou ha(e for recent
graduates-
Soh Tana2a
'irst and foremost* get &our portfolio up* and make sure it represents
&our best )ork% /f &ou lack )ork samples* start creating proEects for
&ourself I)ebsites for &our hobbies* &our famil& or for friendsJ% -s a
ne) grad* &ou need to prove that &ou are serious and )illing( the best
)a& to get that message across is through a robust portfolio%
Secondl&* hit the Eob boards* and send &our resumes and cover letters
to companies &ou )ould like to )ork for% Doing research and tailoring
each cover letter and resume to the compan& is important% Stick to
the Eob reFuirements* and follo) directions carefull&% These emplo&ers
receive man& applications dail&* and nothing is )orse than seeing a
bland and generic introduction to )ho &ou are and )hat &ou offer%
Stand out from the rest%
221
_____________________________________________________________
Thirdl&* keep &our net)orks open* and make &ourself kno)nK
1et)orking is ke&%
Darren Hot
6bviousl&* scour the online Eob boards* but also follo) the blogs and
T)itter feeds of Web designers )hom &ou respect% Stud&ing their
methods )ill give &ou a clearer picture of the sort of designer &ou
)ant to be% /f &ou need advice* tr&ing dropping them an email% But
remember that not ever&one has the time to ans)er%
Truthfull&* most designers / kno) didn8t get their Eob b& appl&ing cold
to an agenc& the& kne) nothing about% /nstead* the& slo)l& made
relationships )ith like-minded people until the& began to see
opportunities and get offers%
But / )ould stress* don8t Anet)orkC compulsivel&% /t can look obvious
and obno+ious and make &ou look need&% /nstead* make connections
)ith people &ou think &ou actuall& share interests )ith* people &ou
can picture as colleagues and friends rather than business contacts%
The re)ards are much greater%
Chris Coier
1obod& )ill hire &ou because &ou sa& &ou have skills% 0ou8ll have to
demonstrate &our skills* so either )ork on &our current personal
)ebsite or start building one% Bse the )ebsite as a portfolio and
222
_____________________________________________________________
resume to send to companies% Send it both to companies that sa&
the& are hiring and to ones that don8t% 2ust because a Web compan&
doesn8t hang a A1o) hiringC sign on its door doesn8t mean it couldn8t
use someone% Pitch them% - little advice for that portfolio: three
a)esome designs are better than three a)esome and si+ mediocre
designs packed in the same space% Sho)case onl& &our finest )ork*
)hat &ou8re capable of% Pualit& over Fuantit&%
L. What should ne. designers consider .hen
deciding bet.een .or2ing for an agenc and
freelancing-
$lliot +a Stoc2s
2umping straight into freelancing once &ou8ve completed &our
education is reall& tempting% / ver& nearl& did that m&self% But /8m glad
/ didn8t% 0ou learn valuable lessons )orking for someone else first* and
it8s actuall& much easier because &ou don8t have to )orr& about
getting clients for &ourself% So* / )ould recommend )orking for
someone else before going it alone% /t8s a great opportunit& to build
&our portfolio )ithout dealing )ith an& of the boring stuff that goes
)ith freelancing or running &our o)n business%
Soh Tana2a
-s a ne) designer* being at an agenc& or on a team is great for
223
_____________________________________________________________
learning and feeling out the industr&% Though &ou ma& not be able to
set &our o)n hours or )ork from home* a stead& pa& check and
health insurance are both )elcome during a tough econom&%
When choosing the freelance route* have some e+perience under &our
belt* and be read& to be on &our o)n% The ke& factor is kno)ing )hat
&our skills are and having discipline% 'reelancing has its ups and
do)ns* and &ou must be self-motivated and determined to overcome
the challenges% Working from home and setting &our o)n hours is
ideal for most* but &oung designers should consider the reFuirements
and realit& before diving in head first% /t ma& be )ise to freelance part
time until &ou build enough confidence and e+perience and kno)
enough about &our strengths and )eaknesses to be able to make the
right decisions )hen &ou strike out on &our o)n%
Chris Spooner
/t8s al)a&s )orth learning the pros and cons of )orking for an agenc&
and freelancing* because each has its perksK <ere are a fe) that spring
to mind%
Agenc pros:
Working for an agenc& after &our studies can be great for
gaining e+perience in ho) the industr& )orks and ho)
proEects are managed from start to finish%
-t an agenc&* &ou )ork )ith like-minded colleagues* )ho &ou
224
_____________________________________________________________
can learn from and develop )ith%
=arge agencies often attract big corporations and established
brands%
- full-time Eob guarantees &ou a monthl& )age and set
)orking hours%
Agenc cons:
0ou might get stuck )orking on proEects that &ou don8t find
interesting or might have to )ork on something &ou don8t
agree )ith%
-gencies sometimes have strict policies* rules and guidelines%
'or instance* bro)sing the Web* checking 'acebook or
t)eeting might get &ou a slap on the )rist%
-gencies )ork during the usual $:## to 7:## business hours* so
&ou )ill have to as )ell%
'reelance pros:
-s a freelancer* &ou have complete control of the proEects &ou
take on and the t&pe of )ork &ou do%
0ou8re not tied to an& particular )orking hours* so taking a da&
off is no problem%
/f &ou can generate a consistent flo) of proEects* earning a
225
_____________________________________________________________
decent )age can be much easier than it )ould be )orking at
an agenc&%
0ou can )ork in &our paEamasK
'reelance cons:
0ou are personall& responsible for &our o)n income* a
circumstance that can put &ou at risk%
'reelancers need to be able to manage their time in order to
avoid distractions%
/ )ould recommend that ne) designers first seek out emplo&ment*
)hich )ill give them professional e+perience )ith and kno)ledge of
design% Then the&8ll be able to decide )hether the& fit better at an
agenc& or )orking for themselves%
6ne of the main things to consider before starting out as a freelancer
is )hether &ou8ve generated enough industr& e+perience to be able
not onl& to create designs but to source )ork* manage multiple
proEects and communicate )ith clients% These other factors definitel&
come into pla& )hen freelancing* so having at least some kno)ledge
of these processes before diving in is important%
226
_____________________________________________________________
M. Ho. can students and oung designers ma2e
themsel(es more (aluable to potential emploers-
Darren Hot
Start building a Web presence as earl& as possible* even before
seeking a Eunior position% Bu& a personal domain and set up a simple
portfolio* )ith an A-boutC page that gives a snapshot of &our
personalit& and talents% /f &ou haven8t done client )ork* do pro bono
proEects for friends until &ou have )ork samples to sho)% Displa&ing
them publicl& sho)s that &ou have pride in &our )ork%
"e concise% 3mplo&ers and human resource people are like an&one
else: the& are bus& and have short attention spans% Don8t make them
dig to find out )ho &ou are% 9ive &our portfolio )ebsite Eust enough
te+t* images and e+amples to paint an accurate picture% /f &ou can8t
give &our o)n content a crisp and concise design* )h& should
emplo&ers trust &ou to do it for clients>
-lso* don8t e+aggerate the facts )hen presenting &ourself% 6ur lives
are )a& too public these da&s to bother% ore important than
bragging or da!!ling an&one )ith half-truths is finding a team )hose
needs and interests align )ith &our o)n% /f &ou get hired under false
pretenses* &ou )ill have )asted ever&one8s time% 3ven e+perienced
designers )ith great portfolios aren8t the right fit* disposition-)ise* for
ever& agenc& the& appl& to%
227
_____________________________________________________________
Wolfgang "artelme
-s / mentioned before* /8m a huge fan of the interdisciplinar&
approach% -t most companies* &ou are unlikel& to )ork e+clusivel& in a
single field% /n fact* )hen &ou do Web design* being able to do some
decent-looking icons or cut a simple screencast or promo video is
good% This becomes even more important )hen &ou are self-
emplo&ed% oreover* this variet& makes and keeps )ork interestingV
at least that8s the case for me%
Chris Coier
2ust being a nice person and eas& to )ork )ith is prett& huge% / think
emplo&ers look for that during the intervie) process* at least as best
the& can in that short time% Someone incredibl& stiff or stand-offish is
unlikel& to )in the Eob over someone )ho is happ& and casual% Design
studios* in m& e+perience* are prett& friendl& and casual% 6ther
random advice: become reall& good at one thing% 0ou8ll be a lot more
valuable as the gu& or girl )ho kno)s that one thing reall& )ell than
as a Eack of all trades% Being )ell-rounded is a)esome* but having a
spike of talent in one particular area )ill serve &ou )ell%
Walter Apai
Social skills are necessar& )hen dealing )ith potential clients%
Designers should kno) )hat their clients do and provide them )ith
the best possible service%
228
_____________________________________________________________
/8d encourage all designers to make themselves a one-stop shop for
all of their clients8 design needs% That )ould include Web design*
cop&)riting* printing* etc% /f &ou8re not an e+pert in these fields* team
up )ith a fe) peers so that &ou can help each other as needed%
Designers should focus on making the entire process eas& for clients*
but involve clients in some design decisions as )ell* so that the& feel
that the& are part of the proEect%
/ suggest asking clients a lot of Fuestions and aiming to trul& get to
the core of their business and )hat )ould )ork for them% The more
)e understand our clients and their proEects* the more successful the
proEects )ill be and the better our chances of getting them as repeat
clients%
- designer is a human being* too% Become a )ell-versed designer*
understand &our medium* get educated and become a )ell-rounded
person )ho al)a&s aims high%
Set high standards for &ourself and &our )ork% The right clients )ill
gravitate to someone )ho holds themselves to high standards%
229
_____________________________________________________________
9F. What should ne. freelancers do during the first
fe. months of their business to succeed-
Paul Andre.
0ou have to have a personal business plan% / reall& )ish / had a plan
)hen / started out( / reall& do% / Eumped right in feet first and landed
on m& headK -nd it hurt% Partl&* / think it )as those first fe) months of
hardship that even no) propel me for)ard% That period not onl&
affected m& finances and confidence* it damaged m& reputation% That
is ver& hard to regain% / think over the &ears / have regained it* but it
)as hard )ork* and it all could have been avoided )ith a bit more
planning and simpl& b& )riting a personal business strateg&%
/t8s not enough to have a strateg& planned out in &our head( it has to
be on paper% 0ou need to be able to read it and see it to live b& it%
3ver& so often &ou should read it again* Eust to realign &ourself% -nd
then read it again* and onl& t)eak it if &ou reall& have to%
0our personal business plan could do the follo)ing:
Describe &our business obEectives* business direction and
)here &ou hope to be in + number of months%
=ist all potential pitfalls and ho) to avoid them%
Set honest and realistic targets* and allo) for a little fle+ibilit&%
230
_____________________________________________________________
-s &our business gro)s* track its achievements and compare
them to &our business obEectives%
Set up a financial frame)ork to measure ho) much &our
business is making Ior not makingJ%
Describe ho) &ou )ill attract ne) business to meet &our
financial targets%
3ver&one and ever& business is different% Write do)n )hat is correct
and achievable for &ou* and be ver& honest: it is &our business after
all% Stick to the planK
"rian Hoff
Personall&* / )orked for nearl& three &ears )hile preparing to go
freelance% / )ould )ork m& $:## to 7:## Eob* come home* eat dinner
and then market m&self IblogJ* search for ne) business* advertise and
)ork from around ;:## pm until 1":## am% <aving a good feel for
running &our o)n business is important before &ou go in head first%
Saving mone& is also important% 3ver& business* no matter )hat it is*
goes through periods of drought% <aving mone& to back &ou up for a
little )hile is a must% 'reelancing is not for ever&one% Part-time
freelancing )hile maintaining a stead&-pa&ing Eob )ill help &ou get a
feel for things%
231
_____________________________________________________________
Chris Spooner
/ think the most important time in freelancing isn8t particularl& the
first fe) months* but more so the time leading up to going freelance%
-s a freelancer* &ou8ll need a good flo) of clients to generate income(
&ou8ll have to get bus& promoting and building a name for &ourself*
so that )hen &ou8re read& to leave &our Eob* &ou8ll be all set to simpl&
flick the s)itch from emplo&ment to self-emplo&ment%
During this build-up time* &ou8ll )ant to design all of &our personal
branding* especiall& &our )ebsite* to sho)case )hat &ou can do%
Become an active member of the design communit& b& blogging*
guest )riting and net)orking via T)itter Ior &ou might )ant to
net)ork offline or locall&J( and begin taking on proEects that &ou can
)ork on during the nights% /t can be hard )ork managing both &our
full-time Eob and one or t)o freelance proEects simultaneousl&* but
)hen the number of inFuiries reaches an optimal level* &ou can
Fuickl& s)itch from &our Eob to taking on more freelance )ork L
rather than making the decision one da&* falling flat on &our face and
then having to eat beans on toast until &ou8ve built a profile%
+on Phillips
/ believe the first fe) months are crucial* especiall& because it usuall&
means Fuitting the da& Eob and taking the plunge into the freelancing
)orld% /t can be scar& at first% an& things need to be done in the first
fe) months* but of course nothing is irreparable% Should &ou make a
bad decision* &ou can al)a&s fi+ things as &ou go along% / highl&
232
_____________________________________________________________
recommend getting a portfolio )ebsite up( even if &ou don8t have a
lot to sho)* &ou need a place to sho)case )hat &ou have% Then get a
good invoicing s&stem such as 'reshbooks or Billings* net)ork )ith
other freelancers as much as possible via T)itter* 'acebook* design
forums and blogs* and ma&be start a blog of &our o)n%
$lliot +a Stoc2s
Work for someone elseK 'or the first fe) months to be a success* &ou
need to have )ork lined up* so having that in place before &ou make
the Eump is important% /8d also recommend getting a good accountant
as soon as &ou can and some sort of s&stem for keeping track of &our
mone&* such as Sero% -lso* make sure &ou have a )ebsite set up long
before &ou decide to go solo%
99. Aside from design and technical s2illsA .hat
aspects of running a business should ne.
freelancers focus on-
Paul Andre.
The advice / have been given over the &ears about freelancing as a
business has varied% Some have told me that putting business ahead
of design guarantees profit and keeps &our head above )ater% 6n the
other hand* / have also been told not to treat design as a business* to
)ork on )hat &our passion is* the business side )ill take care of itself%
233
_____________________________________________________________
These are both great philosophies* but the& don8t reall& )ork in the
real )orld% The ans)er is to have a health& balance bet)een the t)o%
Both need to be kept separate )hile at the same time )orking off
each other% Think of it as the positive and negative charge of a batter&%
The batter& onl& )orks )hen both charges are connected% I0ou can
decide )hich is the positive and negative side in relation to business
and designJ%
When meeting potential clients* first impressions reall& do count* and
&ou reall& need to present &ourself )ith professionalism% /t does not
matter ho) strong &our portfolio is or )ho &ou are L it is about ho)
professional and business-like &ou appear to them% 0ou are
negotiating a business transaction after all%
0es* this means breaking a)a& from the designer stereot&pe of
)earing t-shirts and Eeans and instead being clean-shaven* putting on
a business suit and remembering the manners &our mother taught
&ou% 4arr& business cards )ith &ou* ma&be even a briefcase( do )hat
&ou have to do to convince the client &ou mean business%
Some monke&s &ou should not carr& on &our back b& &ourself* and
the& are the finance side of &our business% =et8s be honest: )ho
understands ta+ and monetar& la)% / certainl& don8t and don8t care to
either% 'ind &ourself an accountant% The& don8t cost that much L
ma&be a )eek8s )age out of the &ear* and )hen &ou )eigh the cost of
doing &our ta+es incorrectl& and the penalties that might follo)* an
accountant is a )orth)hile investment%
234
_____________________________________________________________
/t )ould be nice if ever&one &ou )orked )ith )as honest% Protecting
the integrit& of &our )ork* &ourself and &our business should be ne+t
on &our to-do list% The realit& is that at some point* someone )ill tr&
to shortchange &ou or* )orse* )iggle out of a pa&ment% That is )h&
&ou need a )atertight contract% 3ver& countr& has its o)n la)s
regarding design( make sure &ou kno) and understand &ours%
<iring a la)&er to )rite a standard contract for &our small business
)ould be e+pensive% - )a& around this )ould be to )rite &our o)n* as
/ did% / asked a fe) designers for advice and researched the la) online
and came up )ith an outline for m& o)n% / then took it to a la)&er
and asked them to sanit&-check it% 1ot as e+pensive as asking them to
)rite it L still* it )asn8t cheap* but it )as )orth it%
So* to sum up* if &ou8re dressed smart* &our business finances are in
safe hands and &ou are legall& protected* then &ou are free to do )hat
&ou )ere trained to do and give &our creativit& free reign* letting &our
passion fuel &our design% /t is a long road to take* but it is necessar&%
"rian Hoff
arketing )ithout a doubt% / receive man& emails asking ho) / get so
much freelance business or ho) / find clients% & response: &ou have
to )ork hard for it% 4lients )on8t come to &ou% Tell ever&one )hat &ou
do* start a blog* attend net)orking events and conferences* contact
clients directl&% ,unning &our o)n business is hard )ork% There is no
such thing as a ?#-hour )ork )eek )hen &ou run &our o)n business% /
235
_____________________________________________________________
)ork seven da&s a )eek% /8ve even gone so far as to strike up ne)
)ork b& chatting )ith someone at the bar Inot recommendedJ% 0ou
have to have personalit& and drive to freelance successfull&%
+on Phillips
Being a freelancer means having to )ear man& different hats Ia ton of
different hatsKJ% Spending some time on government )ebsites and
meeting )ith an accountant to learn more about ta+ la)s goes a ver&
long )a&% 6f course* man& designers* being creative t&pes* tend to
forget that it8s a business I/ often forgetJ% 0ou need to spend time on
accounting but also on net)orking and marketing &our business% /n
the first fe) months results )ill be small* but &our efforts )ill pa& off
in the long run% 0ou need to be as good )ith numbers as &ou are )ith
Photoshop%
9:. What are some of the best .as for ne.
designers to find clients-
Henr +ones
/ can onl& speak from e+perience here% Shortl& before / )ent full-time
freelancing* m& portfolio )as listed on several popular 4SS galleries%
'rom that point on* clients found me% / )as ver& surprised to see ho)
man& people used the galleries to find designers% 6nce / had a fe)
clients and proEects under m& belt* / started to get a lot of referrals%
236
_____________________________________________________________
So* )ork hard on creating a great portfolio* and use the design
galleries% This is probabl& the best and easiest )a& to get the most
e+posure% Plent& of design-specific Eob boards are available )here &ou
can search for proEects that are a good fit for &ou%
+on Phillips
/ think )ebsites such as T)itter are a great place to get startedK /n fact*
/ found a lot of m& o)n clients via T)itter% Design forums are also a
great place to net)ork* make friends and find )ork% 1e) freelancers
ma& also be tempted to tr& design contests and cro)d-sourcing* but /
personall& think the& devalue the industr&* so / )ouldn8t advise doing
that% 3ven if &ou don8t have much to sho) in &our portfolio* there are
others )a&s to get gigs% There are al)a&s Eob boards* such as the one
on Smashing aga!ine and the one on 'reelanceS)itch* )hich are
great for finding clients% 0ou might even consider bu&ing banner ads
on design-related )ebsites% But &our marketing budget ma& not allo)
this at first* so net)orking )ebsites* Eob boards and forums )ould be
the places to hang out%
+acob Cass
9et &our name out there% Start blogging% Sho)case &our )ork% =ook
on Eob boards% -sk friends* famil&* local charities% ,ead books and blog
posts% The information is out there% 0our Eob is to find itK
237
_____________________________________________________________
Walter Apai
1et)orking is one of the best )a&s but often one of the most
overlooked% / suggest that ne) designers speak to ever&one the&
kno) and use ever& chance the& have to talk about their )ork and
)hat the& do for a living%
/ found m&self Eust mentioning Web design to someone the other da&
Inot even looking for more )orkJ* and immediatel& the& thought of
someone the& kne) )ho )as looking for a )ebsite redesign%
6pportunities are ever&)here( Eust sei!e them%
/ should also mention that one should not rel& on net)orking alone
or an& other single As&stem%C /8d encourage ne) designers to take a
multi-faceted approach to their ne) career%
There are unlimited )a&s to get ne) clients% Posting on bulletin
boards* both online and offline* and placing small ads in the
ne)spaper or local maga!ines are Eust a fe) of the media &ou can
use% / also think that starting local is best* and getting e+perience
)orking on proEects )ith people )ho &ou can meet in person in &our
o)n cit&% This is a good starting point to gain more AfieldC e+perience%
Paul "oag
/t has to start )ith friends and famil&% This )ill help build &our initial
portfolio% 'rom there* consider doing some discounted )ork for a
local charit& to gain e+perience in )orking for real clients% -fter that*
238
_____________________________________________________________
the contacts &ou have made through net)orking )ill start to pa& off*
and hopefull& &ou )ill get some )ork through them% 'inall& and most
importantl&* make it kno)n that &ou )ant )ork% /t is surprising ho)
man& freelance )ebsites / visit that don8t state )hether the& currentl&
accept )ork or not%
That said* / )ould suggest that if &ou are straight out of universit&*
&ou should probabl& )ork for a small agenc& before Eumping into the
freelance )orld% Being a freelancer reFuires a lot of business skills that
the& don8t teach &ou in universit&%
9;. What net.or2ing tips do ou ha(e for oung
designers-
Henr +ones
6ne option is to attend design conferences* but for &oung designers
this can be e+pensive% So* / )ould recommend getting involved in the
design communit&% Start reading and leaving comments on popular
design blogs% 4reate a T)itter account* and post useful stuff%
Depending on ho) much time &ou have* &ou could even start &our
o)n design-related blog% Blogging has been huge for me* and /
believe it8s the best )a& to get &our name out there and meet other
designers% 1o matter )hat route &ou take* Eust remember to be
helpful and genuine* and &ou )ill build lasting relationships%
239
_____________________________________________________________
Paul Andre.
0ou are &oung L &ou cannot change that fact L and &ou )ant to be
successful% /n an& business* especiall& ours* &ou need friends* &ou
need contacts and most importantl& &ou need to build professional
relationships% Bear in mind* though* that net)orking is not something
&ou can rush( it takes time and patience%
The best time to start net)orking is right no)% 3ven if &ou are still in
high school or haven8t &et graduated college* reach out no)% /t is
never too earl& to get &our name out there% 0our name is &our most
po)erful and memorable asset% Work )ill follo)* / promise%
The most important relationships for an& designer are the ones the&
have built )ith fello) students% 1o matter )hat happens* the& are
&our primar& net)ork% 0ou can help each other b& sharing kno)ledge
and design contacts and b& learning from each other%
The best )a& to net)ork be&ond &our inner circle is to get in touch
)ith seasoned designers% 'or the most part* designers are prett&
selfless and love to share and help )hen the& can% With that in mind*
put together a list of designers on )hom &ou )ant to model &ourself
and someone )ith a strong bod& of )ork% Send them emails*
accompanied b& &our portfolio* stating that &ou are a &oung designer
starting out and seeking a little advice% -sk them ho) the& got
started* and ask for an& tips the& might be )illing to share> Seasoned
designers need to build their net)orks* too* and )ill )elcome &our
introduction and Fuestions%
240
_____________________________________________________________
When / started out as a designer* / sent a letter I)ith m& portfolio and
business cardJ to a local design agenc& L certainl& not the biggest
one or the most prestigious L and introduced m&self as a &oung
designer )ho )as eager to learn% / asked if / could come in for a da&
or t)o to learn a bit about the design business and gain some )ork
e+perience% Thankfull&* the& consented* and / spent three da&s asking
Fuestions* picking up business cards and meeting clients% That )as
over ten &ears ago* and / still rel& on those contacts no)% -nd to this
da&* that has been m& most productive and successful period of
net)orking%
1ot ever& design agenc& )ill be as open as that one )as* but / )ould
tr&% There is no harm in asking%
6ne thing to remember about net)orking is that success is
determined not b& &our number of contacts but b& the Fualit& of
those contacts% 3ven if the best designer in the )orld sent &ou a
courtes& email repl&* it does not mean that &ou are in their net)ork or
that the& are in &ours% - Fualit& net)ork contact is someone )ho
gives &ou a personal repl& and genuinel& tries to help &ou% These are
the contacts &ou must maintain% This is &our net)ork%
'inall&* please don8t think of &outh as an impediment% Think of it as a
license to ask Fuestions* to learn and e+pand &our personal net)ork%
241
_____________________________________________________________
Paul "oag
Step a)a& from the computer% eeting people online is great* but
nothing beats meeting them face to face% -ttend conferences and
meet-ups and get to kno) people% Then follo) up on those
relationships via T)itter and 'acebook%
-lso* don8t have an agenda% 6r* if &ou have one* be honest and open
about it% Too man& people net)ork solel& to )in )ork or become a
AWeb celebrit&%C /nstead* net)ork because &ou )ant to meet like-
minded people )ho )ill inspire and e+cite &ou about &our )ork%
Soh Tana2a
-ttend industr& events* seminars and an& kind of social gatherings%
Don8t be sh&( get to kno) the people around &ou% Be interested and
)illing to learn from them* and at the right time let them kno) )ho
&ou are and )hat &ou do% 4arr& business cards )ith &ou at all times*
and have &our elevator speech read&% 0ou never kno) )hen &ou )ill
run into a potential client or emplo&er% 1et)orking is all about
e+panding &our opportunities* and as a designer this skill is critical%
Ste'en Snell has been designing :ebsites $2r se'eral years. He acti'ely
maintains a $e: bl2gs 2$ his 2:n* including =esignM.ag* :hich
regularly 5r2'ides articles and res2urces $2r :eb designers.
242

Smashing Ebook 1 Professional Web Design

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Smashing Ebook 1 Professional Web Design

Uploaded by

Copyright:

Available Formats

Smashing eBook Series: #1 Professional Web Design

You might also like