How to Get More Landing Page Conversions with a Simple Design Change

Written by Craig Morrison - Get free updates on new posts here.


Look at your landing page right now.

What’s the biggest, boldest and brightest thing you see? If this isn’t something that directly supports your call to action, you’re doing it wrong.

Do you want a better landing page that converts more visitors into users and customers?

Visual Weight Impacts the Time a User Spends Focusing

Think of your landing page as a collection of elements all bunched together. There’s text, photos, buttons, boxes and icons. Each of these items has a “weight” associated with it.

The trick to getting users to do what you want is by making the actionable elements, such as your call to action, appear more important. This is called giving an item more visual weight.

The heavier an object, the more important it appears to the visitor, and the longer they spend focusing on it.

VisualWeightExample

So think about it. If your call to action is heavy (with more visual weight), then visitors will spend more time focusing on it.

The longer a visitor spends focusing on your call to action, the more likely they are to actually do it.

Free Bonus: If you’re short on time, I’ve put together a summary of this post in an easy “cheat sheet” that you can refer back to at any time. Click to download the cheat sheet now.

Giving an Object More Visual Weight

There are many things that can make up the visual weight of an element on your landing page, but in an effort to simplify, the main things I’ll focus on are color, contrast and size.

CoffeeRedButton

Color

In the image above, the entire landing page is black and white. The only color on the page is one single red button that reads “Download The Free eBook”.

When a visitor lands on your page, their eye is going to be drawn directly to that red button.

The red button is visually heavy.

Now take a look at what happens when we add more red to the design.

CoffeeRedEverything

The page has a red header, and red a big bold red headline, and a second red button that says “Learn More”.

Where will the user look? Everywhere. They will be completely unfocused.This red button is no longer heavy. Because now that everything is red, it loses all meaning.

When everything is important, nothing is.

A bright bold color like red is your magic weapon. Don’t use it all over your landing page, ONLY use it where you want a visitor to focus for longer periods of time.

Contrast

Contrast

Contrast is the difference between light and dark, and may be the most important part of ANY design, let alone your landing page. Contrast lets people see things easier.

It’s pretty simple. Important things deserve high contrast. In the example above, you can see the difference between high and low contrast. Having a light colored font on top of a light background creates low contrast.

With contrast this low, visitors won’t be drawn to these important elements, and will likely end up ignoring them.

Make sure important elements contrasts against what’s behind them, and also against other elements nearby.

Things with high contrast are visually heavy.

Size

Size

The larger an item is, the heavier it is. In the image above, you can see that one example is using a much larger font for its main headline. A larger sized headline like this demands attention, and causes the visitor to read it first.

You can also see an example of using a small sized font for the headline. This blends together with the secondary headline, and could cause the visitor to skip over it entirely.

Combine the size of an element with it’s color and contrast, and you’ve got something the user is going to dedicate a lot of focus to.

Don’t make elements that aren’t important large. No one cares about a big icon of a chat bubble. If you make this a huge element on your page, visitors will focus on it for absolutely no reason.

A huge chat icon isn’t asking your user to sign up, or explaining the value of your product to them. It doesn’t deserve focus.

What Should Be Heavy and What Shouldn’t

Here are the most important items on your landing page:

  • Main Headline (UVP)
  • Secondary headline
  • Call to action button

bigThree

Now, I’m sure you’ve got some great technical specs on the old fashioned shaving razors you’re selling, but it doesn’t deserve anywhere near the kind of visual importance that the above three items do. In fact, nothing else on your landing page does.Let’s look at the best way to apply visual weight to each of these elements.

HeadlineSize

Your Main Headline or Unique Value Proposition

Your headline, or unique value proposition, should be the heaviest thing on your page. When a visitor lands, you are going to have five seconds to sell them on what you’re offering. The only way you can do that is by getting them to read, and absorb, your headline.

Your headline should be BIG. The biggest font on the page. Even bigger than your logo.

Your headline should have HIGH CONTRAST. If you’re not 100% sure what you’re doing, try staying away from colored fonts. If it’s a dark background, use white. If it’s a light background, use black.

Your headline should NOT MATCH the color of your call to action buttons.

SecondaryHeadline

Secondary Headline

The secondary headline gives you a chance to get into a bit more detail. This is important too, but it is not as important as your call to action button.

Your secondary headline should be larger than any paragraph fonts, but smaller than your main headline.

It should have HIGH CONTRAST, just as your main headline does. It should also NOT MATCH the color of your call to action buttons.

Visually, it should look like the third most important thing on your page. This might sound a bit vague to say, but once you start looking at the size, color and contrast of all your elements, it should start to make sense.

ctabutton

Call to Action Button

The holy grail of your landing page is your call to action button. It not only tells the visitor what you want them to do, but it does so in a way that excites them.

Your call to action button is supported by your main headline or UVP. You can’t have one without the other, or they each become sort of useless.

Because of this, it could be debated which is actually more important, but in my opinion, the CTA button still comes second to your headline. Which do you think is more important? Leave me a comment below with your opinion.Your CTA button should be BIG. A big button is easy to click and easy to see.

Your CTA button should have HIGH CONTRAST. Not only against the background it’s on, but the font color you use on the button should also have high contrast.

It should also be a bright, bold and UNIQUE, color. Use a color you haven’t used for any other element on the page. For example, if your color scheme is all greens and blues, use an orange button.

Finally, MAKE IT LOOK LIKE A BUTTON. There is a new trend I see where people are designing buttons as transparent boxes that have a thin outlined stroke. DON’T DO THIS. That is not a button, it’s a box.

Let Your Common Sense Meet Your Design

Learning how to apply visual weight is a great advantage to have when trying to get visitors to convert. Deciding on what elements to make visually important isn’t rocket science either.

Simply by taking a look at your landing page and using some common sense can help identify a lot of common errors.

Ask yourself what you really want people to do, then see if you’re giving them the tools to do it. If you want a person to click on a button, can you see it? Is it on the screen when they land there or is it hidden out of site?

If you want to explain to someone how awesome your product is, are you doing that first? Or are you telling them the dimensions of your razor blades before even telling them what you’re offering?

Think of your landing page as a real life conversation. For example, if someone asked what your product was about, would you start automatically by saying “my razors are the thinnest you can buy”? No, you’d start by pitching the idea to them.

Apply this type of conversational thinking to the design of your landing page, and use visual weight to guide the visitor from the start of the conversation to the end.

Bonus: Download the visual weight cheat sheet to quickly help you increase your land page’s conversion rate.

Your Next Steps

Hopefully by now you’ve realized the importance and power of applying proper visual weight to the elements of your landing page.

Whether you already have your landing page completed, or you’re about to start, here are a few key takeaways to remember when applying visual weight:

  • Apply visual weight sparingly – Not everything on your page can be important. Choose the few key important elements and make them visually heavy.
  • Pick a single goal for your visitors – Knowing what you want your visitors to do is key to applying visual weight properly.
  • Use visual weight to guide your visitor – When done properly, the varying weights of elements will lead the use on a path to your call to action.
  • Make your buttons look like buttons – Avoid design trends if they take away from the visual weight of important elements like buttons.
  • Ask yourself simple questions – Can the user see your CTA button? Are you asking your user to do what you want them to do? Is your headline easy to read? Are you selling your idea within 5 seconds?
  • Download the Cheat Sheet – Look, this is a lot to remember. Do yourself a favour, click the image below to access my cheat sheet that summarizes all the main points of this article. Refer back to it as you design your landing page.

DownloadBonuses