Design + Copy: The Sum Is Greater Than the Parts

by 18 06/26/2013

Sometimes the sum is greater than the parts.

This is one of those times.

Yes, good copy and a driving message are important to conversions. But your website’s design can make or break that copy.

People are visual, and knowing that, you can tap into some powerful techniques that combine a strong message with aesthetics to grab people by the hand and walk them toward your Buy button.

Here are six design tricks that do more than just make your website pretty. They increase engagement and conversion too.

Placement

Having seductive sales copy is important, sure. But where you place that copy is just as important.

Any information presented above the fold will get noticed. Anything below the fold may get noticed — but then again, it may not.

“Above the fold” is a term borrowed from newspaper publishers, referring to the information that shows up when the folded newspaper sits in a stack, ready for purchase.

It’s the information that people can see without picking up the newspaper — or on Web, the information visible without scrolling.

According to the Nielsen Norman Group,

“Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold.”

above the fold chart

In short, your most important message needs to be at the top of the page.

Here’s how LinkedUniversity does it:

linked selling

As soon as the page opens, you see a strong sales message, “The definitive training program for building your business on LinkedIn,” and a video/opt-in form combo.

The purpose of the page is to get visitors to opt in, so visitors are asked to do that right away.

Notice that there’s no elaborate sales copy to persuade people to join. The headline says it all.

Notice also that this is a home page, so the standard home-page stuff is there too. It’s just pushed below the fold so no one is distracted by it.

linked selling 2

See what I mean.

At the bottom of the page, there are two links to start your explorations of the website, but there’s little else to distract you from the video and opt-in.

Your takeaway

First, consider the top of the Web page as your highest value real estate.

Don’t fill that space with fluff. Put something there that grabs people’s attention. Give them a chance to respond right away, or give them something that makes them want to keep reading.

Second, make page elements below the fold easy to scan. Research has shown that once people begin scrolling, they usually scan rather than read.

Contrast

In order to increase response rates, you need to make it easy for people to see buttons and calls to action, and you need to make it easy to respond.

That’s where contrast comes in. While you can create contrast with placement, subject matter, clarity, and more, it’s easiest to use color.

Color

Stark differences tend to create focal points. So when designing buttons and other important page elements, use light-dark combinations and contrasting colors to make them stand out.

Look at the screen shots from LinkedUniversity above.

The overall page color is white and blue. Everything on the page blends with these colors — the text, the text boxes, even the two “learn more” buttons at the bottom of the page.

They don’t draw the eye because they aren’t supposed to.

Meanwhile, in the banner, beside the video, and after the testimonial, you have yellow buttons that stand out like neon signs.

The call to action varies slightly — “join now” and “get started” — but there’s no doubt these are the focus of the page. The stark color contrast is an unmistakable visual clue.

On a side note, you also need to have good contrast between the button color and the button’s text color. LinkedInUniversity uses black text on yellow buttons for an easy-to-read combination.

If you need help figuring out the best combination for your Web page, use this Color Contrast Checker from WebAim. As you can see, black text on a yellow button passes with flying, um, colors :)

color contrast checker

Size

Generally, when items on a page vary in size, bigger items appear to have greater importance. Can you guess what the feature articles are on this National Geographic screen shot?

image sizes on national geographic home page

It’s easy to tell which links are being featured simply by comparing the size of the graphics.

Your takeaway

Use bold colors to make your buttons stand out on the page. And make important page elements bigger.

White space

The undisputed leader in white-space design is Apple. As you can see, they keep it as simple as possible.

white space on Apple home page

But can you make good use of white space with a busier layout? Yes.

Take a look at Amazon’s home page:

white space on Amazon page

Busy? Definitely. But there’s an underlying structure to this page that keeps it from feeling chaotic — and plenty of white space to give you a clean background while separating one element from another.

Your takeaway

As a general rule, when you want a design element or message to stand out, put more padding around it.

Give your design elements breathing space. It makes it easier for first-time visitors to see what’s important, and to read and understand your message.

Font size

When someone arrives at a website for the first time, they scan the page to understand what’s there and how it’s organized.

Essentially, they’re looking for a hierarchy of information. They know that information at the top of the page is most important and that bigger items need to be looked at first.

You can use a similar hierarchy with fonts, so people can easily see the underlying structure of your copy.

Take this page from iTunes:

font sizes on iTunes home page

As you can see, distinct hierarchies can be created simply with font size and style.

Text size

Generally, the larger the size of your headlines compared to the rest of your body text, the more attention they get. Then each successive “level” of text is smaller still. So, for instance…

This text has an H2 tag.

And this text has an H3 tag.

H4 is smaller still.

See the hierarchy. It makes it easy for readers to see the structure of the information on the page simply by looking at the size of the font.

Text weight

Bold typefaces also draw the eye’s attention. So if you have an important point that you think will be lost in the middle of a paragraph or page, add weight: make it bold.

Be careful not to overuse this technique, though. Too much bold is the same as too little. A few focal points draw attention. Too many create confusion.

Remove distractions

By strategically using placement, contrast, white space and font size, you can direct people to the important elements on your page.

What should get priority treatment?

  • Headline
  • Benefit statements
  • Offer
  • Call to action

These elements need to be easy to see and easy to respond to. So make them the focal points on your page. Anything that distracts or draws attention from these elements needs to be removed.

A few guidelines

  1. A sidebar can be very distracting. If you can, let your landing pages stand alone.
  2. Ads take people off your website. If you want to communicate an important message or make a strong call to action, reduce or remove ads from that page.
  3. Make your headline a large font in a bold color. Studies have shown that putting the headline in red (or the red family) tends to improve response rates.
  4. Set your offer apart. Give it an attention-getting subhead. Then place a graphic of the product being offered beside your offer… put it in a text box… or create a bulleted list of the items buyers will get.
  5. Make your call to action stand out. Put buttons in a bold color that contrasts with your color scheme.
  6. Make it easy to respond on any device: laptop, tablet or phone. The iPhone Human Interface Guidelines (by Apple) recommend that buttons be 44px by 44px. Windows’ Phone UI Design and Interaction Guide recommends 34px with a minimum touch target size of 26px. Place enough padding around the button to make it easy to select with a finger or thumb.

In general, combine strong design with persuasive copy to get people engaged with your Web pages as soon as possible. By focusing on both, you don’t just get the sum of two disciplines — you can turbocharge your marketing.

Because the sum really is greater than the parts.

Print Friendly

About 

Kathryn Aragon is editor of The Daily Egg, founder of Top Marketers Only, and an award-winning marketer/copywriter. She is committed to helping businesses communicate, connect, convert... and capture their market. Follow her on Twitter and Google+.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

18 COMMENTS

My Josephine

Great tips. The fold is often discussed and the statistics in this article say a lot.

June 26, 2013 Reply

Eugenio Doyle

One of the better design features you can add to a page is nothing at all (also known as white space). Understand that white space, in this case, is not always white; it’s simply space that you haven’t crammed full of text or images. It can be any color, but it’s usually most effective if it’s the color or pattern of your background. White space gives the eye a rest, something readers need even more often when they’re staring at a computer monitor. You can use white space to separate one type of information from another and to focus the viewer’s attention where you want it most. Some of the most beautiful and compelling designs on the Web use only a few well-thought-out elements against lots of white space.

June 27, 2013 Reply

    Kathryn Aragon

    Well put, Eugenio. In my opinion, one of the best design trends to come around for a while is the masterful use of white space. When I was studying art years ago, it was called negative space… which makes it clearer that it can be any color.

    June 28, 2013 Reply

Designer Rob Russo

Great round-up with lots of design takeways, Kathryn. Keep the great articles coming!

I would say the only thing that gets on my nerves more than cramming a bunch of text and images in one place (lack of whitespace) is the use of dreadful fonts/typefaces such as Comic Sans.

June 28, 2013 Reply

    Kathryn Aragon

    Thanks, Rob! I’m with you on your pet peeves. I like a Web page that gives me room to breathe. Especially on the Web, there’s no need to cram everything into a tight space. And I love an elegant font. It makes even a mundane message fun to read.

    June 28, 2013 Reply

Adam Roseland

Great Article Kathryn!

When using images that take up most of the screen space like LinkUniversity and National Geo, is it better to use static image like LinkU, or a slider like Nat Geo in your opinion?

Thanks
Adam

June 28, 2013 Reply

    Kathryn Aragon

    Hmmm, good question. Before testing, I lean toward the static image, but that’s something that should be tested so you know how your visitors respond on your site. I do want to point out, though, that the image on LinkedUniversity is really a video, which is a different animal entirely. That’s also worth testing, but I’d be willing to bet a video trumps a slider any day.

    June 28, 2013 Reply

Adam Roseland

oops… was just looking at the screenshot above. Im sure the video trumps everything.

Thanks for the reply!

June 28, 2013 Reply

Milo Boone

The term negative space is more inclusive of color foundations other than white, but means essentially the same thing. Referring to the space between objects arranged on a black canvas as negative space or white space would be equally correct.

June 30, 2013 Reply

Andy Kuiper

Very well written articlle Kathryn :-), I like your “A few guidelines” and I really like the LinkedUniversity page – it looks very well done :-)

July 2, 2013 Reply

    Kathryn Aragon

    Thanks, Andy! LinkedUniversity is a great example of effective digital marketing. Glad you liked it.

    July 2, 2013 Reply

Josh Turner

Thanks for featuring Linked University, Kathryn! Much appreciated. We’re humbled to be included alongside such prestigous sites!!

July 2, 2013 Reply

    Kathryn Aragon

    Your welcome, Josh! You have an impressive site that can be instructive for the rest of us. :)

    July 2, 2013 Reply

Gregorio Fletcher

With good design white space can work in such a way that you create something beautiful from the areas of the unused page.

July 9, 2013 Reply

Taylor Dean

nice post. i really love yor article. i learned a lot. im looking forward to read your next article.

July 18, 2013 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>