smashing professional web design mar 2010 1902

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.. This book presents guidelines for pr

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.

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

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

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

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.

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