P. 1
Smashing eBook 1 Sample

Smashing eBook 1 Sample

|Views: 28|Likes:
Published by Radek Holický

More info:

Published by: Radek Holický on Aug 05, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

02/17/2012

pdf

text

original

Smashing eBook Series: #1 Professional Web Design

_____________________________________________________________
1
Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________
Preface
This e-book contains a selection of the best articles about
professional Web design that have been published on Smashing
aga!ine in "##$ and "#1#% The articles have been carefull& edited
and prepared for this PD' version( some screenshots and links )ere
removed to make the book easier to read and print out%
This book presents guidelines for professional Web development*
including communicating )ith clients* creating a road map to a
successful portfolio* rules for professional net)orking and tips on
designing user interfaces for business Web applications% The book
shares e+pert advice for students and &oung Web designers* and it
also helps &ou learn ho) to respond effectivel& to design criticism*
use stor&telling for a better user e+perience and appl& color theor& to
&our professional designs.
This book is not protected b& D,% - cop& costs onl& .$%$# and is
available e+clusivel& at http://shop.smashingmagazine.com% Please
respect our )ork and the hard efforts of our )riters% /f &ou received
this book from a source other than the Smashing Shop* please
support us b& purchasing &our cop& in our online store% Thank &ou%
Published in March 2010 by Smashing Media GmbH - Werthmannstr.
15 - 7909 !reiburg " Germany - Gesch#$ts$%hrer& S'en (ennart)*
+italy !riedman - ,mtsgericht !reiburg& H-. 70/01.
2
Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________
Table of Contents
Preface%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%"
Harsh Truths About Corporate Websites%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%$
0ou 1eed - Separate Web Division%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%$
anaging 0our Website /s - 'ull-Time 2ob%%%%%%%%%%%%%%%%%%%%%%%%%%%%%11
Periodic ,edesign /s 1ot 3nough%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1"
0our Website 4annot -ppeal To 3ver&one%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%15
0ou -re Wasting one& 6n Social 1et)orking%%%%%%%%%%%%%%%%%%%%15
0our Website /s 1ot -ll -bout 0ou%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%17
0ou8re 1ot 9etting :alue 'rom 0our Web Team%%%%%%%%%%%%%%%%%%%%17
Design B& 4ommittee Brings Death%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1;
- 4S /s 1ot - Silver Bullet%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1$
0ou <ave Too uch 4ontent%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%"#
4onclusions%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%"1
Portfolio Design Stud: Design Patterns%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%"=
>ight vs% Dark Design%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%"7
<o) an& 4olumns?%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%"@
/ntroductor& Block 6n Top?%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%"A
>a&out -lignment%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%"$
1avigation -lignment%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%51
Search Bo+ Design%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%5"
'lash 3lements%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%5"
Where To Put 4ontact /nformation?%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%55
B-bout CsD Page%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%5@
4lient Page%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%5@
3
Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________
Services Page%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%5;
Portfolio Page%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%5A
Workflo) Page%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%5$
4ontact Page%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%=#
Specials -nd 3+tras%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%=1
6ther 'indings%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%=1
Summar&%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%="
Creating A Successful !nline Portfolio%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%==
Pitfall #1: 6bfuscating%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%==
Pitfall #": 4ramming /nformation%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%=7
Pitfall #5: 6verdoing /t%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%=@
Pitfall #=: Cnusual 1avigation%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%=@
Pitfall #7: :isual 4lutter%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%=;
Principles of 3ffective Portfolio Design%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%=A
Define &our 4riteria and Strategies for Success%%%%%%%%%%%%%%%%%%%%%=A
4onsider ultiple Portfolios%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%=$
Target 0our arket%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%71
Prioriti!e Csabilit&%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%7=
Cse the ,ight Technolog&%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%7=
Plan The ProEect%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%7@
>imit The Scope -nd T&pe of Work 0ou Promote%%%%%%%%%%%%%%%%%7@
Provide -deFuate 4ontact /nformation* Documentation
-nd 3+planations%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%7A
Present 0our Work /n The 4onte+t of 0our 9oals%%%%%%%%%%%%%%%%%%7$
/nfuse 0our Personalit& /n The Design%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@#
Promote -nd >everage 0our Work%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@"
Develop >ong-Term 9oals%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@"
4
Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________
"etter #ser $%perience With Stortelling%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@=
/t Begins With a Stor&%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@=
,evealing the Design in Stories%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@7
The Po)er of 3motion%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@;
The Basics of Stor&telling for Cser 3+perience%%%%%%%%%%%%%%%%%%%%%%%;#
<appil& 3ver -fter: The ,ealit&%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%;=
- 'e) odern-Da& Stor&tellers%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%;7
The Stor&telling 3+periences -round Cs%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%A7
Designing #ser &nterfaces 'or "usiness Web Applications% %$1
Websites vs% Web -pplications%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%$1
'irst* Gno) 0our Csers%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%$5
Design Process%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%$@
Design Principles%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%$$
3ssential 4omponents 6f Web -pplications%%%%%%%%%%%%%%%%%%%%%%%%1#7
Don8t 'orget C/ Design Patterns%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1#;
4ase Stud&: 6nline Banking -pplication%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1#$
'inal Thoughts%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%11#
Progressi(e $nhancement And Standards Do )ot *imit Web
Design%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%111
Shin& 1e) Technologies vs% 6utdated Best Practices?%%%%%11"
The ess That /s The Web%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%11"
4reating 4elebrities -nd - Place We
Wish We Were -t%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%115
<oll&)ood -nd -dvertising Teach Cs 1othing%%%%%%%%%%%%%%%%%%%11=
The &th 6f /nnovating 3+clusivel& Through Technolog&
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%117
5
Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________
/nnovation /sn8t -bout 1e) To&s%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%11@
The 4orporate Spin 6n /nnovation* -nd /ts 4onseFuences
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%11;
The Stockholm S&ndrome 6f Bad /nterfaces%%%%%%%%%%%%%%%%%%%%%%%%11A
This /s 1ot -bout Technolog& 6r Design%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%11$
Where /s The Beaut& 6f The Web?%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1"1
To ,ecap: 6ur /ssues%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1""
Wh& Standards atter* -nd What B'ollo)ing StandardsD
eans%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1"=
Progressive 3nhancement Works%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1"7
Best Practices 4ome 'rom -pplication -nd /terative
/mprovement%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1";
Together We 4an Do This%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1"A
Color Theor for Professional Designers%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%15#
Warm 4olors%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%15"
4ool 4olors%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%15@
1eutrals%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%15$
/n Brief%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1=7
Traditional 4olor Scheme T&pes%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1=@
4reating a 4olor Scheme%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%17;
4onclusion%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1@7
&s +ohn The Client Dense or Are ,ou 'ailing Him-%%%%%%%%%%%%%%%%%%1@;
3+plain Wh& 0ou -re -sking -bout one&%%%%%%%%%%%%%%%%%%%%%%%%%%1@;
2ustif& 0our ,ecommendations /n >anguage 2ohn 4an
Cnderstand%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1@A
/nclude 2ohn /n The Process%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1@$
6
Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________
3ducate 2ohn -bout Design%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1;#
4ommunicate With 2ohn ,egularl&%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1;1
3+plain 2ohn8s 6ngoing ,ole%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1;"
The oral 6f The Stor&%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1;5
Ho. To &dentif and Deal With Different Tpes !f Clients
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1;7
The Passive--ggressive%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1;7
The 'amil& 'riend%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1;;
The Cnder-:aluer%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1;A
The 1it-Picker%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1;$
The Scornful Saver%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1A#
The B/-4ould-Do-This-&selfD-er%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1A1
The 4ontrol 'reak%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1A5
The Dream 4lient%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1A=
Wrap-up%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1A7
Ho. To /espond $ffecti(el To Design Criticism%%%%%%%%%%%%%%%%%%%%1A@
<ave The ,ight -ttitude%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1$#
Cnderstand The 6bEective%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1$1
4heck 0our 'irst ,eaction%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1$=
Separate Wheat 'rom The 4haff%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1$=
>earn 'rom /t%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1$7
>ook 'or - 1e) /dea%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1$@
Dig Deeper When 1ecessar&%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1$;
Thank The 4ritic%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%1$$
7
Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________
Web Designer0s 1uide to Professional )et.or2ing%%%%%%%%%%%%%%%"##
Wh& 1et)ork?%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%"##
1et)orking Tips for Designers%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%"#=
1roup &nter(ie.: $%pert Ad(ice 'or Students and ,oung
Web Designers%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%"15
8
Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________
Harsh Truths About Corporate Websites
.y Paul .2ag
We all make mistakes running our )ebsites% <o)ever* the nature of
those mistakes varies depending on the si!e of &our compan&% -s &our
organi!ation gro)s* the mistakes change% This article addresses
common mistakes made b& large organi!ations%
ost of the clients / )ork )ith are large organi!ations: universities*
large charities* public sector institutions and big companies% 6ver the
last seven &ears* / have noticed certain recurring misconceptions
among these organi!ations% This article aims to dispel these illusions
and encourage people to face the harsh realit&%
The problem is that if &ou are reading this* &ou are probabl& alread&
a)are of these things% But hopefull& this article )ill be helpful to &ou
as &ou convince others )ithin &our organi!ation% /n an& case* here are
some of the harsh truths about )ebsites of large organi!ations%
,ou )eed A Separate Web Di(ision
/n man& organi!ations* the )ebsite is managed b& either the
marketing or /T department% <o)ever* this inevitabl& leads to a turf
)ar* )ith the )ebsite becoming the victim of internal politics%
9
Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________
/n realit&* pursuing a Web strateg& is not particularl& suited to either
group% /T ma& be e+cellent at rolling out comple+ s&stems* but it is not
suited to developing a friendl& user e+perience or establishing an
online brand%
3e$$rey 4eldman urges 2rgani)ati2ns t2 create a se5arate Web di'isi2n.
arketing* on the other hand* is little better% -s 2effre& Heldman puts
it in his article >et T here B e Web D ivisions :
6he Web is a c2n'ersati2n. Mar7eting* by c2ntrast* is a
m2n2l2gue8 ,nd then there9s all that messy business
:ith semantic mar7u5* ;SS* un2btrusi'e scri5ting*
card-s2rting e<ercises* H6M( run-thr2ughs* in'2l'ing
10
Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________
users in accessibility* and the rest 2$ the s7ills and
e<5erience that d2n9t $all under Mar7eting9s 5ur'ie:.
/nstead* the )ebsite should be managed b& a single unified team%
-gain* Heldman sums it up )hen he )rites:
Put them in a di'isi2n that rec2gni)es that y2ur
:ebsite is n2t a bastard 2$ y2ur br2chures* n2r a
natural 2utgr2:th 2$ y2ur gr2u5 calendar. (et there be
Web di'isi2ns.
3anaging ,our Website &s A 'ull4Time +ob
1ot onl& is the )ebsite often split bet)een marketing and /T* it is also
usuall& under-resourced% /nstead of there being a dedicated Web
team* those responsible for the )ebsite are often e+pected to run it
alongside their Bda& Eob%D When a Web team is in place* it is often
over-stretched% The vast maEorit& of its time is spent on da&-to-da&
maintenance rather than on longer-term strategic thinking%
This situation is further aggravated b& the fact that the people hired
to BmaintainD the )ebsite are Eunior members of the staff% The& do not
have the e+perience or authorit& to push the )ebsite for)ard% /t is
time for organi!ations to seriousl& invest in their )ebsites and finall&
11
Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________
move their Web strategies for)ard b& hiring full-time senior Web
managers%
Periodic /edesign &s )ot $nough
Because corporate )ebsites are under-resourced* the& are often
neglected for long periods of time% The& slo)l& become out of date in
their content* design and technolog&% 3ventuall&* the )ebsite becomes
such an embarrassment that management steps in and demands that
it be sorted% This inevitabl& leads to a complete redesign at
considerable e+pense% This is a fla)ed approach% /t is a )aste of
mone&* because )hen the old )ebsite is replaced* the investment that
)as put into it is lost* too% /t is also tough on finances* )ith a large
e+penditure having to be made ever& fe) &ears%
;amer2n M2ll enc2urages Web designers t2 realign* n2t redesign.
12
Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________
- better )a& is continual investment in &our )ebsite* allo)ing it to
evolve over time% 1ot onl& is this less )asteful* it is also better for
users* as pointed out b& 4ameron oll in his post 9ood Designers
,edesign* 9reat Designers ,ealign%
,our Website Cannot Appeal To $(erone
6ne of the first Fuestions / ask a client is* BWho is &our target
audience?D / am regularl& shocked at the length of the repl&% Too
often* it includes a long and detailed list of diverse people% /nevitabl&*
m& ne+t Fuestion is* BWhich of those man& demographic groups are
most important?D Depressingl&* the ans)er is usuall& that the& are all
eFuall& important%
The harsh truth is that if &ou build a )ebsite for ever&one* it )ill
appeal to no one% /t is important to be e+tremel& focused about &our
audience and cater &our design and content to it% Does this mean &ou
should ignore &our other users? 1ot at all% 0our )ebsite should be
accessible b& all and not offend or e+clude an&bod&% <o)ever* the
)ebsite does need to be primaril& aimed at a clearl& defined
audience%
,ou Are Wasting 3one !n Social )et.or2ing
/ find it encouraging that )ebsite managers increasingl& recogni!e
that a Web strateg& involves more than running a )ebsite% The& are
beginning to use tools such as T)itter* 'acebook and 0ouTube to
13
Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________
increase their reach and engage )ith ne) audiences% <o)ever*
although the& are using these tools* too often the& do so ineffectivel&%
T)eeting on a corporate account or posting sales demonstrations on
0ouTube misses the essence of social net)orking%
Micr2s2$t dramatically im5r2'ed its image am2ng the de'el25ment
c2mmunity by all2:ing sta$$ t2 s5ea7 2ut 'ia the ;hannel 9 :ebsite.
Social net)orking is about people engaging )ith people% /ndividuals
do not )ant to build relationships )ith brands and corporations% The&
)ant to talk to other people% Too man& organi!ations thro) millions
into 'acebook apps and viral videos )hen the& could spend that
mone& on engaging )ith people in a transparent and open )a&%
14
Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________
/nstead of creating a corporate T)itter account or indeed even a
corporate blog* encourage &our emplo&ees to start t)eeting and
blogging themselves% Provide guidelines on acceptable behavior and
)hat tools the& need to start engaging directl& )ith the communit&
that is connected to &our products and services% This demonstrates
&our commitment not onl& to the communit& but also to the human
side of &our business%
,our Website &s )ot All About ,ou
While some )ebsite managers )ant their )ebsite to appeal to
ever&one* others )ant it to appeal to themselves and their colleagues%
- surprising number of organi!ations ignore their users entirel& and
base their )ebsites entirel& on an organi!ational perspective% This
t&picall& manifests itself in inappropriate design that caters to the
managing director8s personal preferences and in content that is full of
Eargon%
- )ebsite should not pander to the preferences of staff but should
rather meet the needs of its users% Too man& designs are reEected
because the boss Bdoesn8t like green%D >ike)ise* too much )ebsite
cop& contains acron&ms and terms used onl& )ithin the organi!ation%
,ou0re )ot 1etting 5alue 'rom ,our Web Team
Whether the& have an in-house Web team or use an e+ternal agenc&*
man& organi!ations fail to get the most from their Web designers%
15
Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________
Web designers are much more than pi+el pushers% The& have a )ealth
of kno)ledge about the Web and ho) users interact )ith it% The& also
understand design techniFues* including grid s&stems* )hite space*
color theor& and much more%
6reating designers as 5i<el 5ushers :astes their e<5erience& here* a
designer laments his 5redicament 2n 6:itter.
/t is therefore )asteful to micro-manage b& asking them to Bmake the
logo biggerD or to Bmove that element three pi+els to the left%D B&
doing so* &ou are reducing their role to that of a soft)are operator
and are )asting the )ealth of e+perience the& bring%
16
Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________
/f &ou )ant to get the ma+imum return on &our Web team* present it
)ith problems* not solutions% 'or e+ample* if &ou8re targeting &our
)ebsite at teenage girls* and the designer goes for corporate blue*
suggest that &our audience might not respond )ell to that color% Do
not tell him or her to change it to pink% This )a&* the designer has the
freedom to find a solution that ma& be even better than &our choice%
0ou8re allo)ing &our designer to solve the problem &ou have
presented%
Design " Committee "rings Death
The ultimate s&mbol of a large organi!ation8s approach to )ebsite
management is the committee% - committee is often formed to tackle
the )ebsite because internal politics demand that ever&one have a
sa& and that all considerations be taken into account%
To sa& that all committees are a bad idea is naive* and to suggest that
a large corporate )ebsite could be developed )ithout consultation is
fanciful% But )hen it comes to design* committees are often the kiss of
death%
17
Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________
=esign by c2mmittee leads t2 design 2n the $ly.
Design is subEective% The )a& )e respond to a design is influenced b&
culture* gender* age* childhood e+perience and even ph&sical
conditions Isuch as color blindnessJ% What one person considers great
design could be hated b& another% This is )h& it is so important that
design decisions be informed b& user testing rather than personal
e+perience% Cnfortunatel&* this approach is rarel& taken )hen a
committee is making the decisions%
/nstead* designing b& committee becomes about compromise%
Because committee members have different opinions about the
design* the& look for common ground% 6ne person hates the blue
18
Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________
color scheme* )hile another loves it% This leads to designing on the
fl&* )ith the committee instructing the designer to Btr& a different
blueD in the hopes of finding middle ground% Cnfortunatel&* this leads
onl& to bland design that neither appeals to nor e+cites an&one%
A C3S &s )ot A Sil(er "ullet
an& of the clients / )ork )ith have ama!ingl& unrealistic
e+pectations of content management s&stems I4SJ% Those )ithout
one think it )ill solve all of their content )oes* and those )ho have
one moan because it hasn8tK
/t is certainl& true that a 4S can bring a lot of benefits% These
include:
• reducing the technical barriers of adding content*
• allo)ing more people to add and edit content*
• facilitating faster updates*
• and allo)ing greater control%
But man& 4S8 are less fle+ible than their o)ners )ould like% The& fail
to meet the changing demands of the )ebsites the& are a platform
for% Website managers also complain that their 4S is hard to use% /n
man& cases* this is because the ones using it have not been
adeFuatel& trained or are not using it regularl& enough%
19
Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________
'inall&* a 4S ma& allo) content to be easil& updated* but it does not
ensure that content :ill be updated or even that the Fualit& of
content )ill be acceptable% an& 4S-based )ebsites still have out-
of-date content or poorl& )ritten cop&% This is because internal
processes have not been put in place to support the content
contributors%
/f &ou look to a 4S to solve &our )ebsite maintenance issues* &ou
)ill be disappointed%
,ou Ha(e Too 3uch Content
Part of the problem )ith maintaining content on large corporate
)ebsites is that there is too much content in the first place% ost of
these )ebsites have BevolvedD over &ears* )ith more and more
content being added% -t no point did an&one revie) the content and
ask )hat could be taken a)a&%
an& )ebsite managers fill their )ebsite )ith cop& that nobod& )ill
read% This happens because of one or more of the follo)ing:
• - fear of missing something: b& putting ever&thing online*
the& believe users )ill be able to find )hatever the& )ant%
Cnfortunatel&* )ith so much information available* it is hard to
find an&thing%
• - fear users )ill not understand: )hether from a lack of
confidence in their )ebsite or in their audience* the& feel the
20
Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________
need to provide endless instruction to users% Cnfortunatel&*
users never read this cop&%
• - desperate desire to convince: the& are desperate to sell their
product or communicate their message* and so the& bloat the
te+t )ith sales cop& that actuall& conve&s little valuable
information%
Steve Grug* in his book =2n9t Ma7e Me 6hin7* encourages )ebsite
managers to Bget rid of half the )ords on each page* then get rid of
half of )hat8s left%D This )ill reduce the noise level on each page and
make the useful content more prominent%
Conclusions
>arge organi!ations do a lot right in running their )ebsites% <o)ever*
the& also face some uniFue challenges that can lead to painful
mistakes% ,esolving these problems means accepting that mistakes
have been made* overcoming internal politics and changing the )a&
the& control their brand% Doing this )ill give &ou a significant
competitive advantage and make &our Web strateg& more effective
over the long term%
Paul .2ag is the $2under 2$ >? Web design agency Headsca5e* auth2r
2$ the Website @:ner9s Manual and h2st 2$ a:ard-Winning Web
design 52dcast .2ag:2rld.
21

Smashing eBook Series: #1 Professional Web Design _____________________________________________________________

Preface
This e-book contains a selection of the best articles about professional Web design that have been published on Smashing Magazine in 2009 and 2010. The articles have been carefully edited and prepared for this PDF version; some screenshots and links were removed to make the book easier to read and print out. This book presents guidelines for professional Web development, including communicating with clients, creating a road map to a successful portfolio, rules for professional networking and tips on designing user interfaces for business Web applications. The book shares expert advice for students and young Web designers, and it also helps you learn how to respond effectively to design criticism, use storytelling for a better user experience and apply color theory to your professional designs. This book is not protected by DRM. A copy costs only $9.90 and is available exclusively at http://shop.smashingmagazine.com. Please respect our work and the hard efforts of our writers. If you received this book from a source other than the Smashing Shop, please support us by purchasing your copy in our online store. Thank you. Published in March 2010 by Smashing Media GmbH - Werthmannstr. 15 - 79098 Freiburg / Germany - Geschäftsführer: Sven Lennartz, Vitaly Friedman - Amtsgericht Freiburg: HRB 704836.

2

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->