Do you speak web design? No matter how good of a salesperson you are face-to-face, when you’re creating a web page, you’re using a whole other language.

Colors, shapes, sizes, wording, placements — these tiny nuances all add up to influence your visitor’s impression of you. Handle these areas right, and your visitors will convert without a second thought, which will greatly benefit your business growth strategy. Handle them wrong… and you might as well be speaking Greek.

Luckily, there’s a definitive science to it. Combining the art of graphic design, predictable data on how the human eye moves, and the psychology of sales, we’ve cracked code on what makes the perfect web page layout for conversions.

Below, we’ve outlined the 20 elements a web page needs to increase its conversion rate, and how to best handle each one. Feel free to check out our infographic for more information.

Section One

The first section is easily your most important — a web page only has 10 seconds to make a good impression or else the visitor will bounce for greener pastures. That means the page your visitors see immediately has to answer a lot of questions:

  • Who are you?
  • What do you do?
  • Why should the visitor care?

… and it has to answer them quickly and coherently. But if you structure the layout in the right way you can accomplish all this while simultaneously laying the groundwork for a conversion. Just use the right elements in the right spots.

1. Your Logo. The upper-left hand corner is prime web design real estate because that’s where most of your visitors will look first — in Western cultures, we’re trained to read left-to-right and top-to-bottom, so our eyes instinctively go here first. That’s the perfect place to introduce yourself.

Additionally, it’s a common web design pattern to have your logo here link back to the starting page, so if your reader ever gets lost, most will click the upper-left logo to return to the home section.

2. Navigation Menu with CTA. Another common web design pattern is to have the navigation menu written across the top header. A lot of your visitors will expect this to orient themselves. You want to list all your important web pages so that visitors who already know where they want to go won’t waste any time.

The most important part is the call to action, preferably highlighted in a different, contrasting color or separated as a button. This works best at the far right to punctuate the navigation menu. Your visitor’s eyes will linger at the end of the line, so the right corner is ideal for a CTA.

3. What Your Company Does. Let’s get down to business. You only have a line or two to explain succinctly what your company does (remember the 10-second time limit), so stick to the basics. There’s time to elaborate later, but for now stay general with an overview. Your visitor just needs to know what you do and what industry you’re in.

4. Value Statement. Here’s where you explain why you’re the best choice and why your visitors should care about you. Try addressing their specific pain points and demonstrating your competitive edge. Again, you only have a line or two, so be brief. A catchy, memorable slogan doesn’t hurt, either.

5. Call to Action. Now that your visitors know what your company is about, throw out a couple CTAs as suggestions for how to proceed on your site. Think of the first section as your hook and these CTAs as reeling them in. A lot of your visitors will want more information about you, so add a link to tutorial videos or more written explanations. It doesn’t hurt to include an option for your main closer, either.

As in the navigation menu CTA, you want these to stand out visually by using a contrasting color or separating them in a button. Don’t be timid about the wording either — state clearly what you’d like them to do without being pushy.

Your CTA here — and every other occurrence on the page — should always include a objection response. This is a short line pre-empting any objections visitors might have to signing up, such as mentioning that it’s free or reassuring them that you won’t share their email address.

Section Two

Here’s where you add the information that’s still important, but not as essential as the first-section fundamentals. Showing social proof can be a powerful sales tool, so do it here to make a good impression early.

6. Client Logos. A logo is worth a thousand words. Rather than saying “we’ve worked with them,” show their logos instead. Not only are your past clients’ logos instantly recognizable by your viewers, this format also saves screen space. The convention is using a dulled gray, so you follow that and there’s no need to waste space explaining “these are our previous clients.”

7. Powerful Testimonials. Include one or two of your best testimonials to elaborate on how your past clients appreciate your work. Visitors might be weary of what you say about yourself, so using the words of someone in their shoes holds more weight.

Most of your old clients will be happy to help. When requesting testimonials, don’t be afraid to specify what aspects of your work you’d like them to mention. And don’t forget to include the image, name, and job title of the speaker to make them seem more real.

Because we want to conserve space at the top, these testimonials should be short and sweet. There’s another area below for longer, more detailed reviews.

Section Three

With the main elements out of the way, we can start getting into specifics about what you offer and mention the peripheral benefits of your service.

8. Benefits and Features. Here you show three specific benefits or features you offer. To help communicate them visually, use icons above the text to represent them.

What features you mention — and in which order — also matters. We recommend this setup:

  • Your first benefit should be about making or saving money. That’s what most visitors are looking for anyway.
  • Your second benefit should be about saving time.
  • Your third benefit should be about relieving stress.

Accompany each benefit with a short description about how you provide it or why it’s useful.

9. Call to Action. Repetition is a classic sales strategy that dates back long before the internet. You’ll want to repeat your CTAs throughout your web page, first to create a rhythmic reminder as your visitor scrolls down, and second to make sure that they never have search for a way to contact you no matter where on the page they are.

Section Four

To keep your page visually stimulating and break up the monotony of text, it’s best to include a video at the halfway point.

10. Feature Video. People all have different ways to process information. Some prefer text, others still images, and yet others videos. By now you’ve covered the first two, and the halfway point is a great place for a video, both to satisfy visitors who prefer videos and as a way to break up the flow of content.

The actual content of the video is flexible. It could be a sample of previous work you’ve done, a video summation of everything you’ve already discussed above, or even a behind-the-scenes look at your process.

11. Call to Action. In case your video convinced your visitors to convert, include another CTA right below to remind them that you’re just a click away.

Section Five

Past the halfway point, we’re free to discuss the finer details of what you do and present the information that appeals to some — but not all — of your visitors.

12. Get Started (Steps). A certain type of visitor will want to know what to expect when working with you before they sign up. For them, clearly list out the process in three steps — even if there are more than three steps, try to boil it down to three so it’s easier to explain. The key here is simple: you want to explain enough to ease their curiosity, but not enough to make them think too hard.

13. Call to Action. Again, you want to add another CTA here to net the visitors who are convinced after seeing the step-by-step process.

14. Confidence Statement. Here’s the ideal place to show an impressive statistic about yourself. Set the text apart in larger or flashier type to make sure it’s noticed. Typically, the confidence statement covers:

  • How many people have you helped.
  • How many products have you sold.
  • How much money have you made yourself or others.

Big numbers here work well in conveying your skill or prowess, but mentioning awards or distinctions has the same effect.

Section Six

As we near the bottom, we have ample room to display the longer versions of testimonials and client reviews.

15. Client Reviews. Here’s where you show the full-quote testimonials from your clients. These have the same effect as product reviews — visitors are more inclined to trust people just like them. These reviews should answer the questions visitors have about working with you, as well as easing any doubts.

As before, to humanize the speaker, include a picture, their name, and job position.

Section Seven

Winding down your pitch, explain what happens if the visitors don’t hire you.

16. Unseen Concern. Otherwise known as the “fear statement,” this area should play into the sales tactic of pain avoidance. In a bulleted list, show the visitors what they’d miss out on if they don’t convert, such as:

  • They’d fail to get a job done.
  • The job would get done with less quality.
  • The job would take too long.
  • The job would cause them too much anguish.

Keep them short — a single sentence or less — and round out the list to five.

17. Call to Action. Here’s a call to action for the people convinced by the unseen concerns. You can change the wording or link location to match the problems you just outlined.

Section Eight

Finally, we get to the end of the page. Now it’s time for your final closer and the footer to anchor the page.

18. Value Statement. Just like on the first section, you want to explain your value clearly: why you are the best choice. This is doubly important here; visitors scroll to the bottom of the page for many different reasons — they get lost, they want to see how long the page is, they’re looking for something in particular, they prefer the navigation menu in the footer — and you want to make sure they see your company’s main benefits no matter what.

19. Call to Action. Include your final CTAs here, again to guarantee the people who scroll to the bottom see it. Like your initial CTA, you can include multiple options. And don’t forget the objection response.

20. Footer. The last thing to appear on your web page should be your footer. Traditionally, this includes a more detailed navigation system, listing out the links and pages you don’t have space for in the top navigation menu.

This is also a good place to include your secondary information, such as reiterating your contact information, your office address, and your social media links. You can even elaborate a little more on your company, as well as throw in your legal text to cover all your bases.

We hope that you find a ton of value here, and that by implementing these items into your site that you see zillions of leads and duodecillion’s in revenue!  Please feel free to share or link to this post, or the infographic. But please don’t steal it as your own. Because stealings not nice.

Oh, and here’s the whole infographic. You can click it to see the full version, or print it, if you have some mega huge paper.

web design infographic conversion optimization