Smashing Ebook Professional Web Design 1

Smashing e8ook Series.
# Proessional Web Design
Preface
1his e-book conLains a selecLion o Lhe besL arLicles abouL
proessional Web design LhaL have been published on Smashing
Magazine in 2009 and 200. 1he arLicles have been careully ediLed
and prepared or Lhis PDF version, some screenshoLs and links were
removed Lo make Lhe book easier Lo read and prinL ouL.
1his book presenLs guidelines or proessional Web developmenL,
including communicaLing wiLh clienLs, creaLing a road map Lo a
successul porLolio, rules or proessional neLworking and Lips on
designing user inLeraces or business Web applicaLions. 1he book
shares experL advice or sLudenLs and young Web designers, and iL
also helps you learn how Lo respond eecLively Lo design criLicism,
use sLoryLelling or a beLLer user experience and apply color Lheory Lo
your proessional designs.
1his book is noL proLecLed by DRM. A copy cosLs only S9.90 and is
available exclusively aL http.//shop.smashingmagazine.com. Please
respecL our work and Lhe hard eorLs o our wriLers. l you received
Lhis book rom a source oLher Lhan Lhe Smashing Shop, please
supporL us by purchasing your copy in our online sLore. 1hank you.
Published in March 200 by Smashing Media CmbH - WerLhmannsLr.
5 - 79098 Freiburg / Cermany - CeschaLshrer. Sven LennarLz,
viLaly Friedman - AmLsgerichL Freiburg. HR8 704836.
lS8N. 978-3-943075-02-
Smashing e8ook Series. # Proessional Web Design

_____________________________________________________________
TabIe of Contents
Preface................................................................................................................2
Harsh Truths About Corporate websites..........................................9
ou Need A SeparaLe Web Division..............................................9
Managing our WebsiLe ls A Full-1ime Job.............................
Periodic Redesign ls NoL Fnough................................................2
our WebsiLe CannoL Appeal 1o Fveryone..............................3
ou Are WasLing Money On Social NeLworking....................3
our WebsiLe ls NoL All AbouL ou.............................................5
ou're NoL CeLLing value From our Web 1eam....................5
Design 8y CommiLLee 8rings DeaLh...........................................7
A CMS ls NoL A Silver 8ulleL..........................................................9
ou Have 1oo Much ConLenL.........................................................20
Conclusions..........................................................................................2
PortfoIio Design 5tudy. Design Patterns and Current
Practices....................................................................................22
LighL vs. Dark Design........................................................................23
How Many Columns.......................................................................24
lnLroducLory 8lock On 1op...........................................................26
LayouL AlignmenL..............................................................................27
NavigaLion AlignmenL......................................................................29
Search 8ox Design.............................................................................30
Flash FlemenLs.....................................................................................30
Where 1o PuL ConLacL lnormaLion...........................................3
"AbouL Us" Page.................................................................................34
3
_____________________________________________________________
ClienL Page............................................................................................34
Services Page.......................................................................................35
PorLolio Page......................................................................................36
Worklow Page....................................................................................37
ConLacL Page........................................................................................38
Specials And FxLras...........................................................................39
OLher Findings....................................................................................39
Summary...............................................................................................40
Creating A 5uccessfuI OnIine PortfoIio...........................................42
PiLall #. ObuscaLing......................................................................42
PiLall #2. Cramming lnormaLion................................................43
PiLall #3. Overdoing lL.....................................................................44
PiLall #4. Unusual NavigaLion.......................................................44
PiLall #5. visual CluLLer...................................................................45
Principles o FecLive PorLolio Design.....................................46
Deine your CriLeria and SLraLegies or Success.....................46
Consider MulLiple PorLolios..........................................................47
1argeL our MarkeL............................................................................49
PrioriLize UsabiliLy..............................................................................52
Use Lhe RighL 1echnology...............................................................52
Plan 1he ProjecL..................................................................................54
LimiL 1he Scope And 1ype o Work ou PromoLe.................54
Provide AdequaLe ConLacL lnormaLion, DocumenLaLion
And FxplanaLions...............................................................................56
PresenL our Work ln 1he ConLexL o our Coals..................57
lnuse our PersonaliLy ln 1he Design.......................................58
PromoLe And Leverage our Work..............................................60
4
_____________________________________________________________
Develop Long-1erm Coals..............................................................60
Better User xperience with 5toryteIIing......................................62
lL 8egins WiLh a SLory.......................................................................62
Revealing Lhe Design in SLories....................................................63
1he Power o FmoLion......................................................................65
1he 8asics o SLoryLelling or User Fxperience.......................68
Happily Fver ALer. 1he RealiLy.....................................................72
A Few Modern-Day SLoryLellers...................................................73
1he SLoryLelling Fxperiences Around Us...................................83
Designing User lnterfaces lor Business web AppIications. .89
WebsiLes vs. Web ApplicaLions.....................................................89
FirsL, Know our Users......................................................................9
Design Process....................................................................................94
Design Principles................................................................................97
FssenLial ComponenLs O Web ApplicaLions........................03
Don'L ForgeL Ul Design PaLLerns................................................05
Case SLudy. Online 8anking ApplicaLion................................07
Final 1houghLs..................................................................................08
Progressive nhancement And 5tandards Do Not Limit web
Design............................................................................................................09
Shiny New 1echnologies vs. OuLdaLed 8esL PracLices.....0
1he Mess 1haL ls 1he Web...........................................................0
CreaLing CelebriLies And A Place We
Wish We Were AL.............................................................................
Hollywood And AdverLising 1each Us NoLhing...................2
5
_____________________________________________________________
1he MyLh O lnnovaLing Fxclusively 1hrough 1echnology
................................................................................................................3
lnnovaLion lsn'L AbouL New 1oys..............................................4
1he CorporaLe Spin On lnnovaLion, And lLs Consequences
................................................................................................................5
1he SLockholm Syndrome O 8ad lnLeraces........................6
1his ls NoL AbouL 1echnology Or Design..............................7
Where ls 1he 8eauLy O 1he Web...........................................9
1o Recap. Our lssues......................................................................20
Why SLandards MaLLer, And WhaL "Following SLandards"
Means...................................................................................................22
Progressive FnhancemenL Works..............................................23
8esL PracLices Come From ApplicaLion And lLeraLive
lmprovemenL.....................................................................................25
1ogeLher We Can Do 1his............................................................26
CoIor Theory for ProfessionaI Designers.....................................28
Warm Colors......................................................................................30
Cool Colors........................................................................................34
NeuLrals...............................................................................................37
ln 8rie..................................................................................................43
1radiLional Color Scheme 1ypes................................................44
CreaLing a Color Scheme..............................................................55
Conclusion..........................................................................................63
ls John The CIient Dense or Are You laiIing Him?..................65
Fxplain Why ou Are Asking AbouL Money..........................65
JusLiy our RecommendaLions ln Language John Can
6
_____________________________________________________________
UndersLand........................................................................................66
lnclude John ln 1he Process........................................................67
FducaLe John AbouL Design........................................................68
CommunicaLe WiLh John Regularly..........................................69
Fxplain John's Ongoing Role.......................................................70
1he Moral O 1he SLory.................................................................7
How To ldentify and DeaI with Different Types Of CIients
...........................................................................................................................73
1he Passive-Aggressive.................................................................73
1he Family Friend............................................................................75
1he Under-valuer.............................................................................76
1he NiL-Picker....................................................................................77
1he Scornul Saver..........................................................................78
1he "l-Could-Do-1his-Mysel"-er..............................................79
1he ConLrol Freak............................................................................8
1he Dream ClienL.............................................................................82
Wrap-up..............................................................................................83
How To Respond ffectiveIy To Design Criticism....................84
Have 1he RighL ALLiLude...............................................................87
UndersLand 1he ObjecLive...........................................................88
Check our FirsL ReacLion.............................................................90
SeparaLe WheaL From 1he Cha...............................................90
Learn From lL.....................................................................................9
Look For A New ldea......................................................................92
Dig Deeper When Necessary......................................................93
1hank 1he CriLic...............................................................................95
7
_____________________________________________________________
web Designer's Guide to ProfessionaI Networking...............96
Why NeLwork..................................................................................96
NeLworking 1ips or Designers..................................................200
Group lnterview. xpert Advice lor 5tudents and Young
web Designers..........................................................................................209
8
_____________________________________________________________
Harsh Truths About Corporate websites
3y Pcul 3cc
We all make misLakes running our websiLes. However, Lhe naLure o
Lhose misLakes varies depending on Lhe size o your company. As your
organizaLion grows, Lhe misLakes change. 1his arLicle addresses
common misLakes made by large organizaLions.
MosL o Lhe clienLs l work wiLh are large organizaLions. universiLies,
large chariLies, public secLor insLiLuLions and big companies. Over Lhe
lasL seven years, l have noLiced cerLain recurring misconcepLions
among Lhese organizaLions. 1his arLicle aims Lo dispel Lhese illusions
and encourage people Lo ace Lhe harsh realiLy.
1he problem is LhaL i you are reading Lhis, you are probably already
aware o Lhese Lhings. 8uL hopeully Lhis arLicle will be helpul Lo you
as you convince oLhers wiLhin your organizaLion. ln any case, here are
some o Lhe harsh LruLhs abouL websiLes o large organizaLions.
You Need A 5eparate web Division
ln many organizaLions, Lhe websiLe is managed by eiLher Lhe
markeLing or l1 deparLmenL. However, Lhis ineviLably leads Lo a Lur
war, wiLh Lhe websiLe becoming Lhe vicLim o inLernal poliLics.
9
_____________________________________________________________
ln realiLy, pursuing a Web sLraLegy is noL parLicularly suiLed Lo eiLher
group. l1 may be excellenL aL rolling ouL complex sysLems, buL iL is noL
suiLed Lo developing a riendly user experience or esLablishing an
online brand.
Iejjrey ZelJmcn ures crcnizcticns tc crecte c secrcte Web Jivisicn.
MarkeLing, on Lhe oLher hand, is liLLle beLLer. As Jerey Zeldman puLs
iL in his arLicle LeL 1 here 8 e Web D ivisions .
1he Web is c ccnverscticn. Mcrletin, by ccntrcst, is c
mcnclcue. AnJ then theres cll thct messy business
with semcntic mcrlu, CSS, uncbtrusive scritin,
ccrJ-scrtin exercises, H1Ml run-thrcuhs, invclvin
10
_____________________________________________________________
users in cccessibility, cnJ the rest cj the slills cnJ
exerience thct Jcnt jcll unJer Mcrletins urview.
lnsLead, Lhe websiLe should be managed by a single uniied Leam.
Again, Zeldman sums iL up when he wriLes.
Put them in c Jivisicn thct reccnizes thct ycur
website is nct c bcstcrJ cj ycur brcchures, ncr c
ncturcl cutrcwth cj ycur rcu cclenJcr. let there be
Web Jivisicns.
Managing Your website ls A luII-Time Job
NoL only is Lhe websiLe oLen spliL beLween markeLing and l1, iL is also
usually under-resourced. lnsLead o Lhere being a dedicaLed Web
Leam, Lhose responsible or Lhe websiLe are oLen expecLed Lo run iL
alongside Lheir "day job." When a Web Leam is in place, iL is oLen
over-sLreLched. 1he vasL majoriLy o iLs Lime is spenL on day-Lo-day
mainLenance raLher Lhan on longer-Lerm sLraLegic Lhinking.
1his siLuaLion is urLher aggravaLed by Lhe acL LhaL Lhe people hired
Lo "mainLain" Lhe websiLe are junior members o Lhe sLa. 1hey do noL
have Lhe experience or auLhoriLy Lo push Lhe websiLe orward. lL is
Lime or organizaLions Lo seriously invesL in Lheir websiLes and inally
11
_____________________________________________________________
move Lheir Web sLraLegies orward by hiring ull-Lime senior Web
managers.
Periodic Redesign ls Not nough
8ecause corporaLe websiLes are under-resourced, Lhey are oLen
neglecLed or long periods o Lime. 1hey slowly become ouL o daLe in
Lheir conLenL, design and Lechnology. FvenLually, Lhe websiLe becomes
such an embarrassmenL LhaL managemenL sLeps in and demands LhaL
iL be sorLed. 1his ineviLably leads Lo a compleLe redesign aL
considerable expense. 1his is a lawed approach. lL is a wasLe o
money, because when Lhe old websiLe is replaced, Lhe invesLmenL LhaL
was puL inLo iL is losL, Loo. lL is also Lough on inances, wiLh a large
expendiLure having Lo be made every ew years.
Ccmercn Mcll enccurces Web Jesiners tc reclin, nct reJesin.
12
_____________________________________________________________
A beLLer way is conLinual invesLmenL in your websiLe, allowing iL Lo
evolve over Lime. NoL only is Lhis less wasLeul, iL is also beLLer or
users, as poinLed ouL by Cameron Moll in his posL Cood Designers
Redesign, CreaL Designers Realign.
Your website Cannot AppeaI To veryone
One o Lhe irsL quesLions l ask a clienL is, "Who is your LargeL
audience" l am regularly shocked aL Lhe lengLh o Lhe reply. 1oo
oLen, iL includes a long and deLailed lisL o diverse people. lneviLably,
my nexL quesLion is, "Which o Lhose many demographic groups are
mosL imporLanL" Depressingly, Lhe answer is usually LhaL Lhey are all
equally imporLanL.
1he harsh LruLh is LhaL i you build a websiLe or everyone, iL will
appeal Lo no one. lL is imporLanL Lo be exLremely ocused abouL your
audience and caLer your design and conLenL Lo iL. Does Lhis mean you
should ignore your oLher users NoL aL all. our websiLe should be
accessible by all and noL oend or exclude anybody. However, Lhe
websiLe does need Lo be primarily aimed aL a clearly deined
audience.
You Are wasting Money On 5ociaI Networking
l ind iL encouraging LhaL websiLe managers increasingly recognize
LhaL a Web sLraLegy involves more Lhan running a websiLe. 1hey are
beginning Lo use Lools such as 1wiLLer, Facebook and ou1ube Lo
13
_____________________________________________________________
increase Lheir reach and engage wiLh new audiences. However,
alLhough Lhey are using Lhese Lools, Loo oLen Lhey do so ineecLively.
1weeLing on a corporaLe accounL or posLing sales demonsLraLions on
ou1ube misses Lhe essence o social neLworking.
Micrcscjt Jrcmcticclly imrcveJ its imce cmcn the Jevelcment
ccmmunity by cllcwin stcjj tc secl cut vic the Chcnnel 9 website.
Social neLworking is abouL people engaging wiLh people. lndividuals
do noL wanL Lo build relaLionships wiLh brands and corporaLions. 1hey
wanL Lo Lalk Lo oLher people. 1oo many organizaLions Lhrow millions
inLo Facebook apps and viral videos when Lhey could spend LhaL
money on engaging wiLh people in a LransparenL and open way.
14
_____________________________________________________________
lnsLead o creaLing a corporaLe 1wiLLer accounL or indeed even a
corporaLe blog, encourage your employees Lo sLarL LweeLing and
blogging Lhemselves. Provide guidelines on accepLable behavior and
whaL Lools Lhey need Lo sLarL engaging direcLly wiLh Lhe communiLy
LhaL is connecLed Lo your producLs and services. 1his demonsLraLes
your commiLmenL noL only Lo Lhe communiLy buL also Lo Lhe human
side o your business.
Your website ls Not AII About You
While some websiLe managers wanL Lheir websiLe Lo appeal Lo
everyone, oLhers wanL iL Lo appeal Lo Lhemselves and Lheir colleagues.
A surprising number o organizaLions ignore Lheir users enLirely and
base Lheir websiLes enLirely on an organizaLional perspecLive. 1his
Lypically maniesLs iLsel in inappropriaLe design LhaL caLers Lo Lhe
managing direcLor's personal preerences and in conLenL LhaL is ull o
jargon.
A websiLe should noL pander Lo Lhe preerences o sLa buL should
raLher meeL Lhe needs o iLs users. 1oo many designs are rejecLed
because Lhe boss "doesn'L like green." Likewise, Loo much websiLe
copy conLains acronyms and Lerms used only wiLhin Lhe organizaLion.
You're Not Getting VaIue lrom Your web Team
WheLher Lhey have an in-house Web Leam or use an exLernal agency,
many organizaLions ail Lo geL Lhe mosL rom Lheir Web designers.
15
_____________________________________________________________
Web designers are much more Lhan pixel pushers. 1hey have a wealLh
o knowledge abouL Lhe Web and how users inLeracL wiLh iL. 1hey also
undersLand design Lechniques, including grid sysLems, whiLe space,
color Lheory and much more.
1rectin Jesiners cs ixel ushers wcstes their exerience. here, c
Jesiner lcments his reJiccment cn 1witter.
lL is Lhereore wasLeul Lo micro-manage by asking Lhem Lo "make Lhe
logo bigger" or Lo "move LhaL elemenL Lhree pixels Lo Lhe leL." 8y
doing so, you are reducing Lheir role Lo LhaL o a soLware operaLor
and are wasLing Lhe wealLh o experience Lhey bring.
16
_____________________________________________________________
l you wanL Lo geL Lhe maximum reLurn on your Web Leam, presenL iL
wiLh problems, noL soluLions. For example, i you're LargeLing your
websiLe aL Leenage girls, and Lhe designer goes or corporaLe blue,
suggesL LhaL your audience mighL noL respond well Lo LhaL color. Do
noL Lell him or her Lo change iL Lo pink. 1his way, Lhe designer has Lhe
reedom Lo ind a soluLion LhaL may be even beLLer Lhan your choice.
ou're allowing your designer Lo solve Lhe problem you have
presenLed.
Design By Committee Brings Death
1he ulLimaLe symbol o a large organizaLion's approach Lo websiLe
managemenL is Lhe commiLLee. A commiLLee is oLen ormed Lo Lackle
Lhe websiLe because inLernal poliLics demand LhaL everyone have a
say and LhaL all consideraLions be Laken inLo accounL.
1o say LhaL all commiLLees are a bad idea is naive, and Lo suggesL LhaL
a large corporaLe websiLe could be developed wiLhouL consulLaLion is
anciul. 8uL when iL comes Lo design, commiLLees are oLen Lhe kiss o
deaLh.
17
_____________________________________________________________
Desin by ccmmittee lecJs tc Jesin cn the jly.
Design is subjecLive. 1he way we respond Lo a design is inluenced by
culLure, gender, age, childhood experience and even physical
condiLions (such as color blindness). WhaL one person considers greaL
design could be haLed by anoLher. 1his is why iL is so imporLanL LhaL
design decisions be inormed by user LesLing raLher Lhan personal
experience. UnorLunaLely, Lhis approach is rarely Laken when a
commiLLee is making Lhe decisions.
lnsLead, designing by commiLLee becomes abouL compromise.
8ecause commiLLee members have dierenL opinions abouL Lhe
design, Lhey look or common ground. One person haLes Lhe blue
18
_____________________________________________________________
color scheme, while anoLher loves iL. 1his leads Lo designing on Lhe
ly, wiLh Lhe commiLLee insLrucLing Lhe designer Lo "Lry a dierenL
blue" in Lhe hopes o inding middle ground. UnorLunaLely, Lhis leads
only Lo bland design LhaL neiLher appeals Lo nor exciLes anyone.
A CM5 ls Not A 5iIver BuIIet
Many o Lhe clienLs l work wiLh have amazingly unrealisLic
expecLaLions o conLenL managemenL sysLems (CMS). 1hose wiLhouL
one Lhink iL will solve all o Lheir conLenL woes, and Lhose who have
one moan because iL hasn'L!
lL is cerLainly Lrue LhaL a CMS can bring a loL o beneiLs. 1hese
include.
reducing Lhe Lechnical barriers o adding conLenL,
allowing more people Lo add and ediL conLenL,
aciliLaLing asLer updaLes,
and allowing greaLer conLrol.
8uL many CMS' are less lexible Lhan Lheir owners would like. 1hey ail
Lo meeL Lhe changing demands o Lhe websiLes Lhey are a plaLorm
or. WebsiLe managers also complain LhaL Lheir CMS is hard Lo use. ln
many cases, Lhis is because Lhe ones using iL have noL been
adequaLely Lrained or are noL using iL regularly enough.
19
_____________________________________________________________
Finally, a CMS may allow conLenL Lo be easily updaLed, buL iL does noL
ensure LhaL conLenL will be updaLed or even LhaL Lhe qualiLy o
conLenL will be accepLable. Many CMS-based websiLes sLill have ouL-
o-daLe conLenL or poorly wriLLen copy. 1his is because inLernal
processes have noL been puL in place Lo supporL Lhe conLenL
conLribuLors.
l you look Lo a CMS Lo solve your websiLe mainLenance issues, you
will be disappoinLed.
You Have Too Much Content
ParL o Lhe problem wiLh mainLaining conLenL on large corporaLe
websiLes is LhaL Lhere is Loo much conLenL in Lhe irsL place. MosL o
Lhese websiLes have "evolved" over years, wiLh more and more
conLenL being added. AL no poinL did anyone review Lhe conLenL and
ask whaL could be Laken away.
Many websiLe managers ill Lheir websiLe wiLh copy LhaL nobody will
read. 1his happens because o one or more o Lhe ollowing.
A ear o missing someLhing. by puLLing everyLhing online,
Lhey believe users will be able Lo ind whaLever Lhey wanL.
UnorLunaLely, wiLh so much inormaLion available, iL is hard Lo
ind anyLhing.
A ear users will noL undersLand. wheLher rom a lack o
conidence in Lheir websiLe or in Lheir audience, Lhey eel Lhe
20
_____________________________________________________________
need Lo provide endless insLrucLion Lo users. UnorLunaLely,
users never read Lhis copy.
A desperaLe desire Lo convince. Lhey are desperaLe Lo sell Lheir
producL or communicaLe Lheir message, and so Lhey bloaL Lhe
LexL wiLh sales copy LhaL acLually conveys liLLle valuable
inormaLion.
SLeve Krug, in his book Dcnt Mcle Me 1hinl, encourages websiLe
managers Lo "geL rid o hal Lhe words on each page, Lhen geL rid o
hal o whaL's leL." 1his will reduce Lhe noise level on each page and
make Lhe useul conLenL more prominenL.
ConcIusions
Large organizaLions do a loL righL in running Lheir websiLes. However,
Lhey also ace some unique challenges LhaL can lead Lo painul
misLakes. Resolving Lhese problems means accepLing LhaL misLakes
have been made, overcoming inLernal poliLics and changing Lhe way
Lhey conLrol Lheir brand. Doing Lhis will give you a signiicanL
compeLiLive advanLage and make your Web sLraLegy more eecLive
over Lhe long Lerm.
Pcul 3cc is the jcunJer cj Uk Web Jesin cency HecJscce, cuthcr
cj the Website Owners Mcnucl cnJ hcst cj cwcrJ-Winnin Web
Jesin cJccst 3ccwcrlJ.
21
_____________________________________________________________
PortfoIio Design 5tudy. Design Patterns and
Current Practices
3y vitcly lrieJmcn
Following Lhe requesLs o our readers, we have careully selecLed
dozens o design and Web developmenL agencies, analyzed Lheir
porLolio websiLes and idenLiied popular design paLLerns. 1he main
goal o Lhe sLudy was Lo provide reelancers and design agencies wiLh
useul poinLers or designing Lheir own porLolio.
We have brainsLormed on Lhe mosL imporLanL design issues and
asked designers across Lhe globe whaL decisions Lhey oLen have Lo
make when designing a porLolio websiLe. We also asked designers
whaL quesLions Lhey would like answered or analyzed in our case
sLudy.
ln Lhe end, we came up wiLh a bag o 40 solid porLolio-relaLed
quesLions - sorLed, grouped and ranked according Lo imporLance.
We searched or a good mix o esLablished design agencies and well-
designed porLolio websiLes o small and large agencies.
Finally, we creaLed a quesLionnaire o 40 quesLions and wenL Lhrough
Lhe websiLes o all o Lhese design agencies, noLicing design paLLerns
and illing ouL our quiLe lengLhy orms. Overall, Lhe sLudy Look over 75
hours Lo prepare.
22
_____________________________________________________________
1his arLicle presenLs Lhe iniLial resulLs o our big porLolio design
sLudy. 8elow, we discuss Lhe visual design, sLrucLure, layouL and
navigaLion o porLolio websiLes. We also geL inLo Lhe design deLails o
every single page, including Lhe abouL, clienLs, services, porLolio,
worklow and conLacL pages. O course, you do noL necessarily have
Lo ollow Lhe indings presenLed here, raLher, geL rom Lhem a general
idea o whaL oLher porLolios look like, and Lhen come up wiLh
someLhing o your own LhaL is usable, disLincLive and memorable. We
Lhank Mark NuLLer or helping us gaLher daLa or Lhis sLudy.
Light vs. Dark Design
A general quesLion LhaL comes up oLen is wheLher Lo design a
visually appealing dark websiLe (LhaL is, use big bold Lypography and
vivid colors Lo give Lhe user a colorul and memorable experience) or
a soLer lighLer websiLe (one LhaL has a simple sLrucLure and clean
Lypography).
Surprisingly, according Lo our sLudies.
82% o porLolio websiLes have a lighL design wiLh neuLral calm
colors. 1he backgrounds o Lhese websiLes are generally a lighL
shade o gray or yellow, raLher Lhan pure whiLe.
29% o porLolio websiLes have vibranL, sLriking colors.
Dark websiLes are much more likely Lo have big Lypography
and sLrong visuals.
23
_____________________________________________________________
O course, picking a dark or lighL design depends sLrongly on your
personal approach and individual goals or Lhe porLolio. Saying LhaL
Lhe "Lrend" sLrongly avors lighL designs would be inaccuraLe because
each Lype serves iLs purpose in iLs parLicular conLexL.
How Many CoIumns?
lnLeresLingly, many o Lhe porLolio websiLes we researched Lend Lo
vary Lhe number o columns beLween secLions. ClienL and abouL
pages usually have Lwo columns, while ronL pages oLen have Lhree
Lo our columns and presenL Lhe mosL imporLanL secLions o Lhe
websiLe in a compacL overview. ln acL, we see pages geLLing more
and more columns. every sixLh porLolio websiLe we saw has aL leasL
one page wiLh our columns.
24
_____________________________________________________________
According Lo our sLudy, ew websiLes risk experimenLing wiLh so-
called ouL-o-Lhe-box layouLs and navigaLion like JavaScripL scrolling
and oLher kinds o original layouLs. MosL porLolios have LradiLional
block-sLyle layouLs, wiLh Lwo Lo Lhree clearly separaLed columns and a
simple, convenienL navigaLion menu.
Also, mosL porLolio websiLes consisL o mulLiple deLailed pages wiLh
relaLively deep sub-secLions. MinimalisL one-page porLolios were
rarely encounLered. only 5.4% o Lhe porLolio websiLes we saw have
simple and minimalisL designs.
25
_____________________________________________________________
lntroductory BIock On Top?
PorLolio websiLes commonly have a large inLroducLory block in Lhe
header o Lhe page, essenLially a shorL riendly sLaLemenL abouL whaL
Lhe agency oers and whaL advanLages a cusLomer will gain by using
iLs services. 1he block usually blends vivid imagery wiLh big
Lypography. lL conveys boLh Lhe company's overall image and Lhe
personal Lone o Lhe agency's sLa, making iL equally proessional and
riendly. Such blocks usually appear immediaLely below Lhe logo on
Lhe ronL page.
26
_____________________________________________________________
According Lo our sLudy, 79% o porLolio websiLes have some kind o
inLroducLory block in Lhe upper region. We noLiced, Lhough, LhaL
some porLolios orgo an inLroducLory block in avor o showcasing
recenL projecLs. ln such designs, a small "AbouL us" block is placed
somewhere else on Lhe page, oLen below Lhe old.
Layout AIignment
8ack in '90s, websiLe layouLs were LradiLionally leL-aligned, wiLh eiLher
verLical navigaLion in Lhe leL sidebar or horizonLal navigaLion near Lhe
head. WiLh growing adopLion o widescreen displays, Lhis has
changed. More and more designers are horizonLally cenLering Lheir
layouLs so LhaL Lhe passive whiLe space around Lhe page balances Lhe
layouL.
We did noLice a Lrend Lowards more original, even righL-aligned,
layouLs aL Lhe beginning o Lhe year, buL noL a single porLolio in our
currenL survey has a righL-aligned layouL.
27
_____________________________________________________________
According Lo our sLudy,
no porLolio layouLs are righL-aligned,
89% o porLolio layouLs are horizonLally cenLered,
Lhe resL have eiLher original adapLive layouLs, a vivid
background image LhaL ills Lhe remaining screen space or jusL
empLy space - o course, you would see Lhe remaining screen
space only i your display has a widescreen resoluLion.
28
_____________________________________________________________
Navigation AIignment
Where Lo puL Lhe main navigaLion in Lhe layouL 1he quesLion isn'L
Lrivial and oLen leads Lo debaLe among designers. Surprisingly, our
sLudy revealed LhaL mosL porLolio designers place Lhe main
navigaLion in Lhe upper-righL corner o Lhe layouL. ln acL.
80% o porLolios have large horizonLal navigaLion,
5% o websiLes have horizonLal navigaLion wiLh righL-aligned
elemenLs,
6.4% have horizonLal navigaLion wiLh leL-aligned elemenLs,
% have ull-widLh horizonLal navigaLion wiLh large clickable
elemenLs.
29
_____________________________________________________________
verLical navigaLion is rarely used, and oLher approaches (such as
horizonLal navigaLion aL Lhe boLLom o Lhe page) are ound on
unconvenLional ouL-o-Lhe-box layouLs, Lhough sLill uncommon.
5earch Box Design
While many porLolio websiLes are quiLe small, presenLing visiLors wiLh
only some general inormaLion abouL Lhe sLudio and iLs design
process, some porLolios go Lhe lengLh and presenL a varieLy o case
sLudies, blogs and deLailed inormaLion abouL Lheir every major
projecL.
ln general, i a websiLe conLains a loL o inormaLion, search
uncLionaliLy would very likely beneiL some visiLors Lo Lhe websiLe. As
iL Lurns ouL, very ew companies inLegraLe search uncLionaliLy inLo
Lheir websiLe.
89% o Lhe porLolio websiLes we sLudied have no search
uncLionaliLy,
Only % o websiLes have a search box, usually a simple clean
one. MosL o Lhe owners o Lhese porLolios have a blog LhaL
Lhey updaLe regularly.
lIash Iements
Flash, an esLablished Lool or rich inLeracLive design, seems Lo be
losing populariLy among Web designers - aL leasL among designers
30
_____________________________________________________________
o porLolio websiLes. 1he reason is probably LhaL cerLain Flash eecLs
can be replaced by advanced JavaScripL Lechniques, which are oLen
available rom popular JavaScripL libraries as easy-Lo-use plug-ins.
Slideshows, animaLion eecLs and LransiLion eecLs can now be
creaLed wiLh JavaScripL soluLions LhaL are lighLweighL and quicker and
much easier Lhan Flash. Rich Flash animaLion and video eecLs are
being replaced by simpler, subLler JavaScripL Lechniques. Flash is sLill
someLimes used, Lhough - or insLance, or dynamic LexL
replacemenL.
ln our sLudy, only 3.7% o porLolio websiLes used Flash heavily, and
even Lhen usually or slideshows and presenLaLions). 1he reason is
very likely LhaL we did noL include any inLeracLive moLion design
agencies, Flash design sLudios or video producLion sLudios in our
sLudy.
where To Put Contact lnformation?
One imporLanL objecLive o our sLudy was Lo undersLand how
designers convey inormaLion abouL conLacL opLions. Do visiLors have
Lo click on a "ConLacL us" buLLon Lo geL in Louch wiLh a design
agency Or is conLacL inormaLion placed prominenLly aL Lhe Lop o
Lhe page Or do mosL designers puL conLacL inormaLion in Lhe ooLer
- where mosL users expecL iL anyway
1he websiLes we analyzed puL conLacL inormaLion in almosL every
31
_____________________________________________________________
area o Lhe page. Lop, righL, leL, boLLom, even Lhe middle. 8uL we also
noLiced some inLeresLing paLLerns - noLe LhaL we were inLeresLed in,
irsL, where Lhe link Lo Lhe "ConLacL us" page was locaLed and,
secondly, where Lhe acLual conLacL inormaLion iLsel was posiLioned.
lL Lurns ouL LhaL.
Only 2.7% o websiLes display a phone number in Lhe header
o Lhe page,
Only 9.% o websiLes display an email address in Lhe header,
32
_____________________________________________________________
A posLal address usually isn'L displayed aL all (54.5%) or else is
placed in Lhe ooLer (40%) or upper area o Lhe websiLe (5.4%),
A "ConLacL" link usually appears in Lhe upper-righL corner
(7%) and/or in Lhe ooLer (45.4%),
"ConLacL" (59.7%) and "ConLacL us" (2%) are Lhe mosL popular
wordings or Lhe link Lo Lhe conLacL page.
33
_____________________________________________________________
About Us Page
1he AbouL page is used on porLolio websiLes Lo presenL Lhe members
o Lhe Leam, explain Lhe philosophy o Lhe agency and prove Lhe
company's experLise and proessionalism. 1he page gives Lhe design
sLudio a personal Louch and - i designed properly - eliciLs Lhe LrusL
o poLenLial cusLomers.
An AbouL page is clearly a musL or porLolios. 89% o Lhose we
analyzed included a link Lo Lhe page in Lheir main navigaLion.
1he level o deLail you use Lo describe your agency is, o course, up Lo
you. 59.% o AbouL pages we surveyed have no sub-pages and oer
visiLors a brie, compacL overview. PhoLos o Leam members, Lheir
personal inormaLion and inormaLion abouL Lhe design process are
very common on such pages. 1he Lone o Lhe main copy is usually
inormal, riendly and someLimes even unny. 1he mosL popular
wordings or Lhe link Lo Lhe page is "AbouL" (43.6%), "AbouL us"
(27.3%) and "Who we are" (7.2%).
CIient Page
One o Lhe suresL signs o proessionalism and a good repuLaLion in
Lhe indusLry is a solid lisL o clienLs wiLh whom your company has
worked. O course, Lhe more prominenL Lhe companies in Lhe lisL, Lhe
more likely poLenLial cusLomers will give you Lheir aLLenLion. ln our
experience, many cusLomers seek ouL a clienL lisL, case sLudies and
34
_____________________________________________________________
LesLimonials when searching or a design agency. So we were
surprised Lo ind LhaL only a ew agencies have a sLandalone page
lisLing Lheir clienLs.
O Lhe porLolios we analyzed, only 47.2% have a clienL page (eiLher as
a sLandalone page or parL o a porLolio page). ln mosL cases, clienLs
are represenLed by Lheir logos, which are oLen linked Lo deLailed case
sLudies LhaL discuss Lhe work done by Lhe agency and clienL
LesLimonials. 1he mosL popular wording or Lhe link Lo Lhis page is
"Our clienLs" (46.%), "ClienLs" (39.6%) and "ClienL lisL" (5.4%).
5ervices Page
Civen LhaL visiLors usually come Lo such websiLes because Lhey are
looking or services, validaLing Lheir search wiLh clear inLroducLory LexL
on Lhe ronL page or wiLh a sLandalone services page is reasonable.
PoLenLial clienLs usually have a preLLy good undersLanding o whaL
Lhey are looking or (moLion design, prinL design, Web design,
CD/DvD jackeL design, eLc.), so puLLing your major oerings on Lhe
services page is a good idea.
67.2% o Lhe porLolios we looked aL have a sLandalone services page
o some kind. 1he resL puL Lheir inormaLion on Lhe AbouL page or Lhe
ronL page. 1he services pages someLimes have sub-pages (35.%),
buL in mosL cases Lhe single page is quiLe long and deLailed.
35
_____________________________________________________________
Linking your porLolio page Lo your services page is deiniLely a good
idea because iL bridges Lheory and pracLice and shows exacLly whaL
your agency is capable o. 1he mosL popular wording or links Lo such
pages is "Services" or "Our Services" (75.7%), ollowed by "WhaL we
do" (0.8%).
PortfoIio Page
PoLenLial cusLomers obviously wanL Lo see whaL a design agency is
capable o. Does iLs sLyle maLch Lheirs WhaL aesLheLic does iL
communicaLe or visual design, Lypography and usabiliLy Do iLs
designs eel inLuiLive and look pleasanL 1hese are Lhe quesLions
poLenLial cusLomers wanL answered when Lhey become inLeresLed in a
design agency. So, a solid showcase o previous work could close Lhe
deal and convince Lhem Lo conLacL Lhe agency.
ln general, be selecLive wiLh Lhe work you showcase, and leL visiLors
order and ilLer Lhe projecLs by sLyle, indusLry and year. Also provide
some inormaLion abouL each projecL, or even conducL a deLailed case
sLudy wiLh LesLimonials and insighL inLo your worklow. UnorLunaLely,
ew porLolios do LhaL.
According Lo our sLudy.
7.2% o websiLes don'L have a porLolio aL all,
2.7% have only logos or screenshoLs, wiLhouL any descripLion
36
_____________________________________________________________
or case sLudy,
6.4% briely describe each projecL nexL Lo a logo and/or
screenshoL,
63.6% have a very deLailed page or each projecL, including
case sLudy, LesLimonials, slideshow o screenshoLs, draLs and
skeLches.
Surprisingly, Lhe mosL popular wording or Lhe link Lo Lhe porLolio
page is "Work" or "Our work" (47.2%), ollowed by "PorLolio" (27.2%).
workfIow Page
AcLually, Lhe worklow page works raLher well as a sub-secLion o Lhe
AbouL page, raLher Lhan as a sLandalone page. However, some
designers wanL Lo make Lheir explanaLion o Lheir worklow more
prominenL. While 74.5% o websiLes do noL have a worklow page aL
all, Lhe resL go Lo raLher greaL lengLhs Lo explain Lo poLenLial
cusLomers how Lheir process works and whaL expecLaLions boLh
parLies should have.
Civing poLenLial cusLomers a beLLer undersLanding o how Lhey will be
involved LhroughouL Lhe design process is cerLainly a good idea. 1he
mosL popular wordings or Lhe link Lo Lhis page are "How we work" or
"Working wiLh us" (42.8%), "Process" or "Our process" (35.7%) and
"Approach" (7.%).
37
_____________________________________________________________
Contact Page
l everyLhing goes righL, and your porLolio has earned Lhe inLeresL o
visiLors, Lhen Lhe conLacL page will be Lheir inal desLinaLion. Do
everyLhing you can Lo make iL as easy as possible or Lhem Lo conLacL
you. Make sure cusLomers provides all necessary inormaLion by
presenLing a simple, clean orm LhaL can accommodaLe Lhe essenLial
inormaLion abouL Lheir projecL. ou could also provide your phone
number, posLal address and email address. Lhe more, Lhe beLLer.
Driving direcLions, social proile buLLons and vCards are a good idea,
Loo.
According Lo our sLudy.
9% o websiLes don'L have a conLacL page (insLead, conLacL
inormaLion is included in Lhe ooLer o each page),
Driving direcLions (oLen wiLh an inLeracLive Coogle map) are
given on 45.4% o porLolio websiLes(!),
83.6% provide a phone number and email address on Lhe
conLacL page,
76.7% provide a posLal address on Lhe conLacL page,
69% o websiLes have a conLacL Web orm,
4.5% oer a vCard or downloading, usually nexL Lo Lhe email
address,
38
_____________________________________________________________
Links Lo social neLworking websiLes such as Facebook, 1wiLLer
and Linkedln are oLen used (4.5%).
5peciaIs And xtras
We also noLiced a ew disLincLive elemenLs LhaL some design agencies
oer poLenLial cusLomers. One popular approach is Lo oer some kind
o projecL or proposal requesL orm, which prospecLive clienLs are
expecLed Lo ill ouL wiLh key deLails when submiLLing a requesL. Also,
some design agencies oer a projecL planner or help cusLomers
esLimaLe cosLs or oer a more deLailed pricing guide.
Among Lhe oLher inLeresLing Lhings we noLiced were chaL windows on
Lhe conLacL page (e.g. Agami CreaLive), a "SLress-o-meLer" LhaL
displays Lhe company's currenL availabiliLy, a quoLe calculaLor, and a
"CapabiliLies and CredenLials" presenLaLion (usually in PDF).
Other lindings
We also ound LhaL.
None o Lhe porLolio websiLes have an FAQ page,
76.3% o websiLes have aL leasL one blog. And many porLolios
have Lwo or more blogs,
4.55% have a newsleLLer or mailing lisL,
9% provide a deLailed siLe map.
39
_____________________________________________________________
5ummary
82% o Lhe porLolio websiLes we analyzed have a lighL design,
wiLh neuLral, calm colors,
79% have LradiLional "block" layouLs, wiLh Lwo Lo Lhree
columns clearly separaLed and a simple, convenienLly locaLed
navigaLion menu,
79% o websiLes have some kind o inLroducLory block in Lhe
upper area,
89% have horizonLally cenLered layouLs,
80% have large horizonLal navigaLion,
5% have horizonLal navigaLion wiLh righL-aligned elemenLs,
89% do noL have search uncLionaliLy,
Only 3.7% use Flash heavily LhroughouL Lhe websiLe,
A conLacL link appears in Lhe upper-righL corner 7% o Lhe
Lime, and/or in Lhe ooLer 45.4% o Lhe Lime,
89% link Lo Lhe AbouL page in Lhe main navigaLion,
Only 47.2% have a clienL page,
67.2% o porLolios have some orm o sLandalone services
page,
63.6% have a deLailed page or each projecL, including case
40
_____________________________________________________________
sLudy, LesLimonials, slideshow wiLh screenshoLs, draLs and
skeLches,
74.5% o websiLes have no worklow page,
1he conLacL page should conLain driving direcLions, a phone
number, email address, posLal address, vCard and online orm.
vitcly lrieJmcn, eJitcr-ln-Chiej cj Smcshin Mcczine.
41
_____________________________________________________________
Creating A 5uccessfuI OnIine PortfoIio
by Secn HcJe
our porLolio is Lhe showcase o your work, skills and poLenLial or
uLure employers. 1he more Lime and eorL you dedicaLe Lo creaLing a
usable and good-looking design, Lhe higher your chances o geLLing a
beLLer accounL balance aL Lhe end o Lhe monLh. So how do you make
sure your porLolio is beLLer Lhan LhaL o compeLiLors How do you
draw Lhe aLLenLion o employers Lo your work
CreaLing a successul porLolio is easier Lhan you Lhink. Make iL simple
and easy Lo use and hiL your objecLives, and you'll end up wiLh a
successul porLolio. ln Lhis arLicle, we'll review ive piLalls LhaL plague
porLolio designs. 1hen we'll cover porLolio Lips LhaL, i careully
heeded and execuLed well, will deliver qualiLy resulLs.
LeL's review Lhe common misLakes LhaL designers make Lo ensure LhaL
you don'L all inLo one o Lhese Lraps.
PitfaII #l. Obfuscating
ClariLy and ocus should permeaLe your porLolio. Don'L use LwenLy
words when seven would do. Push your besL conLenL Lo Lhe ronL.
Where possible, place imporLanL conLenL above Lhe old. Avoid
meandering in your language. Don'L make Lhe levels o your porLolio
42
_____________________________________________________________
Loo deep, buL make sure LhaL Lhe secLion sLill accomplishes your
objecLives.
Copyblogger has an arLicle LhaL eaLures a simple lisL o wriLing Lips
based on Lhe early 20Lh-cenLury wriLer known or cuLLing ouL Lhe lu.
See Lhe arLicle FrnesL Hemingway's 1op 5 1ips or WriLing Well.
Hemingway championed shorL senLences, sLrong orceul language
and clariLy. all principles LhaL make or eecLive wriLing on Lhe Web.
ln Lhe arLicle CreaLing 1he PerecL PorLolio, Collis 1a'eed oers
porLolio advice rom Lhe perspecLive o a poLenLial employer. 1he
secLion LiLled "CeL Lo lL" gives reasons or limiLing Lhe number o
porLolio pieces you presenL and or making your besL pieces easy Lo
ind. An employer has Lo review many applicanLs quickly. ou are
more likely Lo make Lhe cuL i your besL work is prominenL. 1he
p orLolio o Fvan Fckard is an example o a websiLe LhaL promoLes his
besL work righL on Lhe irsL page and "geLs Lo iL" quickly.
PitfaII #2. Cramming lnformation
AnoLher piLall is wanLing Lo say Loo much in Loo liLLle space. A
balance needs Lo be achieved in Lhe number o pages users have Lo
click or more inormaLion and Lhe amounL o inormaLion you iL on a
page. 8e aware o Lhis when consLrucLing your porLolio.
1he more LighLly packed your porLolio, Lhe more likely iL will look
cluLLered. l you do need Lo puL a loL o inormaLion on Lhe page,
43
_____________________________________________________________
consulL Lhe posL Crid and Column Designs over on WebDesigner Wall.
lL will give you some greaL ideas on how Lo use Lhe grid Lo your
advanLage when presenLing a loL o inormaLion.
PitfaII #3. Overdoing lt
ou're less likely Lo go wrong by keeping Lhings simple and organized.
Do Lhis or all areas o your porLolio. Less is more. 1he more you Lry
Lo do in your porLolio, Lhe more likely Lhings will go wrong.
Showcasing 8 o your services will be less successul Lhan prioriLizing
a ew. 1oo many Lypes o work or Loo much work o a single Lype will
likely drown users. 1hey won'L spoL Lhose prominenL pieces LhaL show
how greaL your work is.
PitfaII #4. UnusuaI Navigation
Designers have an urge Lo sLand ouL as unique. 1he lasL place Lo acL
on Lhis urge is in your websiLe's navigaLion. lL's a numbers game. l
enough visiLors Lo your porLolio have diiculLy navigaLing iL, Lhe
porLolio will have ailed Lo achieve iLs goals.
ln Lhe posL My LasL PorLolio Sucked, ours MighL 1oo, Kyle Meyer
poinLs ouL some perecL examples o navigaLion choices Lo avoid. He
reviews 200 porLolios, and poinLs ouL Lheir problems. NavigaLion
accounLed or over 32% o Lhe problems.
44
_____________________________________________________________
lxcmles cj ncvicticn chcices tc cvciJ.
PitfaII #5. VisuaI CIutter
Consider Lhe purpose o any decoraLive elemenL. l iL meeLs your
goals and complemenLs your work, Lhen greaL. OLherwise, remove iL.
WhiLe space lends a proessional eel Lo your porLolio. 1he more
elemenLs you cram inLo an area, Lhe more diiculL iL will be Lo
mainLain a semblance o proessionalism.
Use hierarchy Lo guide users Lhrough Lhe page. On 8oxes and Arrows,
Lhe arLicle visible NarraLives. UndersLanding visual OrganizaLion
explains Lhe principles relaLed Lo visual hierarchy.
45
_____________________________________________________________
And in Lhe inLerview Where visual Design MeeLs UsabiliLy, boLh page
hierarchy and visual cluLLer are addressed. Luke summarizes some o
Fdward 1uLe's Leachings on avoiding superluous daLa.
PrincipIes of ffective PortfoIio Design
8elow you'll ind some suggesLions or improving your porLolio or
geLLing iL righL Lhe irsL Lime rom scraLch. 8ear in mind LhaL some o
Lhese suggesLions require paLience, Lime and a loL o planning. 8uL
Lhey're worLh iL. And Lhe examples provided show LhaL one can
achieve ouLsLanding resulLs jusL by ollowing Lhese 2 simple rules.
Define your Criteria and 5trategies for 5uccess
As wiLh any projecL, clariy your goals beore beginning. Once you
know your goals, Lhen every decision you make will be aecLed.
8elow are some common porLolio goals. Also, be aware LhaL
porLolios are oLen meanL Lo accomplish more Lhan one goal. Or aL
leasL consider creaLing mulLiple porLolios or dierenL purposes.
46
_____________________________________________________________
1he "hire me" portfoIio ocuses on geLLing you a job. l you
are acLively searching or employmenL, Lhen Lhe primary goal
o your porLolio is Lo geL you hired. ou can LargeL Lhis Lype o
porLolio Lo Lhe Lype o company you wanL Lo work or.
1he saIes generation portfoIio ocuses on keeping Lhe low
o work coming Lhrough Lhe door. 1he goal here is Lo generaLe
leads and move poLenLial cusLomers Lhrough Lhe sales
channel.
1he reputation-buiIding portfoIio builds your name in Lhe
indusLry and online. 1his could Lake Lhe orm o an arLisL's
showcase, or you could Lie your work LogeLher in a porLolio
blog.
1he networking portfoIio builds relaLionships. Many
neLworks have excellenL porLolio-building Lools and oer
some advanLages Lo placing your porLolio on Lheir websiLe.
Chie among Lhem is leveraging Lhe websiLe's space or
neLworking.
Consider MuItipIe PortfoIios
1here are mulLiple reasons Lo have more Lhan one porLolio. ou may
have more Lhan one skill seL Lo promoLe. ou may wanL Lo send one
porLolio Lo a parLicular markeLing direcLor Lo land you a speciic job.
1he direcLor will appreciaLe LhaL. lL saves Lhem Lime and shows LhaL
you really wanL Lhe job - even i iL's a one-page porLolio.
47
_____________________________________________________________
Fven i you ill Lhe second porLolio wiLh Lhe same work, you will sLill
beneiL by LargeLing your porLolios Lo dierenL groups.
1ake Lhe case o Nik Ainley, a UK-based designer and illusLraLor. He
has mulLiple porLolios LhaL all serve complemenLary goals. He
parLicipaLes in mulLiple porLolio-based communiLies Lo build his
repuLaLion and Lo neLwork wiLh oLher designers. His websiLe, Shiny
8inary, has received over million visiLs.
48
_____________________________________________________________
Nik has a p orLolio on 8ehance . He's involved in numerous groups
Lhere and has a large inner circle. 1he porLolio prominenLly
communicaLes LhaL he is available or reelancing, long-Lerm
conLracLs, ull-Lime work and consulLing jobs.
He also has a very popular p orLolio on DevianLArL . He's been a
member Lhere since 2004 and now has over 80 porLolio pieces and
over ,000 commenLs on his work. A loL o ans have marked his
works as avoriLes.
1hough less acLive on Callery on CPLUv, he does a porLolio Lhere,
Loo. And his porLolio on DepLhcore is good. 1haL websiLe eaLures
only arLisLs whose works have been soliciLed, so Lhe qualiLy is high.
Overall, Nik Ainley shows how one can beneiL rom having mulLiple
porLolios online, even when Lhe work being showcased in Lhe
porLolios is similar. He is Lapping inLo a dierenL communiLy wiLh
each one. 8y doing Lhis yoursel, you're making connecLions wiLh new
people and exposing Lhem Lo your work.
Target Your Market
1he more LargeLed your design is Lo a speciic markeL, Lhe more iL will
speak Lo Lhe people in LhaL markeL. l you are looking Lo land
corporaLe clienLs in a conservaLive indusLry, Lhen presenL Lhem wiLh
clean, markeLable and proessional work. Don'L showcase edgy,
grungy or arLy work unless LhaL's Lhe markeL you're going aLer.
49
_____________________________________________________________
1he arLicle 1he SecreL Lo CeLLing a LoL o Web Design Work has a
secLion enLiLled, "Design Lhe porLolio you Lhink your clienLs wanL Lo
see." And LhaL is precisely Lhe poinL. Focus your porLolio on your
LargeL markeL. l you're Lrying Lo geL cerLain clienLs, Lhen design wiLh
Lhose clienLs in mind.
1here are yeL more beneiLs Lo LargeLing a markeL. ln Lhe arLicle
Finding a 1argeL MarkeL, 8arbara Pellow discusses boLh verLical and
horizonLal approaches Lo LargeL markeLing. She idenLiies some o Lhe
oLher beneiLs o LargeL markeLing. Speaking Lo a speciic audience
allows you Lo become a recognized experL in Lhe ield more easily.
1argeLing a markeL dierenLiaLes your services.
Consider Lhe example o a Web designer who specializes in law irm
websiLe. His LargeL markeL will be dierenL Lhan LhaL o a designer
who builds rock band websiLes. 1he language, graphics and approach
o Lheir respecLive porLolios will dier greaLly. A Web designer who
has numerous successul law irm websiLes in his porLolio will make iL
easier or oLher poLenLial law irm clienLs Lo choose him over anoLher
designer or agency.
50
_____________________________________________________________
Designers are more likely Lo sLand ouL by LargeLing a speciic markeL.
1heir success raLe aL landing niche jobs and being perceived as
experLs in Lheir ield will increase. 1ake Dan Cilroy 's p orLolio as an
example o one LhaL successully LargeLs a parLicular markeL.
Having a LargeL markeL is essenLial Lo selecLing porLolio pieces and
designing your websiLe.
51
_____________________________________________________________
Prioritize UsabiIity
NavigaLion is o paramounL imporLance. See Lhe poinL above abouL
unusual navigaLion. AnoLher consideraLion is Web sLandards. 1his is
especially relevanL i you're currenLly looking or a job. Read Lhe arLicle
Five S Leps Lo a 8 eLLer D esign P orLolio by Jerey veen. ln iL, he
discusses besL pracLices or porLolios in Lhe conLexL o how you will
be perceived by employers.
Also, don'L discounL search boLs. Work Lowards beLLer search engine
opLimizaLion. 1he blog SFO8ook is a rich resource on Lhe Lopic. Cood
SFO improves Lhe abiliLy o poLenLial clienLs Lo ind you in search
engines.
Use the Right TechnoIogy
l cerLain Lechnologies are ixLures o Lhe job descripLions you're
inLeresLed in, Lhen iL makes sense Lo build your porLolio wiLh LhaL
Lechnology. Sure Flash is cool, buL is iL righL or your websiLe
Probably noL i you're a logo designer. 8uL i you're Lrying Lo land a
job as a Flash designer aL a Lop-noLch inLeracLive design agency, Lhen
iL's Lhe righL choice.
1he navigaLion in Lhe po rLolio o new media designer MaLhew v.
Robinson (see nexL page) is easy Lo use. Speed is essenLial Lo Lhe
success o a Flash websiLe. MaLLhew's porLolio is highly usable and
looks greaL.
52
_____________________________________________________________
Consider mainLainabiliLy when deciding on Lechnologies. Simpliying
your porLolio as much as possible will reduce Lhe Lime you spend
upgrading and making changes.
How easy is iL Lo add and remove porLolio pieces 1he easier iL is, Lhe
more likely you'll updaLe Lhe porLolio regularly. Jamie Cregory has an
simple, eleganL and eecLive one-page porLolio. He would have no
Lrouble adding or swapping ouL pieces.
53
_____________________________________________________________
Consider enhancemenL when looking aL Lechnology. A wise choice is
oLen Lo add jusL a liLLle JavascripL or oLher Lechnology, raLher Lhan
rely on Lhem heavily. lL will help achieve your goals wiLhouL
complicaLing your design. On Marius Roosendaal's p orLolio , Lake a
momenL Lo explore how clean Lhe source code is, complemenLed by
Lhe eleganL JavaScripL-based soluLions.
1hink irsL beore choosing beLween a sLaLic websiLe and a conLenL
managemenL sysLem. One-page porLolios are easy Lo updaLe and a
quick way Lo show your besL work. ou'll also have no issues wiLh
navigaLion, wiLh only one page. 8uL you'll have liLLle lexibiliLy, and you
won'L be able Lo leverage Lhe addiLional eaLures LhaL conLenL
managemenL sysLems have Lo promoLe your work, like a blog.
PIan The Project
A key acLor in creaLing a successul porLolio is Lo approach iL as you
would a clienL projecL. Manage Lhe projecL as proessionally as you
would any oLher Web projecL you Lake on. SeL aside suicienL Lime Lo
achieve Lhe goals you've ouLlined. Make sure also Lo seL deadlines Lo
keep you on Lrack.
Limit The 5cope And Type of work You Promote
our porLolio should be limiLed Lo your besL work wiLhin Lhe scope o
your goals. l you are looking Lo do websiLe redesigns, Lhen your
porLolio should consisL only o Lhose, noL logo designs or prinL work
54
_____________________________________________________________
you may have done. l you're noL looking or a parLicular Lype o work,
Lhen don'L showcase iL. ou will be more successul.
Jesse 8enneLL-Chamberlain redesigned his websiLe, 3Lhree.com, back
in May 2007. He used Lo have prinL and logo designs in his porLolio.
ln Lhe redesign, he clariied his LargeL markeL by ocusing on
providing design assisLance Lo developers.
His currenL porLolio presenLs only websiLe and inLerace designs
because LhaL is Lhe Lype o work he is looking or. 1his porLolio is very
successul on many ronLs and has been ciLed LhroughouL Lhe
blogosphere.
1haL doesn'L mean LhaL Jesse doesn'L do logo or idenLiLy design. He
does, buL he recognizes LhaL logo design is noL why people come Lo
him. 1hey come Lo him or designs or new or exisLing websiLes, logo
design mighL happen Lo be parL o Lhe package. See more abouL his
process in Lhe arLicle Redesigning Lhe FxpressionFngine SiLe .
CerLainly some designers and irms will have mixed bas. 1he more
Lypes o work you do well, Lhe greaLer Lhe challenge you'll have in
promoLing LhaL work. When possible, keep Lhe work on display Lo a
minimum. 1en o your besL pieces oLen work beLLer Lhan iLy good
pieces.
55
_____________________________________________________________
Provide Adequate Contact lnformation,
Documentation And xpIanations
ConLacL inormaLion should be easy Lo ind, and conLacL orms should
be easy Lo use. Make Lhis inormaLion prominenL. 1he Hicksdesign
p orLolio displays conLacL inormaLion well on every page.
Clariying your role in Lhe projecLs in your porLolio insLills conidence
in poLenLial clienLs. l you designed a websiLe buL someone else coded
iL, sLaLe LhaL. l you did everyLhing, Lhen conidenLly declare LhaL, Loo.
Cameron Moll demonsLraLes Lhis principle.
Case sLudies give a deeper view inLo your process. Once a poLenLial
clienL has narrowed Lheir lisL, Lhey may come back Lo spend more
56
_____________________________________________________________
Lime on your porLolio. Case sLudies show how compeLenL and
Lhorough your process is. David Airey makes his c ase sLudies easy Lo
ind.
ClienL LesLimonials are eecLive in persuading visiLors LhaL you deliver
on promises. 1hey increase proessionalism when LasLeully
incorporaLed in a porLolio. David Airey's arLicle 1he lmporLance o
ClienL 1esLimonials has useul inormaLion on Lhe subjecL.
Present Your work ln The Context of Your GoaIs
our work should sLand ouL Lhe mosL in your porLolio. l Lhe design
or page layouL overpowers Lhe work on display, Lhen you're noL likely
Lo meeL your goals. Consider every visual elemenL LhaL you add Lo Lhe
page careully. When unsure, avor simpliciLy.
57
_____________________________________________________________
lnfuse Your PersonaIity ln The Design
Nick La's porLolio capLures his design sLyle and inLeresLs. 1he unique
background illusLraLion sLands ouL. lL doesn'L impede usabiliLy buL
acLs as a beauLiul wrapper. For some, Lhis would inLerere Loo much
wiLh Lhe work being presenLed (Lhough his porLolio works ine).
Nick seLs his pieces againsL a solid whiLe background in a sLrong
column-based design. 1he work shown suiLs Lhe background
illusLraLion. Pulling o Lhis kind o inusion o personaliLy is diiculL,
buL iL makes your porLolio noL only memorable buL remarkable.
Nick has achieved Lremendous success wiLh his N.design SLudio
porLolio. lnusing personaliLy in a design ulLimaLely means giving
expression Lo Lhe aesLheLic you have been culLivaLing over Lhe years.
58
_____________________________________________________________
SeLh Codin makes some excellenL poinLs abouL being remarkable in
his posL How Lo 8 e R emarkable . He says, "RemarkabiliLy lies in Lhe
edges. Lhe biggesL, asLesL, slowesL, richesL, easiesL, mosL diiculL." 1his
is a good poinL, buL in pursuing LhaL edge, you run Lhe huge risk o
riding righL o Lhe cli.
Careully consider how you will blend such remarkable personal
elemenLs inLo your porLolio wiLhouL sacriicing usabiliLy and wiLhouL
upseLLing Lhe balance beLween Lhe prominence o your porLolio and
Lhe overall websiLe design.
59
_____________________________________________________________
Promote And Leverage Your work
1here are many ways Lo promoLe your porLolio. Consider joining
proessional online communiLies Lo neLwork wiLh oLher members.
We've already looked aL some communiLies where you can submiL a
porLolio. Add a Lhread Lo a design orum abouL your porLolio.
SubmiL your design Lo gallery websiLes. AlmosL any sLraLegy or
promoLing a websiLe can be used Lo promoLe a porLolio.
Add a blog Lo your websiLe. 1he more Lraic you draw Lo your
websiLe, Lhe more exposure your porLolio will geL. Dan Cederholm
was an early adopLer o Lhis sLraLegy and achieved ame wiLh his blog
SimplebiLs. His porLolio resides successully on Lhe same websiLe.
Leveraging your work involves linking Lo iL when you send emails. Add
a link Lo your porLolio in your Facebook proile or any oLher
communiLy you belong Lo. lnLegraLe your porLolio inLo your
communicaLions and online idenLiLy.
DeveIop Long-Term GoaIs
Having a vision o Lhe uLure always helps. our needs will evolve as
you Lake on dierenL projecLs over Lhe course o your career. All Lhe
same, looking aL Lhe recenL pasL can also aecL Lhe choices you make
in creaLing your porLolio.
60
_____________________________________________________________
A successul porLolio inds LhaL perecL blend o personaliLy,
prominence, simpliciLy and ease o use. Make your porLolio sLand ouL
rom Lhe crowd and serve your goals.
Secn HcJe is the crective minJ behinJ Ai3URN, c weblc cbcut
Jesin, crectivity, insircticn cnJ rchics.
61
_____________________________________________________________
Better User xperience with 5toryteIIing
3y lrcnciscc lnchcuste
SLories deine our world. 1hey have been wiLh us since Lhe dawn o
communicaLion, rom cave walls Lo Lhe Lall Lales recounLed around
ires. 1hey conLinue Lo evolve, buL Lheir purpose remains Lhe same. Lo
enLerLain, share common experiences, Leach and pass on LradiLions.
1oday we communicaLe a biL dierenLly. Our inormaLion is
ragmenLed across various mass-media channels and delivered
Lhrough ever-changing Lechnology. lL has become waLered down,
cloned, and is churned ouL quickly in 40-characLer blurbs. We've losL
LhaL personal Louch where we ind an emoLional connecLion LhaL
makes us care.
Using sLoryLelling, however, we can pull Lhese ragmenLs LogeLher in a
common Lhread. We can connecL as real people, noL jusL compuLers.
ln Lhis arLicle, we'll explore how user experience proessionals and
designers are using sLoryLelling Lo creaLe compelling experiences LhaL
build human connecLions.
lt Begins with a 5tory
ln 977, a simple sLory Lurned Lhe ilm indusLry on iLs head. 1he
special eecLs Lechnology used Lo consLrucL Lhis sLory had noL been
62
_____________________________________________________________
creaLed or used in ilmmaking prior Lo iLs release. 1he auLhor
disregarded whaL was popular and markeLable aL Lhe Lime
(apocalypLic and disasLer movies) Lo ollow his own vision. 1he ilm
sLarred unknown acLors, and Lhe genre was a relic o 930s serial
movies. lL was Lurned down by many ilm sLudios and aL one poinL
almosL shelved.
1he movie, i you haven'L yeL guessed, is Stcr Wcrs. 1he auLhor is
Ceorge Lucas. Stcr Wcrs wenL on Lo become one o Lhe mosL
successul ilms o all Lime and a pop culLure phenomenon. lL
inauguraLed Lhe blockbusLer Lrilogy and compleLely changed Lhe way
special eecLs were done. Many o Loday's mosL inluenLial ilm
companies were spawned rom Lhe success o Lhese movies.
LucasFilm, 1HX, lndusLrial LighL & Magic (lLM) and Pixar.
Stcr Wcrs wasn'L a new sLory, Lhough. lL drew on Lhe myLhic
archeLypes rom sLories Lold over Lhousands o years.
ReveaIing the Design in 5tories
1he creaLion o a sLory is oLen viewed as an almosL magical or
random process. 1he auLhor siLs in ronL o Lheir canvas, Lhe blank
word processor, and begins Lo Lype whaLever inspires Lhem aL Lhe
momenL. CreaL sLories, Lhough, don'L jusL happen randomly, Lhey are
designed. 1here is a paLLern aL work here. ln order Lo be enLerLaining,
ind Lhe righL dramaLic cues and Lap deep inLo our collecLive psyche, a
wriLer musL ollow a speciic meLhod. A sLory LhaL ails Lo pull in Lhe
63
_____________________________________________________________
audience emoLionally and hold Lheir aLLenLion probably did noL use
enough o Lhese paLLerns as a guide, as shown in Lhe arc o a Lypical
sLory below.
1he stcry 'crc' is wiJely useJ in screenwritin cnJ ncvels.
1his sLory sLrucLure has been around since long beore screenwriLing
was LaughL. 1here was a poinL when iL remained simply an unnoLiced
rhyLhm in Lhe background o every sLory. Some aspecLs o Lhis
sLrucLure - such as Lhe hero's journey and comparaLive myLhology -
were irsL popularized by Joseph Campbell. He wroLe abouL his sLudies
in Lhe book 1he Hero wiLh a 1housand Faces.
Campbell was a disciple o Swiss psychiaLrisL Carl Jung, who believed
LhaL we are all born wiLh a subconscious idea o whaL a "hero",
"menLor" and "quesL" should be.
64
_____________________________________________________________
Campbell sLudied Lhe sLrucLure o religions and myLhs across many
culLures. He discovered LhaL, consciously or noL, every sLory (or myLh)
was creaLed wiLh Lhe same basic ormula. 1his is why greaL sLories
Lranscend even language barriers. 1his assessmenL by Campbell seL
o large ripples in Lhe waLers o myLh and religion.
1he sLories LhaL capLivaLe us on Lhe silver screen and in novels ollow
Lhese same paLLerns. We Lalk abouL dialogue and scenes aL Lhe waLer
cooler as i Lhey happened Lo a personal riend, raLher Lhan a icLional
characLer. All because we become emoLionally invesLed in Lhe
characLers and sLory.
8rands sLrive or Lhis emoLional invesLmenL every day. SLarbucks
doesn'L jusL wanL Lo sell us coee - iL wanLs cusLomers Lo become
invesLed in iLs sLory. Lhe ambience, aromas, communiLy. lLs goal is Lo
become Lhe "Lhird abode" (home, work, SLarbucks). lL claims LhaL, "lL's
really abouL Lhe human connecLion."
The Power of motion
When speaking o sLories, we describe more o an emoLional
experience, someLhing LhaL aecLs us aL a very personal level. 1his is
much dierenL Lhan Lhe way we usually describe our experience wiLh
producLs such as websiLes and applicaLions. 1hese are seen more as
uLiliLarian and Lask-orienLed.
65
_____________________________________________________________
l we are able Lo accomplish whaL we seL ouL Lo do- say, Lranser
money in a banking applicaLion - Lhen iL has been a good user
experience. l Lo achieve our goals, Lhe inLerace should be usable and
should uncLion Lhe way we expecL. 1his view is preached by many
usabiliLy experLs, including Donald Norman, proessor o cogniLive
science and a usabiliLy consulLanL or Lhe Nielsen Norman Croup.
Upon hearing people say LhaL i his rules were ollowed, Lhen
"everyLhing would be ugly," Norman decided Lo explore people's
relaLionship Lo design. 1he resulL was Lhe book lmcticncl Desin.
1hrough his research, Norman ound LhaL design aecLs how people
experience producLs, which happens aL Lhree dierenL levels and
LranslaLes inLo Lhree Lypes o design.
66
_____________________________________________________________
VisceraI design
1his design is rom a subconscious and biologically pre-wired
level o Lhinking. We mighL auLomaLically dislike cerLain Lhings
(spiders, roLLen smells, eLc.) and like oLhers ("aLLracLive" people,
symmeLrical objecLs, eLc.). 1his is our iniLial reacLion Lo
appearance.
BehavioraI design
1his is how Lhe producL or applicaLion uncLions, Lhe look and
eel, Lhe usabiliLy. our LoLal experience wiLh using iL.
RefIective design
1his is how Lhe producL or applicaLion makes us eel aLer Lhe
iniLial impacL and inLeracLion, where we associaLe iL wiLh our
broader lie experience and aLLach meaning and value Lo iL.
1here is a loL more Lo emoLion Lhan can be covered here, buL
undersLanding Lhese basic levels o processing gives us some insighL
inLo why sLoryLelling is so powerul. Consider how Lhe levels play o
each oLher aL an amusemenL park. people pay Lo be scared. AL Lhe
visceral level, we have a ear o heighLs and danger. AL Lhe relecLive
level, we LrusL LhaL iL is sae Lo go on Lhe ride, and we anLicipaLe LhaL
emoLionally charged rush and sense o accomplishmenL (in
overcoming our ear o heighLs) when Lhe ride is over.
Civen how viLal emoLion is Lo how we Lhink, iL becomes all Lhe more
imporLanL noL jusL Lo creaLe a uncLional and usable experience buL Lo
seek ouL and creaLe a meaningul connecLion.
67
_____________________________________________________________
The Basics of 5toryteIIing for User xperience
AL a basic level, sLoryLelling and user experience have common
elemenLs - planning, research and conLenL creaLion - LhaL can be
used Lo creaLe a saLisying experience. SLoryLelling oers a way or a
Leam Lo really undersLand Lhe producL iL is building and Lhe audience
iL is building iL or.
SLories enable Lhe mosL complex o ideas Lo be eecLively
communicaLed Lo people. 1his craLed producL or experience Lhen
delivers meaning and emoLion Lo iLs users. Proessionals who
currenLly exploiL Lhe power o narraLive in Lheir projecLs do so in vasLly
dierenL ways. 1he ollowing secLions ouLline some o Lhe modern
uses and beneiLs o sLoryLelling.
Bring Teams Together
User experience proessionals Lypically have Lo work wiLh people rom
many dierenL backgrounds. Depending on Lhe Lype o experience
needed, Lhis may require Lhe eorL o anyone rom an engineer Lo a
user inLerace designer. And Lhe approach oLen Laken in creaLing
websiLes or applicaLions is Lo irsL consider Lhe Lechnology, or Lhe
limiLs o LhaL Lechnology. 1o make maLLers more complex, members o
large Leams Lend be preoccupied wiLh Lheir respecLive domains, or
example, Lhe markeLing person will ocus on his own objecLives and
sLraLegies based on his experience. 1his is noL always in Lhe end user's
besL inLeresL and oLen resulLs in a poor, diluLed experience.
68
_____________________________________________________________
1he user experience Leam selecLed Lo creaLe an iPhone applicaLion or
Lhe masses would be quiLe dierenL Lhan Lhe one selecLed Lo develop
a medical device or docLors. As menLioned, Lhe experLs aL craLing
sLories know how Lo Lap inLo a way o communicaLing LhaL has been
around or Lhousands o years. Using sLoryLelling, user experience
Leams can also injecL emoLion and value inLo Lheir producL or users.
User-Centered GoaI
ln hearing abouL Lhe sLoryLelling approach, one mighL Lhink LhaL iL's
jusL anoLher way o Lalking abouL "sLraLegy." 8uL sLoryLelling carries
wiLh iL a more user-cenLered goal. Companies like Apple have used
similar meLhods in Lheir design process Lo really deine whaL Lhey are
building.
69
_____________________________________________________________
Cindy ChasLain reers Lo iL as an exerience theme. She says Lhis Lheme
is "Lhe core value o Lhe experience" being oered. ChrisLian Saylor
reers Lo iL as inding Lhe lecJ chcrccter. WiLhouL Lhis user-cenLered
goal, he sLaLes, we are jusL "designing or Lhe sake o designing."
OrienLed around a speciic Lheme or characLer, Lhe oLherwise
uncoordinaLed elemenLs o an experience all merge inLo a clear goal
and purpose. WiLh sLoryLelling, a diverse Leam creaLing a websiLe or
applicaLion can collecLively link Lhe Langible elemenLs and creaLe
someLhing LhaL is a meaningul experience and more Lhan jusL biLs
and byLes.
Defining the User
A loL o discussion and arLicles are circulaLing abouL usabiliLy and
uncLionaliLy on websiLes and in applicaLions. FuncLionaliLy, o course,
is imporLanL. For insLance, whaL good is an airplane i Lhe engine isn'L
powerul enough Lo geL iL o Lhe ground l you sLep back Lhough,
Lhe more imporLanL quesLion is, how ar does Lhe passenger need Lo
go l iL's only a ew miles down Lhe road, Lhen iL really doesn'L maLLer
i Lhe plane is uncLional. iL's Lhe wrong soluLion alLogeLher. So,
idenLiying whaL we really need Lo build is key in Lhe iniLial phase o
building Lhe user experience.
When Lhe research is inished, we Lypically move on Lo creaLe
personas as a way Lo undersLanding Lhe user, and Lhis can be
regarded as parL o creaLing Lhe sLory. 8y building an imagined
represenLaLion o Lhe user based on real research and observaLion, we
70
_____________________________________________________________
are able Lo empaLhize wiLh users and Lruly undersLand Lheir needs. 8y
creaLing sLories around Lhese personas, we are able Lo conceive a
more meaningul vision o Lhe projecL.
SLoryLelling allows us Lo LranslaLe Lhis research inLo anecdoLes, which
people have been shown Lo have a beLLer raLe o recall. ln addiLion,
being able Lo empaLhize wiLh users Lhrough sLories helps us beLLer
undersLand Lhe emoLional side o Lhe experience. Films and video
games deliver experiences LhaL aecL people aL an emoLional level.
1his is someLhing people will begin Lo expecL more rom Lhe websiLes
and applicaLions Lhey use every day.
We can Lhus shiL our ocus rom creaLing simple Lask-driven websiLes
and applicaLions Lo culLivaLing valuable human connecLions. 1his is,
aLer all, a "global campire" as CurL Cloninger reers Lo iL. He goes on
Lo say, "1he Web is noL a global neLwork o connecLed compuLers. 1he
Web is a global neLwork o connecLed people. And sLoryLelling is sLill
Lhe mosL eecLive way Lo emoLionally impacL people."
The Benefits
MosL projecLs have a loL o documenLaLion ouLlining Lheir goals and
sLraLegies. 1hese come in Lhe orm o business requiremenLs,
uncLional documenLaLion and oLher supporLing research and
inormaLion. SLoryLelling can improve Lhe overall producL/experience
by doing Lhe ollowing.
71
_____________________________________________________________
PuLLing a human ace Lo dry daLa,
Simpliying complex ideas or Lhe Leam,
Making Leam collaboraLion more eicienL,
Clariying purpose,
Caining insighL inLo primary users,
SeLLing a projecL's direcLion more quickly,
FaciliLaLing communicaLion wiLhin large organizaLions,
Delivering meaning and value Lo users.
SLoryLelling helps Leams ocus on everyLhing rom websiLe conLenL Lo
undersLanding Lheir business problem in a new way. For example, you
could quickly deine a projecL's scope wiLhouL designing or
wireraming screens. 1he UX Leam or ahoo Personals creaLed a sLory
abouL a icLional daLing couple going Lhrough cerLain scenarios.
1hrough Lhis sLory, Lhe Leam was able Lo beLLer undersLand Lhe
purpose o Lhe websiLe and Lhe Lype o experience users should go
Lhrough. lL opened up Lhe Lask- and sLraLegy-based sLeps Lo Lhe more
auLhenLic and emoLional experience o daLing. lL was a powerul way
Lo geL Lhe Leam Lo speak direcLly "Lo" Lhe experience, raLher Lhan
creaLe documenLaLion "around" iL.
HappiIy ver After. The ReaIity
1here are many dierenL opinions on how besL Lo craL Lhe user
experience. Many o Lhem sLem rom Lhe basic approaches developed
by Alan Cooper, a pioneer in building soLware wiLh user-driven
experiences. 8uL as Lechnology evolves, so do Lhe approaches and
72
_____________________________________________________________
processes used Lo creaLe soluLions LhaL meeL users' needs. 1he
number o approaches Lo user experience is close Lo Lhe number o
rameworks available Lo develop soLware. lL usually comes down Lo
whaL is besL or Lhe Lype o projecLs LhaL a Leam Lypically works on.
our abiliLy Lo ollow a parLicular process depends on many Lhings,
including Limeline, budgeL and goals. ln realiLy, doing everyLhing as
ouLlined is noL always possible.
SLoryLelling is a way Lo connecL Leams quickly, Lo gain insighL and
undersLanding. 1he experiences we creaLe Lake shape Lhrough design,
conLenL and user inLeracLion. SLoryLellers have been communicaLing
successully or much longer Lhan websiLes have been around -
which makes sLoryLelling a valuable Lool or Lhe business side o
design.
A lew Modern-Day 5toryteIIers
AlLhough Lhe idea o using sLoryLelling wiLhin Lhe user experience
process is airly new, a ew proessionals are using iL in Lheir projecLs. l
spoke wiLh some o Lhese modern-day sLoryLellers Lo geL Lheir
perspecLive and see how Lhey are applying sLoryLelling Lo Lheir work.
DoreIIe Rabinowitz
Dorelle is a sLoryLeller who designs, illusLraLes and Lells sLories in a
varieLy o media and conLexLs. MosLly she Lells sLories.
73
_____________________________________________________________
Question. How do you approach storyteIIing in UX?
Dcrelle. l see iL as anoLher Lool we can use as a caLalysL Lo
communicaLe during our design acLiviLies. For me as a designer, iL's
abouL puLLing a human ace Lo Lhe design process and bringing
people LogeLher. ou can geL designers, engineers, producL managers,
sLraLegisLs and execs jazzed abouL a proposed eaLure because o a
sLory, and iL can be exLremely ulilling. As a person, iL's all abouL Lhe
emoLional connecLion.
8ack in Lhe day, l worked on an Oxygen media websiLe called "Our
SLories," where we creaLed shorL online digiLal sLories wiLh our
74
_____________________________________________________________
audience. We called iL co-creaLion, and when l moved more inLo
designing user experiences, l realized LhaL sLories helped me
undersLand my users beLLer. As l did more and more work, l realized
LhaL sLoryLelling aciliLaLes communicaLion, LhaL people respond
emoLionally Lo sLories, bond over sLories and share sLories again and
again, and LhaL Lhe more l inLegraLed sLoryLelling inLo my work, Lhe
beLLer Lhe work was.
So much o whaL we do isn'L only abouL Lhe design buL abouL how we
deal wiLh people, negoLiaLe and plan. SLoryLelling can be eecLive in
all o Lhese siLuaLions as well as in driving Lowards soluLions. l Lhink
Lhe value o sLories is independenL o Lhe Lype o experience in which
Lhey are used.
Question. ln the end, business goaIs (i.e. profit) ruIe the day. How
does storyteIIing tie into this?
Dcrelle. SLories help bridge undersLanding, so sLoryLelling can help
Leams geL on Lhe same page and speak Lhe same language - leading
Lo expecLed resulLs. SLories can help people work more collaboraLively
and Lhus help Leams geL projecLs done asLer, wiLh a asLer Lime Lo
markeL. SLories can help rerame business problems so LhaL projecLs
solve Lhe righL problems and come Lo beLLer soluLions.
Question. where is the best pIace to Iearn more?
Dcrelle. Cindy ChasLain's arLicle in 8oxes and Arrows on Fxperience
1hemes is a greaL read.
75
_____________________________________________________________
Curt CIoninger
CurL is an arLisL and wriLer. He says his arL doesn'L really Lell a sLandard
narraLive wiLh a climax and resoluLion buL raLher Lries Lo creaLe a kind
o evenL experience.
Curt. Design, parLicularly graphic design, can be undersLood as a
visual orm o communicaLion, and sLoryLelling is a hisLorically LesLed
orm o communicaLion. SLoryLelling or narraLive design is more like
someLhing Lo keep in mind when considering Lhe user's experience.
76
_____________________________________________________________
1o me, narraLive design jusL means having a consisLenL "voice" and
having every design elemenL conLribuLe Lo Lhe same goal or
conclusion. lL also means allowing or an arc in Lhe user experience.
And iL means allowing Lhe user Lo have some kind o personal say in
compleLing her experience.
1his is Lhe dierence beLween a novel (where Lhe user menLally ills in
loLs o visual blanks) and a Hollywood acLion ilm (where all Lhe blanks
are illed in or Lhe user). A novel is arguably more engaging.
Curt. Hollywood Lells sLories, and iL seems Lo make a loL o money
rom iL. PoliLicians, journalisLs and large corporaLions oLen Lell sLories
(i.e. lies), and Lhey make money. 1he evoluLion o any brand over Lime
is a kind o narraLive.
CorporaLions spend all kinds o money Lrying Lo convince us LhaL Lheir
characLers (e.g. Ronald McDonald) are Lhe good guys. NarraLive and
capiLalism have always enjoyed a ruiLul relaLionship.
Curt. l like NaLhan Shedro's Fxperience Design book. lL's more abouL
"XD" Lhan "UX," buL iL addresses narraLive aL several poinLs
LhroughouL. Richard Schechner's Perormance 1heory is good. lL has
noLhing Lo do wiLh user experience design per se, buL iL is abouL
77
_____________________________________________________________
LheaLer, Lribal riLual and Lhe culLural inLeraces LhaL people consLrucL
Lo give meaning Lo Lheir worlds.
Christian 5ayIor
ChrisLian is a sLoryLeller who designs user experiences. He believes
LhaL Lhe Lhings around us have very powerul sLories Lo Lell.
Christicn. SLoryLelling gives us purpose and a sense o place. So, iL
hasn'L been so much a "discovery" o sLoryLelling as a naLural
progression Lowards uncovering an experience buried deep wiLhin a
narraLive LhaL wanLs Lo be Lold.
78
_____________________________________________________________
1his idea o adopLing "sLoryLelling" as a means Lo uncover a rich
experience or Lhe "end" user, whoever Lhey may be, jusL makes sense.
AL Lhe end o Lhe day, Lhe job o Lhe (UX) designer is Lo help Lell a
sLory LhaL is relevanL and meaningul, regardless o Lime, device or
even locaLion. We use "personas" (characLers in our sLory) and
"scenarios" (narraLives LhaL Lell a sLory abouL Lhe persona) in order Lo
ully undersLand noL only Lhe LargeL audience buL also Lheir goals and
desires, which ulLimaLely helps Lo creaLe a meaningul experience or
Lhem.
l sLrongly believe LhaL everyLhing has a sLory associaLed wiLh iL. Fvery
business, social group, concepL, meLhodology and relaLionship is
desperaLely seeking ouL beLLer ways Lo engage wiLh iLs audience.
Some jusL happen Lo do iL on a large scale (Apple), while oLhers
quieLly esLablish a paLLern o lie LhaL goes unnoLiced unLil iL
disappears (Lhe remoLe conLrol). From packaging LhaL siLs on Lhe sLore
shel Lo Lhe applicaLions LhaL ollow us LhroughouL our days, sLory
inluences jusL abouL every aspecL o our lives. SLory is all around us. lL
gives us a sense o undersLanding and knowledge o Lhe people and
Lhings LhaL are imporLanL Lo us.
l Lhink Lhe mosL imporLanL aspecL o sLoryLelling or me is LhaL iL has
Lhe abiliLy Lo change Lhe way we view and inLeracL wiLh our world.
79
_____________________________________________________________
Christicn. l you're Lelling Lhe righL sLory Lo Lhe wrong audience, or
even Lelling Lhe righL sLory Lhe wrong way, Lhen your business or
producL will ulLimaLely ade away. Design and Lechnology are Lhe
caLalysLs o change in Lhe "experience economy." And i we don'L seek
ouL beLLer ways Lo Lell our sLory, Lhen Lhe viLaliLy o our business,
producL or service will be jeopardized.
As we all know, Lhe business world is consLanLly looking aL Lhe boLLom
line. We live in a world saLuraLed by producLs and services LhaL vie or
our aLLenLion, and Lhe experience - Lhe way in which a sLory unolds
- will be Lhe dierence beLween a company's success and ailure.
Christicn. "Lovemarks (Lhe uLure beyond brands)" by SaaLchi &
SaaLchi. lL has unbelievable insighL inLo Lhe way we all in love wiLh Lhe
companies and producLs LhaL surround us.
Cindy Chastain
Cindy is a Lrained ilmmaker and screenwriLer who makes ilms and
wriLes scripLs and considers hersel a visual and dramaLic sLoryLeller.
80
_____________________________________________________________
CinJy. SLoryLelling is anoLher discipline LhaL can be used in Lhe
conLexL o design as ) a device, 2) a ramework and/or 3) a craL Lo
draw upon. ln oLher words, we can use sLory as a way Lo capLure and
sell an idea, we can use iL as a way Lo rame an approach Lo Lhe
design o a producL or service, or we can use narraLive Lechniques Lo
craL an inLeracLion and, hence, a varieLy o behavioral and emoLional
responses Lo a sLory.
We Lell sLories LhaL seek Lo order chaos, provide meaning and engage
Lhe emoLions o our lisLeners. We design experiences LhaL hopeully
do someLhing similar. 8uL in Lhe conLexL o design, meaning is also
abouL whaL Lhis experience, producL or service will do or a person. lL's
abouL how someLhing iLs inLo or enhances his lie. lL's abouL
undersLanding how someLhing is supposed Lo uncLion.
As designers, we do well aL aciliLaLing Lhe dialogue beLween people
and Lhe inLeracLive producLs Lhey use. 8uL we oLen neglecL Lo
consider Lhe more inLangible layer o experience, Lhe sLories LhaL
evolve dynamically Lhrough inLeracLions LhaL people have wiLh Lhe
Lhings we make.
We also lack an approach Lo holisLic design. l we can learn Lo
approach design more like wriLers approach sLories, we will noL only
build richer experiences buL sLarL Lo develop a craL in our work LhaL
knows how and when cerLain narraLive Lechniques can be used Lo
engage Lhe minds, emoLions and imaginaLions o users. Knowing Lhe
craL o narraLive helps us build beLLer sLories, which helps us Lurn a
81
_____________________________________________________________
seL o lieless eaLures and uncLions inLo a whole experience LhaL
engages Lhe minds and emoLions o cusLomers.
CinJy. 8rand message is no longer Lhe Lhing LhaL sells. Fxperience
sells. l Lhe inLangible pleasure, emoLion or meaning we seek can be
made Langible Lhrough Lhe use o sLory and narraLive Lechniques, we
will build more compelling producL experiences. And i Lhe experience
is more compelling, businesses will proiL rom droves o loyal,
experience-discerning cusLomers.
WiLhouL Lhis undersLanding, choices abouL whaL eaLures should be
included and how Lhey should behave seem boLh uninspired and
disconnecLed. Sure, we have business goals, user needs, design
principles and besL pracLices Lo draw on, buL Lhese Lhings won'L geL a
Leam Lo a place where iL is collaboraLing in Lhe same concepLual
space, leL alone designing or emoLion and meaning.
CinJy. SLarL wiLh Lhe discipline iLsel, like Stcry, RoberL McKee's book
abouL screenwriLing. For a dive inLo Lheory, l recommend Ncrrcticn in
the licticn lilm, by David 8ordwell, and Lhe classic Ccmuters cs
1hectre by 8renda Laurel. And or Lhe irsL word on sLoryLelling, read
1he Pcetics by ArisLoLle.
82
_____________________________________________________________
The 5toryteIIing xperiences Around Us
1here are many experiences in which sLoryLelling is used Lo creaLe a
compelling message LhaL draws users in. 1he sLories are noL always
visible or apparenL righL away, buL underneaLh many good
experiences we ind greaL sLories. 1hey can appear in a series o
inLeracLions LhaL Lie inLo a larger sLory or simply in an emoLional
connecLion LhaL we orm wiLh a producL or brand.
ln Packaging. AppIe
One company Lhe excels aL delivering a powerul sLory is Apple. Laid
over Lhe image o Lhe iPhone box above is Lhe sLory arc (inLroduced in
parL ) LhaL mosL screenplays and novels ollow. Purchasing an Apple
producL and opening Lhe many beauLiul layers o packaging ollow a
similar sLory arc in building anLicipaLion.
As you move Lhrough Lhe process, you ind compelling phoLography
and clever wriLing. 1hese build a sorL o saLisying Lension unLil you
inally arrive aL Lhe climax o Lhe experience and uncover Lhe iPhone.
A more common anLi-climacLic approach would be Lo wrap Lhe
iPhone in bubble plasLic, reducing Lhe sLory Lo a mere "8uy me."
83
_____________________________________________________________
ln TechnoIogy. Microsoft Courier
1he MicrosoL Courier device is in Lhe "laLe proLoLype" sLage o
developmenL. 1his is more o a bookleL Lhan Apple's iPad, wiLh dual
mulLi-Louch screens. 1his video uses sLoryLelling Lo Lake you Lhrough
Lhe user experience o Lhe bookleL. lnsLead o simply running Lhrough
some o iLs cool eaLures, iL Lells us Lhe compelling sLory o a projecL in
which Lhe poLenLial o Lhe Courier is exploiLed.
84
_____________________________________________________________
ln Marketing. 5ix 5cents Perfume
1he Six ScenLs range o ragrances is creaLed annually by pairing six
prominenL arLisLs wiLh six celebraLed perumers. 1he goal is Lo help
raise awareness or a chariLable cause. For Lhe second series, each
boLLle comes wiLh a DvD LhaL conLains a video and phoLography. 1he
video and imagery creaLe a sLory around each scenL Lo evoke a cerLain
eeling and Lheme.
85
_____________________________________________________________
ln Architecture. HBO 5tore
1he H8O SLore (in midLown ManhaLLan) is designed wiLh sLoryLelling
builL seamlessly inLo an immersive experience. 1he archiLecLure and
Lechnology allow Lhe space Lo become a new way Lo experience Lhe
props and merchandise o H8O shows. 1he goal or Lhe sLore
(designed in parL by design and branding sLudio lmaginary Forces)
was Lo creaLe an inLelligenL and memorable experience or visiLors.
ln Data. Taxi07.Roads lorward
ln her commenLs on sLoryLelling, Dorelle RabinowiLz shows how
sLoryLelling can be used Lo communicaLe oLherwise boring daLa and
Lurn iL inLo a more accessible experience. One example o Lhis was
1axi07.Roads Forward. lL was a reporL or Lhe New ork CiLy 1axi &
86
_____________________________________________________________
Limousine Commission on Lhe currenL sLaLe o Lhe Laxi cab indusLry in
New ork. 1he inormaLion was presenLed Lhrough sLories in comic
book orm and beauLiul inographics.
ln websites. 5howtime 5ports
ln a projecL or ShowLime SporLs, Cindy ChasLain and Lhe Leam aL
lnLeracLive ParLners creaLed an engaging experience or ans using
experience Lhemes. Fans would be able Lo ollow and learn abouL an
enLire ighL sLory online inLeracLively Lhrough video. 1he experience
Lhemes guided noL jusL Lhe conLenL buL Lhe uncLional requiremenLs
and websiLe archiLecLure.
87
_____________________________________________________________
The nd ls The Beginning Of This 5tory
Many aspecLs o sLoryLelling and user experience could noL be
covered in Lhis arLicle. 1his series is meanL Lo give you a sLarLing poinL
Lo explore and learn more. 1he end o Lhis sLory hasn'L been wriLLen.
1his is jusL Lhe beginning o using sLoryLelling in new ways.
lrcnciscc lnchcuste is c UX Jesiner whc enjcys writin. Ycu'll jinJ
mcre cbcut his cJventures in the wcrlJ cj Jesin cnJ user exerience
cn his blc linch.
88
_____________________________________________________________
Designing User lnterfaces lor Business web
AppIications
3y Icnlc Icvcncvic
8usiness Web applicaLion design is Loo oLen neglecLed. l see a loL o
applicaLions LhaL don'L meeL Lhe needs o eiLher businesses or users
and Lhus conLribuLe Lo a loss o proiL and poor user experience. lL
even happens LhaL designers are noL involved in Lhe process o
creaLing applicaLions aL all, puLLing all o Lhe responsibiliLy on Lhe
shoulders o developers.
1his is a Lough Lask or developers, who may have plenLy o back-end
and ronL-end developmenL experience buL limiLed knowledge o
design. 1his resulLs in unsaLisied cusLomers, rusLraLed users and
ailed projecLs.
So, we will cover Lhe basics o user inLerace design or business Web
applicaLions. While one could apply many approaches, Lechniques and
principles Lo Ul design in general, our ocus here will be on business
Web applicaLions.
websites vs. web AppIications
Conusing Web applicaLions and websiLes is easy, as is conusing user
inLerace design and websiLe design. 8uL Lhey are dierenL boLh in
89
_____________________________________________________________
essence and in so many oLher ways, which we'll explore in Lhis arLicle.
A websiLe is a collecLion o pages consisLing mosLly o sLaLic conLenL,
images and video, wiLh limiLed inLeracLive uncLionaliLy (i.e. excepL or
Lhe conLacL orm and search uncLionaliLy). 1he primary role o a
websiLe is Lo inorm. Some websiLes use conLenL managemenL
sysLems Lo render dynamic conLenL, buL Lheir naLure is sLill
inormaLional.
Web applicaLions, on Lhe oLher hand, are dynamic, inLeracLive sysLems
LhaL help businesses perorm business-criLical Lasks and LhaL increase
and measure Lheir producLiviLy. 1hus, Lhe primary role o a Web
applicaLion is Lo perorm a uncLion LhaL serves Lhe user's Lasks and
according Lo deined business rules.
Web applicaLions require a higher level o involvemenL and
knowledge o Lhe sysLem on Lhe parL o Lhe user. Users don'L jusL
sLumble upon an applicaLion, do Lheir work and bounce o. 1hey use
iL as a Lool Lo perorm criLical Lasks in Lheir daily work. ln Lhe end, Lhey
cannoL easily disconLinue using Lhe applicaLion and swiLch Lo anoLher
i Lhey don'L like how iL's working, as is Lhe case wiLh websiLes.
Different Types of web AppIications
8usiness applicaLions range in Lype rom invoicing or reelancers Lo
conLenL managemenL sysLems Lo documenL managemenL sysLems Lo
banking and inancial sysLems.
90
_____________________________________________________________
We can disLinguish beLween cen cnJ clcseJ cliccticns. Open
sysLems are online applicaLions LhaL are easily accessible Lo anyone
who opens an accounL. Users can access such applicaLions via Lhe
Web and can open an accounL or ree or by paying a ee.
Closed sysLems (or line-o-business applicaLions) are usually noL
accessible ouLside o Lhe company LhaL uses iL, and Lhey can be
considered "oline" applicaLions (Lhough many sysLems expose Lheir
uncLionaliLy Lo business parLners via eiLher services or specialized
inLeraces). Such sysLems usually run on Lhe company's local neLwork
and are available only Lo employees.
l don'L know who coined iL, buL one Lerm l especially like is
webliccticn, which describes whaL a Web applicaLion is in general. 1his
doesn'L mean, Lhough, LhaL a Web applicaLion is a hal-websiLe hal-
applicaLion hybrid. lL is ar more complex LhaL LhaL.
lirst, Know Your Users
ou've probably heard Lhis a Lhousand Limes, and or good reason. A
successul user inLerace ocuses on users and Lheir Lasks. 1his is key,
and Loo many developers have ailed Lo creaLe a good user
experience. As SLeve Krug said, "Developers like complexiLy, Lhey
enjoy discovering how someLhing works."
91
_____________________________________________________________
When idenLiying your users, keep in mind LhaL clienLs are noL users,
and you are noL a user. AlLhough a clienL's managemenL Leam will
usually be inLeresLed in Lhe projecL and Lry Lo inluence decisions,
remember LhaL Lhey won'L be siLLing in ronL o Lhe compuLer several
hours a day (unless Lhe applicaLion is speciically or Lhem).
How to ldentify Users?
ldenLiying users can be done using several Lechniques, such as user
inLerviews, business sLakeholder inLerviews and Lhe "shadowing"
meLhod o observaLion. lnLerviews can give you answers Lo quesLions
abouL Lhe users' knowledge o Lhe sysLem and compuLers in general,
92
_____________________________________________________________
while shadowing can yield more deLailed inormaLion abouL how
users perorm Lasks and whaL errors Lhey make. 1he meLhod is called
shadowing because Lhe observer is like a shadow, waLching and
noLing Lhe sLeps a user Lakes.
l you don'L have access Lo real users - eiLher because you don'L have
permission or are designing an open applicaLion - you can use
personas, a Lool LhaL helps idenLiy users. Personas are a
represenLaLion o real users, including Lheir habiLs, goals and
moLivaLions. 8ecause cerLain inormaLion abouL users is oLen
idenLiied Lhrough business analysis, you can make use o iL Lo creaLe
personas. l you are noL amiliar wiLh Lhe Lool, a comic by 8rad Colbow
will help.
1ask analysis helps idenLiy whaL Lasks users perorm in Lheir jobs, how
Lhey do Lhem, how long Lhey Lake and whaL errors Lhey make.
93
_____________________________________________________________
SomeLimes clienLs will be using an old version o Lhe applicaLion LhaL
you are designing Lo replace. Make use o LhaL old sysLem and waLch
how users use iL. UndersLanding Lheir Lasks and challenges will be
easier LhaL way.
Regardless o who your users are, one Lhing is cerLain. in mosL cases,
you will have Lo consider boLh novices and experLs. Novice users
should be enabled Lo learn as asL as possible, while experL users
should be enabled Lo perorm Lheir Lasks exLremely eicienLly. 1his
may mean creaLing separaLe inLeraces. 8uL in many cases you will be
able Lo accommodaLe boLh Lypes o users in Lhe same inLerace
Lhrough various Lechniques, such as progressive disclosure.
Such research is usually done by business analysLs. 8uL i no one else
is responsible or iL, you should do iL. Once you have Lhe necessary
inormaLion, you can begin wiLh Lhe design.
Design Process
ou can ollow one o any number o processes in designing Lhe user
inLerace. ou mighL already have one. However, l would suggesL LhaL
you consider Lhe Agile approach. Why, you ask Well, because or
users (and clienLs), Lhe user inLerace is Lhe producL. 1he boLLom line is
LhaL Lhey don'L care abouL your skeLches or anLasLic back end or
powerul server. All Lhey wanL Lo see is Lhe user inLerace.
So, how does Agile help lL helps Lhrough iLs key principle. Lhe
94
_____________________________________________________________
iLeraLive approach. Fach iLeraLion consisLs o all o Lhe phases deined
by your process. 1his means LhaL aL Lhe end o Lhe irsL iLeraLion, you
will have a producL LhaL can be LesLed, a proLoLype.
5ketching
SkeLching is a powerul way Lo explore ideas. 1he goal is Lo arrive aL
Lhe soluLion by skeLching dierenL concepLs. MosL skeLches will be
Lhrown ouL, buL LhaL is okay. As 8ill 8uxLon says in his Sletchin User
lxerience book, skeLches are asL Lo creaLe and easy Lo dispose o,
which is why Lhey are so powerul.
95
_____________________________________________________________
Are skeLches Lhe same as wirerames Well, Lhe dierences can be
blurry, buL l would say no. Wirerames don'L capLure rough ideas buL
raLher develop Lhem. Read a anLasLic discussion on lxDA. SkeLching
8eore Lhe Wirerames.
Once you geL Lhe "righL" skeLches, or aL leasL Lhe ones LhaL you Lhink
are righL, you can creaLe more deLailed wirerames or go sLraighL Lo
creaLing inLeracLive proLoLypes.
Prototyping
1he nexL sLep in Lhe process is Lo creaLe proLoLypes LhaL simulaLe Lhe
real applicaLion. A proLoLype can conLain one or more eaLures (or all
o Lhem), buL iL acLually does noLhing. lL merely simulaLes Lhe behavior
o a real applicaLion, and users will eel LhaL Lhey are acLually doing
someLhing. ProLoLypes may conLain some uncLionaliLy i needed
(such as complex calculaLions).
8ecause Lhe naLure o a proLoLype done in H1ML is Lemporary - iLs
purpose, aLer all, is Lo test ideas - don'L boLher wiLh Lhe code, jusL
make iL work wiLh minimal bugs. ou will Lhrow iL away anyway. ou
can also use specialized proLoLyping soLware. Some people even
proLoLype in PowerPoinL.
96
_____________________________________________________________
Testing
ProLoLypes are useless unless you LesL Lhem. 1his is noL rockeL science.
People like Jakob Nielsen and SLeve Krug supporL so-called "discounL
usabiliLy LesLing," which is cheap and asL and yields valuable insighL
inLo your design decisions. ou will use Lhis inormaLion as Lhe basis
o anoLher iLeraLion o skeLching, proLoLyping and LesLing. Do Lhis aL
leasL unLil major issues have been ixed. We all know LhaL soLware
projecLs are LighL on Lime and budgeL, so Lo be more eicienL, test
ecrly cnJ test cjten.
One o Lhe besL resources or discounL usabiliLy LesLing is a new book
by SLeve Krug, Rcclet Surery McJe lcsy. Pick up a copy and read iL.
Design PrincipIes
1here are many design principles, buL Lhere doesn'L seem Lo be a
general consensus on deiniLive ones. So, we'll go Lhrough design
principles more inormally, leaving ouL sLricL deiniLions.
No One Likes 5urprises
Probably Lhe key acLors in a good Ul are consisLency and amiliariLy. A
user inLerace should be consisLenL across all parLs o Lhe applicaLion,
rom navigaLion Lo color Lo Lerminology. 1his is known as inLernal
consisLency. 8uL a user inLerace should also be consisLenL wiLhin iLs
conLexL, such as Lhe operaLing sysLem or oLher applicaLions in iLs
97
_____________________________________________________________
group or amily. A Lypical example is Lhe applicaLions in Lhe MicrosoL
Oice amily. 1his is called externcl ccnsistency.
A good approach Lo consisLency is Lo deine user inLerace guidelines
or each projecL or group o projecLs. 1hese should guide Lhe
decisions you make or all o Lhe deLails. 1his will noL only mainLain
consisLency buL also serve as documenLaLion Lo help Leam members
beLLer undersLand your decisions.
ConsisLenL user inLeraces have a shorLer learning curve, because
users will recognize parLs o Lhe sysLem and be able Lo all back on
prior experience. 8uL amiliariLy is someLimes conused wiLh
consisLency. Familiar user inLeraces draw on concepLs rom Lhe users'
previous experiences and use appropriaLe meLaphors. Folders, or
example, are a well-known meLaphor or ile organizaLion, and Lhey
have replaced "direcLories," which were used previously in command-
line operaLing sysLems. ln shorL, speak Lhe language o your users.
A common belie among business owners is LhaL a greaL user
inLerace should look like a MicrosoL Oice producL, especially
OuLlook. l won'L go inLo explaining how poinLless Lhis is. RaLher, l will
oer alLernaLive advice. deend Lhe user-cenLric approach, and explain
why creaLing an applicaLion or employees, clienLs and parLners (i.e.
Lheir users) is so imporLanL.
All Lhe same, mosL businesses are unique, as are Lheir work processes.
For example, Lwo businesses rom Lhe same branch could have
98
_____________________________________________________________
signiicanLly dierenL processes, orcing you Lo go beyond whaL is
amiliar and sLarL Lo innovaLe. 1his parL o Lhe design process can be
very inLeresLing, alLhough you have Lo be careul in how much you
innovaLe.
Users 5houId Be AbIe to Be fficient
WiLhouL a doubL, users should be able Lo be eicienL when using
business applicaLions. 1his is whaL Lhey are paid or, and Lhis is whaL
managers expecL rom Lhe applicaLion. User inLeraces should allow
users Lo be eicienL and should ocus Lhem on compleLing Lasks in
Lhe easiesL and asLesL way.
8uL Lhis is noL always Lhe case. 1here is an opinion, or aL leasL pracLice,
among developers LhaL says Lhe user inLerace should be as complex
as Lhe back-end sysLem. No maLLer how ridiculous Lhis sounds, Lhe
problem is real and could give you a headache. 1his is one reason why
good communicaLion and collaboraLion beLween developers are a
musL.
Users are eicienL when Lhey ocus on a parLicular Lask. As menLioned,
Lask analysis helps you idenLiy Lasks and deLermines how users
perorm Lhem. l Lasks are long, acceleraLe Lhem by breaking Lhem up
inLo smaller uniLs. ou can also increase eiciency by providing
keyboard supporL and shorLcuLs. 1hink how ineicienL iL is or a user
Lo have Lo swiLch back and orLh beLween mouse and keyboard. ln
some cases, you will be designing or users who are accusLomed Lo
99
_____________________________________________________________
working on command-line operaLing sysLems and Lhe applicaLions
made or Lhem. 1hey will be keen Lo have keyboard supporL. One
suggesLion. when deining keyboard shorLcuLs, keep Lhem consisLenL
wiLh Lhose o common applicaLions. For example, Ctrl - S should
always be save, and so on.
Cccle Dccs SrecJsheet encbles users tc be ejjicient by rcviJin
leybccrJ shcrtcuts cnJ ccntext menus, cs well cs by tclin cJvcntce
cj users jcmilicrity with ccmmcn Jesltc cliccticns.
Ficiency can also be enhanced Lhrough personalizaLion. Users who
can personalize an environmenL will learn iL asLer and, more
imporLanLly, will be more conidenL using iL. PersonalizaLion can be
100
_____________________________________________________________
done in many ways. choosing widgeLs or Lhe dashboard, deining
shorLcuL opLions and avoriLes, changing Lhe order o elemenLs, eLc.
Pay aLLenLion Lo accessibiliLy. AlLhough many assume LhaL accessibiliLy
doesn'L maLLer in Web applicaLions, iL cerLainly does. 1reaL Lhe
applicaLion as i iL were a public websiLe.
A Web applicaLion also has Lo be eicienL in Lhe speed wiLh which iL
processes inormaLion. So, consider heavy inLeracLions LhaL resulL rom
parLial renderings and AJAX requesLs.
HeIp!
An inLerace should provide meaningul eedback LhaL describes Lhe
sLaLe o Lhe sysLem Lo users. l an error occurs, users should be
noLiied and inormed o ways Lo recover. l an operaLion is in
progress, users should be noLiied abouL Lhe progress.
We can go even urLher and declare LhaL user inLeraces should
prevenL users rom making errors. 1his principle, called jcriveness,
can be ollowed wiLh conirmaLion dialogs, undo opLions, orgiving
ormaLs and more. Forgiveness makes iL sae Lo explore Lhe inLerace,
decreases Lhe learning curve and increases overall saLisacLion.
8ecause o Lhe complexiLy o business Web applicaLions, you would
also need Lo provide a comprehensive help sysLem. 1his could be
done wiLh inline help, a supporL daLabase, a knowledge base and
guided Lours (which mix video, images and LexL).
101
_____________________________________________________________
Can't Get No 5atisfaction
"SaLisacLion" is a subjecLive Lerm LhaL reers Lo how pleasanL an
inLerace is Lo use. Fvery design principle we have described here
aecLs saLisacLion. And a ew more principles are worLh menLioning.
SimpliciLy is a basic principle o Ul design. 1he simpler a user
inLerace, Lhe easier iL is Lo use. 8uL keeping user inLeraces or
business applicaLions simple is a challenge because Lhe apps oLen
have a loL o uncLionaliLy.
1he key is Lo balance uncLionaliLy and simpliciLy. ResLrainL is one o
Lhe mosL eicienL ways Lo achieve Lhis balance. i.e. inding Lhe
simplesL way Lo solve a problem.
AesLheLics, Lhough subjecLive and somewhaL arbiLrary, play an
imporLanL role in overall saLisacLion. Users respond posiLively Lo
pleasing user inLeraces, someLimes even overlooking missing
uncLionaliLy. 8uL you're noL creaLing a work o arL. One o Lhe besL
arLicles LhaL explains aesLheLics is ln Deense o Fye Candy.
ln Lhe end, users will be spending a loL o Lime in ronL o Lhe business
applicaLion, and no maLLer how usable, consisLenL or orgiving Lhe
user inLerace is, saLisacLion will be criLical in deLermining how good
iL is.
102
_____________________________________________________________
ssentiaI Components Of web AppIications
Fvery Web applicaLion is unique, buL many o Lhem conLain common
eaLures. AlLhough Lhe implemenLaLion o any one o Lhese eaLures
will vary, leL's look aL Lhe basic idea o Lhe Lhree mosL common ones.
web lorms
Forms in general are imporLanL Lo Web applicaLions. 8uL as Luke
Wroblewski says in his book Web lcrm Desin, "No one likes illing in
orms." 1haL includes sign-up orms in business applicaLions wiLh
dozens o ields.
Minimize Lhe rusLraLion o illing in orms. Provide inline validaLion
and good eedback. Use deaulLs when possible. Don'L orgeL abouL
novice users. Use wizards Lo help Lhem compleLe Lasks asLer, or use
progressive disclosure Lo hide advanced (or inrequenLly used)
eaLures.
Master-DetaiI Views
1his is Lhe Lechnique o showing daLa in Lwo separaLe buL relaLed
views. One view shows a lisL o iLems, while Lhe oLher shows deLails o
Lhe selecLed iLem. MasLer-deLail views can be implemenLed across
mulLiple pages or on individual ones.
103
_____________________________________________________________
Dashboards
Many Web applicaLions have dashboards. A dashboard is a view o
Lhe mosL imporLanL inormaLion needed Lo Lake acLion and make
decisions. lL is conined Lo a single page and is usually Lhe sLarLing
poinL o an applicaLion. Dashboards are imporLanL because Lhey
enable users Lo access inormaLion and Lake acLion wiLhouL having Lo
dig Lhrough Lhe applicaLion.
Heavy Use of TabIes
8ecause Web applicaLions Lypically deal wiLh large quanLiLies o daLa
LhaL are easily accessible and sorLable, Lables are unavoidable. 8uL Lhis
is noL a bad Lhing. ln acL, Lables were made or Lhis purpose. Don'L
conuse Lhis wiLh Lable-less layouLs.
FecLive Lables are easily readable. So, in mosL cases you will need a
meaningul header, an opLimal number o columns, paginaLion,
alLernaLing row colors, proper column alignmenL, sorLing and ilLering
capabiliLies and much more.
1ables can also be inLeracLive, meaning Lhey are able Lo generaLe
addiLional ino and even modiy Lhe daLa Lhey conLain.
Reports
MosL businesses work wiLh some kind o reporLs. PrinLed reporLs are
usually required, so pay aLLenLion Lo Lhe design o reporLs. PrinLed (or
104
_____________________________________________________________
exporLed) reporLs are usually simpliied versions o online reporLs,
opLimized or monochrome prinLers.
Don't lorget Ul Design Patterns
We're so used Lo hearing and Lalking abouL Ul design paLLerns LhaL we
someLimes orgeL abouL Lhem! Ul design paLLerns are helpul or
designing user inLeraces. 1he imporLanL Lhing is Lo consider Lhem
early on in Lhe design process, ideally aL Lhe skeLching sLage.
8ecause paLLerns oLen solve common problems, Lhe righL paLLern can
aciliLaLe Lhe user's amiliariLy wiLh an inLerace and increase Lhe speed
aL which Lhey learn iL.
105
_____________________________________________________________
1his screenshct is jrcm the crticle 12 StcnJcrJ Screen Pctterns, which
ces cver the mcst ccmmcn screen ctterns.
106
_____________________________________________________________
Case 5tudy. OnIine Banking AppIication
1o Lake an example rom Lhe real world, l will briely explain Lhe
process o designing Lhe user inLerace or one small bank's online
banking sysLem. 1he Leam l worked wiLh was hired Lo improve Lhe
sysLem. 1he main reason or Lhe redesign was LhaL, according Lo
managemenL, "users complained and many sLopped using iL."
ALer only a couple o hours spenL wiLh acLual users, Lhe main
problems were uncovered. lnormaLion abouL accounLs and crediL
cards was buried in poor navigaLion. UndersLanding how much
money users were spending and Lhe sLaLe o Lheir accounLs and crediL
cards was also hard. 1he applicaLion, however, was obvious Lo bank
employees, Lhey were amiliar wiLh Lhe Lerminology and could
inLerpreL Lhe numbers in Lhe applicaLion perecLly well.
Cive Lhe LighL deadlines, we ollowed Lhe process l have described,
and we parLially succeeded. DespiLe Lhe shorL Lime, Lhe major
problems were so obvious LhaL we clearly undersLood our main Lask
and how Lo go abouL iL. We creaLed a dashboard LhaL provided clear
inormaLion on Lhe sLaLe o all accounLs and crediL cards. WiLh Lhis
new navigaLion, inding inormaLion became easier. ReporLs were
easier Lo undersLand, and several new eaLures were implemenLed.
AlLhough we made only a ew changes, Lhe changes aecLed criLical
user Lasks and resulLed in signiicanL improvemenLs Lo Lhe overall
experience.
107
_____________________________________________________________
linaI Thoughts
Designing user inLeraces or business Web applicaLions is a
challenging job, ull o compromise. ou have Lo make compromises
beLween clienL and user needs, business requiremenLs and users,
novice and experL users, uncLionaliLy and simpliciLy.
lL requires a solid undersLanding o users and Lheir Lasks, as well as o
Ul design principles and paLLerns. DespiLe Lhe diiculLies, Lhe job is
inLeresLing, and you learn many new Lhings on each projecL LhaL
inluence Lhe way you design websiLes.
Icnlc Icvcncvic is c scjtwcre enineer, blcer cnJ secler jccuseJ cn
Ul enineerin. ln his jree time, he writes cbcut Ul enineerin cn his
blc IcnlcAtWcrSeeJ.
108
_____________________________________________________________
Progressive nhancement And 5tandards Do
Not Limit web Design
3y Christicn Heilmcnn
LaLely l have been geLLing bored and annoyed wiLh people geLLing up
in arms againsL Web sLandards and Lhe ideas o progressive
enhancemenL, claiming LhaL Lhey hold us back rom creaLing a rich,
beauLiul Web. 1here are also claims LhaL Lhese Lools limiL us rom
pushing Lhe boundaries o whaL is possible wiLh Loday's Lechnologies.
1he problem wiLh claims such as Lhese is LhaL Lhey are based on a
misundersLanding o sLandards and progressive enhancemenL and -
aL leasL Lo me - on arrogance and ignorance abouL whaL our job on
Lhe Web is. 1he Web is ouL Lhere or everybody and is a producL and a
medium like any oLher.
For example, l am a big ilm bu and love good movies. l also
undersLand, Lhough, LhaL in order Lo und greaL movies we have Lo
make money rom Lerrible ones LhaL appeal Lo Lhe lowesL common
denominaLor or rehash ideas LhaL were successul in Lhe pasL.
1he same applies Lo Lhe Web. we need Lo shiL our ocus Lo whaL
people use iL or and whaL conLenL should go on iL, noL how preLLy we
can make iL or whaL cool Lechnology we can apply. 1he beauLy o Web
Lechnologies is LhaL Lhey can be used Lo build adapLive producLs. l
cannoL drive a Lall Lruck Lhrough a low Lunnel wiLhouL damaging
109
_____________________________________________________________
eiLher Lhe Lunnel or Lhe Lruck. WebsiLes and apps, however, can easily
make 1ransormers look clumsy. i we build Lhem adapLively and
collaboraLively wiLh a Leam o experLs.
5hiny New TechnoIogies vs. Outdated Best
Practices?
Dozens o case sLudies eaLuring CSS LransormaLion and animaLion,
and demos o Lhe canvas elemenL and H1ML5 audio and video LhaL
"work only in Lhe laLesL build o browser X," give us Lhe illusion o a
Web LhaL could be so much richer and more beauLiul. 1hey also lead
Lo claims LhaL we are sLalling because o Lhe grumpy old people o Lhe
Web who claim LhaL we have Lo ollow rules and supporL ouLdaLed
Lechnology. AcLually, none o Lhis is abouL sLalling. iL is abouL
maLuring as an indusLry and embracing Lhe adapLive naLure o Lhe
Web. l you sLarL a design and Lry Lo make iL work all by yoursel, Lhen
you have noL undersLood Lhe Web and iLs collaboraLive naLure.
The Mess That ls The web
Cood Web producLs are Lhe resulL o successul collaboraLion. One-
man armies wiLh a limiLed view o Lhe impacL o puLLing someLhing up
on Lhe Web lead Lo a sLeady sLream o mediocre, unsecure,
unmainLained and hard-Lo-upgrade Web producLs. 1his includes all o
Lhose websiLes LhaL look Lerrible buL "do Lhe job," Lhe very big group
o websiLes LhaL are incredibly hard Lo use buL sLill "communicaLe Lhe
110
_____________________________________________________________
brand's message" and Lhe ew LhaL are sLunningly beauLiul aL irsL
glance and boring seconds laLer. Finding a Lruly usable, accessible,
beauLiul, mainLained (and easy-Lo-mainLain) websiLe ouL Lhere is
almosL impossible.
1he reason is LhaL experLs Lend Lo advocaLe or Lheir ield o experLise
as being Lhe mosL imporLanL one, insLead o parLnering wiLh oLher
experLs and making boLh a beLLer oer and subsequenLly a beLLer
producL.
Creating CeIebrities And A PIace we
wish we were At
We look up Lo Lhe "rock sLars" o Web design, Lhe people who "push
Lhe envelope," raLher Lhan praise Leams LhaL did an amazing job o
delivering a greaL Web producL in an exisLing buL deicienL
inrasLrucLure. CreaL Lechnology always happen in environmenLs
where Lhe designers or developers have ull conLrol over Lhe conLenL
and Lechnology and ree reign Lo build someLhing greaL.
1his is pure escapism, because in Lhe real world you never geL any o
Lhis, unless you build websiLes or yoursel.
lL's rusLraLing, which is why insLead o Lrying Lo change our work
environmenL and make our mark as Web developers, we escape Lo
Awesomeland, where everyLhing is shiny and new and Lhe clienL-side
is really popping.
111
_____________________________________________________________
ReLurning rom a conerence aL which you've glimpsed Lhe uLure o
CSS gives you Lhe eeling o being parL o someLhing worLhwhile. Less
ulilling is having Lo argue wiLh your Leam Lo reserve Lime Lo wriLe a
plug-in LhaL ensures your corporaLe CMS spiLs ouL clean, semanLic
H1ML insLead o a Lag soup, or LhaL aL leasL allows you Lo add a class
LhaL gives you a sLyle handle Lo work wiLh. Now guess which in Lhe
long run will change Lhe game Probably boLh, buL by ixing Lhe
underlying inrasLrucLure, we enable cool new Lechnologies Lo
become relevanL Lo Lhe mass markeL.
We can build amazingly asL, low-riding cars LhaL reach Lop speeds o
50 mph, buL i Lhe roads are ull o poLholes and crammed wiLh cars,
Lhen Lhey become liLLle more Lhan Loys or rich people who own Lheir
own raceLrack. 1he same applies Lo any design showcase in which
LexLs are expecLed Lo be a cerLain lengLh and producLs Lo be a ixed
number, and where CSS knowledge is needed Lo make Lhe websiLe
look righL when you add a producL.
1his is noL how people use Lhe Web, and mainLainers should noL have
Lo depend on experLs Lo make changes Lo Lheir websiLes. WebsiLes
change consLanLly, Lhis is whaL makes Lhem inLeresLing and much
more versaLile Lhan, say, prinL media.
HoIIywood And Advertising Teach Us Nothing
A loL o showcases hail movie websiLes or having Lhe mosL eaLure
richness and visual beauLy. Well, Lry Lo ind websiLes or older movies
112
_____________________________________________________________
and you will see LhaL mosL are 404 errors or "NoL available any more"
(or example, Lry Lo ind ouL whaL exacLly is Lhe MaLrix, and you'll be
waiLing a while). ls Lhis Lhe Web we should be puLLing our eorLs inLo
ls Lhis innovaLion Or should we sLarL Lo work as Leams and add our
unique LalenLs Lo produce someLhing beLLer and more durable Lhan
whaL is merely preLLy and whaL saLisies our own ideas o a greaL
websiLe lsn'L Lhe main premise o Web design someLhing LhaL is
available Lo millions o people worldwide and available longer Lhan
daLa sLored on a cheap CD (whose liespan is approximaLely 0 years,
in case you were wondering)
The Myth Of lnnovating xcIusiveIy Through
TechnoIogy
Know whaL ln mosL cases, we are nct innovaLing. Lhis is nct Lhe
revoluLion, iL has been done beore.
During Lhe irsL browser wars, we were in exacLly Lhe same boaL, and
people were building Lhings LhaL worked only in cerLain browsers, and
Lhey claimed Lhis was Lhe uLure. l am sure you can guess which
browser was Lhe worsL oender and why we're having a hard Lime
geLLing rid o iL now.
es, lF6. A loL o Lhe websiLes in CSS3 showcases Loday, especially Lhe
animaLed ones, remind me painully o Lhe lF6 CSS expressions and
page LransiLion showcases o old. Did you know, or insLance, LhaL you
could roLaLe LexL in lF5.5 wiLh Lhe maLrix ilLer 1he dierence is LhaL,
113
_____________________________________________________________
back Lhen compuLers were so slow LhaL all o Lhese eecLs looked bad,
nowadays, on asL compuLers and shiny iPhones and iPads, Lhey look
much more impressive. While l am very happy LhaL we don'L use a
hybrid Lechnology LhaL comes wiLh a boaLload o perormance issues
and a synLax LhaL musL have been deined in a everish dream, l am
also noL convinced LhaL Lhe "CSS3" browser-orking LhaL we do now Lo
make websiLes work in Lhis or LhaL browser is uLure-proo eiLher.
lnnovation lsn't About New Toys
We generally Lend Lo regard Lhe use o Lhe newesL Lechnology as
"innovaLion." 1his is why you see old problems being solved wiLh new
Lechnologies over and over again, even Lhough Lhey have already
been solved. Pure-CSS menus, or example, were newer Lechnology
buL were a sLep back in usabiliLy. you cannoL delay Lhe hiding o a
menu and you cannoL LesL i iL will iL Lhe screen beore opening iL.
For Lhis, you need a Lechnology LhaL has Lwo-way communicaLion.
you seL someLhing and Lhen check LhaL iL worked. CSS does noL have
Lhis checking mechanism, we are aL Lhe mercy o Lhe browser doing iL
righL. WiLh JavaScripL we have LhaL opLion. We also have a sensible
synLax in JavaScripL, whereas CSS, wiLh all o iLs exLensions,
is slowly buL sLeadily Lurning inLo a synLacLic nighLmare.
CSS has developed some greaL deensive eaLures. or example, media
queries, which allow dierenL designs Lo be served Lo dierenL screen
sizes auLomaLically, are wonderul. However, does CSS need all o
114
_____________________________________________________________
Lhese eaLures, and should we have Lo waiL or universal browser
supporL, or would iL make more sense Lo use JavaScripL now in
conjuncLion wiLh CSS Lo achieve Lhe same eecL A good CSS
designer and someone wiLh rudimenLary knowledge o JavaScripL
libraries are all iL Lakes. 8uL oh no, why share Lhe ame when we can
do iL wiLh CSS3 alone
lnnovaLion is noL abouL using Lhe newesL Lechnology exclusively.
lnnovaLion also happens when you combine exisLing Lools and make
good use o Lhem. FlinLs were greaL as spearheads or killing each
oLher or skinning animals. HiLLing Lhem wiLh anoLher rock or againsL
each oLher all o a sudden gave us ire. No one showed up wiLh a
lighLer Lo Leach people how iL works. lnsLead, we analyzed whaL we
had and puL iL Lo good use. And guess whaL FlinLs don'L need uel
eiLher.
The Corporate 5pin On lnnovation, And lts
Consequences
1he oLher Lhing we should never orgeL is LhaL every Lime we innovaLe,
some people will one way or anoLher sell Lhese ideas Lo corporaLe l1
hal a year laLer. MosL o Lhe Lime, Lhe innovaLion is sold as parL o a
bigger soLware package. "Oh yeah, our CMS package Overpriced-
And-Underspec'ed-oLron now supporLs AJAX. in mulLiple colors!"
Sadly, Lhis also happens Lo be Lhe only Lime when Lhe innovaLion will
have a real impacL on Lhe mass markeL.
115
_____________________________________________________________
l we really Lhink LhaL large corporaLions or end users care abouL whaL
we do, we're ooling ourselves. ln Lhe end, soLware and Lhe lnLerneL
exisL Lo solve Lhe problems o people. And sadly, Lhe people deciding
on Lhe besL soluLions are noL us buL raLher Lhose who only go or
whaL's cheapesL and seemingly Lhe mosL secure.
A large company LhaL oers a corporaLion iLs soLware package aL a
ixed price, promising Lo solve all o Lhe issues plaguing Lhe
corporaLion's daily worklow and Lo Lrain Lhe people who work wiLh
Lhe soLware are selling much more easily Lhan us wiLh our "We will
help you undersLand Lhe Web and make iL easier or your employees
Lo be more eecLive" piLch. Which sounds like more work or an
already overloaded l1 decision-maker
The 5tockhoIm 5yndrome Of Bad lnterfaces
1his breeds a loL o ordinary inLeraces on Lhe Web LhaL are painul Lo
use and Lerrible Lo look aL. 1he amazing Lhing, Lhough, is LhaL people
love Lo use Lhem. 1his is whaL Lhey learned in corporaLe Lraining, and
Lhese are Lhe producLs supporLed and endorsed by Lhe company.
Memorizing ive convoluLed sLeps and mechanically going Lhrough
Lhem every Lime is easier Lhan inding Lhe Lime Lo learn new Lhings.
1here is a comorL in knowing how Lo geL Lhe resulLs you are asked Lo
geL in a predicable way i you really don'L wanL Lo use someLhing Lo
begin wiLh.
116
_____________________________________________________________
l you don'L wanL Lo be one o Lhe people who builds Lhe Web, Lhen
every change becomes an annoyance - upgrading being one o
Lhem.
1his is why we have ouLdaLed seL-ups. noL because o evil companies
LhaL reuse Lo embrace new Lechnologies, buL raLher because people
couldn'L be boLhered Lo upgrade because no percepLive gain comes
rom iL.
lnsLead o LargeLing Lhe people who really prevenL Lhe Web rom
evolving and giving Lhem someLhing Lo consider as a greaL gain, we
sLay in our comorL zone, Lalking Lo each oLher abouL pushing Lhe
envelope and suering rom Lhe wider markeL noL caring.
WanL Lo drive Lhe Web orward Find a way Lo disrupL Lhe ive-year
upgrade cycle o corporaLe environmenLs. Whenever you Lalk Lo Lhe
leading lighLs o Web design abouL Lhis, you geL an answer like, "1his
is a baLLle we can'L win."
This ls Not About TechnoIogy Or Design
ln Lhe end, we deliver producLs. We are passionaLe abouL Lhe Web,
and we wanL Lo push iL orward. 1he problem is LhaL we sLay in our
comorL zone raLher Lhan expand our knowledge.
Designers wanL Lo push Lhe envelope Lowards richer
inLeracLion and more beauLiul designs wiLh rich Lypography.
117
_____________________________________________________________
UX people wanL Lo make iL darned easy or people Lo achieve
Lheir goals, and i a paLLern works well on Lhe deskLop, iL
should also work well on Lhe Web.
Fngineers push or speed, wiLh "besL pracLices on
perormance" LhaL are relevanL Lo search resulL pages and Web
apps like Cmail buL noL so much Lo conLenL-heavy websiLes.
OLher engineers wanL Lo build Lhe mosL versaLile and lexible
plaLorm ever so LhaL people can use iL wiLhouL ever having Lo
boLher Lhe engineers again (because Lhey would have already
moved on Lo solving oLher problems).
Mobile enLhusiasLs sLarL Lo abandon Lhe idea o Web
Lechnologies as Lhe way orward because Lhe Lechnologies are
Loo limiLed and Loo ar removed rom Lhe capabiliLies o Lhe
plaLorm.
A loL o Lhese are muLually exclusive, and Lhe laLLer is especially noL
Lrue and only happens because we as Web developers orgoL Lhe
naLure o Lhe Web. a Lechnology sLack LhaL adapLs Lo Lhe needs o Lhe
end user - daLa LhaL has a clever morphing inLerace LhaL gives each
use case Lhe inLerace iL needs. 1haL Lhe Web began as a LexL plaLorm
and evolved inLo a rich media sysLem is greaL, LhaL we wanL Lo replace
one wiLh Lhe oLher is jusL plain wrong or aL leasL very premaLure.
118
_____________________________________________________________
where ls The Beauty Of The web?
Here is Lhe real beauLy o Web design. adapLabiliLy, inLeraces LhaL
adapL Lo Lhe needs o Lhe user independenL o Lheir Lechnology or
physical abiliLy. We orgoL Lhis or a ew reasons.
we're controI freaks
We like Lo conLrol whaL we do and are araid o chaos and
people messing wiLh our producLs. Sure, we love Lo be
disrupLive and break convenLions, buL only when we can
choose Lhe onL-ace and colors.
we're bitter
For years, we worked Lirelessly Lo make Lhe Web beLLer and
more beauLiul, and our clienLs hardly ever cared. We were
consLanLly promised Lo be allowed Lo build someLhing
amazing, and Lhen our budgeLs were cuL or we had Lo move
on Lo Lhe nexL projecL beore adding LhaL lasL liLLle elemenL
LhaL would have made iL awesome.
Cheap thriIIs
lL is easy Lo draw praise or "Lhinking ouLside Lhe box" by
Lelling people LhaL progressive enhancemenL is dead or LhaL
lF6 should no longer be supporLed or LhaL everyone you know
has a 920-pixel resoluLion. ou geL applauded, and people
look up Lo you because Lhis is exacLly whaL Lhey wanL Lo Lell
Lheir boss every day. 8uL does iL help us Or are we geLLing
praise by escaping Lo our own world
119
_____________________________________________________________
lrustration about the end product
We are hardly ever able Lo look aL a live producL and say, "1his
is cool and looks exacLly as we planned." Fven worse, aLer a
year o mainLenance, we are lucky even Lo be able Lo recognize
iL as our work. PorLolios are ouLdaLed as soon as we puL Lhem
up (l know because l am hiring people righL now and cannoL
assess Lheir qualiLy o work LhaL way).
Arrogance and ignorance
Our markeL, our HR pracLices and even our job boards clearly
disLinguish beLween designers and developers. lnsLead o
challenging Lhis and acknowledging "Web developers" who
grasp boLh Lhe user experience and Lhe command line, we are
conLenL Lo sLay in our own silos.
A developer who claims noL Lo need design inpuL is as useless
as a designer who doesn'L care abouL Lhe Lechnical
implemenLaLion o Lheir design. We should encourage each
oLher Lo build Lhe besL producLs Lhrough collaboraLion, and
noL regard each oLher as show-sLoppers or whiners who
always wanL iL Lheir way.
To Recap. Our lssues
So here are Lhe issues you have Lo ace as someone who wanLs Lo
build greaL Web producLs.
The technoIogy stack you're asked to support is unknown.
ou can ool yoursel inLo believing LhaL everyone ouL Lhere is
120
_____________________________________________________________
as happy Lo upgrade and chase aLer Lhe newesL Lech, buL
doing iL jusL shows LhaL iL's been a while since you had Lo
deliver a real projecL.
Outdated technoIogy is here to stay.
People eiLher are noL allowed Lo upgrade or simply don'L care.
When l waLch 1v, l don'L wanL Lo know how iLs inLernals work,
and a loL o Web users Lhink Lhis way, Loo.
Your work wiII be butchered.
1he websiLe you plan Lo build will be changed over Lhe course
o Lhe projecL (e.g. Lhe clienL runs ouL o money, which always
happens), and whaL you do manage Lo geL ouL will be changed
over Lhe years Lo someLhing you never inLended Lo build.
You can't know everything.
When you puL a producL on Lhe Web, you need Lo make iL do
Lhe ollowing. work or humans, look pleasing, perorm well,
be secure, be exLensible, have Lhe opLion Lo be localized Lo
dierenL markeLs and languages, be easy Lo change and adapL
and be cheap Lo run and migraLe Lo anoLher environmenL. l
you can do all o LhaL, please send me your Cv. on second
LhoughL, don'L, because l'm sure you'll be a poor Leam player.
You can't reIy on soIutions standing the test of time.
A loL o "greaL Lricks" and "besL pracLices" come wiLh a massive
price LhaL geLs paid a ew monLhs down Lhe line. Many
soluLions LhaL were once Lhe bee's knees are now considered
bad pracLice (Lable layouLs, or example, were aL one Lime Lhe
bulleLproo soluLion or laky CSS layouLs).
121
_____________________________________________________________
All o Lhis poinLs Lo a LruLh LhaL l learned long ago. ollowing
sLandards and enhancing progressively means building sLu LhaL will
noL come back Lo haunL you down Lhe line.
why 5tandards Matter, And what loIIowing
5tandards Means
Working Lowards a sLandard means Lwo Lhings. making iL easy or
oLhers Lo build on your work, and having a ixed poinL Lo sLarL rom.
1he Lhing abouL sLandards in any proessional environmenL is LhaL
Lhey work. 1hey mighL noL be Lhe besL or mosL eleganL soluLion, buL
by sLicking Lo Lhem you are aL leasL delivering a workable soluLion.
1his is why we sLandardized screws and prinL sizes and also why one
can ind boilerplaLe conLracLs around.
ProducLs builL somewhere else by someone unknown will sLill be
mainLainable i Lhe developers ollowed a sLandard - even i Lhe
producL lacks documenLaLion. l can sLill puL my old lego cars LogeLher
rom Lhe parLs even Lhough l losL Lhe bookleLs. l l had sawed o parLs
o Lhe legos or benL Lhem Lo make Lhem preLLier, l wouldn'L be able Lo
do LhaL.
8y ollowing sLandards, you are signing an agreemenL wiLh Lhe people
who Lake over rom you, saying. no big surprises ahead - l'm a
proessional.
122
_____________________________________________________________
1haL said, don'L look aL sLandards as a "by any means necessary"
proposiLion. Adding ARlA roles Lo your H1ML righL now, or example,
would make Lhe W3C validaLor complain, buL Lhe roles allow people
Lo quickly navigaLe your documenL wiLhouL your having Lo wriLe
cusLom keyboard navigaLion wiLh "skip" links.
Progressive nhancement works
Progressive enhancemenL is noL abouL supporLing old plaLorms.
anyone who says Lhis LoLally misundersLands Lhe concepL. Progressive
enhancemenL means one Lhing. delivering whaL can be supporLed Lo
Lhe righL plaLorm. 1his means Lhe ollowing.
lncIuding everything that is absoIuteIy necessary for the
comprehension and functionaIity of the website in HTML.
NoL sLaLic H1ML, mind you, buL H1ML rendered by a well-
wriLLen back end LhaL geLs Lhe daLa via an APl.
Keeping the Iook and feeI as much in C55 as possibIe.
l you need a ew H1ML elemenLs Lo achieve a cerLain look,
LhaL is noL an issue whaLsoever. 1his is acLually why we have
elemenLs like SPAN and Dlv. ou will ind sLandards zealoLs
who rown upon every exLra Dlv on Lhe page. 1ell Lhose
people Lo chill ouL.
nhancing the behavior of the product with a richer
interactive Iayer.
1his could be CSS or hovers, LransiLions and animaLions, or
123
_____________________________________________________________
JavaScripL, or Flash, or SilverlighL. heck, Lhrow in Java appleLs
i you wanL. As long as you add Lhem only when appropriaLe,
you're noL doing anyLhing wrong.
A greaL pragmaLic example o progressive enhancemenL in acLion is
SWFobjecL and SoundManager. lnsLead o puLLing a Flash movie inLo
Lhe documenL and hoping iL works, puL a download link Lo Lhe audio
or video in Lhe documenL, add a JavaScripL and leL Lhe scripL do Lhe
resL. lL checks wheLher Flash is supporLed by Lhe browser and creaLes
Lhe righL markup or Lhe given browser Lo embed Lhe audio or video
only when iL is able Lo be played. Fveryone geLs Lo see Lhe movie or
hear Lhe sound, buL only Lhose browsers LhaL can supporL a player will
show one.
1he main LesL o good progressive enhancemenL is Lhis. are you
oering uncLionaliLy LhaL you are noL sure will work l noL, Lhen
congraLulaLions. you have builL a greaL Web producL. 1esLing beore
implemenLaLion is as obvious as checking Lhe depLh o a lake beore
jumping in. 1here is no magic Lo iL.
One big beneiL o progressive enhancemenL LhaL is oLen orgoLLen is
LhaL by separaLing Lhe dierenL Lasks o a Web producL inLo dierenL
Lechnologies, you are able Lo segmenL Lhe worklow and assign each
parL Lo a dierenL Leam.
A progressively enhanced producL can be builL in parallel by Lhe back-
end Leam, Lhe ronL-end developers and Lhe UX and design Leam. l
you sLarL wiLh Lhe design and Lry Lo Lrace your way back, you aren'L
124
_____________________________________________________________
working LogeLher buL raLher Lhrowing work over a wall and probably
causing exisLing code Lo be changed or even LoLally re-archiLecLed. 1o
save Lime, enhance progressively and measure Lwice, cuL once.
1he producL cycle should begin wiLh a deiniLion o basic uncLionaliLy,
once Lhis is agreed on, all groups can work in parallel and reconvene
aL laLer sLages in an iLeraLive ashion and make Lhe producL a biL
beLLer every Lime. 1his also means LhaL i Lhere is an emergency and
unding geLs canned, you can aL leasL deliver a working producL.
Agile, isn'L iL
Best Practices Come lrom AppIication And lterative
lmprovement
1o improve our enLire markeL, we have Lo sLop adverLising everyLhing
we do as a "besL pracLice." 8esL pracLices should come rom real
producLs builL by real Leams or real clienLs, wiLh all o Lhe annoyances
and problems Lhey bring. 1esL cases LhaL cover all "currenL" browsers
are nice, buL many more Lhings can Lhrow a spanner in Lhe works
when we build real producLs.
So, i you work aL a company and managed Lo implemenL some cool
new Lechnology in an exisLing producL or have sLories Lo Lell abouL
how shiLing Lo a CSS layouL saved your clienL Lhousands o dollars,
please wriLe abouL Lhose. We need Langible sLories Lo Lell clienLs, noL
Lales o a brighL uLure.
125
_____________________________________________________________
FurLhermore, scruLinize every "besL pracLice" you ind in your own
environmenL. does iL really deliver on iLs promise Does someLhing
need Lo be added Lo make iL work in Lhe "real world" WriLe abouL
Lhese add-ons and ixes, adding Lhem as commenLs Lo Lhe original
arLicle.
Together we Can Do This
1he lasL Lhing l wanL Lo bring up here is LhaL l am Lired o Lhe debaLe
abouL developer vs. designer vs. projecL manager. As lisLed above, real
Web projecLs require a loL o dierenL skill seLs, and you would be
hard pressed eiLher Lo ind someone who possesses all o Lhem or Lo
ind Lhe Lime Lo learn Lhem all yoursel and sLay up Lo daLe.
lL is all abouL Leamwork, LrusL, delegaLion and communicaLion. l we
sLay cooped up in our respecLive ivory Lowers and complain LhaL we
can'L work wiLh Lhe oLher groups, while preLending LhaL we could do
Lheir jobs anyway i only people would upgrade Lheir browsers, Lhen
we shouldn'L be surprised LhaL we don'L geL Lhe Lime and opporLuniLy
Lo own and deliver a real Web producL, as opposed Lo some piece o
soLware wiLh a Web inLerace.
Christicn Heilmcnn is cn interncticncl Develcer lvcnelist wcrlin
jcr the Ychcc Develcer Netwcrl in the lcvely tcwn cj lcnJcn, lnlcnJ
126
_____________________________________________________________
127
_____________________________________________________________
CoIor Theory for ProfessionaI Designers
3y Ccmercn Chcmcn
Color in design is very subjecLive. WhaL evokes one reacLion in one
person may evoke a very dierenL reacLion in someone else.
SomeLimes Lhis is due Lo personal preerence, and oLher Limes due Lo
culLural background. Color Lheory is a science in iLsel. SLudying how
colors aecL dierenL people, eiLher individually or as a group, is
someLhing some people build Lheir careers on. And Lhere's a loL Lo iL.
128
_____________________________________________________________
SomeLhing as simple as changing Lhe hue or saLuraLion o a color can
evoke a compleLely dierenL eeling. CulLural dierences mean LhaL
someLhing LhaL's happy and upliLing in one counLry can be
depressing in anoLher.
129
_____________________________________________________________
warm CoIors
Warm colors include red, orange and yellow and variaLions o Lhe
Lhree. 1hese are Lhe colors o ire, all leaves and sunseLs and sunrises,
and Lhey are generally energizing, passionaLe and posiLive.
Red and yellow are boLh primary colors, wiLh orange alling in Lhe
middle, which means warm colors are all Lruly warm and aren'L
creaLed by combining a warm color wiLh a cool color. Use warm colors
in your designs Lo relecL passion, happiness, enLhusiasm and energy.
Red (Primary CoIor)
130
_____________________________________________________________
Red is a hoL color. lL's associaLed wiLh ire, violence and warare. lL's
also associaLed wiLh love and passion. ln hisLory, iL has been
associaLed wiLh boLh Lhe devil and Cupid. Red can acLually have a
physical eecL on people, raising blood pressure and respiraLion raLe.
lL has been shown Lo enhance human meLabolism, Loo.
Red can be associaLed wiLh anger, buL iL is also associaLed wiLh sLaLus
(Lhink o Lhe red carpeL aL awards shows and celebriLy evenLs). Red
also indicaLes danger (which is Lhe reason sLop lighLs and signs are
red and why mosL warning labels are red).
OuLside Lhe wesLern world, red has dierenL associaLions. For
example, in China, red is Lhe color o prosperiLy and happiness. lL can
also be used Lo aLLracL good luck. ln oLher easLern culLures, red is
worn by brides on Lheir wedding day. ln SouLh Arica, Lhough, red is
Lhe color o mourning. Red is also associaLed wiLh communism. Red
has become Lhe color associaLed wiLh AlDS awareness in Arica due Lo
Lhe populariLy o Lhe RFD campaign.
131
_____________________________________________________________
ln design, red can be a powerul accenL color. lL can have an
overwhelming eecL i used Loo much in designs, especially in iLs
puresL orm. lL's a greaL color Lo convey power or passion in a design.
Red can be versaLile, Lhough, wiLh brighLer shades being energeLic
and darker shades evoking power and elegance.
Orange (5econdary CoIor)
Orange is a vibranL and energeLic color. ln iLs muLed orms, iL is
associaLed wiLh FarLh and Lhe auLumn season. 8ecause o iLs
associaLion wiLh Lhe changing seasons, orange can represenL change
and movemenL in general.
8ecause orange is also a ruiL, iL can be associaLed wiLh healLh and
viLaliLy. ln designs, orange commands aLLenLion wiLhouL being as
overpowering as red. lL's oLen considered more riendly and inviLing,
and less in your ace.
132
_____________________________________________________________
YeIIow (Primary CoIor)
ellow is oLen considered Lhe brighLesL and mosL energizing o Lhe
warm colors. lL is associaLed wiLh happiness and sunshine. 8uL yellow
can also be associaLed wiLh deceiL and cowardice (calling someone
yellow is Lo call Lhem a coward).
ellow is also associaLed wiLh hope, as can be seen in counLries where
yellow ribbons are worn by amilies LhaL have loved ones aL war.
ellow is also associaLed wiLh danger, Lhough noL as sLrongly as red. ln
some counLries, yellow has very dierenL connoLaLions. ln FgypL, or
example, yellow is or mourning. ln Japan iL represenLs courage, and
in lndia iL's a color or merchanLs.
ln your designs, brighL yellow can lend a sense o happiness and
cheerulness. SoLer yellows are commonly used as a gender-neuLral
color or babies (raLher Lhan blue or pink) and young children. LighL
yellows also give more o a eeling o calm and happiness Lhan brighL
yellows. Dark yellows and gold-hued yellows can look anLique and be
used in designs where a sense o permanence is desired.
133
_____________________________________________________________
CooI CoIors
Cool colors include green, blue and purple, and Lhey are oLen more
subdued Lhan warm colors. 1hey are Lhe colors o nighL, waLer and
naLure and are usually calming, relaxing and somewhaL reserved.
8lue is Lhe only primary color in Lhe cool specLrum, which means LhaL
Lhe oLher colors are creaLed by combining blue wiLh a warm color
(yellow or green and red or purple). Creens Lake on some o Lhe
aLLribuLes o yellow, and purple Lakes on some o Lhe aLLribuLes o red.
Use cool colors in your designs Lo give a sense o calm or
proessionalism.
134
_____________________________________________________________
Green (5econdary CoIor)
Creen is a down Lo earLh. lL represenLs new beginnings and growLh. lL
also signiies renewal and abundance. AlLernaLively, green can
represenL envy, jealousy or a lack o experience.
Creen has many o Lhe same calming aLLribuLes as blue, buL iL also
carries some o Lhe energy o yellow. ln design, green can have a
balancing and harmonizing eecL, and iL is sLable. lL's appropriaLe or
designs relaLed Lo wealLh, sLabiliLy, renewal and naLure. 8righLer
greens are energizing and vibranL, while olive greens represenL Lhe
naLural world. Dark greens are Lhe mosL sLable and represenLaLive o
aluence.
135
_____________________________________________________________
BIue (Primary CoIor)
8lue is oLen associaLed wiLh sadness in Lhe Fnglish language. 8lue is
also used exLensively Lo represenL calmness and responsibiliLy. LighL
blues can be rereshing and riendly. Dark blues are sLronger and
more reliable. 8lue is also associaLed wiLh peace and has spiriLual and
religious connoLaLions in many culLures and LradiLions (or example,
Lhe virgin Mary is generally depicLed wearing a blue robe).
1he signiicance o blue depends largely on iLs shade and hue. 1he
shade o blue you selecL will have a huge impacL on how your design
is perceived. LighL blues are oLen relaxing and calming. 8righL blues
can be energizing and rereshing. Dark blues are excellenL or
corporaLe websiLes and websiLes where sLrengLh and reliabiliLy are
imporLanL.
136
_____________________________________________________________
PurpIe (5econdary CoIor)
Purple has long been associaLed wiLh royalLy. lL's a combinaLion o red
and blue and Lakes on aLLribuLes o boLh. lL is associaLed wiLh
creaLiviLy and imaginaLion, Loo.
ln 1hailand, purple is Lhe color o mourning or widows. Dark purples
are LradiLionally associaLed wiLh wealLh and royalLy, while lighLer
purples (like lavender) are considered more romanLic.
ln design, dark purples give a sense wealLh and luxury. LighL purples
are soLer and associaLed wiLh spring and romance.
137
_____________________________________________________________
NeutraIs
NeuLral colors oLen serve as a backdrop in design. 1hey're commonly
combined wiLh brighLer accenL colors. 8uL Lhey can also be used on
Lheir own and make or very sophisLicaLed layouLs. Surrounding colors
aecL Lhe meaning o neuLral colors much more Lhan warm and cool
colors.
BIack
8lack is Lhe sLrongesL o Lhe neuLral colors. On Lhe posiLive side, iL's
associaLed wiLh power, elegance and ormaliLy. On Lhe negaLive side, iL
138
_____________________________________________________________
is associaLed wiLh evil, deaLh and mysLery. 8lack is Lhe LradiLional color
o mourning in many WesLern counLries. lL's also associaLed wiLh
rebellion in some culLures and is Lied Lo Halloween and Lhe occulL.
8lack is commonly used in edgy designs, as well as in eleganL designs.
lL can be eiLher conservaLive or modern, LradiLional or unconvenLional,
depending on Lhe colors iL's combined wiLh. ln design, black is
commonly used or Lypography and oLher uncLional elemenLs
because o iLs neuLraliLy. 8lack conveys a sense o sophisLicaLion and
mysLery.
white
WhiLe is aL Lhe opposiLe end o Lhe specLrum, buL like black, iL works
well wiLh jusL abouL any oLher color. WhiLe is oLen associaLed wiLh
puriLy, cleanliness and virLue. ln Lhe WesL, whiLe is commonly worn by
brides on Lheir wedding day. lL's also associaLed wiLh Lhe healLh care
indusLry, especially docLors, nurses and denLisLs. WhiLe is associaLed
wiLh goodness. angels are oLen depicLed in whiLe dress.
139
_____________________________________________________________
ln design, whiLe is oLen used as a neuLral backdrop Lo give oLher
colors a louder voice. lL conveys cleanliness and simpliciLy and is
popular in minimalisL designs. WhiLe is also used Lo represenL eiLher
winLer or summer, in conjuncLion wiLh Lhe design moLis and colors
around iL.
Gray
Cray is a neuLral color, generally considered Lo be on Lhe cool end o
Lhe specLrum. lL can be considered moody or depressing. LighL grays
can be used in place o whiLe in some designs, and dark grays can be
used in place o black.
Cray is generally conservaLive and ormal buL can also be modern. lL is
someLimes considered a color o mourning. lL's commonly used in
corporaLe designs, where ormaliLy and proessionalism are needed. lL
can be a sophisLicaLed color. Pure grays are shades o black, Lhough
oLher grays may have blue or brown hues mixed in. ln design, gray
backgrounds are very common, as is gray Lypography.
140
_____________________________________________________________
Brown
8rown is associaLed wiLh FarLh, wood and sLone. lL's a compleLely
naLural color and a warm neuLral. 8rown can be associaLed wiLh
dependabiliLy and reliabiliLy, wiLh sLeadasLness and wiLh earLhiness. lL
can also be considered dull.
ln design, brown is commonly used as a background color. lL's also
seen in wood LexLures and someLimes in sLone LexLures. lL gives a
eeling o warmLh and wholesomeness Lo a design. lL's someLimes
used in iLs darkesL orms as a replacemenL or black, in eiLher
backgrounds or Lypography.
141
_____________________________________________________________
Beige and Tan
8eige is somewhaL unique in Lhe color specLrum, because iL can Lake
on cool or warm Lones depending on Lhe colors around iL. lL has Lhe
warmLh o brown and Lhe coolness o whiLe and, like brown, is
someLimes seen as dull. lL's a conservaLive color in mosL insLances and
is usually reserved or backgrounds. lL also symbolizes pieLy.
8eige is generally used or backgrounds, oLen ones wiLh a paper
LexLure. lL Lakes on characLerisLics o Lhe colors around iL, minimizing
iLs eecL on Lhe overall design.
142
_____________________________________________________________
Cream and lvory
lvory and cream are sophisLicaLed colors, wiLh some o Lhe warmLh o
brown and a loL o Lhe coolness o whiLe. 1hey're generally quieL and
oLen evoke a sense o hisLory. lvory is a calm color, wiLh some o Lhe
pureness associaLed wiLh whiLe, buL a biL warmer.
ln design, ivory lends elegance and a sense o calm. When combined
wiLh earLhy colors like peach or brown, iL can Lake on an earLhy
qualiLy. lL can also be used Lo lighLen darker colors, wiLhouL Lhe sLark
conLrasL o whiLe.
ln Brief
While Lhe inormaLion presenLed here mighL seem jusL a biL
overwhelming, color Lheory is as much abouL Lhe eeling a parLicular
shade evokes as anyLhing else. 8uL here's a quick reerence guide or
Lhe common meanings o Lhe colors discussed above.
Red. Passion, Love, Anger
143
_____________________________________________________________
Orange. Fnergy, Happiness, viLaliLy
YeIIow. Happiness, Hope, DeceiL
Green. New 8eginnings, Abundance, NaLure
BIue. Calmness, ResponsibiliLy, Sadness
PurpIe. CreaLiviLy, RoyalLy, WealLh
BIack. MysLery, Flegance, Fvil
Gray. Moody, ConservaLive, Formal
white. PuriLy, Cleanliness, virLue
Brown. NaLural, Wholesome, Dependable
Tan or Beige. ConservaLive, Pious, Dull
Cream or lvory. Calm, FleganL, Pure
TraditionaI CoIor 5cheme Types
1here are a number o color scheme sLandards, which make creaLing
new schemes easier, especially or beginners. 8elow are Lhe LradiLional
schemes, wiLh a ew examples o each.
144
_____________________________________________________________
1he bcsic 12-scle cclcr wheel is cn imcrtcnt tccl in crectin cclcr
schemes.
Monochromatic
MonochromaLic color schemes are made up o dierenL Lones, shades
145
_____________________________________________________________
and LinLs o a parLicular hue. 1hese are Lhe simplesL color schemes Lo
creaLe, because Lhey're all o Lhe same hue, making iL hard Lo creaLe a
jarring or ugly scheme (Lhough LhaL is sLill possible).
xampIes
Here are Lhree examples o monochrome color schemes. For Lhe mosL
parL, Lhe irsL color (i we're looking aL Lhe scheme rom leL Lo righL)
would be used or headlines. 1he second would be used or body LexL
or possibly Lhe background. 1he Lhird color would be used or Lhe
background (or or Lhe body LexL i Lhe second color was used as Lhe
background). And Lhe lasL Lwo colors would be used as accenLs or in
graphics.
146
_____________________________________________________________
AnaIogous
Analogous color schemes are Lhe nexL easiesL Lo creaLe. Analogous
schemes consisL o Lhree colors LhaL lie nexL Lo each oLher on Lhe 2-
spoke color wheel. Cenerally, analogous color schemes all have Lhe
same chroma level, buL by using Lones, shades and LinLs we add
inLeresL and adapL Lhe schemes Lo our needs.
xampIes
147
_____________________________________________________________
1his is c trcJiticncl cnclccus cclcr scheme, cnJ while its visuclly
ceclin, there isnt encuh ccntrcst between the cclcrs jcr cn
ejjective website Jesin.
Heres c cclcr scheme with the scme hues cs the cne cbcve, but with
the chrcmc cJjusteJ tc ive mcre vcriety. lts ncw much mcre suitcble
jcr use cn c website.
Ancther excmle cj c trcJiticncl cnclccus scheme.
148
_____________________________________________________________
1his scheme mcJijies the lcst cne jcr use cn c website.
CompIementary
ComplemenLary schemes are creaLed by combining colors rom
opposiLe sides o Lhe color wheel. ln Lheir mosL basic orm, Lhese
schemes consisL o only Lwo colors buL can be easily expanded using
Lones, LinLs and shades. A word o warning, Lhough. using colors LhaL
are exacL opposiLes wiLh Lhe same chroma and/or value righL nexL Lo
each oLher can be jarring (Lhey'll seem Lo vibraLe along Lheir border in
exLreme cases). Avoid Lhis, eiLher by leaving whiLe space beLween
Lhem or by adding a LransiLional color beLween Lhem.
xampIes
149
_____________________________________________________________
A wiJe rcne cj tints, shcJes cnJ tcnes mcles this c versctile cclcr
scheme.
Ancther ccmlementcry cclcr scheme with c wiJe rcne cj chrcmcs.
Dcnt jcret thct beie cnJ brcwn cre reclly tints cnJ shcJes cj
crcne.
5pIit CompIementary
SpliL complemenLary schemes are almosL as easy Lo use as
complemenLary schemes. Here, insLead o using opposiLes colors, you
would use colors on eiLher side o Lhe hue LhaL is opposiLe Lo your
base hue.
150
_____________________________________________________________
xampIes
A scheme in which yellcw-reen is the bcse hue. ln this scheme, hcvin
encuh Jijjerence in chrcmc cnJ vclue between the cclcrs ycu select is
imcrtcnt.
Ancther clette with c wiJe rcne cj chrcmcs.
Triadic
1riadic schemes are made up o hues LhaL are equally spaced around
Lhe 2-spoke color wheel. 1hese make or more vibranL color
schemes.
151
_____________________________________________________________
xampIes
Usin c very cle cr Jcrl versicn cj cne cclcr in the tricJ, clcn with
twc shcJes, tcnes cr tints cj the cther twc cclcrs, mcles the sinle
cclcr wcrl clmcst cs c neutrcl.
Alternctely, cirin cne very briht hue with muteJ hues mcles the
briht cne stcnJ cut mcre.
DoubIe-CompIementary (Tetradic)
1eLradic color schemes are probably Lhe mosL diiculL Lo pull o.
152
_____________________________________________________________
xampIes
A rcther unimressive scheme. 1he best tetrcJic schemes use cne cclcr
cs the rimcry cclcr cnJ the cthers cs cccents.
1etrcJic cclcr schemes with similcr chrcmcs cnJ vclues wcrl well. Iust
cJJ c neutrcl (such cs Jcrl rcy cr blccl) jcr text cnJ cccents.
lt wcrls just cs well jcr Jcrler cclcr schemes.
153
_____________________________________________________________
Custom
CusLom color schemes are Lhe hardesL Lo creaLe. 8y noL ollowing Lhe
predeined schemes discussed above, you're abandoning any ormal
rules. Keep in mind Lhings like chroma, value and saLuraLion when
creaLing cusLom color schemes.
xampIes
1he cclcrs here cll hcve similcr chrcmc cnJ scturcticn levels.
Again, using colors wiLh similar chroma and saLuraLion is eecLive and
creaLes a sense o cohesion.
154
_____________________________________________________________
Usin cne cclcr with c hih chrcmc cmcn cther cclcrs with lcwer
chrcmcs is cncther ejjective methcJ (the hiher-chrcmc cclcr serves cs
cn cccent).
Creating a CoIor 5cheme
CreaLing your own color schemes can be a biL inLimidaLing. 8uL iL's noL
as complicaLed as many people Lhink. And you can employ quiLe a
ew Lricks Lo creaLe greaL color paleLLes righL rom Lhe sLarL.
We've gone over Lhe dierenL Lypes o color schemes. Now, leL's Lry
creaLing a ew o our own. PlenLy o Lools are online LhaL will help you
creaLe a color scheme, buL leL's orgeL abouL Lhose or now and jusL
use PhoLoshop.
LeL's break away rom Lhe Lypes already menLioned and creaLe some
cusLom schemes. While knowing how colors inLeracL and how
LradiLional schemes are creaLed is imporLanL, or mosL design projecLs
you'll likely creaLe schemes LhaL don'L adhere sLricLly Lo any
predeined paLLerns.
155
_____________________________________________________________
So, or our purposes here, we'll creaLe a seL o Lhree color schemes or
Lwo dierenL websiLes. Our hypoLheLical clienLs are a modern
archiLecLure design blog and a high-end women's cloLhing reLailer
LhaL specializes in vicLorian-inluenced apparel.
We'll sLarL wiLh a basic monochromaLic scheme, jusL Lo geL a eel or iL.
While LradiLional color schemes aren'L used as much in design,
monochromaLic color schemes are Lhe excepLion. ou'll likely ind
yoursel using monochromaLic schemes on a airly regular basis.
For our apparel sLore, here's a LradiLional monochromaLic scheme,
wiLh whiLe added as a neuLral.
156
_____________________________________________________________
For our design blog, we've gone wiLh a color scheme made up o
shades and LinLs o gray.
1his is almosL an analogous color scheme, buL we've leL ouL one
color. lL's made up o shades o purple and reddish-purple. 1hese Lwo
colors all nexL Lo each oLher on Lhe color wheel and work well
LogeLher, especially when given dierenL values and saLuraLion levels.
Adding a couple o shades o red Lo Lhis gray color scheme adds a loL
o visual inLeresL and Lhe poLenLial Lo highlighL cerLain parLs o your
design.
157
_____________________________________________________________
Here, we've goLLen rid o Lhe purple hues and swiLched Lo a burgundy.
Again, Lhis is nexL Lo Lhe reddish-purple on Lhe color wheel. We've
also added a very pale yellow Lone, which siLs opposiLe purple on Lhe
color wheel. 1his serves as our neuLral and looks more like an o-
whiLe compared Lo our oLher hues.
While Lhis color scheme aL irsL glance looks like anoLher sLandard
gray and red paleLLe. However, grays are acLually Lones o blue. 8lue
and red make up Lwo Lhirds o a LeLradic color scheme, buL Lhey work
jusL ine LogeLher wiLhouL yellow, especially when Lhe red is pure and
Lhe blue is Loned down Lo Lhe poinL o almosL being gray.
158
_____________________________________________________________
why 5hades, Tones and Tints Are lmportant
As you can see rom Lhe color schemes above, using LinLs, Lones and
shades in your color schemes is viLal. Pure hues all have similar values
and saLuraLion levels. 1his leads Lo color schemes LhaL are
overwhelming and boring aL Lhe same Lime.
When you mix in Lones, shades and LinLs, you expand Lhe basic 2-
spoke color wheel Lo an ininiLe number o possible colors. One o Lhe
simplesL ways Lo creaLe a proessional-looking scheme is Lo Lake a ew
Lones, LinLs and shades o a given color (avoiding Lhe pure hue), and
Lhen add anoLher pure (or close Lo pure) hue LhaL is aL leasL Lhree
spaces away on Lhe color wheel (i.e. LhaL's parL o a LeLradic, Lriadic or
spliL-complemenLary scheme) as an accenL color. 1his adds visual
inLeresL while sLill reLaining a sense o balance.
Adding in NeutraIs
NeuLrals are anoLher imporLanL parL o color schemes. Cray, black,
whiLe, brown, Lan and o-whiLe are generally considered neuLral.
8rowns, Lans and o-whiLes Lend Lo make color schemes warmer
(because Lhey're really jusL Lones, shades and LinLs o orange and
yellow). Cray Lakes on a warm or cool eel depending on Lhe
surrounding colors. 8lack and whiLe also look eiLher warm or cool
depending on Lhe surrounding colors.
159
_____________________________________________________________
8lack and whiLe are Lhe easiesL neuLrals Lo add Lo jusL abouL any color
scheme. 1o add a biL more visual inLeresL, Lhough, consider using a
very lighL or very dark shade o gray insLead.
Adding browns, Lans and o-whiLe hues is a biL Lrickier, buL wiLh
pracLice you'll ind iL geLs easier. For browns, consider using a very
dark chocolaLe brown in place o black. A pale o-whiLe can be used
insLead o whiLe or lighL gray in many cases. And Lan can be used in
place o gray (creaLe a Lone by adding some gray Lo make iL even
easier).
The asiest CoIor 5chemes
We've Louched on Lhis already. adding a brighL accenL color Lo an
oLherwise neuLral paleLLe is one o Lhe easiesL color schemes Lo creaLe.
lL's also one o Lhe mosL sLriking. l you're unsure o your skill in
160
_____________________________________________________________
creaLing cusLom schemes, sLarL ouL wiLh Lhese Lypes o paleLLes.
Here are a ew examples Lo give you an idea.
161
_____________________________________________________________
Ycu ccn see here hcw usin brcwns instecJ cj rcys mcles the entire
scheme wcrmer, even with the blue cccent cclcr.
ou can use Lones o any color insLead o gray or brown in Lhis Lype o
scheme, jusL keep iL close Lo Lhe gray end o Lhe specLrum or Lhe
mosL oolproo resulLs. As a general rule, cool grays and pure grays
are besL or modern designs. For LradiLional designs, warmer grays
and browns work beLLer.
How Many CoIors?
ou'll noLice LhaL LhroughouL Lhis posL we've used color schemes wiLh
ive dierenL colors. Five is a good number. iL gives plenLy o opLions
162
_____________________________________________________________
or illusLraLing Lhe concepLs discussed here and iL is a workable
number in a design. 8uL eel ree Lo use more or ewer colors in your
own schemes.
A loL o websiLes mighL have only Lhree colors. OLhers only Lwo. And
some mighL have eighL or Len (which is a loL Lrickier). FxperimenL, and
use as many or ew colors as you need. 8uL you may wanL Lo sLarL
wiLh a paleLLe o ive, and Lhen add or subLracL as you see iL and as
you progress.
1he easiesL way Lo add a color is Lo sLarL wiLh a predeined LradiLional
color scheme and go rom Lhere. 1his gives you aL lease a biL o
direcLion as ar as which oLher colors Lo consider.
ConcIusion
We've really only Louched on color Lheory in Lhis arLicle. SpecialisLs
ouL Lhere have spenL liLerally years reining Lheir abiliLy Lo choose Lhe
appropriaLe colors or Lhe siLuaLion.
1he besL way Lo learn how Lo creaLe beauLiul color schemes is Lo
pracLice. CreaLe a scheme every day. ou can eiLher sLarL wiLh
auLomaLed Lools or jusL ire up PhoLoshop and begin. l you come
across a parLicularly beauLiul or sLriking color, Lry creaLing a scheme
around iL.
163
_____________________________________________________________
1ake advanLage o one o Lhe many websiLes ouL Lhere LhaL leL you
upload your color schemes and organize Lhem or laLer reerence.
1hey make your library more pracLical and easier Lo use in uLure.
Ccmercn Chcmcn is c rcjessicncl Web cnJ rchic Jesiner with
cver 6 yecrs cj exerience. She writes jcr c number cj blcs, incluJin
her cwn, Ccmercn Chcmcn On Writin. Shes clsc the cuthcr cj
lnternet lcmcus. A Prccticcl CuiJe tc 3eccmin cn Online Celebrity.
164
_____________________________________________________________
ls John The CIient Dense or Are You laiIing
Him?
3y Pcul 3cc
MeeL John Lhe clienL. John runs a reasonably large websiLe. He is a
markeLer who considers himsel smarL, arLiculaLe and proessional.
1haL said, he doesn'L know much abouL Web design, and so he needs
your help. John comes Lo you wiLh a clear seL o business objecLives
and asks or a quoLe. 8uL whaL happens nexL leaves John conused,
rusLraLed and exLremely unhappy.
xpIain why You Are Asking About Money
8eore giving John his quoLe, you ask a liLLle more abouL Lhe projecL.
ALer chaLLing or a ew minuLes, you ask him abouL his budgeL. A air
quesLion, you Lhink. ALer all, you could approach Lhe projecL in so
many ways.
WiLhouL knowing Lhe budgeL, knowing where Lo begin is impossible.
ln your mind, building a websiLe is like building a house. WiLhouL
knowing Lhe budgeL, you can'L possibly know how many rooms Lhe
clienL can aord or whaL maLerials you should use Lo build.
John, on Lhe oLher hand, is insLanLly suspicious. Why would you wanL
Lo know abouL his budgeL 1he only reason he can Lhink o is LhaL you
165
_____________________________________________________________
wanL Lo make sure you don'L charge him less Lhan whaL he is willing
Lo give. 8esides, he doesn'L really know his budgeL. How Lhe heck is
he supposed Lo know how much a websiLe cosLs
John leaves, deLermined Lo ind a Web designer who doesn'L wanL Lo
Lake advanLage o him. ForLunaLely or you, all o Lhe oLher designers
he speaks wiLh also neglecL Lo explain why Lhey need Lo know abouL
his budgeL, and so you manage Lo win Lhe projecL aLer all.
Justify Your Recommendations ln Language John
Can Understand
Once you have won Lhe job, you arrange a kick-o meeLing Lo nail
down Lhe speciicaLions. However, John insLanLly regreLs his decision
Lo hire you because his worsL ears have been conirmed. ln his eyes,
you are all o a sudden Lrying Lo squeeze more money ouL o him as
you blab on abouL Lhe imporLance o usabiliLy and accessibiliLy. John
doesn'L care abouL disabled users. He doesn'L expecL disabled users Lo
visiL his websiLe anyway.
And as or usabiliLy, surely Lhe job o Lhe Web designer is Lo make Lhe
websiLe usable. Why do we need expensive usabiliLy LesLing He is
preLLy cerLain LhaL usabiliLy LesLing involves expensive Lhings like
cameras, labs and Lwo-way mirrors. ou LhoughL you had explained
Lhese issues clearly. ou spoke o WCAC 2, and you menLioned Jakob
Nielsen. ou are beginning Lo wonder i John is a biL Lhick.
166
_____________________________________________________________
Perhaps i you had Lalked abouL accessibiliLy in Lerms o assessing
search engine rankings and LesLing usabiliLy as a way Lo increase
conversion, Lhen John mighL have lisLened. As iL is, John puLs his ooL
down and reuses Lo pay or any o Lhese "unnecessary exLras."
lncIude John ln The Process
ou walk away rom Lhe kick-o meeLing pleased Lo have a signed
conLracL. 8uL LhaL eeling in Lhe piL o your sLomach Lells you LhaL Lhis
mighL be anoLher one o Lhose projecLs. Regardless, you Lry Lo be
opLimisLic, and you dive inLo Lhe design process. AlmosL immediaLely,
you geL a phone call rom John asking i Lhere is anyLhing or him Lo
see. ou explain LhaL iL is sLill early in Lhe process and LhaL you are noL
ready Lo presenL anyLhing. John sounds disappoinLed buL resigned.
A shorL while laLer, you are ready Lo presenL Lhe design Lo John. ou
are pleased wiLh Lhe resulL. lL Look you a loL more Lime Lhan you had
budgeLed or, buL iL was worLh iL. 1he inal design is exLremely easy Lo
use and will make or a greaL porLolio piece.
When John sees Lhe design, he is horriied. From his perspecLive, you
have enLirely missed Lhe poinL. 1he design clashes wiLh his oline
markeLing maLerials and doesn'L hiL Lhe righL selling poinLs. Also, he is
convinced LhaL his suppliers will haLe iL and, alLhough Lhey are noL his
end users, Lheir opinion maLLers.
167
_____________________________________________________________
ALer a Lense conerence call, you eel demoralized buL have sLruck a
compromise LhaL hopeully will make John happy. ou wonder in
hindsighL wheLher showing John some o your iniLial ideas and
skeLches would have been beLLer. Perhaps you should have presenLed
a wirerame irsL.
ducate John About Design
ALer much agonizing and compromise, you are once again ready Lo
presenL Lo John. John is much happier wiLh Lhe new design and eels
iL is heading in Lhe righL direcLion. However, he does have some
concerns. For sLarLers, he has Lo scroll Lo see mosL o Lhe conLenL, and
yeL whiLe space Lakes up eiLher side o Lhe design. He Lells you Lo
move key conLenL inLo Lhis wasLed space. Also, as he Lhinks abouL his
young male LargeL audience, he realizes LhaL Lhe color scheme is Loo
eeminaLe, so he Lells you Lo change iL Lo blue.
While John eels somewhaL happier, you eel crushed. ou eel as
Lhough he is Lrying Lo do Lhe job or you. 1he insLrucLions Lo move
Lhis Lhere and change Lhis color Lo LhaL makes you eel like you have
been reduced Lo pushing pixels.
8y Lhis poinL, you are sure Lhe clienL is dim, and now you jusL wanL
him Lo sign o on a design. AL no sLage do you Lhink Lo ask John why
he is requesLing Lhese changes. Perhaps i you had appreciaLed his
Lhinking, you could have explained concepLs such as screen resoluLion
and suggesLed an alLernaLive Lo corporaLe blue, which is so over-used
168
_____________________________________________________________
on Lhe Web. lnsLead, you wash your hands o Lhe design and jusL give
John whaL he wanLs.
Communicate with John ReguIarIy
Now LhaL Lhe design is compleLe, you Lurn your aLLenLion Lo building
iL. John cerLainly won'L care abouL your code. Now you can inally do
Lhings righL.
lL's a big job and Lakes a loL o Lime. Fven Lhough you puL Loo much
Lime inLo Lhe design and washed your hands o iL, you sLill have your
pride. ou are noL abouL Lo cuL corners wiLh Lhe code. ALer all, oLher
designers mighL look aL iL and judge you!
ou work really hard, puLLing in more work Lhan you probably should
have. John even manages Lo slip in some exLra uncLionaliLy aL Lhe
scoping phase, which Lurns ouL Lo be a pain in Lhe buLL.
For his parL, John is wondering whaL's going on. He hasn'L heard rom
you in weeks. Surely Lhe websiLe musL be ready now He decides Lo
email you Lo ask how Lhings are progressing. ou reply wiLh a shorL
email Lelling him LhaL everyLhing is progressing smooLhly. ou never
did like projecL managemenL, and you are sure John would preer LhaL
you spend Lime building his websiLe insLead o wriLing him deLailed
reporLs.
169
_____________________________________________________________
John receives your email and is becoming increasingly rusLraLed.
WhaL does "progressing smooLhly" mean He wriLes back asking or
an expecLed daLe o compleLion, and you reply wiLh a rough esLimaLe.
1he daLe comes and goes wiLhouL a word rom you. ALer all, iL was
merely an esLimaLe, and several complicaLions have delayed
compleLion by a ew days. John inally loses his Lemper and calls you.
He Lells you LhaL he has arranged a markeLing campaign Lo coincide
wiLh Lhe launch daLe, and because he hadn'L heard rom you, he
presumed everyLhing was on schedule.
ou deend yoursel, ciLing "scope creep" and unanLicipaLed delays.
8uL responding is diiculL when John says, "All l needed was a weekly
email keeping me up Lo daLe on progress."
xpIain John's Ongoing RoIe
8y Lhis sLage, Lhe relaLionship has broken down enLirely. ou inish
your work, and Lhe websiLe inally launches. 8egrudgingly, John pays
Lhe invoice aLer delaying iL or as long as possible. WhaL amazes you
mosL is John's pronouncemenL LhaL he is biLLerly disappoinLed wiLh
Lhe resulL. How can LhaL be when you gave him exacLly whaL he asked
or 1his guy isn'L jusL Lhick. he's a jerk!
O course, John sees Lhings dierenLly. He came Lo you wiLh a lisL o
his business objecLives, and Lhe websiLe has ailed Lo meeL any o
Lhem. He had hoped Lo launch Lhe websiLe, waLch iL achieve his
170
_____________________________________________________________
objecLives and Lhen move on Lo Lhe nexL projecL. lnsLead, aLer an
iniLial spike in inLeresL, Lhe number o users and inquiries dropped
over Lime, and Lhe websiLe sLagnaLed.
WhaL John does noL realize is LhaL websiLes need conLinued love and
supporL. ou cannoL build a websiLe and Lhen abandon iL. John has Lo
nurLure iL by adding new conLenL, engaging wiLh visiLors and planning
or ongoing developmenL. l only someone had Lold him.
The MoraI Of The 5tory
lL's amazing how quick we are Lo judge our clienLs. As Web designers,
we communicaLe and empaLhize or a living. Our job is Lo
communicaLe messages Lo our clienLs' users. We creaLe usable
websiLes by puLLing ourselves in Lhe posiLion o our users, which
allows us Lo design around Lheir needs.
Why, Lhen, do we so oLen seem incapable o empaLhizing or
communicaLing wiLh our clienLs Perhaps iL is Lime or us Lo apply Lhe
skills we have culLivaLed as Web designers Lo our own cusLomers.
Pcul 3cc is the jcunJer cj Uk Web Jesin cency HecJscce, cuthcr
cj the Website Owners Mcnucl cnJ hcst cj cwcrJ-Winnin Web Jesin
cJccst 3ccwcrlJ.
171
_____________________________________________________________
172
_____________________________________________________________
How To ldentify and DeaI with Different
Types Of CIients
3y Rcbert 3cwen
ln business, being able Lo read people and quickly geL a sense o who
you're dealing wiLh is an invaluable skill. lL Lurns your encounLer wiLh a
clienL inLo an opporLuniLy Lo caLch a glimpse o Lhe upcoming projecL
and how iL will need Lo be handled. lL is one o Lhe building blocks o
a proessional relaLionship.
ln Loday's digiLal age, Lhe arena has shiLed Lo Lhe Web, and Lhe online
oice space LhaL mosL reelancers inhabiL limiLs personal inLeracLion.
1hough sussing ouL a clienL's personaliLy via online communicaLion is
diiculL, iL sLill remains an invaluable Lool in your arsenal.
ln Lhe reelancing ield, you will encounLer a range o clienL Lypes.
8eing able Lo idenLiy which you are dealing wiLh allows you Lo
develop Lhe righL sLraLegy Lo maximize your inLeracLions wiLh Lhem,
and iL could save your saniLy. 8elow is a lisL o Lhe mosL common
personaliLy Lypes and Lhe Lell-Lale signs LhaL will Lip you o.
The Passive-Aggressive
1his is Lhe clienL who is very passive when you ask or iniLial inpuL, buL
when you submiL Lhe inished producL, Lhey aggressively aLLack iL,
173
_____________________________________________________________
demanding a loL o deLailed changes, boLh major and minor. 1hey had
an idea o whaL Lhey wanLed all along buL kepL iL mosLly Lo
Lhemselves. Fven Lhough Lhey showed appreciaLion o cerLain ideas
and elemenLs LhroughouL Lhe developmenL process, do noL expecL
Lhe passive-aggressive clienL Lo keep any o Lhem as Lhey send
revisions your way.
ldentifying Characteristics
CommunicaLion is mosLly one-sided and unhelpul during
projecL developmenL.
Makes sLaLemenLs such as.
"l'm noL really sure whaL we're looking or."
"JusL do someLhing LhaL would appeal Lo us generally."
"ou LoLally missed Lhe poinL o whaL we wanLed."
How to DeaI with lt
PaLience is key. FxpecLing Lhe lasL-minuLe requesLs or revisions may
soLen Lhe blow o Lhe clienL's aggressive behavior. Keep your original
layered design inLacL so LhaL you can easily reine and change iL laLer
(noL LhaL you wouldn'L, buL iL does happen). Also, make sure your
conLracL speciies a limiLed number o revisions.
174
_____________________________________________________________
The lamiIy lriend
1his is Lhe clienL whom you have known or years eiLher Lhrough
personal or amily inLeracLion, and Lhis connecLion has landed you Lhe
job. 1he relaLionship will be LesLed and perhaps marred orever by
whaL could very well be a nighLmare o a projecL. 1his amily riend
believes he deserves a "special" price and unbridled access Lo your
work. 1hey will someLimes unwiLLingly beliLLle your work or noL Lake iL
seriously because o Lheir personal connecLion Lo you.
1hese clienLs are easy Lo idenLiy because. well, you know
Lhem.
Makes such sLaLemenLs as.
"Could you jusL Lhrow someLhing LogeLher or me"
"l don'L wanL you Lo Lhink LhaL jusL because l know you
l wanL you Lo cuL me a deal."
"ou're going Lo charge me whaL! 8uL we go way
back!"
How to DeaI with lt
1he way Lo deal wiLh Lhis clienL depends on how well you know Lhem
and how much you value your relaLionship wiLh Lhem. 8uL remember
LhaL anyone who would Lake advanLage o such a relaLionship is noL
175
_____________________________________________________________
Lruly a riend, so respond accordingly. An honesL approach could end
up saving Lhe relaLionship. 8uL sLarL o wiLh a proessional, noL
personal, Lone, and Lhey may ollow your lead. O course, i you Lruly
value Lhe relaLionship, you may wanL Lo pass on Lhe job alLogeLher.
The Under-VaIuer
Like Lhe amily riend described above, Lhis clienL devalues your
creaLive conLribuLions. 8uL Lhere is a dierence. you do noL acLually
know Lhis person. 1here is no raLionale or Lheir behavior. 1hey eel
Lhey should geL a "riend's" pricing raLe noL because Lhey wanL Lo be
riends wiLh you, buL because Lhey do noL see your work as being
worLh LhaL much. even i Lhey couldn'L do iL Lhemselves. NoL coming
rom a creaLive background or even having had exposure Lo Lhe arLs
can mar someone's appreciaLion o Lhe work LhaL you do. ALer years
in our ield, we make iL look easy, and LhaL is whaL Lhe under-valuer
sees.
Does noL respond Lo quesLions in a Limely ashion.
"lL's noL like iL Lakes much eorL on your parL."
"Couldn'L you jusL Lhrow someLhing LogeLher or me"
"How hard can Lhis really be"
176
_____________________________________________________________
How to DeaI with lt
Conidence is key here. ou know whaL your work demands and how
well you do your job. 1he under-valuer will recognize Lhis conidence.
Don'L back down or concede a poinL Lo Lhe clienL when discussing
your role in Lhe projecL. SLanding irm will esLablish Lhe proessional
and respecLul Lone you deserve. l Lhe clienL does noL respond in
kind, cuL your losses and decline Lheir projecL.
The Nit-Picker
1his clienL is never ully saLisied wiLh Lhe work you do and consLanLly
picks on minor deLails here and Lhere LhaL Lhey dislike and wanL
changed. Do noL be surprised i Lhey ask you Lo change Lhese same
deLails over and over ad nauseam. lL is noL a sign o disrespecL (as iL is
wiLh Lhe oLher clienLs), buL simply Lhe naLure o Lhe person. 1hey may
have been burned in some oLher projecL and are now unsaLisied wiLh
everyLhing in Lheir paLh, including your work.
Complains almosL consLanLly abouL unrelaLed Lhings.
Personal ouLlook comes wiLh a scaLhing biLe.
"How hard is iL really Lo [ill in Lhe blank wiLh any ranL]"
177
_____________________________________________________________
"l'm noL sure abouL Lhis elemenL here. lL jusL doesn'L
pop!"
"l don'L Lhink you're really geLLing iL."
How to DeaI with lt
Once again, paLience is imporLanL (especially i you have some sadisLic
reason or Laking on niL-picking clienLs). 1ry Lo deLach yoursel rom
Lhe projecL as much as possible, so LhaL Lhe consLanL niL-pickery does
noL aecL you personally. lL is easy Lo eel hurL or geL deensive when
your work is repeaLedly quesLioned, and you may begin Lo doubL your
skill. 8uL undersLand LhaL Lhis is noL abouL you or your LalenL, iL is
simply a personaliLy LraiL o Lhe person you are dealing wiLh. And once
again, proLecL yoursel in Lhe conLracL.
The 5cornfuI 5aver
1his clienL has similariLies Lo Lhe niL-picker and under-valuer buL is
acLually impressed wiLh your work and skill seL. 1hey criLicize you
merely Lo undermine your conidence in an aLLempL Lo lower your
pricing raLe. Unlike some oLher clienL Lypes, Lhe scornul saver
undersLands creaLive people and Lheir processes. 8uL Lhey are cheap
and manipulaLive, and Lheir scheme may have worked in Lheir avor
once or Lwice in Lhe pasL. So, Lhey conLinue Lo subLly abuse Lhe
people Lhey hire in Lhe hope o saving every lasL penny.
178
_____________________________________________________________
ComplimenLs always come wiLh a less-Lhan-laLLering qualiier.
1akes Lime Lo respond Lo quesLions, someLimes making you
ask more Lhan once.
"l really like whaL you've done overall, buL l'm unsure
abouL one or Lwo Lhings."
"ou may noL have goLLen exacLly whaL we're looking
or, buL you're close."
How to DeaI with lt
Once again, iL is all abouL conidence. Having a solid undersLanding o
your ield and being conidenL in your knowledge and abiliLies will
keep Lhis clienL's manipulaLion in check. SLanding your ground and
even calling Lhe clienL on some o Lheir LacLics could shiL Lhe balance
o power over Lo you. 8e prepared Lo walk away rom Lhe projecL i
Lhe disrespecL and manipulaLion conLinues. 1here will be oLher
projecLs and oLher clienLs.
The l-CouId-Do-This-MyseIf-er
Where Lo begin. When Lhis clienL arms a projecL ouL Lo you, Lhey
make clear Lo you LhaL Lhey know how Lo do whaL Lhey're hiring you
Lo do buL Lhey jusL don'L have Lhe Lime Lo acLually do iL. 1hey may be
179
_____________________________________________________________
working aL a irm or as an enLrepreneur, eiLher way, you are Lhere Lo
pick up Lheir slack. l Lhey're aL a irm, you could be in or an
inLeresLing siLuaLion, Lhey were likely hired or Lheir parLicular sLyle
and proposals, and now you will have Lo please Lwo seLs o people.
Lhe person who hired you and Lhe people who hired him.
Will generally be (or look) hecLic and rushed.
CommunicaLion rom Lhem oLen Lakes Lhe orm o shorL
bursLs o inormaLion.
"l could easily handle Lhis i my schedule weren'L so
ull."
"Really NoL sure LhaL's Lhe direcLion l would've gone in,
buL whaLever."
"Remember, you are illing my shoes, and Lhey're preLLy
big."
How to DeaI with lt
1he "l-Could-Do-1his-Mysel"-er will likely have recognized your
LalenL and skill righL away, which is why Lhey hired you. 1hey merely
wanL you Lo know LhaL Lhis projecL (and Lhus you) is noL above Lheir
abiliLy. And Lhough Lhese reminders will graLe on you periodically,
180
_____________________________________________________________
Lhey will leL you run wiLh your ideas, perhaps oering suggesLions or
eedback on Lhe inal design.
The ControI lreak
1his clienL desperaLely needs Lo micro-manage every liLLle deLail o
Lhe projecL, no maLLer Lheir qualiicaLions. No decision may be made
wiLhouL Lheir expliciL inpuL and approval. 1his Liresome person orces
himsel inLo your worklow, heedless o eiLher inviLaLion or proLesL,
and demands access Lo you aL whim. 1he concepLs o boundaries and
sLricL work processes are easily losL on Lhe conLrol reak, who
consLanLly disrupLs Lhe low. 1hey may also believe you lack
dedicaLion or preparedness, urLher reinorcing Lheir need Lo inLerere.
lniLial conLacL is long, deLailed and one-sided, wiLh liLLle inpuL
soughL rom you.
our inpuL remains unsoughL as Lhe projecL pushes orward.
"1his way we can keep in conLacL 24/7 in case you have
any quesLions, or l do."
"l really know besL whaL is righL or Lhe projecL and
whaL is noL."
181
_____________________________________________________________
"WhaL do you mean, l'm disLracLing you l am Lhe only
Lhing keeping Lhis projecL on Lrack!"
How to DeaI
l you absoluLely musL Lake on Lhis clienL, or whaLever reason, resign
yoursel Lo Lhe acL LhaL you will noL be sLeering aL any poinL. ou will
have Lo deLach yoursel rom Lhe work because you will have no
conLrol aL all. ou will merely be consLrucLing, noL designing, so jusL
leL go and leL iL happen. ou may wanL Lo exclude Lhis projecL rom
your porLolio.
The Dream CIient
1his clienL, widely dismissed as a myLh, does in acL exisL and
undersLands Lhe ull scope and arLisLry o your work. 1hey value your
role and creaLive conLribuLions and wanL you in Lhe driver's seaL as
soon as Lhe projecL geLs underway. 1hey are Limely wiLh responses
and paymenLs. paymenLs LhaL Lhey did noL "negoLiaLe" buL raLher
accepLed or whaL Lhey are. 1hey relecL on your suggesLions and have
conidence in your capabiliLies.
ls enLhusiasLic abouL Lhe projecL and your involvemenL in iL.
CommunicaLion shows awareness o and respecL or your role.
182
_____________________________________________________________
"Here's Lhe brie we prepared. 1he resL is preLLy much
up Lo you."
"We like whaL we've seen and LrusL you'll do greaL
Lhings or us."
How to DeaI
Don'L brag! JusL enjoy Lhe ride and hold on Lo Lhem or as long as you
possibly can!
wrap-up
8eing able Lo idenLiy Lhe Lype o clienL you are dealing wiLh will
prepare you or Lhe job ahead. lL will also help you decide wheLher Lo
accepL Lhe job in Lhe irsL place. our conLracL will relecL Lhe power
dynamics o Lhe projecL, so Lhe more you know abouL Lhe clienL, Lhe
beLLer able you will be Lo adjusL Lhe conLracL as necessary. Have you
come across oLher Lypes o clienLs in your reelancing career Please
leL us know in Lhe commenLs.
Rcbert 3cwen is cn emerin cuthcr, celebrcteJ cJccster cnJ cet,
cnJ mcst recently the cc-lcunJer cnJ imcinctive cc-Ccntributcr cj
the crective Jesin cnJ blcin Juc ct the Arbentin lreebies 3lc
cnJ DecJ Wins Desins.
183
_____________________________________________________________
How To Respond ffectiveIy To Design
Criticism
3y AnJrew lcllett
WinsLon Churchill once said. "CriLicism may noL be agreeable, buL iL is
necessary. lL ulills Lhe same uncLion as pain in Lhe human body. lL
calls aLLenLion Lo an unhealLhy sLaLe o Lhings." Regardless o where
you work or who you work or, being able Lo Lake criLicism is parL o
Lhe job. WheLher you're geLLing eedback rom your boss or a clienL,
having a proper perspecLive on criLicism and a sound undersLanding
o how Lo use iL eecLively is imporLanL.
184
_____________________________________________________________
UnorLunaLely, noL many people enjoy criLicism. ln acL, many have
developed a Lhick skin and Lake pride in Lheir abiliLy Lo brush iL o
and move on. However, despiLe iLs negaLive connoLaLion, criLicism
oLen presenLs an excellenL opporLuniLy Lo grow as a designer. 8eore
you can respond eecLively, you need Lo undersLand whaL Lhose
opporLuniLies are.
LeL's look aL some imporLanL aspecLs o geLLing consLrucLive criLicism.
Uncover bIind spots
Doing your own Lhing is easy, buL your habiLs will evenLually
185
_____________________________________________________________
become deeply ingrained and hard Lo break. CriLicism gives
you a viLal ouLside perspecLive on your work, uncovering
poLenLial areas or improvemenL LhaL you are unable Lo see by
yoursel.
ChaIIenge yourseIf
Feedback challenges you Lo be a beLLer designer. RaLher Lhan
seLLle or your own sLandards, you are pushed Lo Lake your
work Lo Lhe nexL level.
DeveIop communication skiIIs
l noLhing else, dealing wiLh a criLic can dramaLically improve
Lhe way you communicaLe - an essenLial skill or any
successul design career.
Outside motivation
ConsLrucLive criLicism oLen gives you Lhe kick in Lhe buLL you
need Lo learn a new design skill or Lechnique. Sel-moLivaLion
is greaL, buL everyone could use a hand rom Lime Lo Lime.
A Iesson in humiIity
Never underesLimaLe Lhe imporLance o humiliLy. AlLhough
criLicism can bruise Lhe ego, iL keeps you grounded, making
you easier Lo work wiLh and more open Lo learning rom
oLhers.
A posiLive view o criLicism isn'L enough. ou also need Lo know how
Lo respond eecLively when iL comes. Here are eighL Lips you can use
Lo sLarL making Lhe mosL o criLicism Loday.
186
_____________________________________________________________
Have The Right Attitude
Design is subjecLive and, like any arL orm, has no rulebook. No one
can Lell you whaL is "righL" and "wrong" wiLh your work, buL LhaL
doesn'L mean you can compleLely ignore your boss or clienL's opinion
eiLher. However, by Laking criLicism and eedback wiLh Lhe righL
aLLiLude, you can use iL Lo your advanLage and even enjoy iL.
Fveryone looks aL design Lhrough a ilLer shaped by personal
experience, and Lhis ilLer is usually very dierenL rom your own.
While you may have a degree in design and 0 years o experience,
noL everyone will agree wiLh your "experL" opinion, so don'L expecL
Lhem Lo. 1he imporLanL Lhing is Lo have a proper aLLiLude rom Lhe
beginning. FxpecL oLhers Lo disagree wiLh you, and be open Lo new
perspecLives. Align your expecLaLions and undersLand LhaL criLicism is
parL o Lhe process. While harsh criLicism can cuL deep and even scar,
iL can also moLivaLe, insLrucL and do all o Lhe good Lhings menLioned
above.
LasL, buL noL leasL, Lry Lo remove yoursel rom Lhe criLicism and view
iL as a commenLary on your acLions or work and noL as a personal
aLLack. While easier said Lhan done, Lhis disLincLion is key Lo
responding eecLively. l you can rise above Lhe criLicism and respond
calmly and eecLively, you will noL only earn Lhe admiraLion o your
criLic buL eel beLLer doing iL. SeL Lhe righL expecLaLions, undersLand
Lhe beneiLs, remove yoursel rom Lhe equaLion, and remember,
aLLiLude Lruly is everyLhing.
187
_____________________________________________________________
Understand The Objective
Clearly idenLiying Lhe goal o a design beore you share iL wiLh oLhers
is always a good idea. Are you showing iL o Lo mom or some ridge
Lime ls iL a clienL who's Lrying Lo solve a business challenge Lhrough
design Or perhaps you're consulLing a riend wiLh no experience or
sLake in Lhe projecL.
Regardless, a vague or conused objecLive will always eliciL o-LargeL
eedback, so make sure everyone involved "geLs iL" beore Laking
acLion. 1o respond eecLively Lo criLicism, you need Lo be sure LhaL Lhe
criLic undersLands your goals. 8e speciic. PresenL your objecLive in
clear and concise Lerms, Lhe criLicism you receive will be LargeLed and
acLionable as a resulL.
188
_____________________________________________________________
189
_____________________________________________________________
Check Your lirst Reaction
For mosL people (me included), Lhe irsL reacLion Lo criLicism is Lo geL
deensive or even lash ouL. l Lhis sounds like you, Lake Lime Lo
develop Lhe habiL o Laking a deep breaLh and counLing Lo 0 beore
responding. 1his simple yeL eecLive meLhod gives you a chance Lo
regain composure and allow logic Lo prevail over emoLion. 1he lasL
Lhing you wanL Lo do is geL overly emoLional and give a response LhaL
you will laLer regreL. Remember, in mosL cases, your criLic is only
Lrying Lo help you.
DespiLe Lhe iniLial sLing, you need honesL eedback Lo become a
beLLer designer. 1his is especially imporLanL or enLhusiasLs or
beginners in Lhe Lrade. All visual arLs have an inLrinsic reward
mechanism. Lhe more you creaLe, Lhe more you sense Lhe progression
o your skill.
lL's a loop LhaL keeps all arLisLs going, and when Lhis euphoric
momenL is crushed by accuraLe and much-needed criLicism,
recovering may be diiculL. Keep in mind, Lhough, LhaL your skill and
percepLiveness in Lhis ield will maLure over Lime. l you have Lhe righL
aLLiLude Lo begin wiLh, Lhe proper response will ollow.
5eparate wheat lrom The Chaff
UnorLunaLely, noL all criLicism is consLrucLive. Some people are in a
bad mood, biLLer or jusL plain negaLive and will Lake any chance Lo puL
190
_____________________________________________________________
oLhers down. Some are also inexperienced or unqualiied Lo give you
valuable eedback. While design is subjecLive, being able Lo separaLe
useul eedback rom cheap shoLs and misinormaLion is imporLanL.
However, Lhis is noL an excuse Lo ignore commenLs LhaL you don'L like.
Unless you believe a criLique was given in malice or ignorance, don'L
be quick Lo dismiss iL.
Here are a ew Lips Lo disLinguish beLween Lhe Lwo.
5pecific.
valuable eedback is always speciic. lL is clear, logical and
deined. "1he logo is ugly" or "l don'L like Lhe color choice" are
examples o useless criLicism (i you geL a loL o Lhis, see #7
below).
ActionabIe.
ConsLrucLive criLicism should enable you Lo Lake immediaLe
acLion. ou should come away wiLh a clearer idea o how Lo
improve Lhe concepL and Lhe paLh Lo ollow.
Objective.
Useul eedback is unbiased. lL gives you a unique perspecLive
wiLhouL an ulLerior moLive. ObjecLive criLicism will always be
even-Lempered and appropriaLe.
Learn lrom lt
1his sLep is possibly Lhe hardesL one in Lhis learning experience buL by
ar Lhe mosL imporLanL. For criLicism Lo serve iLs purpose, you need Lo
191
_____________________________________________________________
acL on iL! Don'L jusL go back Lo business as usual, make an eorL Lo
improve. 1he greaL Lhing abouL criLicism is LhaL iL uncovers our blind
spoLs, weaknesses LhaL only oLhers can see. When you're conronLed
by criLicism, don'L leL Lhe opporLuniLy pass. wriLe iL down and do
whaLever iL Lakes Lo change or Lhe beLLer.
l someone criLicizes your copywriLing skills, sLarL wiLh baby sLeps.
Read a relevanL blog once a week. 8uy a book. PracLice wriLing
headlines or 0 minuLes each day. Small vicLories are oLen Lhe
quickesL paLh Lo success. FvenLually you will improve and have your
criLic Lo Lhank.
Look lor A New ldea
l you can'L learn anyLhing new, look or a new idea. A dierenL
perspecLive gives you a chance Lo examine your work rom a
viewpoinL LhaL you would never have considered oLherwise. JusL as
you geL inspiraLion rom a gallery or anoLher LalenLed designer, you
can ind ideas and inspiraLion in consLrucLive criLicism, seeing iL jusL
requires you Lo sLep back. 8e curious, and approach Lhe criLicism
objecLively, iL could be incredibly useul.
CriLicism is someLimes Lhe cold shower you need Lo wake up and hiL
Lhe "ReseL" buLLon on a projecL. Remember, your work is based on
your own preconceived noLions o whaL Lhe clienL wanLs, and you
should always be open Lo Lhe possibiliLy LhaL you have missed Lhe
mark. ln Lhe evenL LhaL you do need Lo sLarL over, discuss Lhe
192
_____________________________________________________________
objecLives and expecLaLions righL away. Clariying Lhis inormaLion in
Lhe irsL place could have prevenLed a re-do alLogeLher.
Dig Deeper when Necessary
AL some poinL, everyone has received vague, unclear or unacLionable
eedback. lL's a parL o lie. UnorLunaLely, unless you Lake Lhe
iniLiaLive, Lhis Lype o eedback is more or less useless Lo everyone
involved. However, i you're willing Lo dig a liLLle deeper, you may
uncover Lhings LhaL no one else was willing Lo Lell you. SLarL by asking
open-ended quesLions LhaL geL Lo Lhe core o Lhe issue, quesLions like,
"l wanL Lo undersLand your poinL o view. Could you please provide
more deLail" or "How can l improve" Ask or speciics and, above all
else, honesLy. 1hese kinds o quesLions will help keep communicaLion
lines open and allow you Lo walk away wiLh pracLical and concreLe
advice.
193
_____________________________________________________________
l you eel uncomorLable asking your criLic or more deLail, or i Lhey
are unwilling Lo provide iL, approach someone you respecL and LrusL
and ask Lhem whaL Lhey Lhink. Do Lhey agree wiLh Lhe criLicism Why
or why noL Assuming Lhis person is honesL and knowledgeable, you
should be able Lo geL Lhe answers LhaL you need Lo move orward.
194
_____________________________________________________________
Thank The Critic
WheLher Lhe criLicism you receive is genuine or downrighL rude, make
a poinL o saying "1hank you." 1hanking even your harshesL criLics can
creaLe a lasLing impression, keep you humble and open Lhe door Lo
addiLional eedback in Lhe uLure. Fxpressing graLiLude will also make
you eel beLLer abouL Lhe experience and help you alleviaLe any innaLe
avoidance o eedback and criLicism you may have. l you have
ollowed Lhe guidelines above and recognize Lhe Lrue value o Lhe
criLicism you have received, saying "1hank you" shouldn'L be Loo
diiculL.
l you respecL Lhe person and Lheir opinion, go one sLep urLher and
develop a long-Lerm menLoring relaLionship wiLh Lhem. Much like in
Lhe old days o craLsman and apprenLice, an individual whose opinion
you value and hold in high esLeem can go a long way in developing
your skills and abiliLies. l noLhing else, a menLor can keep you
accounLable Lo your work and help you conLinually improve.
Do you have a Lechnique Lo share or a real-lie example o criLicism in
acLion LeL us know!
AnJrew lcllett is c smcll-3usiness mcrletin Jirectcr cnJ jcunJer cj
Ccncet leeJbccl, c ccmmunity cj Jesiners cnJ mcrleters JeJiccteJ
tc shcrin iJecs cnJ jeeJbccl cn Jesin rcjects.
195
_____________________________________________________________
web Designer's Guide to ProfessionaI
Networking
3y Steven Snell
Proessional neLworking is a criLical componenL Lo a successul career
as a designer. WheLher iL be or inding new clienLs or idenLiying
opporLuniLies or growLh and improvemenL, a sLrong neLwork o
conLacLs is exLremely valuable. ln Lhis arLicle, we'll Lake a deLailed look
aL Lhe subjecL o neLworking, Lhe beneiLs iL presenLs and Lips LhaL can
be used in your own neLworking eorLs.
NeLworking involves building connecLions and relaLionships wiLh
people rom various backgrounds and proessions, including oLher
designers and developers. 1his arLicle was wriLLen wiLh Web designers
in mind, buL Lhe principles are generally applicable Lo any proession
- alLhough Lhe speciics may vary.
why Network?
l you haven'L been acLively involved in neLworking, you may be
wondering why you should even boLher wiLh iL. 8eore we geL inLo Lhe
Lips and suggesLions or neLworking, leL's Lake a look aL some o Lhe
beneiLs.
196
_____________________________________________________________
ReferraIs
Word-o-mouLh adverLising is a leading source o business or many
designers. Simply puL, i more people know abouL you and your
services, you'll have more opporLuniLies or reerrals. 8y geLLing
connecLed and sLaying in Louch wiLh Lhose in your neLwork you will be
on Lheir mind when someone Lhey know is in need o Lhe services LhaL
you provide. A poLenLial clienL who geLs a personal recommendaLion
rom someone who knows you or has worked wiLh you will be much
more likely Lo become a paying clienL Lhan someone wiLh anoLher
Lype o lead.
Much o Lhe neLworking done by designers is wiLh oLhers who oer
Lhe same or very similar services. ObLaining reerral business Lhrough
a neLwork o designers is more common Lhan you mighL Lhink.
AlLhough your services may have some overlap wiLh anoLher designer
in your neLwork, you're each going Lo have some unique sLrengLhs
and weaknesses, as well as varying levels o experience wiLh dierenL
Lypes o clienLs. AddiLionally, Lhere could be some Lypes o work LhaL
oLhers simply don'L like Lo Lake, or siLuaLions where schedules and
deadlines make iL impossible or a designer Lo work wiLh a parLicular
clienL. ln siLuaLions like Lhese, iL's very common or Lhe designer Lo
recommend a riend or colleague.
CoIIaborations
Fspecially or reelancers and independenL designers, having a sLrong
neLwork opens up counLless possibiliLies or collaboraLing. 1his could
197
_____________________________________________________________
be a one-Lime Lhing LhaL arises rom Lhe needs o a parLicular projecL,
or iL could be an ongoing collaboraLion. ldeally, your neLwork will
include a number o people who have skills LhaL complemenL yours.
1his will allow you Lo work wiLh oLhers and each ocus on whaL you do
besL.
ProbIem-5oIving
l you LrusL and value Lhe people in your neLwork, you will noL hesiLaLe
Lo Lurn Lo Lhem when you need some advice or help wiLh a problem.
Do you know someone who has been Lhrough a similar siLuaLion and
could give you some advice rom Lheir own experience For designers
and developers, Lhis could be a Lechnical issue, such as dealing wiLh a
coding challenge or deLermining Lhe besL soluLion Lo a clienL's needs,
or iL could simply be a need or guidance in some aspecL o running a
reelance business.
SLack Overlow is a collaboraLively ediLed quesLion-and-answer
websiLe where programmers can solve problems and neLwork.
198
_____________________________________________________________
luture Opportunities
A proessional who is well-connecLed will Lypically have more
opporLuniLies Lhan a comparably skilled proessional who is noL well-
connecLed. ou may have no pressing reason Loday or a sLrong
neLwork o conLacLs, buL you could run inLo a siLuaLion in uLure when
having oLhers you can counL on would be invaluable.
For reelance designers, maybe you don'L wanL Lo reelance orever,
and when you're ready Lo sLarL looking or employmenL Lhe process
will be much easier i you already have an esLablished neLwork LhaL
knows you and your qualiLy o work. es, you could waiL Lo do your
neLworking when you've oicially sLopped reelancing, buL you'll be
beLLer o i you have some esLablished relaLionships beore Lhen.
HeIp Others
So ar, everyLhing we've discussed has ocused on whaL your neLwork
can do or you, buL Lrue neLworking is noL one-sided. One o Lhe
beneiLs o being well connecLed is LhaL you will have plenLy o
opporLuniLies Lo help oLhers. Perhaps you won'L be Lhe reelancer who
is looking or employmenL, buL maybe you will be Lhe conLacL who
puLs a reelancing riend in conLacL wiLh someone who's looking Lo
hire a designer.
199
_____________________________________________________________
lriendships
Aside rom all o Lhe proessional beneiLs, neLworking can be a un
way Lo meeL new people and build riendships. 1his can be especially
valuable or reelancers and oLhers who work rom home. NeLworking
may be one o Lhe ew opporLuniLies you have Lo inLeracL wiLh oLher
proessionals in your ield - noL being able Lo go Lo an oice every
day Lo inLeracL wiLh co-workers.
Networking Tips for Designers
Now LhaL we have looked aL some beneiLs o neLworking, here are
some Lips you can puL inLo pracLice.
Be AccessibIe
One o Lhe keys Lo being well connecLed is making iL possible or
oLhers Lo reach you. Sure, neLworking is abouL your eorLs Lo meeL
oLhers, buL iL also involves being accessible when people wanL Lo geL
in Louch wiLh you. 1his could include having a conLacL orm or email
address on your porLolio websiLe, being involved aL social neLworks,
linking Lo your social proiles rom your porLolio and responding Lo
people when Lhey reach ouL Lo you.
5eek MutuaI Benefit
1he mosL successul Lypes o neLworking relaLionships are Lhe "win-
win" ones - in which boLh parLies beneiL in one way or anoLher. l
200
_____________________________________________________________
you wanL neLworking Lo have a major impacL on your business or
career, make Lhe eorL Lo ind opporLuniLies or muLual beneiL. 1hese
siLuaLions will encourage boLh parLies Lo keep Lhe relaLionship sLrong
and improve iL in any way possible, bringing resulLs LhaL could noL be
accomplished individually.
Finding win-win siLuaLions is noL easy, buL Lhey will presenL
Lhemselves when you geL Lo know oLhers very well and you all can see
each oLher's unique sLrengLhs, abiliLies and opporLuniLies. 1hese Lypes
o neLworks will more likely lead Lo sLronger, long-lasLing
relaLionships.
BIog
Many designers mainLain a blog on Lheir porLolio websiLe or oLher
domain. 8logging is noL only eecLive in aLLracLing poLenLial clienLs
buL is also a greaL way Lo geL involved wiLh oLher designers and build
a neLwork. 8logging is personal in naLure and involves Lwo-way
communicaLion, making iL exLremely conducive Lo inLeracLion.
8loggers Lend Lo read oLher blogs as well, and Lhe design blogging
communiLy is very acLive. 8logging is a greaL way Lo geL exposure and
open up opporLuniLies Lo meeL oLher proessionals.
locus on Depth of ReIationships
Like jusL abouL anyLhing else in lie, qualiLy is beLLer Lhan quanLiLy.
While having connecLions wiLh a wide varieLy o people is good, you'll
201
_____________________________________________________________
ind LhaL your mosL signiicanL beneiLs rom neLworking come rom
your closesL relaLionships. As you connecL wiLh people, geL Lo know
Lhem on more Lhan a supericial level. 1he people wiLh whom you
build sLrong relaLionships will likely become parL o Lhe "inner circle"
LhaL you reach ouL Lo on a consisLenL basis.
Be Proactive
Don'L siL back and waiL or oLhers Lo approach you. CeL involved in
social neLworks, go Lo local neLworking evenLs, aLLend seminars and
approach people who you'd like Lo geL Lo know. l you're aL an evenL
or using an online social neLwork, Lhe oLher people are Lhere or Lhe
same reasons as you - so don'L be inLimidaLed by Lhe LhoughL o
approaching Lhem.
1his could also include commenLing on design blogs, parLicipaLing in
orums and wriLing guesL arLicles. our neLwork will be a valuable parL
o your career, so be proacLive and work Lo make iL someLhing special.
Know what You're Looking lor
l you're proacLively geLLing Lo know oLher proessionals, iL helps Lo
know whaL you're looking or in poLenLial conLacLs. 1his allows you Lo
idenLiy Lhe righL people Lo approach, making your neLworking eorLs
more eecLive and eicienL. For example, i you're a sLudenL who will
be graduaLing in a year and looking or a job as a designer, iL would
be beneicial Lo connecL wiLh people who run design sLudios or
202
_____________________________________________________________
people who work aL places LhaL may be hiring designers. l you're a
designer who doesn'L do any developmenL work, iL would be
beneicial Lo know some good developers who you could Leam up
wiLh on projecLs.
1hink o your sLrengLhs, weaknesses and siLuaLion. Who or whaL
would help you geL Lo where you wanL Lo be ldenLiy people who are
in Lhese ideal posiLions and geL Lo know Lhem.
Know what You Have to Offer
JusL as imporLanL as knowing whaL you're looking or in oLhers, you
should also be aware o whaL you can oer oLhers and why you would
be a valuable member o Lheir neLwork. 1hink abouL whaL is unique
and special abouL your skills and Lhe opporLuniLies you could presenL
Lo oLhers.
O course, Lhis doesn'L mean you should go around Lelling everyone
exacLly whaL you can oer Lhem and why Lhey need you, buL having a
clear sense o your own worLh helps you idenLiy ideal siLuaLions o
muLual beneiL and how Lo presenL yoursel in ways LhaL make you
sLand ouL.
Network lndirectIy
Some o your besL conLacLs will noL be people who you acLually need
Lo keep in Louch wiLh. RaLher, you may have a conLacL who knows Lhe
203
_____________________________________________________________
Lype o person you're looking or and can acL as a gaLeway or
messenger Lo Lhem. our neLwork becomes exponenLially more
powerul and valuable when you realize LhaL you're connecLed noL
only Lo Lhe people who you know direcLly, buL also Lo all o Lhe people
who Lhey know, Loo.
1he social neLworking websiLe Linkedln is a good way Lo visualize Lhis
concepL. ou may be connecLed Lo 50 people on Linkedln, buL each o
Lhose people will be connecLed Lo oLhers who you don'L know. l each
o your conLacLs is connecLed Lo anoLher 50 people, you're only one
person away rom some poLenLially valuable relaLionships.
PracLically speaking, i you're looking or someone wiLh a parLicular
skill or experience, Lalk Lo oLhers in your neLwork Lo see who Lhey
know who may iL Lhe descripLion. lndirecL neLworking is oLen more
eecLive Lhan direcL, because iL leverages Lhe neLworks o oLhers and
gives you opporLuniLies Lo geL recommendaLions rom people you
LrusL.
Don't wait UntiI You Need 5omething
NeLworking is more eecLive when iL's noL done under Lhe pressure o
needing Lo produce immediaLe resulLs. Reaching ouL Lo your riends
and conLacLs when you need someLhing is naLural, buL having a large
and esLablished neLwork LhaL sLands ready Lo help when Lhe need
arises is more eecLive. NeLworking only when you need someLhing is
unlikely Lo resulL in muLual beneiL and could give oLhers Lhe
204
_____________________________________________________________
impression LhaL you're inLeresLed only in helping yoursel.
HeIp whenever PossibIe
Helping oLhers and making yoursel a valuable conLacL and riend Lo
oLhers is a big parL o neLworking. ou will noL always be in a posiLion
Lo help, buL avoid Lhe LempLaLion o helping oLhers only when Lhere's
someLhing in iL or you. A neLwork o people who are willing and
eager Lo help each oLher will be posiLive or everyone.
Don't Use PeopIe
When looking or Lhe righL people Lo build your neLwork, Lhinking
only o whaL oLher people can do or you is all Loo easy. 8uL LhaL's noL
an eecLive way Lo inLeracL, and Lhey will oLen see Lhrough your
eorLs.
1he besL way Lo avoid using people is by looking or siLuaLions in
which you can help Lhem. 8y emphasizing your value Lo Lhem raLher
Lhan how Lhey can help you, you'll avoid seeing Lhem only or whaL
Lhey have Lo oer. l you ocus on helping oLhers, Lhey will likely wanL
Lo ind ways Lo help you in reLurn.
Don't Let Networking Hurt Your Productivity
AlLhough proessional neLworking should be an inLegral parL o your
work, iL's noL going Lo puL money in your pockeL direcLly. Freelancers
205
_____________________________________________________________
in parLicular need Lo sLay ocused on providing services Lo clienLs in
order Lo generaLe Lhe income LhaL keeps Lhem going. NeLworking is
imporLanL, buL iL should noL inLerere wiLh your core operaLions.
Online neLworks and email especially can be disLracLions. Develop a
sysLem LhaL allows you Lo inLeracL wiLh oLhers in a way LhaL doesn'L
hinder your work. For example, raLher Lhan leaving your email and
1wiLLer accounL open all day, seL speciic Limes Lo check Lhem. Fach
person is dierenL and has a way LhaL works besL or Lhem, so ind
one LhaL allows you Lo neLwork wiLh maximum beneiL and wiLh
minimum disLurbance Lo your producLiviLy.
Don't AIways vaIuate PeopIe
When you're ocused on sLrengLhening your neLwork by making
valuable connecLions, iL's easy Lo sLarL measuring people by whaL Lhey
can bring Lo Lhe Lable. 1his is a dangerous habiL because iL will make
you relucLanL Lo geL Lo know some people because you don'L Lhink
Lhey have much Lo oer.
Don't Try to Be verywhere OnIine
PlenLy o opporLuniLies are available Lo neLwork, parLicularly online.
8uL you can be acLive in only so many places, so don'L spread yoursel
Loo Lhin. lnsLead, choose a ew neLworking websiLes and groups LhaL
show promise, and you'll ind LhaL you have more Lime Lo be acLive.
206
_____________________________________________________________
8eing acLive in a ew circles yields beLLer resulLs Lhan having limiLed
acLiviLy in many circles. 1his goes back Lo Lhe need or qualiLy over
quanLiLy in building relaLionships.
Attend vents
Web designers and oLher online proessionals are orLunaLe Lo have a
number o high-qualiLy conerences and evenLs in Lheir indusLry LhaL
provide opporLuniLies Lo learn and neLwork. l an evenL is Laking place
in your area, check iL ouL. O course, i you're willing Lo Lravel, you
could aLLend evenLs anywhere.
l6. Pay Attention to LocaI Opportunities
One o Lhe Lraps o online neLworking is LhaL iL can cause you Lo miss
opporLuniLies or ace-Lo-ace neLworking in your local area. Many
localiLies have chamber o commerce evenLs, business card
exchanges, seminars and oLher evenLs aL which Lo connecL wiLh local
proessionals. Pay aLLenLion Lo Lhese acLiviLies in your area in case Lhey
oer someLhing LhaL warranLs your involvemenL.
Steven Snell hcs been Jesinin websites jcr severcl yecrs. He cctively
mcintcins c jew blcs cj his cwn, incluJin DesinM.c, which
reulcrly rcviJes crticles cnJ rescurces jcr web Jesiners.
207
_____________________________________________________________
208
_____________________________________________________________
Group lnterview. xpert Advice lor 5tudents
and Young web Designers
3y Steven Snell
Our readers have requesLed LhaL Smashing Magazine conducL an
inLerview wiLh indusLry leaders on issues LhaL are relevanL Lo sLudenLs
and Lhose jusL sLarLing o in Lheir design careers. WiLh Lhe help o our
panel o 6 designers, we'll dispense advice LhaL should help new
designers geL Lheir careers o Lo a promising sLarL. We've asked a ew
dierenL quesLions o each o Lhe designers, you'll see all o Lheir
responses below. FirsL, here is a lisL o Lhe designers who parLicipaLed.
Henry Jones (Web Design Ledger)
Wolgang 8arLelme (8arLelme.aL)
Chris Coyier (CSS-1ricks)
Chris Spooner (SpoonCraphics, Line25)
Soh 1anaka
Jon Philips (Spyre SLudios)
Paul 8oag (8oagworld, Headscape)
David LeggeLL (1uLorial9, UX 8ooLh)
Jacob Cube (Six Revisions)
FllioL Jay SLocks
8rian Ho (1he Design Cubicle)
Darren HoyL
WalLer Apai (Webdesigner DepoL)
209
_____________________________________________________________
Jacob Cass (JusL CreaLive Design)
Zach Dunn (One MighLy Roar and 8uild lnLerneL)
Paul Andrew (Speckyboy Design Magazine)
l. lor students who aspire to work in design, what
wouId you recommend they study?
David Leggett
Finding a good universiLy-level design program LhaL inLeresLs you will
greaLly increase your chance o inding awesome opporLuniLies down
Lhe road, buL iL's very beneicial Lo geL experience beore and ouLside
o your educaLion. Find projecLs Lo help wiLh, sLarL your own, read up
and apply as much as you can while you're learning on Lhe side. 1he
exLra experience never hurLs, and aL Lhe very leasL you'll geL Lo see i
design is someLhing you really enjoy.
JusL Lo clariy, l have never Laken any higher educaLion courses in
design, buL l know LhaL Lhe knowledge you geL in LhaL environmenL is
valuable, as l'm sure oLhers will suggesL.
woIfgang BarteIme
Well, l guess Lhe mosL imporLanL Lhing is "pracLice, pracLice, pracLice."
1o improve Lhe qualiLy o your work, you have Lo keep pushing
yoursel urLher and urLher. 8y Lhe way, many greaL arLisLs are sel-
LaughL. 8uL l'm also convinced LhaL a proound educaLion will sharpen
210
_____________________________________________________________
your skills and help you be able Lo judge why and how cerLain designs
work. Personally, l sLudied "lnormaLion Design" aL Lhe UniversiLy o
Applied Science in Craz, ocusing on all dierenL aspecLs o design.
prinL and adverLising, exhibiLions, Web design, usabiliLy, phoLography
and ilm - which would give sLudenLs a broad knowledge base and
make Lhem more generalisLs Lhan specialisLs.
2. How does a student determine whether design is
for them or they shouId pursue another career?
Jacob Gube
1his is a quesLion you have Lo ask yoursel. 1here aren'L any seL rules
or algoriLhms Lo deLermine wheLher you should be a designer. 1he
imporLanL Lhing is Lo have passion or Lhe work. Fven mediocre
designers will be able Lo susLain Lhemselves, buL Lhey'll have Lo work
exLra hard Lo compeLe wiLh more LalenLed and experienced designers.
So, iL all boils down Lo how much you wanL Lo be a designer and how
much you're willing Lo work aL iL and push orward. l won'L sugar-coaL
Lhe currenL siLuaLion. Lhe LruLh is LhaL Lhe indusLry is saLuraLed, and
Lhere are a loL more designers Lhan jobs, so you have Lo be sure LhaL
Lhis is Lhe proession you wanL Lo invesL your Lime in.
Henry Jones
l Lhink iL's all abouL passion. l you ind yoursel up laLe aL nighL
211
_____________________________________________________________
working on design projecLs jusL or Lhe un o iL, Lhen LhaL's a good
sign LhaL design is righL or you. l Lhink one o Lhe worsL siLuaLions in
lie is haLing whaL you do. Loving whaL you do means you'll probably
be doing iL and Lhinking abouL iL even ouLside o class or when you're
noL being paid Lo do iL. ou'll consLanLly be honing your skills and
sLaying on Lop o Lhe laLesL Lechnologies, which is very imporLanL or
designers.
David Leggett
Fveryone has a unique siLuaLion, and l don'L mean Lo suggesL Lhe
ollowing is always Lrue. i you're already a sLudenL aL a universiLy and
have no ouLside experience, iL may be diiculL Lo really pursue a
career in design. l say Lhis only because personal riends o mine have
sLruggled Lo ind jobs in Lhis currenL economic climaLe. Having
experience and someLhing Lo show or your knowledge goes a long
way.
OLherwise, be sure LhaL you Lruly enjoy whaLever you decide Lo
pursue. Many designers and arLisLs l've meL Lhoroughly enjoy Lheir
liesLyles, even when Lhey're sLruggling Lo ind work. 1his is noL Lo say
LhaL you should undervalue your work, buL i you enjoy your career
when you're noL making money, Lhen iL's probably a good maLch or
you.
212
_____________________________________________________________
woIfgang BarteIme
FirsL and oremosL, designing sLu has Lo be un. you have Lo love
whaL you do. l LhaL's noL Lhe case, look or someLhing else. Secondly,
you should, o course, have a decenL measure o LalenL and
imaginaLion. Fven Lhough you will learn many skills in Lhe course o
your sLudies, wiLhouL LalenL and imaginaLion, your work will be aL besL
mediocre.
Chris 5pooner
As wiLh any career, i you're passionaLe abouL Lhe subjecL, you're seL Lo
succeed. Careers in Lhe design indusLry can seem exciLing, aLer all, all
you do is siL and color Lhings in all day, righL l Lhink Lhis draws in a
loL o people who maybe haven'L been parLicularly creaLive in Lhe pasL
and see Lhe career as easy.
1his Lype o person mighL Lhen ind iL diiculL Lo be moLivaLed Lo
learn Lhe required skills and Lo conLinue developing Lhose skills
LhroughouL Lheir career. 1haL's noL Lo say LhaL i you weren'L a creaLive
child, you can'L pursue a career in design. We all sLumble across
dierenL inLeresLs LhroughouL our lives, so as long as you eel you
have a passion or design, go or iL!
213
_____________________________________________________________
3. How do you baIance education and work?
Zach Dunn
8y my lasL esLimaLe, l spend abouL Lhree Lo our hours on clienL work
or every one hour o academic work. l generally learn specialized
skills more rom clienL work Lhan rom academics. lL's easy Lo geL
caughL up in clienL work and blogging. 1he hard parL is making sure
you don'L lose Louch wiLh Lhe world around you. lnLeracLing wiLh
clienLs and blog communiLy members is cerLainly social, buL you need
Lo Lake a break and inLeracL wiLh "regular college sLudenLs" rom Lime
Lo Lime. l consider iL like menLal deLox.
l'm convinced you musL puL in exLra Lime on personal projecLs Lo Lruly
become compeLenL in Lhe Web design indusLry. Coing Lhrough Lhe
moLions during class and homework hours only leaves you behind.
1he lnLerneL moves asLer Lhan any sLandard academic schedule.
Keeping currenL and pracLiced is up Lo you.
Jacob Cass
Finding Lhe righL balance beLween amily, riends, work and all o lie's
oLher misdemeanors will always be a challenge, no maLLer whaL your
career. ou musL seL prioriLies and goals relaLive Lo whaL you wanL Lo
achieve and geL ouL o lie. AlLhough l have now inished sLudying
(ormally), l could say LhaL my biggesL challenge Lhen was inding
enough Lime Lo give high-qualiLy aLLenLion Lo all projecLs, wheLher
214
_____________________________________________________________
Lhey were educaLional, personal or or paying cusLomers. AL Limes, l
ound Lhis nearly impossible, and Lo be honesL a loL o my universiLy
and personal work suered rom my commiLmenLs Lo paying
cusLomers. ln saying Lhis, l guess a loL o iL comes down Lo having
prioriLies, goals and good Lime managemenL.
4. How did work outside of your studies prepare
you for your career?
Zach Dunn
AlmosL all o our "career" success so ar has been a direcL resulL o
work done ouLside o sLudies. College is a greaL incubaLor or a
number o Lhings oLher Lhan academics. l value school or reasons
LhaL are dierenL Lhan Lhose o Lhe average person. College has
helped me socially. Sam recenLly wroLe an arLicle LhaL does a greaL job
o explaining more abouL our college philosophy in relaLion Lo Web
design, LiLled 1he Role o College or Web Designers.
CerLain careers cannoL sLarL beore graduaLion. Lawyers, or example,
can'L have hobby clienLs while puLLing Lhemselves Lhrough school. iL's
all or noLhing. Web design isn'L limiLed by credenLials or enLry. Web
design is largely porLolio-based. When's Lhe lasL Lime a clienL was
more inLeresLed in your CPA Lhan in your previous clienL work ln Lhis
indusLry, we have Lhe luxury o sLarLing early. l like Lo Lake advanLage
o LhaL.
215
_____________________________________________________________
l don'L know whaL Lhe uLure holds or Sam and me, buL l'm conidenL
LhaL aL leasL some o Lhe projecLs we sLarL Loday will have some role in
iL.
Jacob Cass
1o be honesL, l learned more in six monLhs o blogging and ollowing
oLher people's blogs, Lhan sLudying or Lhree ull years aL universiLy.
Doing exLra work ouLside o Lhe educaLion sysLem is viLal.
5. what shouId students and new designers focus
on outside of their course work to advance in their
careers?
Brian Hoff
SLudenLs should deiniLely consider Laking many business classes,
especially i Lhey wanL Lo go reelance or sLarL Lheir own sLudio one
day. l've always been passionaLe enough abouL design Lo Leach
mysel, buL l wish l Look more business and markeLing classes. Also, l
would recommend collecLing designs. Having resources o inspiraLion
and an idea o good design is essenLial. l Lake phoLos o many Lypes,
colors, designs, eLc. as l pass Lhem by, and l use LiLLleSnapper Lo
organize online media. 8eing a graphic designer is non-sLop learning.
216
_____________________________________________________________
Chris Coyier
No individual program is going Lo cover every single angle o design,
especially Lhe mosL modern Lechnological sLu. 8ecause you are
already reading Smashing Magazine, you probably already have a
good grasp o whaL's going on in modern design. Reading and
ollowing LuLorials and doing your own experimenLal projecLs on Lhe
side will deiniLely help you excel. 1haL being said, your whole lie
doesn'L have Lo revolve around career enhancemenL. A well-rounded
lie will serve you well. Perhaps some o your oLher hobbies could
beneiL rom your design LalenL. l have a riend who used Lo build
coee Lables and decoraLe Lhe suraces wiLh paLLerns o parLially burnL
maLches. l he were looking or a design job, l would absoluLely Lell
him Lo puL LhaL sLu onLo an online porLolio.
IIiot Jay 5tocks
8uild your porLolio. Do ree websiLes or your maLes' bands or your
Mum's riend's wool shop. lL mighL noL be glamorous work, buL doing
as much as you can builds up your porLolio, and you'll learn loads on
every projecL. When l leL universiLy and goL my irsL job, my porLolio
was made up almosL enLirely o sLu l'd done on an exLracurricular
basis, noL really Lhe course work iLsel. 8uL also don'L orgeL LhaL iL's
abouL qualiLy, noL quanLiLy, and a good porLolio sLrikes a balance
beLween varieLy (showing LhaL you're versaLile) and conLinuiLy
(showing LhaL you have your own idenLiLy as a designer).
217
_____________________________________________________________
waIter Apai
lL's imporLanL Lo expand your knowledge Lo any areas LhaL are relaLed
Lo design. MosL design courses concenLraLe on Lhe basics or on how
Lo use Lhe various pieces o soLware LhaL are available. 1hese are jusL
basic Lools or new designers, buL Lhey won'L make you a greaL
designer.
Learn abouL arL, layouL and composiLion, and Lry Lo read aL leasL one
new book on design every monLh, or even one per week. Subscribe Lo
design blogs such as Smashing Magazine and Webdesigner DepoL,
and never sLop learning. Keep updaLing your knowledge whenever
possible by aLLending conerences, reading books and magazines and
becoming involved in Lhe local arLisLic communiLy. 1ry Lo become a
well-rounded designer, noL jusL an operaLor o PhoLoshop or anoLher
design soLware Lool.
Ceorge Lois, Lhe real-lie inspiraLion or Don Draper in Mad Men, said
iL besL.
1he ccmuter hcs lcyeJ c rcle in Jestrcyin
crectivity with Phctcshc. lverybcJy thinls theyre c
Jesiner.
While he may be generalizing a biL, l believe whaL is meanL is LhaL you
can'L be a proper designer wiLhouL undersLanding Lhe undamenLals
o arL and design.
218
_____________________________________________________________
Jacob Gube
When l was a college sLudenL, whaL Lruly helped me in my career was
proacLively aLLempLing Lo geL real-world experience by doing
reelance work, parL Lime. 1he purpose was Lwo-old. Lo see whaL iL
was like Lo work wiLh Lhe kind o people who would become your
employers once you were ouL o school, and Lo apply whaL you
learned in class, which reinorces your educaLion and helps you
undersLand iL hands on. ou mighL even end up wiLh a ew porLolio
pieces Lo show employers once you're on Lhe job hunL - and some
money Lo buy Lhose expensive classroom LexLbooks.
6. what one thing do you wish you knew before
starting your career?
Darren Hoyt
8eing in Louch wiLh my limiLaLions and skills. 1he irsL ew years o
designing or Lhe Web (998 Lo 200), l knew LhaL being cross-Lrained
was imporLanL, so l builL my skills in design and ronL-end code
(H1ML, CSS) equally. 8uL Lhen l made Lhe misLake o Lhinking LhaL, i l
was Lo become a more compleLe designer and developer, l should
learn Perl, Flash and Unix commands, Loo. l sucked aL all o Lhose
Lhings and kepL sucking unLil Lhey asked me Lo sLop.
Deep down, l knew l wasn'L wired or any o LhaL sLu. And more
imporLanLly, l wasn'L acLually inLeresLed in iL, noL compared Lo design
219
_____________________________________________________________
anyway. Fmployers do value someone who is cross-Lrained, buL noL i
Lhe resulLs are mediocre.
David Leggett
Pleasing everyone is nearly impossible. 8e riendly Lo Lhose who enjoy
your work and riendlier Lo Lhose who aLLack iL.
Jacob Gube
l wished l had realized LhaL qualiLy is more imporLanL Lhan quanLiLy.
When l sLarLed ouL, l ocused on low-cosL, high-quanLiLy jobs, which
resulLed in laLe hours, noL enough pay and noLhing really LhaL l could
be proud Lo puL in my porLolio. l wanLed Lo work wiLh as many
people and on as many projecLs as l could Lo jumpsLarL my experience
and resume. 8uL Lhe ProjecL 1riangle principle applies here. l did iL asL
and cheap, and so Lhe ouLcomes weren'L good. l l had slowed down
and ocused on geLLing gigs LhaL were inLeresLing and beLLer qualiLy, l
would have progressed more ruiLully.
PauI Boag
1haL consLrainLs are good. As a Web design sLudenL, l was given
endless reedom Lo design how l wanLed and whaL l wanLed. However,
Lhe real world is noL like LhaL. When l joined l8M ouL o universiLy, my
irsL job was Lo design 8-biL icons. very resLricLive indeed. When l
sLarLed on Lhe Web, iL allowed only gray backgrounds and LexL LhaL
220
_____________________________________________________________
was jusLiied leL, righL or cenLered. 1he irsL Lime l worked on a
mulLimedia CD, iL was capable o running video aL only 60 x 20
pixels.
AL Lhe Lime, Lhis rusLraLed me massively. However, in hindsighL iL was
enormously beneicial. lL pushed me creaLively, and iL has also given
me a loL more paLience wiLh Lhe peculiariLies o browsers such as lF6.
7. what job search advice do you have for recent
graduates?
5oh Tanaka
FirsL and oremosL, geL your porLolio up, and make sure iL represenLs
your besL work. l you lack work samples, sLarL creaLing projecLs or
yoursel (websiLes or your hobbies, your amily or or riends). As a
new grad, you need Lo prove LhaL you are serious and willing, Lhe besL
way Lo geL LhaL message across is Lhrough a robusL porLolio.
Secondly, hiL Lhe job boards, and send your resumes and cover leLLers
Lo companies you would like Lo work or. Doing research and Lailoring
each cover leLLer and resume Lo Lhe company is imporLanL. SLick Lo
Lhe job requiremenLs, and ollow direcLions careully. 1hese employers
receive many applicaLions daily, and noLhing is worse Lhan seeing a
bland and generic inLroducLion Lo who you are and whaL you oer.
SLand ouL rom Lhe resL.
221
_____________________________________________________________
1hirdly, keep your neLworks open, and make yoursel known!
NeLworking is key.
Darren Hoyt
Obviously, scour Lhe online job boards, buL also ollow Lhe blogs and
1wiLLer eeds o Web designers whom you respecL. SLudying Lheir
meLhods will give you a clearer picLure o Lhe sorL o designer you
wanL Lo be. l you need advice, Lrying dropping Lhem an email. 8uL
remember LhaL noL everyone has Lhe Lime Lo answer.
1ruLhully, mosL designers l know didn'L geL Lheir job by applying cold
Lo an agency Lhey knew noLhing abouL. lnsLead, Lhey slowly made
relaLionships wiLh like-minded people unLil Lhey began Lo see
opporLuniLies and geL oers.
8uL l would sLress, don'L "neLwork" compulsively. lL can look obvious
and obnoxious and make you look needy. lnsLead, make connecLions
wiLh people you Lhink you acLually share inLeresLs wiLh, people you
can picLure as colleagues and riends raLher Lhan business conLacLs.
1he rewards are much greaLer.
Chris Coyier
Nobody will hire you because you say you have skills. ou'll have Lo
demonsLraLe your skills, so eiLher work on your currenL personal
websiLe or sLarL building one. Use Lhe websiLe as a porLolio and
222
_____________________________________________________________
resume Lo send Lo companies. Send iL boLh Lo companies LhaL say
Lhey are hiring and Lo ones LhaL don'L. JusL because a Web company
doesn'L hang a "Now hiring" sign on iLs door doesn'L mean iL couldn'L
use someone. PiLch Lhem. A liLLle advice or LhaL porLolio. Lhree
awesome designs are beLLer Lhan Lhree awesome and six mediocre
designs packed in Lhe same space. Showcase only your inesL work,
whaL you're capable o. QualiLy over quanLiLy.
8. what shouId new designers consider when
deciding between working for an agency and
freeIancing?
IIiot Jay 5tocks
Jumping sLraighL inLo reelancing once you've compleLed your
educaLion is really LempLing. l very nearly did LhaL mysel. 8uL l'm glad
l didn'L. ou learn valuable lessons working or someone else irsL, and
iL's acLually much easier because you don'L have Lo worry abouL
geLLing clienLs or yoursel. So, l would recommend working or
someone else beore going iL alone. lL's a greaL opporLuniLy Lo build
your porLolio wiLhouL dealing wiLh any o Lhe boring sLu LhaL goes
wiLh reelancing or running your own business.
5oh Tanaka
As a new designer, being aL an agency or on a Leam is greaL or
223
_____________________________________________________________
learning and eeling ouL Lhe indusLry. 1hough you may noL be able Lo
seL your own hours or work rom home, a sLeady pay check and
healLh insurance are boLh welcome during a Lough economy.
When choosing Lhe reelance rouLe, have some experience under your
belL, and be ready Lo be on your own. 1he key acLor is knowing whaL
your skills are and having discipline. Freelancing has iLs ups and
downs, and you musL be sel-moLivaLed and deLermined Lo overcome
Lhe challenges. Working rom home and seLLing your own hours is
ideal or mosL, buL young designers should consider Lhe requiremenLs
and realiLy beore diving in head irsL. lL may be wise Lo reelance parL
Lime unLil you build enough conidence and experience and know
enough abouL your sLrengLhs and weaknesses Lo be able Lo make Lhe
righL decisions when you sLrike ouL on your own.
Chris 5pooner
lL's always worLh learning Lhe pros and cons o working or an agency
and reelancing, because each has iLs perks! Here are a ew LhaL spring
Lo mind.
Agency pros.
Working or an agency aLer your sLudies can be greaL or
gaining experience in how Lhe indusLry works and how
projecLs are managed rom sLarL Lo inish.
AL an agency, you work wiLh like-minded colleagues, who you
224
_____________________________________________________________
can learn rom and develop wiLh.
Large agencies oLen aLLracL big corporaLions and esLablished
brands.
A ull-Lime job guaranLees you a monLhly wage and seL
working hours.
Agency cons.
ou mighL geL sLuck working on projecLs LhaL you don'L ind
inLeresLing or mighL have Lo work on someLhing you don'L
agree wiLh.
Agencies someLimes have sLricL policies, rules and guidelines.
For insLance, browsing Lhe Web, checking Facebook or
LweeLing mighL geL you a slap on Lhe wrisL.
Agencies work during Lhe usual 9.00 Lo 5.00 business hours, so
you will have Lo as well.
lreeIance pros.
As a reelancer, you have compleLe conLrol o Lhe projecLs you
Lake on and Lhe Lype o work you do.
ou're noL Lied Lo any parLicular working hours, so Laking a day
o is no problem.
l you can generaLe a consisLenL low o projecLs, earning a
225
_____________________________________________________________
decenL wage can be much easier Lhan iL would be working aL
an agency.
ou can work in your pajamas!
lreeIance cons.
ou are personally responsible or your own income, a
circumsLance LhaL can puL you aL risk.
Freelancers need Lo be able Lo manage Lheir Lime in order Lo
avoid disLracLions.
l would recommend LhaL new designers irsL seek ouL employmenL,
which will give Lhem proessional experience wiLh and knowledge o
design. 1hen Lhey'll be able Lo decide wheLher Lhey iL beLLer aL an
agency or working or Lhemselves.
One o Lhe main Lhings Lo consider beore sLarLing ouL as a reelancer
is wheLher you've generaLed enough indusLry experience Lo be able
noL only Lo creaLe designs buL Lo source work, manage mulLiple
projecLs and communicaLe wiLh clienLs. 1hese oLher acLors deiniLely
come inLo play when reelancing, so having aL leasL some knowledge
o Lhese processes beore diving in is imporLanL.
226
_____________________________________________________________
9. How can students and young designers make
themseIves more vaIuabIe to potentiaI empIoyers?
Darren Hoyt
SLarL building a Web presence as early as possible, even beore
seeking a junior posiLion. 8uy a personal domain and seL up a simple
porLolio, wiLh an "AbouL" page LhaL gives a snapshoL o your
personaliLy and LalenLs. l you haven'L done clienL work, do pro bono
projecLs or riends unLil you have work samples Lo show. Displaying
Lhem publicly shows LhaL you have pride in your work.
Be concise. Fmployers and human resource people are like anyone
else. Lhey are busy and have shorL aLLenLion spans. Don'L make Lhem
dig Lo ind ouL who you are. Cive your porLolio websiLe jusL enough
LexL, images and examples Lo painL an accuraLe picLure. l you can'L
give your own conLenL a crisp and concise design, why should
employers LrusL you Lo do iL or clienLs
Also, don'L exaggeraLe Lhe acLs when presenLing yoursel. Our lives
are way Loo public Lhese days Lo boLher. More imporLanL Lhan
bragging or dazzling anyone wiLh hal-LruLhs is inding a Leam whose
needs and inLeresLs align wiLh your own. l you geL hired under alse
preLenses, you will have wasLed everyone's Lime. Fven experienced
designers wiLh greaL porLolios aren'L Lhe righL iL, disposiLion-wise, or
every agency Lhey apply Lo.
227
_____________________________________________________________
woIfgang BarteIme
As l menLioned beore, l'm a huge an o Lhe inLerdisciplinary
approach. AL mosL companies, you are unlikely Lo work exclusively in a
single ield. ln acL, when you do Web design, being able Lo do some
decenL-looking icons or cuL a simple screencasL or promo video is
good. 1his becomes even more imporLanL when you are sel-
employed. Moreover, Lhis varieLy makes and keeps work inLeresLing.
aL leasL LhaL's Lhe case or me.
Chris Coyier
JusL being a nice person and easy Lo work wiLh is preLLy huge. l Lhink
employers look or LhaL during Lhe inLerview process, aL leasL as besL
Lhey can in LhaL shorL Lime. Someone incredibly sLi or sLand-oish is
unlikely Lo win Lhe job over someone who is happy and casual. Design
sLudios, in my experience, are preLLy riendly and casual. OLher
random advice. become really good aL one Lhing. ou'll be a loL more
valuable as Lhe guy or girl who knows LhaL one Lhing really well Lhan
as a jack o all Lrades. 8eing well-rounded is awesome, buL having a
spike o LalenL in one parLicular area will serve you well.
waIter Apai
Social skills are necessary when dealing wiLh poLenLial clienLs.
Designers should know whaL Lheir clienLs do and provide Lhem wiLh
Lhe besL possible service.
228
_____________________________________________________________
l'd encourage all designers Lo make Lhemselves a one-sLop shop or
all o Lheir clienLs' design needs. 1haL would include Web design,
copywriLing, prinLing, eLc. l you're noL an experL in Lhese ields, Leam
up wiLh a ew peers so LhaL you can help each oLher as needed.
Designers should ocus on making Lhe enLire process easy or clienLs,
buL involve clienLs in some design decisions as well, so LhaL Lhey eel
LhaL Lhey are parL o Lhe projecL.
l suggesL asking clienLs a loL o quesLions and aiming Lo Lruly geL Lo
Lhe core o Lheir business and whaL would work or Lhem. 1he more
we undersLand our clienLs and Lheir projecLs, Lhe more successul Lhe
projecLs will be and Lhe beLLer our chances o geLLing Lhem as repeaL
clienLs.
A designer is a human being, Loo. 8ecome a well-versed designer,
undersLand your medium, geL educaLed and become a well-rounded
person who always aims high.
SeL high sLandards or yoursel and your work. 1he righL clienLs will
graviLaLe Lo someone who holds Lhemselves Lo high sLandards.
229
_____________________________________________________________
l0. what shouId new freeIancers do during the first
few months of their business to succeed?
PauI Andrew
ou have Lo have a personal business plan. l really wish l had a plan
when l sLarLed ouL, l really do. l jumped righL in eeL irsL and landed
on my head! And iL hurL. ParLly, l Lhink iL was Lhose irsL ew monLhs o
hardship LhaL even now propel me orward. 1haL period noL only
aecLed my inances and conidence, iL damaged my repuLaLion. 1haL
is very hard Lo regain. l Lhink over Lhe years l have regained iL, buL iL
was hard work, and iL all could have been avoided wiLh a biL more
planning and simply by wriLing a personal business sLraLegy.
lL's noL enough Lo have a sLraLegy planned ouL in your head, iL has Lo
be on paper. ou need Lo be able Lo read iL and see iL Lo live by iL.
Fvery so oLen you should read iL again, jusL Lo realign yoursel. And
Lhen read iL again, and only Lweak iL i you really have Lo.
our personal business plan could do Lhe ollowing.
Describe your business objecLives, business direcLion and
where you hope Lo be in x number o monLhs.
LisL all poLenLial piLalls and how Lo avoid Lhem.
SeL honesL and realisLic LargeLs, and allow or a liLLle lexibiliLy.
230
_____________________________________________________________
As your business grows, Lrack iLs achievemenLs and compare
Lhem Lo your business objecLives.
SeL up a inancial ramework Lo measure how much your
business is making (or noL making).
Describe how you will aLLracL new business Lo meeL your
inancial LargeLs.
Fveryone and every business is dierenL. WriLe down whaL is correcL
and achievable or you, and be very honesL. iL is your business aLer
all. SLick Lo Lhe plan!
Brian Hoff
Personally, l worked or nearly Lhree years while preparing Lo go
reelance. l would work my 9.00 Lo 5.00 job, come home, eaL dinner
and Lhen markeL mysel (blog), search or new business, adverLise and
work rom around 7.00 pm unLil 2.00 am. Having a good eel or
running your own business is imporLanL beore you go in head irsL.
Saving money is also imporLanL. Fvery business, no maLLer whaL iL is,
goes Lhrough periods o droughL. Having money Lo back you up or a
liLLle while is a musL. Freelancing is noL or everyone. ParL-Lime
reelancing while mainLaining a sLeady-paying job will help you geL a
eel or Lhings.
231
_____________________________________________________________
Chris 5pooner
l Lhink Lhe mosL imporLanL Lime in reelancing isn'L parLicularly Lhe
irsL ew monLhs, buL more so Lhe Lime leading up Lo going reelance.
As a reelancer, you'll need a good low o clienLs Lo generaLe income,
you'll have Lo geL busy promoLing and building a name or yoursel,
so LhaL when you're ready Lo leave your job, you'll be all seL Lo simply
lick Lhe swiLch rom employmenL Lo sel-employmenL.
During Lhis build-up Lime, you'll wanL Lo design all o your personal
branding, especially your websiLe, Lo showcase whaL you can do.
8ecome an acLive member o Lhe design communiLy by blogging,
guesL wriLing and neLworking via 1wiLLer (or you mighL wanL Lo
neLwork oline or locally), and begin Laking on projecLs LhaL you can
work on during Lhe nighLs. lL can be hard work managing boLh your
ull-Lime job and one or Lwo reelance projecLs simulLaneously, buL
when Lhe number o inquiries reaches an opLimal level, you can
quickly swiLch rom your job Lo Laking on more reelance work -
raLher Lhan making Lhe decision one day, alling laL on your ace and
Lhen having Lo eaL beans on LoasL unLil you've builL a proile.
Jon PhiIIips
l believe Lhe irsL ew monLhs are crucial, especially because iL usually
means quiLLing Lhe day job and Laking Lhe plunge inLo Lhe reelancing
world. lL can be scary aL irsL. Many Lhings need Lo be done in Lhe irsL
ew monLhs, buL o course noLhing is irreparable. Should you make a
bad decision, you can always ix Lhings as you go along. l highly
232
_____________________________________________________________
recommend geLLing a porLolio websiLe up, even i you don'L have a
loL Lo show, you need a place Lo showcase whaL you have. 1hen geL a
good invoicing sysLem such as Freshbooks or 8illings, neLwork wiLh
oLher reelancers as much as possible via 1wiLLer, Facebook, design
orums and blogs, and maybe sLarL a blog o your own.
IIiot Jay 5tocks
Work or someone else! For Lhe irsL ew monLhs Lo be a success, you
need Lo have work lined up, so having LhaL in place beore you make
Lhe jump is imporLanL. l'd also recommend geLLing a good accounLanL
as soon as you can and some sorL o sysLem or keeping Lrack o your
money, such as Xero. Also, make sure you have a websiLe seL up long
beore you decide Lo go solo.
ll. Aside from design and technicaI skiIIs, what
aspects of running a business shouId new
freeIancers focus on?
PauI Andrew
1he advice l have been given over Lhe years abouL reelancing as a
business has varied. Some have Lold me LhaL puLLing business ahead
o design guaranLees proiL and keeps your head above waLer. On Lhe
oLher hand, l have also been Lold noL Lo LreaL design as a business, Lo
work on whaL your passion is, Lhe business side will Lake care o iLsel.
233
_____________________________________________________________
1hese are boLh greaL philosophies, buL Lhey don'L really work in Lhe
real world. 1he answer is Lo have a healLhy balance beLween Lhe Lwo.
8oLh need Lo be kepL separaLe while aL Lhe same Lime working o
each oLher. 1hink o iL as Lhe posiLive and negaLive charge o a baLLery.
1he baLLery only works when boLh charges are connecLed. (ou can
decide which is Lhe posiLive and negaLive side in relaLion Lo business
and design).
When meeLing poLenLial clienLs, irsL impressions really do counL, and
you really need Lo presenL yoursel wiLh proessionalism. lL does noL
maLLer how sLrong your porLolio is or who you are - iL is abouL how
proessional and business-like you appear Lo Lhem. ou are
negoLiaLing a business LransacLion aLer all.
es, Lhis means breaking away rom Lhe designer sLereoLype o
wearing L-shirLs and jeans and insLead being clean-shaven, puLLing on
a business suiL and remembering Lhe manners your moLher LaughL
you. Carry business cards wiLh you, maybe even a briecase, do whaL
you have Lo do Lo convince Lhe clienL you mean business.
Some monkeys you should noL carry on your back by yoursel, and
Lhey are Lhe inance side o your business. LeL's be honesL. who
undersLands Lax and moneLary law. l cerLainly don'L and don'L care Lo
eiLher. Find yoursel an accounLanL. 1hey don'L cosL LhaL much -
maybe a week's wage ouL o Lhe year, and when you weigh Lhe cosL o
doing your Laxes incorrecLly and Lhe penalLies LhaL mighL ollow, an
accounLanL is a worLhwhile invesLmenL.
234
_____________________________________________________________
lL would be nice i everyone you worked wiLh was honesL. ProLecLing
Lhe inLegriLy o your work, yoursel and your business should be nexL
on your Lo-do lisL. 1he realiLy is LhaL aL some poinL, someone will Lry
Lo shorLchange you or, worse, wiggle ouL o a paymenL. 1haL is why
you need a waLerLighL conLracL. Fvery counLry has iLs own laws
regarding design, make sure you know and undersLand yours.
Hiring a lawyer Lo wriLe a sLandard conLracL or your small business
would be expensive. A way around Lhis would be Lo wriLe your own, as
l did. l asked a ew designers or advice and researched Lhe law online
and came up wiLh an ouLline or my own. l Lhen Look iL Lo a lawyer
and asked Lhem Lo saniLy-check iL. NoL as expensive as asking Lhem Lo
wriLe iL - sLill, iL wasn'L cheap, buL iL was worLh iL.
So, Lo sum up, i you're dressed smarL, your business inances are in
sae hands and you are legally proLecLed, Lhen you are ree Lo do whaL
you were Lrained Lo do and give your creaLiviLy ree reign, leLLing your
passion uel your design. lL is a long road Lo Lake, buL iL is necessary.
Brian Hoff
MarkeLing wiLhouL a doubL. l receive many emails asking how l geL so
much reelance business or how l ind clienLs. My response. you have
Lo work hard or iL. ClienLs won'L come Lo you. 1ell everyone whaL you
do, sLarL a blog, aLLend neLworking evenLs and conerences, conLacL
clienLs direcLly. Running your own business is hard work. 1here is no
such Lhing as a 40-hour work week when you run your own business. l
235
_____________________________________________________________
work seven days a week. l've even gone so ar as Lo sLrike up new
work by chaLLing wiLh someone aL Lhe bar (noL recommended). ou
have Lo have personaliLy and drive Lo reelance successully.
Jon PhiIIips
8eing a reelancer means having Lo wear many dierenL haLs (a Lon o
dierenL haLs!). Spending some Lime on governmenL websiLes and
meeLing wiLh an accounLanL Lo learn more abouL Lax laws goes a very
long way. O course, many designers, being creaLive Lypes, Lend Lo
orgeL LhaL iL's a business (l oLen orgeL). ou need Lo spend Lime on
accounLing buL also on neLworking and markeLing your business. ln
Lhe irsL ew monLhs resulLs will be small, buL your eorLs will pay o
in Lhe long run. ou need Lo be as good wiLh numbers as you are wiLh
PhoLoshop.
l2. what are some of the best ways for new
designers to find cIients?
Henry Jones
l can only speak rom experience here. ShorLly beore l wenL ull-Lime
reelancing, my porLolio was lisLed on several popular CSS galleries.
From LhaL poinL on, clienLs ound me. l was very surprised Lo see how
many people used Lhe galleries Lo ind designers. Once l had a ew
clienLs and projecLs under my belL, l sLarLed Lo geL a loL o reerrals.
236
_____________________________________________________________
So, work hard on creaLing a greaL porLolio, and use Lhe design
galleries. 1his is probably Lhe besL and easiesL way Lo geL Lhe mosL
exposure. PlenLy o design-speciic job boards are available where you
can search or projecLs LhaL are a good iL or you.
Jon PhiIIips
l Lhink websiLes such as 1wiLLer are a greaL place Lo geL sLarLed! ln acL,
l ound a loL o my own clienLs via 1wiLLer. Design orums are also a
greaL place Lo neLwork, make riends and ind work. New reelancers
may also be LempLed Lo Lry design conLesLs and crowd-sourcing, buL l
personally Lhink Lhey devalue Lhe indusLry, so l wouldn'L advise doing
LhaL. Fven i you don'L have much Lo show in your porLolio, Lhere are
oLhers ways Lo geL gigs. 1here are always job boards, such as Lhe one
on Smashing Magazine and Lhe one on FreelanceSwiLch, which are
greaL or inding clienLs. ou mighL even consider buying banner ads
on design-relaLed websiLes. 8uL your markeLing budgeL may noL allow
Lhis aL irsL, so neLworking websiLes, job boards and orums would be
Lhe places Lo hang ouL.
Jacob Cass
CeL your name ouL Lhere. SLarL blogging. Showcase your work. Look
on job boards. Ask riends, amily, local chariLies. Read books and blog
posLs. 1he inormaLion is ouL Lhere. our job is Lo ind iL!
237
_____________________________________________________________
waIter Apai
NeLworking is one o Lhe besL ways buL oLen one o Lhe mosL
overlooked. l suggesL LhaL new designers speak Lo everyone Lhey
know and use every chance Lhey have Lo Lalk abouL Lheir work and
whaL Lhey do or a living.
l ound mysel jusL menLioning Web design Lo someone Lhe oLher day
(noL even looking or more work), and immediaLely Lhey LhoughL o
someone Lhey knew who was looking or a websiLe redesign.
OpporLuniLies are everywhere, jusL seize Lhem.
l should also menLion LhaL one should noL rely on neLworking alone
or any oLher single "sysLem." l'd encourage new designers Lo Lake a
mulLi-aceLed approach Lo Lheir new career.
1here are unlimiLed ways Lo geL new clienLs. PosLing on bulleLin
boards, boLh online and oline, and placing small ads in Lhe
newspaper or local magazines are jusL a ew o Lhe media you can
use. l also Lhink LhaL sLarLing local is besL, and geLLing experience
working on projecLs wiLh people who you can meeL in person in your
own ciLy. 1his is a good sLarLing poinL Lo gain more "ield" experience.
PauI Boag
lL has Lo sLarL wiLh riends and amily. 1his will help build your iniLial
porLolio. From Lhere, consider doing some discounLed work or a
local chariLy Lo gain experience in working or real clienLs. ALer LhaL,
238
_____________________________________________________________
Lhe conLacLs you have made Lhrough neLworking will sLarL Lo pay o,
and hopeully you will geL some work Lhrough Lhem. Finally and mosL
imporLanLly, make iL known LhaL you wanL work. lL is surprising how
many reelance websiLes l visiL LhaL don'L sLaLe wheLher Lhey currenLly
accepL work or noL.
1haL said, l would suggesL LhaL i you are sLraighL ouL o universiLy,
you should probably work or a small agency beore jumping inLo Lhe
reelance world. 8eing a reelancer requires a loL o business skills LhaL
Lhey don'L Leach you in universiLy.
l3. what networking tips do you have for young
designers?
Henry Jones
One opLion is Lo aLLend design conerences, buL or young designers
Lhis can be expensive. So, l would recommend geLLing involved in Lhe
design communiLy. SLarL reading and leaving commenLs on popular
design blogs. CreaLe a 1wiLLer accounL, and posL useul sLu.
Depending on how much Lime you have, you could even sLarL your
own design-relaLed blog. 8logging has been huge or me, and l
believe iL's Lhe besL way Lo geL your name ouL Lhere and meeL oLher
designers. No maLLer whaL rouLe you Lake, jusL remember Lo be
helpul and genuine, and you will build lasLing relaLionships.
239
_____________________________________________________________
PauI Andrew
ou are young - you cannoL change LhaL acL - and you wanL Lo be
successul. ln any business, especially ours, you need riends, you
need conLacLs and mosL imporLanLly you need Lo build proessional
relaLionships. 8ear in mind, Lhough, LhaL neLworking is noL someLhing
you can rush, iL Lakes Lime and paLience.
1he besL Lime Lo sLarL neLworking is righL now. Fven i you are sLill in
high school or haven'L yeL graduaLed college, reach ouL now. lL is
never Loo early Lo geL your name ouL Lhere. our name is your mosL
powerul and memorable asseL. Work will ollow, l promise.
1he mosL imporLanL relaLionships or any designer are Lhe ones Lhey
have builL wiLh ellow sLudenLs. No maLLer whaL happens, Lhey are
your primary neLwork. ou can help each oLher by sharing knowledge
and design conLacLs and by learning rom each oLher.
1he besL way Lo neLwork beyond your inner circle is Lo geL in Louch
wiLh seasoned designers. For Lhe mosL parL, designers are preLLy
selless and love Lo share and help when Lhey can. WiLh LhaL in mind,
puL LogeLher a lisL o designers on whom you wanL Lo model yoursel
and someone wiLh a sLrong body o work. Send Lhem emails,
accompanied by your porLolio, sLaLing LhaL you are a young designer
sLarLing ouL and seeking a liLLle advice. Ask Lhem how Lhey goL
sLarLed, and ask or any Lips Lhey mighL be willing Lo share Seasoned
designers need Lo build Lheir neLworks, Loo, and will welcome your
inLroducLion and quesLions.
240
_____________________________________________________________
When l sLarLed ouL as a designer, l senL a leLLer (wiLh my porLolio and
business card) Lo a local design agency - cerLainly noL Lhe biggesL
one or Lhe mosL presLigious - and inLroduced mysel as a young
designer who was eager Lo learn. l asked i l could come in or a day
or Lwo Lo learn a biL abouL Lhe design business and gain some work
experience. 1hankully, Lhey consenLed, and l spenL Lhree days asking
quesLions, picking up business cards and meeLing clienLs. 1haL was
over Len years ago, and l sLill rely on Lhose conLacLs now. And Lo Lhis
day, LhaL has been my mosL producLive and successul period o
neLworking.
NoL every design agency will be as open as LhaL one was, buL l would
Lry. 1here is no harm in asking.
One Lhing Lo remember abouL neLworking is LhaL success is
deLermined noL by your number o conLacLs buL by Lhe qualiLy o
Lhose conLacLs. Fven i Lhe besL designer in Lhe world senL you a
courLesy email reply, iL does noL mean LhaL you are in Lheir neLwork or
LhaL Lhey are in yours. A qualiLy neLwork conLacL is someone who
gives you a personal reply and genuinely Lries Lo help you. 1hese are
Lhe conLacLs you musL mainLain. 1his is your neLwork.
Finally, please don'L Lhink o youLh as an impedimenL. 1hink o iL as a
license Lo ask quesLions, Lo learn and expand your personal neLwork.
241
_____________________________________________________________
PauI Boag
SLep away rom Lhe compuLer. MeeLing people online is greaL, buL
noLhing beaLs meeLing Lhem ace Lo ace. ALLend conerences and
meeL-ups and geL Lo know people. 1hen ollow up on Lhose
relaLionships via 1wiLLer and Facebook.
Also, don'L have an agenda. Or, i you have one, be honesL and open
abouL iL. 1oo many people neLwork solely Lo win work or become a
"Web celebriLy." lnsLead, neLwork because you wanL Lo meeL like-
minded people who will inspire and exciLe you abouL your work.
5oh Tanaka
ALLend indusLry evenLs, seminars and any kind o social gaLherings.
Don'L be shy, geL Lo know Lhe people around you. 8e inLeresLed and
willing Lo learn rom Lhem, and aL Lhe righL Lime leL Lhem know who
you are and whaL you do. Carry business cards wiLh you aL all Limes,
and have your elevaLor speech ready. ou never know when you will
run inLo a poLenLial clienL or employer. NeLworking is all abouL
expanding your opporLuniLies, and as a designer Lhis skill is criLical.
Steven Snell hcs been Jesinin websites jcr severcl yecrs. He cctively
mcintcins c jew blcs cj his cwn, incluJin DesinM.c, which
reulcrly rcviJes crticles cnJ rescurces jcr web Jesiners.
242

Smashing Ebook Professional Web Design 1

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Smashing Ebook Professional Web Design 1

Cargado por

Copyright:

Formatos disponibles

Smashing e8ook Series.

# Proessional Web Design

Smashing e8ook Series. # Proessional Web Design

También podría gustarte