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?
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.
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.
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.
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.
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 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.
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.
Here are the most important items on your landing page:
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.
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.
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.
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.
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.
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: