Clean Up Your Mess: a Guide to Visual Design for Everyone

Have a look at the two flyers below. Which one is more appealing to you? Which one looks cleaner?

If the one on the right looks cleaner to you, then – hooray! I've done my job. But what does it mean to "look cleaner"?

Whatever you're creating — a brochure, a resume, a web page, a party invitation — the basic purpose it must serve is to convey the information your audience is interested in. It must help your audience answer questions like "Is this document the one I'm looking for?" and "What text explains this chart?" and "By what time is the ransom due?" For example, the aikido flyer helps people answer, "What's this about?" and "When is it?" and "Where is it?".

The two versions of the flyer provide the exact same information. The one on the right, however, makes it easier for people to find that information.

That flyer is clean, then, because it helps people find and consume the information within it with less conscious effort. It's designed so that its visual qualities allow the brain's visual thinking capabilities to make correct assumptions about how the different bits of content are organized and about what's relevant.

This is desirable because visual thinking happens much more quickly than conscious, step-by-step logical thinking. For example, if you wanted to understand what the main ideas were from just the text of the aikido flyers, it would take much longer and be more tedious than it would to use even the "messy" flyer. You can see for yourself by looking at the text to the right.

To answer the question "What is clean design?" most succinctly: a clean design is one that supports visual thinking so people can meet their informational needs with a minimum of conscious effort.

People have the same basic informational needs when looking at a document you've designed:

1. Deciding relevance. Do I even care?
2. Getting an overview. What are the main ideas? What's most important?
3. Basic comprehension. What text explains this chart?
4. Retrieving buried details. I remember something about an orangutan... where was that?
5. Finding actionable details. How do I get in touch?

The informational needs of a single person will usually evolve in roughly the order listed above. For example, if someone's looking at a brochure, his thought process might be something like:

1. What's this brochure about? Hm... looks like it's about phrenology. I need a phrenologist!
2. What services do they provide? Are they certified? Are they local? My heavens — yes, yes, and yes!
3. How do I get in touch? Oh goody, there's the phone number! I'll call when I get home.
4. (Later, at home) Now where was that number...

The important thing to remember is that you're not making your whatever-it-is-you're-making for you. You're making it to help someone else find the information she needs.

You convey information by the way you arrange a design's elements in relation to each other. This information is understood immediately, if not consciously, by the people viewing your designs. This is great if the visual relationships are obvious and accurate, but if they're not, your audience is going to get confused. They'll have to examine your work carefully, going back and forth between the different parts to make sure they understand.

If you want to feel what this is like, try saying the colors of the words to the right. For example, for the first word you would say "red". Now, try saying the words themselves. Does your brain hurt yet?

It's harder to say the color of each word than it is to say the word itself because our brains automatically determine the semantic meaning of the word. This conflicts with the identification of the color of the word, a process which is not automatic. Our brains must then resolve the conflicting interpretations of the visual stimuli, a process which takes work. (This is known as the Stroop Effect.)

When you're creating a document, you want to eliminate these conflicts between automatically perceived meaning and actual meaning. The rest of this guide is dedicated to doing just that by explaining three visual features: size, proximity, and alignment. It will also explain a valuable tool: elimination. But before that...

The basic cause of messy design is slight, unintentional differences among elements. This causes your brain's visual processing to falter. First, your brain has to determine if there actually is a visual difference. Then, it has to determine the significance of that difference. Because the small discrepancies don't actually signify anything, you end up wasting your audience's brainpower. Strive for a consistent visual style where elements which are logically similar look similar to each other and look unambiguously different otherwise.

You can see this in the image at the right. In each set, a black dot differs in size and a green dot differs in color (well it's no longer green in the bottom set, but you get the picture). By using clear, intentional contrast, it's easier to distinguish the different kinds of elements in your design. That makes it easier to find information. And that's what makes clean design.

Have another look at the aikido flyers:

How do they use size differently? How do the differences contribute (or detract from) their understandability?

There are two main differences in how size is used between the two flyers. First, the contrast between the header text and the details is much greater; the header text is much larger. Second, size is used consistently among similar elements.

These improvements serve to clearly reveal the roles of the different bits of text. The improved flyer makes it clear what's header text and what's detail text. Even if the text were in another language, you would be able to differentiate the headers from the details.

Can you say the same about the original? It has slight changes in font size between one block of text and the next, and no two blocks look quite alike.

For example, the block starting with "Please come and visit" is slightly smaller, but in all caps and bold. Can you easily tell what's header text and what's detail text?

Why is it important to make these roles (in this case, header and detail) obvious? Making these roles visually distinct helps people find the info they need. We rely on headers to help us get an idea of what the document's about. We also use them to narrow in on the details we're most interested in. At the same time, we know to pay less attention to headers when we're going through detail text.

Using size to clearly distinguish the roles of the different bits of content helps people efficiently direct their attention. They know what to focus on and what to ignore, depending on what they're looking for.

You can see the same idea at work at a supermarket. The aisle signs act as headers — they're short, readily noticeable, and they're meant to help you find the brownie mix that you're for some reason craving at 2:00 am.

Identify the roles of your visual elements.

What purposes do the different bits of text serve? What questions do they help answer? Headers answer questions like "what is this about?" and "where is the contact info?"

Size elements consistently.

Headers should look like other headers. Detail text should look like other detail text. Small variations in size are confusing, because the brain has to figure out if the differences are meaningful.

Provide strong contrast between elements with different roles.

This helps people easily identify the different kinds of content in your design, and that helps them find the information they need.

Have a look at the kittens below:

When you looked at the collection on the right, did you immediately recognize that there are two groups of kittens? How about the collection on the left - are the kittens grouped?

When we see kittens (or any other visual elements) placed closely to each other our brains immediately assume that they form a group sharing a unifying concept. The kittens to the right are grouped by color — grey on the bottom, non-grey on the top.

By grouping related content and visuals together you help the user quickly find the information he needs. To prevent confusion and frustration, group elements which are actually related. That sounds obvious, but it's easy to forget.

Examples of this concept abound. For myself, I have this great habit of absent-mindedly setting down whatever's in my hand wherever I am. This once resulted in my leaving an open can of cat food in a cupboard amongst piles of tupperware. This made it hard to later find the cat food, as it was not in close proximity to the cat dish or to anything remotely related to feeding cats.

I know what you're thinking: "That's gross! Why would you include that story?" I'll tell you why: it's so you'll think twice before you misuse or abuse proximity in your designs.

Check out the photos to the right. In the left group, you can't really tell who the caption applies to. Which guy has a complicated relationship to hotdogs!? You don't really know. Maybe you can guess based on their facial expressions and on your own experience with hotdogs.

In the right group, however, you can see exactly which photo the caption is meant to apply to.

The lesson is that you should leave much more whitespace between non-related elements than related elements in order to make the logical groupings visually clear.

Place related items close to each other.

Our visual brains assume that items placed close to each other form logically related groups.

Make sure the grouping is obvious.

Put enough whitespace between groups to make it clear what elements are actually grouped together. Otherwise people have to go through the trouble of closely examining your design to figure out what goes with what.

Alignment is crucial to giving your designs a clean appearance and to conveying organization. Slight misalignments are confusing and look messy. On the other hand, using strongly contrasting alignments can make your design more interesting and attractive.

Alignment is one of those features that's easy to overlook — newbies usually don't give any conscious attention to it. However, you can really change the character of your design by changing the alignment.

Time for an example! Behold!

The slight misalignments in the leftmost "ad" make it look sloppy. If there's one thing you should have learned by now, it's that small, unintentional visual differences are like sand in the engine of your visual brain.

Our brains expect related content to be lined up neatly. If something is slightly out of line, our brains assume there's a reason and try to find it. Since the last line of the ad ("Trapping Hands...") is out of line, our brains search for a reason. When they don't find one they send out minute amounts of grumpiness-inducing chemicals that cause us to consider the ad sloppy.

The center ad employs center alignment and doesn't look much better. To be fair, it's not completely centered, but even if it were it would look bad. Centering gives text ragged left and right edges, which look worse the more text there is.

In general, the uncouth barbarians who haven't read this guide are especially prone to center-aligning everything. You can see this in the original aikido flyer, shown to the right.

Often, the best bet is to use left- or right-alignment. You can see left-alignment in the rightmost "Acatemy of Evil" ad. It won't win any awards, but it does look better than the other two ads.

You can make designs look more interesting out by intentionally using different alignments. Have a look at the image to the right.

The headlines "A Checklist for Content Work" and "CSS Floats 101" are centered, as are their bylines. By contrast, the headline "Content-tious Strategy" is left-aligned.

This difference in centering subtly helps to distinguish the content in the left column, indicating that it's more noteworthy than the content in the right column. There are other visual features at play, too. For example, the headlines in the left column are slightly larger and the column is wider. Still, the center alignment is a nice touch.

By the way, this example is a cropped screen shot of the A List Apart home page. The web site exhibits superb design, and you can learn a lot just by looking at it.

Avoid Slight Misalignments

Slight misalignments look messy. Because the brain thinks that visual differences mean something, a misalignment makes it waste effort trying to figure out the meaning.

Break Your Center Alignment Habit

Center alignment often gives a much "weaker" impression than left or right alignment. It looks especially bad with many lines of text.

Experiment With Contrasting Alignments

Consciously using different alignments in your design can serve to make it look more interesting. It can also make it easier for people to find information in it by further distinguishing the separate sections.

Often, people add extra lines, boxes, bullets and other visual flotsam in order to convey information that's adequately conveyed with Size, Proximity and Alignment. Including this fluff makes your user’s brain work harder, as it has to figure out the significance of these elements. For example:

Ah yes, our trusty aikido flyers. See how the original flyer has a bunch of lines? Some of the lines act as boundaries, enclosing the entire space and dividing the left and right sections. The rest of the lines separate sub-sections.

All of the lines are thoroughly unnecessary. Proximity and alignment alone provide our visual brains with enough information to distinguish the various chunks of content.

Usually the folks who add these unneeded visual elements do so because there's too much crammed in the design. It's like when you're at a bar and the people around you are talking loudly, so you start talking louder, so they start talking louder, and so on until everyone passes out or goes home.

The solution isn't to add more noise to the design. If instead you use what you've learned here — Size, Proximity, and Alignment — you'll end up with a design that's a pleasure to look at.

There's so much more to design! Color, typography, harmony, balance, symmetry, rhythm — the list goes on and on, and it's all super fun. The best way to really "get" design, though, is to do it. Just like pickle backs (google it!).

One of my favorite pastimes is analyzing the visual design of the stuff I encounter in everyday life. Menus are probably my favorite target: is it easy to tell which price goes with which item? Is it easy to find the dish I want?

It's also fun to keep an eye out for designs produced by average Joes and Janes. Basically anything you'd see tacked to a public cork board.

I recommend you take up this practice. Ask yourself what you would do differently. Could you make it cleaner? What would you remove? You can start with this web site, even. What could be made clearer? Could the flyers be improved?

You could also ask to critique the work of your co-workers, or have them critique yours. If you have time, try to redesign their work to see if you can make it look cleaner and clearer.

Another great way to learn more is to read design books. As you learn more design concepts, you'll be able to notice them in other designs and apply them in your own. Fun!

Below is a list of books I've read myself which I consider useful for beginners. If you click the links I provide and buy stuff, then Amazon gives me some money. Hooray!

Universal Principles of Design

by William Lidwell, Kritina Holden, and Jill Butler

One of the biggest challenges in learning a new discipline is learning the vocabulary. This book gives you the names for 125 design concepts, with great textual descriptions of the concept and plenty of illustrations. Coverage is succinct and engaging at the same time.

The best thing about this book is that it lends itself to random reading. Pop it open to any page and you'll learn something new.
Buy on Amazon

The Non-Designer's Design Book

by Robin Williams

This was the first design book I read. It opened my eyes to the world of design, for which I'm very grateful. Robin covers some of the same material as I cover here, but in a different way.

The book also covers typography, and I still think it's the best beginner's guide out there. Worth it for that alone. You can probably find an older edition for a couple bucks.
Buy on Amazon

Don't Make Me Think

by Steve Krug

This is a quick and readable book on web usability. It really made me understand that design isn't about me trying to show off my creative ability; it's about meeting the needs of your users.

It's a must-have for web developers, but I think almost everyone else would find it interesting too.
Buy on Amazon

Visual Thinking for Design

by Colin Ware

If you're interested in the underlying mechanics of visual perception and how to bring that to design, this is the book for you. The scientific discussion of design will tell you, at the deepest level, why different techniques and principles work.

It assumes a degree of familiarity with design concepts, but don't let that deter you, especially now that you've read this guide!
Buy on Amazon

Here are some additional links which I've hastily thrown together:

• The Elements of Typographic Style Applied to the Web
• History of Graphic Design

I hope that you've found this guide informative and entertaining. More than that, I hope you'll feel more creative and confident the next time you have to create any form of visual communication.

I intentionally made this site free. I love design, and want to share that love with as many people as possible. If the site was helpful to you, share it with others :) It makes me happy to know that my work is in some small way helping people. I'd love to hear any feedback on it, either through email, twitter (@nonrecursive), or on the discussion page. If you have any questions or criticism, I would love to hear that too.

Happy designing!

A lot of people took time to give me feedback on this site, for which I am very grateful. Here they are!

• Pat Shaughnessy
• Alex Rothenberg
• Daniel Rodriguez
• Jess Bulu
• Lea Downing
• Su Jones
• Chris Laws
• Nicole Rose
• Nadir Ait-Laoussine
• Zed Shaw
• Chad Wegner

This site is Copyright © 2011 by Daniel Higginbotham. Email him or tweet @nonrecursive.