smashing professional web design mar 2010 1902

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
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 . 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


Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________

Table of Contents
Preface................................................................................................................2
Harsh Truths About Corporate Websites..........................................9
You Need A Separate Web Division..............................................9
Managing Your Website Is A Full-Time Job.............................11
Periodic Redesign Is Not Enough................................................12
Your Website Cannot Appeal To Everyone..............................13
You Are Wasting Money On Social Networking....................13
Your Website Is Not All About You.............................................15
You’re Not Getting Value From Your Web Team....................15
Design By Committee Brings Death...........................................17
A CMS Is Not A Silver Bullet..........................................................19
You Have Too Much Content.........................................................20
Conclusions..........................................................................................21
Portfolio Design Study: Design Patterns and Current
Practices....................................................................................22
Light vs. Dark Design........................................................................23
How Many Columns?.......................................................................24
Introductory Block On Top?...........................................................26
Layout Alignment..............................................................................27
Navigation Alignment......................................................................29
Search Box Design.............................................................................30
Flash Elements.....................................................................................30

Where To Put Contact Information?...........................................31
“About Us” Page.................................................................................34

3


Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________

Client Page............................................................................................34
Services Page.......................................................................................35
Portfolio Page......................................................................................36
Workflow Page....................................................................................37
Contact Page........................................................................................38
Specials And Extras...........................................................................39
Other Findings....................................................................................39
Summary...............................................................................................40
Creating A Successful Online Portfolio...........................................42
Pitfall #1: Obfuscating......................................................................42
Pitfall #2: Cramming Information................................................43
Pitfall #3: Overdoing It.....................................................................44
Pitfall #4: Unusual Navigation.......................................................44
Pitfall #5: Visual Clutter...................................................................45
Principles of Effective Portfolio Design.....................................46
Define your Criteria and Strategies for Success.....................46
Consider Multiple Portfolios..........................................................47
Target Your Market............................................................................49
Prioritize Usability..............................................................................52
Use the Right Technology...............................................................52
Plan The Project..................................................................................54

Limit The Scope And Type of Work You Promote.................54
Provide Adequate Contact Information, Documentation
And Explanations...............................................................................56
Present Your Work In The Context of Your Goals..................57
Infuse Your Personality In The Design.......................................58
Promote And Leverage Your Work..............................................60

4


Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________

Develop Long-Term Goals..............................................................60
Better User Experience With Storytelling......................................62
It Begins With a Story.......................................................................62
Revealing the Design in Stories....................................................63
The Power of Emotion......................................................................65
The Basics of Storytelling for User Experience.......................68
Happily Ever After: The Reality.....................................................72
A Few Modern-Day Storytellers...................................................73
The Storytelling Experiences Around Us...................................83
Designing User Interfaces For Business Web Applications. .89
Websites vs. Web Applications.....................................................89
First, Know Your Users......................................................................91
Design Process....................................................................................94
Design Principles................................................................................97
Essential Components Of Web Applications........................103
Don’t Forget UI Design Patterns................................................105
Case Study: Online Banking Application................................107

Final Thoughts..................................................................................108
Progressive Enhancement And Standards Do Not Limit Web
Design............................................................................................................109
Shiny New Technologies vs. Outdated Best Practices?.....110
The Mess That Is The Web...........................................................110
Creating Celebrities And A Place We
Wish We Were At.............................................................................111
Hollywood And Advertising Teach Us Nothing...................112

5


Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________

When I started out as a designer, I sent a letter (with my portfolio and
business card) to a local design agency — certainly not the biggest
one or the most prestigious — and introduced myself as a young
designer who was eager to learn. I asked if I could come in for a day
or two to learn a bit about the design business and gain some work
experience. Thankfully, they consented, and I spent three days asking
questions, picking up business cards and meeting clients. That was
over ten years ago, and I still rely on those contacts now. And to this
day, that has been my most productive and successful period of
networking.
Not every design agency will be as open as that one was, but I would
try. There is no harm in asking.
One thing to remember about networking is that success is
determined not by your number of contacts but by the quality of
those contacts. Even if the best designer in the world sent you a

courtesy email reply, it does not mean that you are in their network or
that they are in yours. A quality network contact is someone who
gives you a personal reply and genuinely tries to help you. These are
the contacts you must maintain. This is your network.
Finally, please don’t think of youth as an impediment. Think of it as a
license to ask questions, to learn and expand your personal network.

241


Smashing eBook Series: #1 Professional Web Design
_____________________________________________________________

Paul Boag
Step away from the computer. Meeting people online is great, but
nothing beats meeting them face to face. Attend conferences and
meet-ups and get to know people. Then follow up on those
relationships via Twitter and Facebook.
Also, don’t have an agenda. Or, if you have one, be honest and open
about it. Too many people network solely to win work or become a
“Web celebrity.” Instead, network because you want to meet likeminded people who will inspire and excite you about your work.

Soh Tanaka
Attend industry events, seminars and any kind of social gatherings.
Don’t be shy; get to know the people around you. Be interested and
willing to learn from them, and at the right time let them know who
you are and what you do. Carry business cards with you at all times,
and have your elevator speech ready. You never know when you will
run into a potential client or employer. Networking is all about
expanding your opportunities, and as a designer this skill is critical.

Steven Snell has been designing websites for several years. He actively
maintains a few blogs of his own, including DesignM.ag, which
regularly provides articles and resources for web designers.

242