To design a page that’s easy to understand, you have to discriminate. That’s right: I’m advocating information discrimination. Deciding on a hierarchy for your information – from most important to least important – will help you decide how to place things, how large, bold or colorful they should be, and where you should put them on your screen or page.
Imagine this Scenario
Let’s say you have a big sale coming up on blue widgets. The new “in” color is orange, and you need to move the blue ones out of your warehouse to make room for new merchandise. Time to mark them down, and publicize the sale.
These are top-quality widgets and you’ve never before offered them at such a low price, so you decide to emphasize the low price in your ad.
You also need to tell people the sale ends next Monday, supplies are limited, first-come first-served, your address, phone, and web site. For those who aren’t familiar with your product you should probably include a short description of it. Oh yes, and it must fit in a quarter page newspaper ad.
The Usual Approach
The usual approach to designing this ad is above. Have you seen an ad like this in your local newspaper? I know I have! This is what most of them look like. Readers tend to look away and move on to something more engaging.
Why is it bad? Let us count the ways:
- Too much text in all capital letters and uneven word spacing makes it hard to read
- What is it selling? It looks like it’s selling a sale (not a product)
- The ad is so crowded, there’s no room for the phone number
The Better Approach: Create Hierarchy
To create an effective and inviting ad, use information discrimination, and create a hierarchy of importance:
- Most important information: Price
- Next most important information: Description; sale ends Monday; where to buy
- Least important information: Limited quantities; first-come, first-served
The next step is to design your visual presentation to represent this hierarchy.
Here’s a second approach to this ad. There’s a clear hierarchy to the way the information is presented. The design uses plenty of white space (read more about white space here). White space makes the ad more inviting, especially on a crowded newspaper page.
This approach can be used for web pages, advertising and any print material (not just ads). Before you put text or images on a page, use information discrimination to design a hierarchy of importance. Once you do this, you’ll know how to present things visually so that your design informs, motivates and sells.
Design 101
This is the eighth in a series of ten lessons called “Design 101.”
The next lesson will cover photography and illustration, and give you some tips for choosing, using and making the most of both.
Get this series delivered to your email inbox so you don’t miss a lesson: enter your name and email at the top of the right column and blog updates will be delivered automatically.
Did you miss the other lessons? Find them all here:
1] Design 101: Marketing Begins with the Eyes
2] Design 101: How to Daydream Your Way to Marketing Success
3] Design 101: Storyselling for Fun and Profit
4] Design 101: 7 Typographic Resources, and 1 Type Joke
5] Design 101: Harness the Power of Color in Your Marketing
6] Design 101: Make it Easy to Consume Your Information with White Space
7] Design 101: Toe the Line: The Lazy Way to Design
8] Design 101: Successful Design: Who’s In Charge Here?
9] Design 101: Don’t Write a Thousand Words, Use an Image
10] Design 101: A Cheat Sheet That Will Keep Your Honest
{ 8 comments… read them below or add one }
It’s amazing to me that the top approach is what I see most often. It totally looks like verbal diarrhea spilled out onto the page.
Why do people think they have to fill every available square inch of a space with text? I guess that’s why you’re here, to administer the Pepto and teach us all a better way.
Thanks for sharing your expertise, which shines through in every post.
Love it: I’m pouring design Pepto Bismol on everything! (Maybe I should make my blog all pink…). Thanks for the colorful comment, Carole!
The illustrations are really helpful here. White space, clarity, and you bring my eye to what’s most important. I can think of quite a few people who need to use this approach when they’re working on their own websites. It’s such a natural tendency to jam everything in without stopping to categorize the information in a hierarchy.
It only takes a few minutes to plan your page out, but it makes a big difference in the final product!
Thanks for the side-by-side comparison! It’s one thing to “tell” people how to design better layouts but seeing the same event advertised in the “good” way and the “bad” way really brings the message home. What a great lesson!
Thanks, Maureen. I’m glad you liked it! I love doing before and afters, so expect plenty more in the future.
I’d also add that your text should be broken up into “chunks” to make it more easy to scan. Too much condensed text in several paragraphs tends to tire the eyes easily, and people only skim ads first anyway
Getting balance and proportion right in anything is key. Trouble is unless you have had some form of design training it’s really hard to know what to do. So thanks for all the tips, I’m looking forward to learning more from you!
{ 6 trackbacks }