Smashing eBook Series: #1 Professional Web Design _ 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 Smashing eBook Series: #1 Professional Web Design _ Table of Contents Preface Harsh Truths About Corporate Websites You Need A Separate Web Division 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 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 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 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 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 .. .Smashing eBook Series: #1 Professional Web Design _ Preface This e-book contains a selection of the best articles about professional Web design that... 704836 Smashing eBook Series: #1 Professional Web Design _ Table of Contents Preface Harsh Truths About Corporate Websites You Need A Separate Web. .. 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