Cover

Table of Contents

Distinctive Design

A Practical Guide to a Useful, Beautiful Web

Alexander Dawson

Distinctive Design

This edition first published 2011

Registered office

John Wiley & Sons Ltd, The Atrium, Southern Gate, Chichester, West Sussex, PO19 8SQ, United Kingdom

For details of our global editorial offices, for customer services and for information about how to apply for permission to reuse the copyright material in this book, please see our Web site at .

The right of the author to be identified as the author of this work has been asserted in accordance with the Copyright, Designs and Patents Act 1988.

All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, except as permitted by the UK Copyright, Designs and Patents Act 1988, without the prior permission of the publisher.

Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books.

Designations used by companies to distinguish their products are often claimed as trademarks. All brand names and product names used in this book are trade names, service marks, trademarks or registered trademarks of their respective owners. The publisher is not associated with any product or vendor mentioned in this book. This publication is designed to provide accurate and authoritative information in regard to the subject matter covered. It is sold on the understanding that the publisher is not engaged in rendering professional services. If professional advice or other expert assistance is required, the services of a competent professional should be sought.

978-1-119-99298-1

A catalogue record for this book is available from the British Library.

Set in 10 point Benton Sans by Melanee Habig, Jennifer Mayberry, and Andrea Hornberger

Printed in the U.S. by CJK

About the Author

Alexander Dawson (@AlexDawsonUK) is an award winning, self-taught, freelance web professional, writer, published author, and recreational software developer from Brighton (UK). With more than 10 years of industry experience he spends his days running his consultancy firm HiTechy (), writing professionally about web design and giving his free time to assist others in the field.

In recent years, Alexander has become an established web writer providing articles for some of the industry’s most respected sites including Smashing Magazine, Six Revisions and SitePoint (where he regularly assists others through their popular forums). In addition, as a member of the Guild of Accessible Web Designers he actively promotes and advocates the benefits of a good user-experience and web standards. When Alexander isn’t coding or writing about design and development, he enjoys a game of tennis (or chess) and watching movies.

Credits

Some of the people who helped bring this book to market include the following:

VP Consumer and Technology Publishing Director

Michelle Leete

Associate Director- Book Content Management

Martin Tribe

Associate Publisher

Chris Webb

Publishing Assistant

Ellie Scott

Development Editor

Beth Taylor

Technical Editor

Michael Tuck

Copy Editors

Debbye Butler

Melba Hopper

Editorial Manager

Jodi Jensen

Senior Project Editor

Sara Shlaer

Editorial Assistant

Leslie Saxman

Senior Marketing Manager

Louise Breinholt

Marketing Executive

Kate Parrett

Senior Project Coordinator

Kristie Rees

Graphics and Production Specialists

Melanee Habig

Andrea Hornberger

Jennifer Mayberry

Quality Control Technicians

Melissa Cossell

Susan Hobbs

Indexer

Ty Koontz

Dedication

For the long suffering professionals who work tirelessly to make the web a better place, and those individuals who continue to strive for a more accessible, standards compliant Internet.

Acknowledgments

There are a number of wonderful individuals who have helped and inspired me throughout the journey of writing this book. My thanks firstly have to go out to the entire team at Wiley who have shown me continued support and helpful advice over many a Skype or e-mail conversation. Just a few of these people include Chris Webb (who’s recognition of an article and enthusiasm lead to this title), Ellie Scott (whose patience with my questions seemed never ending ), Beth Taylor (my long suffering editor who has helped transform my brain’s contents into what you’re reading), and Michael Tuck (my friend and technical editor who ensured that what I wrote made sense).

I must also give recognition and some well deserved appreciation to the amazing people who have given me opportunities to write for their wonderful sites. Without their support and friendship, this title certainly may have never been written. Thanks must go out to Jacob Gube (Six Revisions), Vitaly Friedman (Smashing Magazine), Aidan Huang (OneXtra Pixel), Amanda Hackwith (FreelanceSwitch), Kristina Bjoran (UX Booth), Walter Apai (Web Designer Depot) and both Jonathan Anderson and Tiffany A. Hampton (UX Magazine). If you don’t read these awesome resources, you should do!

Next, I’ll give thanks to my friends over on SitePoint’s forums, Learnable, Skype, Windows Live Messenger, Google Talk, IRC, and real life, who’ve kept me going with interesting, lively discussions throughout the entire writing process. This Includes: Andrew Cooper, Christian Ankerstjerne, Troy Mott, and Ursula Comeau. Finally, my thanks go out to you, the reader who has chosen to support my hard work (and hopefully gain some useful content in the process). Without you, the book certainly wouldn’t have been worth it, and if my musings and Web design knowledge can help a single person become a better professional, it will have been worth the effort made.

Introduction: Setting the Stage

Some details for the journey ahead

When the web was new, the role of a web designer was fairly limited. Designers used HTML and liked it, CSS was lacking widespread, graceful support (some things never change), and the concept of designing good interfaces for the visitor was just being explored. With things gradually improving we’ve lived through two browser wars, the first via desktop browsers and the second (still ongoing) via handheld devices, both with plenty of casualties!

As the web continues to evolve with new standards, so must the methods for dealing with the demands placed upon its infrastructure. With the number of Internet users rising toward two billion, more browsers and devices than you can count, and with networks like Facebook gaining an enviable user base, the need to customize experiences and provide a non-intrusive way of showcasing content is critical.

As I move through the book, I shall not only focus on the key technologies that now influence how content is designed, structured, and visualized (HTML, CSS, and JavaScript.) I also give you plenty of diagrams (because this is a design book and the visuals are what much of our work comes down to). As such, design can and should be considered (whether distinctive or otherwise) both an art and science (with some philosophy thrown in).

Introducing distinctive design

Hopefully, as you examine distinctive design, you’ll get as much enjoyment from reading about the material as I’ve had from writing it. Luckily, I’m a fan of simplicity and straight forward ideas so you don’t need to be a rocket scientist or a brain surgeon to take part. Whether you’re getting started in design (but know enough code to implement the changes) or have a background in it, you’ll still find some useful nuggets of goodness to help you improve your design work.

I’ve also been of the opinion that designers want to do what’s in their visitors’ best interests. I’ve no worries if you’ve made some designs that have caused other experts to begin crying. My primary focus and goal is to let you know about the wonderful options that exist and allow you to make informed choices for yourself (in what’s appropriate) – because one size simply doesn’t fit all when it comes to your identity!

One of the benefits of this approach is that I’m firmly in support of trial, error, and continuing your education. So as you examine the theories, patterns, knowledge and perspectives laid out in this title, feel free to experiment (at your own pace) and take opportunities to learn more about the subject either using the links I’ll provide, or through your own user research. Self-motivation is important to any designer (it’s almost as important as having creativity).

Motives and Motivation

When I was first approached to write this book, the principles of distinctive design were firmly at the forefront of my attention. My passion for accessibility (at an almost religious level), my enthusiasm for writing, and my empathic need to help future generation of designers (and developers) has shaped how I not only build websites, but has also challenged and enhanced the knowledge I currently hold.

Although giving up the knowledge I’ve spent years learning may seem crazy to onlookers, design problems are so widespread, and the topic of good design both technical and theoretical that while you may benefit from what I’m providing (by opening your eyes to new ideas and methods to boost your designs visibility), it’s almost certain that good practices will take some time to gain traction.

It’s also worth stating that I love my job and find it deeply rewarding. The web has become such a dynamic environment that you’ll never run out of things to learn (and those who say they know all they need to should be approached with caution). While the diverse nature of the web has driven a few of us crazy (literally), I jumped at this opportunity to showcase a subject within the scope of design that many aren’t aware of (which is quite unfortunate).

The web is an amazing medium with scope for an almost infinite array of unique designs and potential improvements. Although much of what you’ll read is common sense or practical advice, it should apply in equal measure to whatever you create. With this in mind, I hope to challenge the way you view your designs and spark that creative “self-improving” spirit.

The need for a book that highlights the importance of distinctive design was born of this enthusiasm. Putting things simply, while designers are able to make something pretty and usable, few really examine the intricacies of the page (and its content) whilst taking time to consider, control, and hone the focus and attention to which visitors can gain benefits from.

A Primer on Distinction

The principle behind distinctive design can seem quite daunting once you look through the table of contents of this book. We’ll examine subjects like psychology and information design, findability and interaction design! There will be plenty of cool abbreviation usage (which won’t help your scrabble score) and some things you may not initially think of as web orientated.

Without going into a lecture about why this is important, I’ll let you in on a secret . . . distinctive design is simply about making things stand out and controlling the attention parts of a page receive! Department stores literally spend millions in researching how to lay out their shop floors to attract customers. Movie directors spend just as much trying to emphasize what’s on the screen to try and engage the viewer’s emotions.

The world influences how our attention is caught on a daily basis. Examples include the signposts we read, the ways in which our senses are “hooked” via television or radio, and even the spam that get’s shoved through the mail (as much as you wish the marketing men would leave you alone).

As the web is equally perceptive to similar techniques (just with different implementations to print, visual, or physical design), it seems only natural to want to explore how such methods can be leveraged to give your designs and layouts that distinctive sparkle of attention. You wouldn’t want to build a car unless you understood your tools, the same goes for the web.

Although you may be aware of core concepts like usability, accessibility, and their functions in a design’s success, the ability to maximize the way in which people recognize and respond to the interface is almost as important as ensuring that it can be seen and used (at the most primitive level). This book is therefore aiming to go beyond what you would find in your average design or usability title and highlight such inherent benefits.

At this point it’s worth establishing that I’m not saying you should all start dumbing down our layouts and stylistic creativity so that the aesthetics or content suffers as a result. The whole process of wielding these ever more fanciful and useful technologies should engage your need to experiment and get your visitors involved in seeking (rather than just being served) attention-worthy content. Getting it shiny and noticeable is pretty much the ultimate goal.

Much of design is an illustration showcasing our ability to reflect our audience’s needs in a consumable format. Doing this with accuracy (rather than guesswork) will not only make your awesome content and services more usable (and probably more awesome by the fact that people will see it, perhaps with feedback!), but it will help you target your sites visitors in ways that could give you an edge over the competition . . . like the idea?

Great Expectations

So now that you’ve heard the sales pitch and gained a brief insight into the concept of distinctive design, it’s time to learn exactly what you should expect from this package. Because this title is based around design rather than development, there will be a few expectations of your skill set. Remember that even a novice can learn as they progress.

To keep this book at a readable length, attempts have been made to keep it from becoming a technical manual. While this title does cover a wide scope of subjects, keeping it in a format that’s digestible is as important in print as it is on the web (and what kind of web designer would I be if I turned this title into something as huge as your telephone directory).

Secondly, because this is quite technical (relating to design) you’ll need some basic skills to keep up. It doesn’t matter if you’re not artistic; it doesn’t even matter if you’re still learning to code. What is important is that you are passionate and are willing to learn the applicable skills (code or otherwise) to implement the techniques you’ll uncover throughout the chapters.

Hopefully at this stage, things are looking peachy. If you do find that you do come up against a brick wall in a particular subject, it doesn’t mean that the book is entirely useless. I’ve planned this title so you can apply the principles in any order, either as a supplement to your existing skills, or you can simply implement the techniques as you learn to develop. As with many things in life, it’s the awareness of issues that matter, not the background you possess.

Beyond this, I think common sense and logic must prevail! This title certainly isn’t feature complete (on every possible angle as you’d need hundreds of volumes) and to quote the phrase “here be dragons,” there’s elements that still require a lot of research and discovery. With this in mind, as developments occur in the future you’ll want to be under no illusions that designing is a constant effort, so keep reading blogs, sites, journals, magazines, and books.

Frequently Asked Questions

I’m sure at this stage you have plenty of questions, such as what exactly are we going to talk about! Without giving away too many secrets at this early stage I decided that it would be in everyone’s best interests if a few immediate concerns were resolved. As such, the following list of frequently asked questions aren’t frequent (in the sense that my inbox is getting swamped) but they’re incredibly valid at this stage and are usually asked within computer or design books.

Q: Do I need to know everything, and can I learn it all?

A: Because of the web’s evolutionary pace, it’s impossible to know everything about designing for the medium. While you can become quite proficient with a good range of knowledge, you won’t have the time to learn it all (so focus on what you need to know)!

Q: What is the right way to design or build a website?

A: Everyone has different needs, expectations, and ideas of what a good design is. While aesthetics are only part of the job, a good experience is made up of more than just eye candy! So there’s no right or wrong way, just potentially helpful and unhelpful practices.

Q: Does this information work for every type of site?

A: Of course! Different websites will have different requirements and require a varying range of information to be displayed in the browser, however that doesn’t detract from the nature of showcasing and giving distinction to a page (so that focus can be drawn).

Q: Can I use these principles outside of the web?

A: Absolutely! Although print (like magazines), visual (like video), and physical design (like architecture) have their own unique sets of challenges and requirements, it’s perfectly possible to cross over many of the concepts in this book to other visualized formats.

Q: Will this teach me how to create my first website?

A: Sorry, although this book has plenty of newbie-friendly material and would make a great companion to a development book (or something that teaches you how to build your very first site), this will cover some advanced ground and focuses on improving experiences.

Q: Should I pay a professional or do it myself?

A: If you have the money to splash out on a guru, it may be worth the money as their years of experience will obviously cover a wider range of skills than this title can provide in a single volume. If not, self-testing is a better alternative to having no testing at all!

Q: Is there really such a thing as bad design?

A: Although this is a subjective answer, it’s quite probably yes. Some sites can be really badly implemented, some can be impossible to use (for able-bodied and disabled individuals alike), and some are just plain ugly or annoying (or bad to the point of scary)!

Q: I just want to have a simple site. Should I know this stuff?

A: Although many individuals these days rely on content management systems like the mighty Wordpress or a template that was provided either for free or at cost, there are still improvements you can make. Why settle for average when you can be distinctive!

Book Conventions

Like most books, this one follows a series of conventions. Regarding the personality of the content, an emphasis on being concise but useful is maintained. The last thing you want is to hear me waffle on about some *amazing* aspect of design to the sacrifice of something else of equal importance. In addition, it’s always fun to see more than reels of text, so lists, tables, images, diagrams, and other cool “widgets” will be used in addition to visualize the principles.

Some of the things you’ll find:

> Screenshots and Diagrams: To see a real-world implementation.

> Wireframes: Mockup interfaces to visualize specific concepts.

> Tables, Charts, and Graphs: Flow, bar, pie, and other useful data.

Alongside these elements, you’ll find a series of special calls to action that will give you some extra nuggets of useful information. They’ll be quite distinct in appearance and have icons to let you know what type of details you shall receive. As for what they represent, I’ve included a complete list as follows (so that you will know what to look out for). Remember that in the case of website links, occasionally they may disappear (so check the book’s errata for corrections).

Call to action conventions used:

> Note: A technical term or abbreviation that requires an explanation.

> Reference: A useful site, book, or something else to continue learning from.

> Tip: A best practice or personal recommendation relating to a subject.

> Important: A warning or reminder that may affect what’s being attempted.

E-Book Bonus Chapters

Distinctive design is comprised of many components. Although this book covers a wide range of these valuable theories and practices, many more exist for you to explore. The supplementary e-book covers three additional subjects that can help you improve your sites visibility and ease-of-use. You can find the e-book at .

The Bonus Chapters are

> Bonus Chapter 1: Understanding Information Architecture

> Bonus Chapter 2: The Influence of Sociology

> Bonus Chapter 3: Accessibility: Removing Disability

Down The Rabbit Hole We Go!

Congratulations, you have completed this stage of the journey. Now that all the disclaimers and overview segments are complete, we can get down to business and this is where our distinctively unique quest for a better design shall begin. Just like in Alice, we shall go down the rabbit hole and tumble into Wonderland where nothing is as it seems (hopefully there won’t be any animated GIFs of the Cheshire cat going on your site anytime soon)!

From this stage forward, the focus of this book shall not be aimed at either me (as the author) or you (as the designer or developer). Our focus is simply and quite literally aimed at the visitor (that fabled creature that often seems like a mythical beast). After all, we build sites and experiences for our visitors to enjoy, consume, and (in some cases) pay for.The greatest ace in the designer’s handbook is to design for your users, not force users around your ideas.

Please note that some special symbols used in this eBook may not display properly on all eReader devices. If you have trouble determining any symbol, please call Wiley Product Technical Support at 800-762-2974. Outside of the United States, please call 317-572-3993. You can also contact Wiley Product Technical Support at .

Distinctive Design: A Practical Guide to a Useful, Beautiful Web