Distinctive Design E-Book

Alexander Dawson

• Herausgeber: John Wiley & Sons
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 573

Veröffentlichungsjahr: 2011

Beschreibung

Learn to produce a web site that stands out from the crowd One of the web designer's greatest challenges is to create a site distinctive enough to get noticed among the millions of sites already on the web. This book examines the bond between code, content and visuals to guide you through the factors that increase your design's visibility, usability and beauty. Using this practical advice, even web designers who lack strong artistic skills can develop super sites that strengthen the message and stand out from the crowd. * Most books focus primarily on graphic design principles; this one shows you how to maximize and prioritize every design decision to help your site achieve its primary purpose: showcasing your content and services * Explores the bond between code, content and visuals to guide you through the factors that increase your design's visibility, usability and beauty * Enables even artistically challenged web designers to create elegant, functional layouts that attract visitors and are user-friendly Every web designer can benefit from this practical advice on creating an informative, attractive, easy-to-use site that gets noticed.

Leseprobe

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

Table of Contents

Introduction: Setting the Stage

Part I: Designing for the Web

Chapter 1: The Distinction of Web Design

Taking You Back to Basics

Time, space, and relativity

Defining the ideal perspective

Designing with Neutrality

Beautiful balance

Emphasizing the essentials

Negotiating neutrality

The Sum of All Parts

Beautiful emptiness

Sanitizing the interface

Being Consistent is Critical

Distinctively barrier-free

Consequences of distinction

Summary

Chapter 2: Designing for Different Devices

Designing for More than Desktops

Distinction within hardware

Browser-based ubiquity

Expandability with Extensions

Plug-and-play design

Documentation delivery

Design evolution

Applying Application Theory

Tales from the GUI

Distinctive app design

Going Beyond Digital Formats

Print design

Analog versus digital

Cascading printers

Summary

Part II: The Art of Distinctive Documentation

Chapter 3: Principles of Information Design

Revolutionary Researching

The emphasis of implementation

Distinction from competition

Creating Content and Copy

The importance of terrific text

Readability evokes distinction

Progressive disclosure rocks

Illustrative Visual Imagery

A picture says 1,000 words

Content-focused imagery

Attention-seeking iconography

Enduring Multimedia Magic

Vibrant media visualizations

The pillars of digital endurance

Summary

Chapter 4: Design Concepts and Theories

Powerful Design Principles

Principles of web design

Theories for design principles

Elegant Design Elements

Elements of web design

Theories for design elements

Targeting Color Theory

Characteristics of color

Compatibility with colors

Targeting Web Typography

An anatomy of type

Wonderfully web-safe

Summary

Part III: Implementing Design Theory

Chapter 5: Introducing Design Psychology

Of Ethics and Objectivity

Designing responsibly

Keeping your concepts clinical

Developmental Behavior

Using nature and nurture in design

Conditioning user behavior

Emotional and Influential

Color and type psychology

Empowering performances

Cognition and Perception

Gestalt and design theory

Cognition and perception

Making memories

Summary

Chapter 6: Sculpting a User Interface

Markup and Microformats

Elements dictating distinction

Microformat magic

Cascading with Distinction

Suitable styles using CSS

Mobile, print, or default design!

Studying Scriptable Solutions

How scripts became distinctive

Frameworks in visual design

The Past, Present, and Future

Pretty progressive enhancement

Distinction with future standards

Summary

Part IV: User-Centered Considerations

Chapter 7: Promoting User Interaction

A Click, Press, and Touch

I/O hardware and interactivity

Human-computer interaction

Dealing with User Choices

The floods of complexity

The desert of simplicity

Decoding Design Interactions

User interface controls

Coding for interactivity

Encouraging Interactivity

Designing for interactivity

Responsive design theory

Summary

Chapter 8: The Foundations of User Experience

Customizing Creativity

Personalization protocol

Trends and implementations

The benefits of invisibility

Positives and Negatives

Website saints and sinners

Subjectivity within distinction

Value-Based Web Design

Attention within the substance

Layering features for emphasis

Expansive Experiences

User-centered considerations

A storybook with plenty of twists

Summary

Part V: Designing for Ubiquitous Users

Chapter 9: The Construct of Usability

Universal Usability

Dynamic, adaptive design

Identity crisis challenges

Terrific Usability Trends

Quick, useful conventions

The danger of anti-patterns

Inspiration from the muses

Logical Layout Methods

Organic arrangements

Eye-tracking for efficiency

Testing to Benefit Usability

The heuristic evaluation

Roots of usability testing

Summary

Chapter 10: Focusing Facets of Findability

A Game of Give and Take

Out of site and out of mind

Rolling with digital punches

Designing Search Data

Maximizing on-page visibility

Maintaining the off-site rule

Sexy Social Engineering

Studying for social success

Ripples and ego reflections

Designing with Distinction

Don’t panic: Justifying the job

Summary

Bonus Chapter 1: Understanding Information Architecture

Crafting Conceptual Workflows

Distinctive concept design

Creating workflows that work

Planning and sketching

Creating Distinctive File Structures

Searching for sitemaps

Canonical (easy-to-remember) URLs

Navigating Logical Layouts

A digital architect’s atlas

To infinity and beyond

Ordering from the menu

Having a Healthy Hierarchy

Making logical labyrinths

Supporting the scaffolding

Summary

Bonus Chapter 2: The Influence of Sociology

Exploring the Myths of Universal Design

Diversity brings distinction

Targeting the average consumer

Understanding Cultural Influences

Social psychology in design

Universal factors of sociology

Understanding Internet Ethnography

Bonding with technology

Sociological engineering

Communicating with Creativity

Creating empathy experiences

Socially distinctive feedback

Summary

Bonus Chapter 3: Accessibility: Removing Disability

Some Physical Attributes

Distinction with physical ability

Mechanical quirks and the HCI

Being Intellectually Inclusive

Other considerations of disability

Severity and its role in disability

Emotional Environments

Designing for emotive experiences

Chronic or acute, it’s important

Socially Stranded Isolation

Communication or social barriers

The universal disability principle

Summary

Distinctive Design

A Practical Guide to a Useful, Beautiful Web

Alexander Dawson

Distinctive Design

This edition first published 2011

© 2011 John Wiley & Sons, Ltd

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 www.wiley.com.

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 (www.hitechy.com), 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 www.wiley.com/go/distinctivedesign.

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 www.wiley.com/techsupport.

Part I: Designing for the Web

Chapter 1: The Distinction of Web Design

Principles and variables of a visually appealing layout

Creating the ideal, aesthetically pleasing, distinctive design seems like an impossible task to many. While most web industry fields have their own methodology to improve and yield results in the layout and the structure of the content, a few basic defining concepts underpin the whole process of forging beautiful designs. Essentially, the goal is to achieve maximum impact on users.

Within this first chapter, I highlight the justifications for creating a distinctive design, the variables affecting the end users, and the importance of visibility. In addition, I provide a solid introduction to critical basic design concepts, including neutrality or balance. I also explain how to emphasize the right content, how to prioritize and analyze content in order to clean up an interface (using tools like minimalism), and how to avoid conflict and inconsistencies with websites.

Taking You Back to Basics

Within the realm of user experience, complexity has become the enemy of the people. Often at the most basic level, the need to create more intrinsically dynamic and functional designs causes website visitation (and the users who browse those sites) to suffer. Although the concept of “designing with purpose” is nothing new, how people read and recognize objects, and how much attention people give to some components within a layout compared to others, can be summed up in the four words shown in Figure 1-1.

Figure 1-1: Each and every element asks, “Can you see me?”

Treating the elements of your website like a living, breathing entity may seem rather silly at first, but the visualization it produces accurately reflects the situation. Just picture each part of your site as someone within a crowd. The loudest individuals are shouting above everyone else. This clashing certainly results in quieter voices going unnoticed, even if that voice is important within the project’s context.

Gauging every object’s importance against the level of noise and distraction elsewhere on the page is central to assigning a level of purposeful distinction to your pages. Your users have a limited attention span, and by ensuring that the objects on the page have a well-balanced proportion of importance versus voice, you create a distinctive—and visible—design that people can enjoy and browse without constraint.

To learn more about the average Internet user’s attention span (or lack thereof), check out this article by usability specialist Jakob Nielsen: www.useit.com/alertbox/timeframes.html

If something is visibly useful to a page, assign more attention to it (see Figure 1-2). Less important items on a page require less attention. You have little time to impress visitors before they hit the Back button or look elsewhere. The exact amount of time is up for debate, ranging from zero points of a second, as people subconsciously pre-judge what they see, to five or ten seconds. Web professionals often forget that selective emphasis holds importance!

Figure 1-2: A stylistic flourish within a page often depicts emphasis and strength.

The balancing act can be quite tricky. You should analyze and self-critique your methods as well as ask others to give feedback. Even negative feedback is helpful; actually, in many cases, it’s more helpful than positive feedback. The justification for many design choices rests upon those four essential words (refer to Figure 1-1); by wielding such control over a page, you ensure users find what they want (or need) at the point they require it.

Remember that feedback is quite subjective (and should be taken with a grain of salt). Don’t implement changes that users request on a whim without a good reason. Some things can actually make a design worse, and the last thing you want to do is destroy all your hard work!

Time, space, and relativity

Understanding the needs of your content is central to the concept of distinctive design, but the user experience demands more than simple information visibility. Although an inanimate object, your content has a few primary needs that must be accounted for in the overall layout, such as visibility and accessibility. Many variables can affect the duration and extent of a visitor’s experience, and while some of these are more imposing than others, such as pesky browser bugs and page availability, some can be tied into human perceptions and the amount of resources or self-sacrifice web professionals choose to assign to a service.

Time, space, relativity, and other variables speak volumes to the finite resources humans often temporarily assign to a site for the duration of their stay. Each variable ties deeply into the other because they are often measured upon the perception of whether the effort exerted by visitors matches the importance level of other events going on around them.

Check out this list of finite resources:

>Time: There’s only 24 hours in a day, and users rarely spend all of those browsing a single site. How much of this precious resource a visitor uses on your site depends on the value of the content.

>Space: The freedom to browse a site without inhibition is important to the overall user experience. If users feel restricted or forced into jumping through unnecessary hoops, they may exit!

>Relativity: The relationship between content and sites is important to the web. If a site’s content connects to a concept or subject introduced by another site, it may gain added attention.

>Money: Services with defined costs have to work even harder than free or ad-supported sites for attention. Since the content is provided behind a “paywall”, money is needed to gain visibility.

>Patience: The average visitor feels a great variety of emotions when browsing a site (some of which you can manipulate). If barriers to entry are high, the willingness to continue may be lost.

>Attention: Objects on a page are always vying for a user’s focus, and in polar opposition, users are themselves trying to get the attention they require from objects. This must be accounted for.

>Loyalty: By providing good experiences and reducing the levels of background noise, users are more likely to return to our sites.

>Trust: Use of a site is based on the value of its content and how reliable users deem its source. If your content is full of lies or inaccuracies, the content’s value is lowered.

>Energy: Users are expected to undertake so many activities within a page. Clicking, typing, and perhaps even more! Tiredness can work as an inhibitor when browsing the web. Don’t make users exert themselves.

These end-user functions (rather than controls of an interface) are subjective to every individual, but this doesn’t mean that they can’t be accounted for or measured. Don’t assume, for example, that visitors can (or want) to spend hours looking over a 5,000-page site filled with content. (Admit it: You’d lose your sanity if you had to scroll through them, so why would you torture someone else with such a process?) The balance between distinction and the variables mentioned earlier is important to get right; the two relate quite heavily to each other.

Making a website fun and engaging is among the best methods of distorting the time field of an end-user. People regularly waste endless hours playing games on the web, and if you are a creative individual, you can provide that sort of experience (and functionality) on your own site!

Albert Einstein once said, “Put your hand on a hot stove for a minute, and it seems like an hour. Sit with a pretty girl for an hour, and it seems like a minute. THAT’S relativity”. Einstein’s quote is a perfect reminder that a user’s experience should not be painful or unendurable to the point of feeling abandoned. A visitor shouldn’t feel useless in her quest for information. More importantly, it also shows that you can manipulate the variables that people use to measure your work’s value (such as time and trust) and affect the impact upon a user (see Figure 1-3 for an example).

Figure 1-3: Straightforward forms are much less time-intensive than complex documents.

Distinctive design influences the time it takes to locate important details within a page. It also sets the tone for how tedious or enjoyable finding that information is (and by association causes relativity to take effect). Understanding the connection between the actual amount of time visitors devote to your site and the perception of time they devote to your site provides you a rare opportunity to stand out, which, in turn, gives visitors the desire to return.

Consider the amount of time you spend playing a game in comparison to undertaking a job you don’t find particularly enjoyable. As you spend time doing something you enjoy, the focus you place on time spent is reduced, much like the famous saying “time flies when you’re having fun.” The “time flies” ideology (known as “Tempus Fugit”) is a classic example of how variables can be manipulated to encourage continued use.

Information must be visible within the confinements of the page it’s held in, or else the distinctive focus that may be drawn simply cannot exist. If you create a page that includes content or features with low visibility, (like creating elements that inadvertently minimize other elements’ importance or you intentionally apply a negative emphasis to certain content or features), the content lacking visibility inherently diminishes in importance in the end-user’s experience and could result in users missing the message.

Defining the ideal perspective

Of the variables and principles that impact your capability to serve visitors effectively, the most common failures occur as a result of either obtrusive subjectivity (doing what you think is best for the end-user rather than what actually may be the case) or a lack of attention to detail. Appealing to the widest possible audience is critical to underpinning a distinctive design. The concept of a best-case scenario puts forth the idea that if you aim to design in ways that will generally apply to all users, you reduce the chance of confusion. Distinction isn’t about just standing out. It’s also about aesthetics and providing a visual appeal to match the visitor’s plentiful expectations!

Many people (excluding seasoned web professionals) confuse professionalism with the visuals or aesthetic a website provides. The public associates quality products with quality layouts! Unfortunately, spammers and scammers regularly exploit this assumption by creating slick designs.

A beautiful website engages more visitors, and an unattractive website gives off the impression of unprofessionalism, making users turn away as a result. Distinctive design showcases and attempts to reflect the need for a balance between beauty, usability, and awareness within the pages’ unique layout. The immediate beauty of a page (just like human attraction) is great for the short term, but substance over style and the attributes that make your site great and unique are critical to a long and happy visitor relationship.

This may seem worrisome to some people, who may feel that trying to make something beautiful, unique, distinctive, and usable—all in one package—is close to impossible. It’s actually easier to make a beautiful website once you know how (Figure 1-4 gives us a quick three-step process). If you build a website that is usable, the content’s identity will be visible to those who read your copy. If your content portrays your site with depth and richness, viewers can identify with these characteristics. And if your site is distinctive, the uniqueness and aesthetic identity can be formed around it. Like with most things in life, it’s a case of everything in moderation!

Granted, this is a best-case scenario, and there may be times when you may think that no perfect solution exists (perhaps one good solution has not yet been innovated), but you can compromise those ideals to a certain extent, as long as the final effect nets you the intended response. Perfection isn’t possible in design (several factors cause a lack of control over the rendering canvas), but that doesn’t mean you can’t keep improving things to reflect the experience as optimally as possible (even though the web isn’t print).

Figure 1-4: Building a distinctive and beautiful website is simpler than it may appear.

Designing with Neutrality

Beyond the variables I have previously mentioned relating to distinctive design and the idealistic intentions they naturally seem to evoke in giving your visitors everything (with as few consequences as possible!), the principles of how distinction is formed relate to a range of certain design concepts that exist not only within the context of the web, but also within the scope of print design. Of course, digital media and traditional print are quite different in their capabilities and limitations, but some useful lessons can be drawn from the study of concepts that branch both disciplines.

One of the biggest variables that influence distinctive design (and the print world alike) is the concept of neutrality (and the Zen-like state it produces). As you’re still balancing within the realms of theory rather than practice, it may seem surprising that neutralizing visible elements of the page (and making them less visible or attention-seeking) plays a part in achieving distinction. But if you think about it, without balance, chaos reigns supreme!

Thinking of your website in a Zen-like format helps you understand that to ensure a clear and enlightened perception (both in giving accurate knowledge and being easy to follow) you need to self-reflect upon the issue at hand. As a designer, you need to analyze the choices you make for the benefit of your visitors, and you also need to provide a clear method of showcasing wisdom through careful planning and resourcefulness.

The principles of a Zen-like design are:

> Keep the components of your site’s visibility in balance.

> Consider your options wisely before you apply them.

> Keep your visitors enlightened (offer them knowledge).

> Maintain clarity and reduce noise pollution.

Implementing the Zen concept within distinctive design and following the ideals of a neutral interface is relatively straightforward. Designs composed of well-balanced content (in which the required distinctive features take precedence over less useful information) allow you to draw focus to the parts of a page that require attention. Reducing noise pollution on a page and giving that balance where it’s required keeps distinctive content—well—distinctive and lets the rest be calm, silent material that remains on the page but is noticed only as further page inspections occur.

Beautiful balance

Taking the concept of Zen neutrality beyond what was previously mentioned, a design that is clear in its separation of distinctive design elements from additional flourishes or extended attributes, gives your design added stability. The elements of your website are weighted (much like those in Figure 1-5) with distinctive elements holding more natural weight and value on one side and the other content balanced on the other. If the level of distinction either equals or extends beyond the neutral (less unique) content, the power of its influence lessens.

Figure 1-5: Although the balance may be offset, the need to complement such elements remains critical.

When looking at existing layouts, an unnatural balance must exist between a design and the emphasis (unique components) within a page. And just like Earth, if something is thrown seriously out of whack, it seems to naturally correct itself by reducing the strength of emphasis in which attention-seeking content retains. On a page with paragraphs of text and a single heading, that heading’s distinctive nature stands away from the page (yet, if the page includes several headings, none stands out). This is due to how humans are naturally attracted to uncommon sights. Gaining a user’s eye requires a clever mix of eye candy and offsetting the layouts equilibrium.

If all of your content has little to no emphasis (such as just paragraphs of text), the readability of that content is diluted to a neutral level. Yet, if you have too much emphasis (such as stuffing everything into headings like in Figure 1-6), the strength you intend to attain dilutes itself! Only when the critical mass is reached will emphasis and strength sustain itself.

Figure 1-6: If you place emphasis everywhere, nothing stands out.

Before leaving the concept of balance (for the moment), it’s important to highlight the value of eliminating or repositioning balance whenever possible. The key to gaining a visitor’s attention is to provide distinctive content, but neutrality is the direct opposite of this. The trick to good design is to provide as much distinction as you can, without pushing it too far (and diluting the effect).

You can apply distinction in many ways, including use of color, whitespace, and more! What this means is that if you’re smart enough to apply emphasis equally through various means, rather than on one aesthetic point, you make your content distinctive without risking the issue of over-dilution. Generally, dilution only occurs visually with a lack of context within its implementation, not just as a result of an abundance of balanced objects.

Emphasizing the essentials

If you’ve been coding with HTML for a while or have any experience with producing websites, you should already know that certain HTML elements provided within the W3C specifications, such as strong and em, provide visual emphasis not just on the screen within the browser window (with default styles that can be overwritten) but in context within the content itself.

For those without coding experience, HTML stands for Hypertext Markup Language. It is the primary language web designers use to structure content within a page. Think of it as the candy wrapper that holds the goodness in pretty, identifiable containers (if they are labeled correctly)!

Taking the principle of emphasis beyond the context and restraints of the HTML language, providing a flourish or distinctive marker helps users recognize a point of importance. You can emphasize a particular element in a number of ways, as long as it stands out from its surroundings. Because emphasis remains at its strongest when it stands with fewer competitors for attention, give only essential content this critical boost in visibility. Used sparingly and appropriately, emphasis can draw attention quite quickly.

Some methods of providing distinction are quite direct and in-your-face; other methods can be quite subtle. While subtle methods take longer to be recognized, it’s quite likely that they are more reliable. The proliferation of advertising that fights for people’s attention illustrates this theory, because people tend to develop a level of “immunity” to patterns they recognize as negative (users automatically mentally block out blatant advertisements). See Figure 1-7.

Figure 1-7: An advertisement like this won’t hold your attention if you know it’s trying to sell something.

One of the principles maintained through this book is that content must be emphasized tastefully, with serious consideration about how your visitors may be affected by the increased level of awareness to one item (against the lessened awareness of other content). Remember that balance affects your content and the value it inherits. Your goal is to ensure that viewers regard the obvious material on a page as useful, not as a blatant spam attempt.

Opinions may vary on the extent you can emphasize content, but it’s recommended that unless you know what you’re doing, avoid forced actions such as pop-up windows, protection scripts (like anti-right-clickers), and the ever-annoying automatic music-playing jukeboxes.

Negotiating neutrality

When you remove emphasis from a page, what remains will increase in strength. Using neutrality effectively is an inspired concept, isn’t it? In many ways it’s like a talent contest. When fewer people enter, it’s much easier to identify the most talented individuals, but as the numbers increase designers rely more on comparison and elimination (perhaps unjustly) to give ourselves the best chance of finding the stars amongst the masses.

Focusing on what’s on the page and what already has emphasis is easy (because attention grabbing is what it intends to do). But the capability to disinherit and demote enhancements and flourishes (while involving some difficult choices) can both reduce the level of noise that exists within an interface and bring some stability to the page (Figure 1-8 highlights how attention is spread). The more neutrality you assign, the more direct the effects are upon content that retains its status and levels of importance.

If you already have a website, strip away all of the excess, both graphically and contextually (from existing emphasis). Once your content sits on an unstyled and visibly similar page, it becomes easier to see when you have an excess of information, thereby making your distinctive content harder for the reader to identify. This action could encourage you to apply emphasis more intelligently or with greater constraint. By doing this you deconstruct the aesthetic using reductionism (a principle examined later in this chapter).

Whenever you change your source code (or critical files like images), make a backup or use a version control system just in case you need to return to the older edition later! It’s common sense to safeguard your work, especially if you’re making potentially dramatic changes to it.

Figure 1-8: Balancing a page using less-emphasized content (of various types) redirects attention.

So far, you have seen the benefits of becoming Zen-like in your design approach by redrawing the balance when you feel it can improve the way information is conveyed, and by balancing neutrality and emphasis, which reflects the opposing sides of attention- focusing. In the next section, I go over the more straightforward principle of simplicity. It is one of the most primal methodological forces for improving the distinction of what remains visible on-screen (and without it, things would get very cluttered indeed).

The Sum of All Parts

Holding your visitor’s attention with plenty of active elements on a page can be difficult. Because distractions on a page can reduce the visibility of key information, it’s important to preserve the integrity of the emphasized content that already exists. If adding emphasis to such content seems like the only answer to your problems, never fear; there is a less popular but equally powerful way to give a cluster of content emphasis. That method is to take away any unnecessary clutter from the website’s foreground and background (think of it as spring cleaning for your visitor’s benefit).

For every element, property, and function, keep asking if what’s sitting within your pages is really necessary. If you can’t justify it, remove it entirely! Or if you need to include it on the page, you can progressively disclose it as required (making it visible only when it’s needed onscreen).

With increasing techniques to provide content on demand, the capability to perform such a function has become more widespread and popular. A website is essentially the composition of its many parts joining together in harmony. Distinctive designers need to reduce information overload and simplify the overall experience. Luckily for us, the web is evolving rapidly in ways that are helping you to achieve the design goals you set ourselves.

Perhaps because of its implications in search engine optimization or the assumption that more is better, removing emphasis (thereby stating some content is less important) or objects from the page can be quite a scary prospect. Simplifying the interface and maximizing the use of the space is critical to reduce unnecessary content removal. Instead of purging the material entirely, you can hide the content until necessary.

Methods that give content on demand a fresh appeal include:

> CSS3 selectors (like target or checked)

> JavaScript and JS libraries (like jQuery)

> AJAX (which has wide browser support)

An interface with fewer components inherently has fewer elements fighting for space and visual recognition. Such an interface also encourages visitors to read the full page rather than scan it. Don’t be afraid to use some of the effective tools in the modern designer’s toolkit—simplifying the interface, reducing content (or emphasizing the content’s value in more efficient ways), clearing out any unhelpful or boring content, and heuristically assigning value (thereby temporarily hiding less valuable assets).

For those without coding experience, CSS stands for Cascading Style Sheets and represents the visual style. JavaScript is used to control behavior-based events, and AJAX is a method of processing data between a user and the host’s machine. All three can help you avoid page refreshes and provide a seamless, content-packed experience!

Beautiful emptiness

Picture an empty website void of content, graphics, color, and every other asset of emphasis and distinction you can include. This emptiness may seem boring, but it actually showcases one of the most primal and fundamental aspects of design. Emptiness and space can be beautiful (see Figure 1-9 for a lovely example of how an empty space could appear). Such a visual representation is the epiphany of balance and a Zen state of being. If anything were to be added to it, the distinction would be at its strongest.

Figure 1-9: This is one of the cleanest environments known to man . . . a blank website.

Obviously, as a web designer, you are required to include content or items of interest for the visitor, and this coincidently means the addition of material to your once derelict yet simplified blank page. Clean can be very beautiful, but context and richness have more value! One beautiful example of simplicity in effect is the www.madebysofa.com site, which shows that combining quality content with a basic layout can still be rich in distinction.

Individuals building a website from the ground up, in which nothing is set in stone, should take time to examine not only what options are available to provide emphasis where it’s needed, but also to refrain from applying stylistic, graphical, structural, or behavioral emphasis and distinction within the web page unless absolutely sure. If you can get away with simpler, it may work to your users’ benefit.

Individuals adapting an existing site to make it more distinctive (and perhaps more valuable to the visitor) should consider reformatting all of the content back to a neutral state like plain text. Otherwise, you can simply examine the various individual components of your site and decide on individual changes as needed.

How you choose to transform the emptiness or existing construction into an elegant and optimized environment is up to you. (Figure 1-10 shows a basic example of how a more technical interface can be simplified.) What is great about distinctive design is that you can implement it progressively over a period of time, or you can use it as a basis for a design built from the ground up. The result of your work will be an interface that benefits more users.

Figure 1-10: Progressively enhancing or gracefully degrading, both are great design philosophies.

Sanitizing the interface

Four primary methods accurately depict how to remove content that is otherwise deemed unnecessary from an interface in order to better portray the content that already exists. Although each tends to come with a varying set of definitions (as everyone seems to have a different interpretation of its meaning), they all play an essential role in design. Figure 1-11 identifies the bond each has to the design process.

Figure 1-11: The four cornerstones of distinctive cleaning. If it isn’t needed, it should disappear!

Simplicity

Simplicity is one of the most fundamental aspects of a clean and efficient user experience. The acronyms KISS (“Keep it simple, stupid!”) and YAGNI (“You ain’t gonna need it”) explain this principle in a highly direct method. Making things overly complex irritates users, and unless you genuinely need a function or a visual representation in the interface, don’t add it. If there is a way to achieve something on the page with fewer objects, elements or visual points of interest, it’s worth doing, as the likelihood for distraction will be minimized.

Minimalism

Minimalism is a method thatencourages simplicity by preventing the enhancement of elements until it is required. It is about taking something of existing complexity (like an existing site) and stripping away every element that doesn’t need to be complex. This concept aims to deconstruct and improve the site with fewer or an equal number of features of the same complexity level. With simplicity, you aim to strip existing objects down into their core components. In minimalism, you start with only what’s necessary and build upon that (when improvement is demanded).

Reductionism

Reductionism follows a more scientific process than the previous two; it is the idea that if something complex is taken and reduced to its most fundamental parts, you can better understand its nature. Within the scope of distinctive design, you find that if you investigate how particular parts of a site function, you can determine where emphasis may occur. From there, you learn to improve the object. As an example, take the search engine results page. Consider where your eyes are naturally drawn. Decide if that’s where you would like your visitor to look or if it should be changed.

Holism

Finally, it’s worth noting the holistic approach, which acts in opposition to reductionist theories (within design). Aristotle said that “the whole is more than the sum of its parts,” and within the concept of design, this often holds true. Although you can reduce a site down to a basic level to understand how things function, you need to visualize those parts in context of the whole page. Never just assume that making a site simpler or smarter will resolve every problem, because some issues result from outside influences that are difficult to measure. This effect is magnified on the web.

When assigning a level of importance to the components of your website, separate text from images and other forms of media (providing their distinction levels) because the level of emphasis a video and other input mediums (like audio) endure are far greater than what text provides.

Being Consistent is Critical

Consistency is an important aspect of a web interface. With regard to your visitors and audience, learning new things can be a particularly scary idea if they are forced to use trial and error to find what they are looking for. One of the main reasons why most websites don’t have a totally different look for every page is that visitors need to effectively navigate around a page without getting lost (imagine the learning curve if every page is visually different).

Visitors often scan a page to proactively seek what they are interested in (rather than reading a page in full, as shown in Figure 1-12). They are more likely to use a mixture of guesswork and quick responsive selections to find the closest match to their needs. If they don’t find what they’re looking for, they’ll return to the original starting page to try again. They are even more inclined to guesswork in an attempt to speed up the results. Although this erratic style of behavior may seem impossible to assist, clearly defined, well-labeled, distinctive layouts work wonders.

Figure 1-12: As your visitors scan for specific keywords, their focus ignores what doesn’t associate.

If your visitors are fairly inexperienced with technology (as many Internet users are), they probably depend on conventions or trends (recognizable objects on the page like navigation menus and clickable logos) to help them navigate around a site. Major changes between designs or pages can therefore lead to widespread confusion. To quote Homer Simpson, “In times of trouble you’ve got to go with what you know.” That’s precisely what users do. If they feel something is too hard or inconsistent (and you have competition), they leave to find an easier source of information!

Although it does not apply to everyone, the numbers of users who scan information for relevance first and read second are in the vast majority. This may be related to the reduced amount of free time people generally have (though research with exact figures is limited).

Part of the justification for emphasis within a website is to lead your visitors by the hand and guide them to the content that matters most to them. Titles within page sections aim to give visitors an idea of where certain data is located; images and navigation menus help visitors get to a resource they require; and even conventions like the underlined link (as shown in Figure 1-13) helps visitors establish whether they need to click or continue reading!

Figure 1-13: The default underlined link is often depicted by a selection of browser-induced trends.

Distinctively barrier-free

The problem of inconsistent design forces website visitors to re-evaluate everything they know about an interface, which isn’t helpful because you want to keep the process as smooth and streamlined as possible, but punishing your users by accident can also be a problem that many designers fail to account for. Overcomplicated visuals, dense or heavy content, and invasive or abusive functionality disrupt the flow and distinction.

One clear example of this problem in action is the issue of repetition. As users examine the distinctive regions of your site in order to associate that location and content with a specific function (such as a navigation menu), confusion occurs if repetition exists in another format. For example, many advertisers use these techniques to fool visitors into thinking that their computers’ security may suddenly be at risk.

Arguably, using existing distinctive elements may yield results from individuals who progress throughout a site without thinking, but the need for ethical practices in promoting distinction takes precedence. If you produce a distinctive page element that misguides the visitor, that user’s trust in your brand (and any other distinctive elements within the site) may be permanently damaged, thereby turning the distinction into a negative.

On rare occasions, a distinctive design can suffer a negative impact. This is only caused when the visitor’s finite resources suffer and run dry (such as a lack of trust or loyalty to a particular brand). Avoiding such events will be straightforward if you follow any prescribed guidelines.

No visitor wants to endure the frustration of trying to adapt their skill set to match your site’s requirements. Allowing a visitor to drift among the elements of your site undisturbed requires the capability to navigate around a site “brainlessly” (without thinking twice). A user’s satisfaction increases if they have few obstacles to work through, and the barrier to entry is as unobtrusive (or intrusive) as possible, so it’s worth the effort. In Figure 1-14 you can see how simple page numbering provides some sense of the site’s depth to help users make basic, yet informed, choices.

Figure 1-14: Page numbering within a blog helps visitors know how long an article might be.

When a site provides barriers to entry or an inconsistent, non-transitional interface, the visitor is likely to become reliant on interpreting (usually on a whim) the exact nature or depth of the content being explored. This coping mechanism of trying to stumble on what he or she is looking for usually comes at the cost of reducing the user’s patience, making him or her feel inferior, and increasing the risk of a fast exit. Consider a popular site like Amazon. The sheer number of products acts as a barrier to entry as browsing without a product in mind could lead you into spending days stumbling around one category listing.

Consequences of distinction