fbpx

Web Design: Elements for Conversion

Web Design Principles for Landing Pages

When discussing web design – whether for your landing pages or your website – simplicity is key. Focus purely on the product or value that you’re offering while eliminating as many distractions as possible.

I like this example for James Clear’s book Atomic Habits:

Atomic Habits Landing Page Web Design

This is a screenshot above the fold – and there’s more beneath. But right off the bat, you can see a few essential elements:

  1. Hero Spot – the headline of what the product is offering. After going to the picture of the book, your eyes will naturally be drawn to this headline. The headline is succinct and summarizes the benefits of the book.
  2. Presentation – an actual picture of the book, along with a digital sticker announcing that over 1 million copies have been sold, which can reinforce confirmation bias to someone already interested in the book, or provide social proof to someone still on the fence.
  3. Content – a subheading and a short paragraph – only two sentences. The subheading spells out what the actual offer is – a free download of Chapter 1. The paragraph lines succinctly describe the value the product offers primarily by repeating the promise made in the hero spot
  4. Call to Action – Finally you’re invited to exchange your email address for a free chapter of the book. James makes this very very simple in that he only asks for an email address. It’s important to know that the more information you require from your visitor, the more friction you’re creating. 
Atomic Habits Web Design Elements

Below the fold, James includes some additional information about himself and the book, and includes an additional Call to Action.

These four elements – Hero Spot, Presentation, Content, and Call to Action – are all it takes to make a great landing page. 

Avoiding Friction

I’d like to break off to address friction. Friction is a massive concept when we’re talking about marketing. Let me give you some examples:

  • Netflix removed the friction of late fees and the time and effort of leaving the house, and thus beat out Blockbuster Video
  • Uber removed the friction of high-fares and limited availability, and thus beat out traditional taxi services
  • Amazon removed the friction of limited availability and time and effort of leaving the house, and thus is overtaking traditional general retail 

There are other factors at play in these examples, sure. But do not underestimate the power and influence that friction has on your business.

Now, in the context of building a landing page that converts, a point of friction is any design element that resists the end goal. For landing pages, the end goal is for the user to take action. 

And so an example of a point of friction would be requesting too much information from your visitors. With each field you add to your form, you’re creating another point of friction. If your offer does not justify that friction, then visitors won’t convert. 

Web Design Principles for Website

Website design uses the same concepts, but in a different way. As I said in a previous post your website is primarily meant for people who already know you exist, and want to learn more information. 

You’d be forgiven if you thought that meant that the end goal of your website is simply to provide that information. You do need to do that, of course, but it’s not the end goal. The end goal is to induce your visitors to engage with you.

If you’re thinking that goal is similar to a landing page, you are correct. But we’re going to achieve it in a different way.

To put it plainly, you attempt to convert your website visitors in two steps:

  1. You provide the information that they’re looking for, in an attractive and engaging way
  2. You invite them to engage with you directly.

Emotional Engagement Through Web Design

You may notice that I’m using the words “engage” and “take action” quite frequently. 

A few years back I owned a very small mobile gaming studio. One of the things that surprised me about that industry was the role that music played. 

You see each game has a certain feel to it. Some games feel fun, some are scary, some feel exciting and get your blood pumping, some make you feel heroic, and some make you feel intelligent and clever.

The music goes a long way in creating that feeling in the player. A game like Deus Ex: Human Revolution, for example, requires a lot of prolonged and intense focus and the theme song “Icarus” by composer Michael McCann, does an amazing job at provoking that feeling. Try listening to it next time you are in the middle of a mundane task, and take note of how much energy you seem to get. 

We try to accomplish something similar with website design – provoking feelings in our visitors. Believe it or not, those feelings are largely similar to what we provoke through video game sound tracks; feelings of:

  • Excitement
  • Resolve
  • Accomplishment or progress
  • Fear of not having our product or service

Instead of provoking those feelings through sound and music, we’re doing it through our visual presentation.

Website Pages

On your website, you should have at least 4 pages:

  1. Home Page – the main page that users see when they type in your domain. In a way, this is the landing page for your site
  2. About Us – this page is used to describe your brand from the perspective of serving your customers. That is, how are you uniquely positioned to solve their problems
  3. Products/Services – this shows off the value proposition of your business and how it directly benefits your customers
  4. Blog – has two primary purposes (1) to provide consistent, high-quality content, and (2) to improve your SEO
  5. Contact – this provides your contact information

Elements for Information and Aesthetics

To provide the information that your visitors are looking for, you can use several elements. Aside from the header, which should come first, these elements can generally be used in the order that is most attractive and – of course – engaging.

The elements to use are:

  • Header – This is usually a few words (often accompanied by an image) that shows your visitor what you have to offer
  • Brand Introduction – Here you introduce the visitor to your brand and invite them to engage with you.
  • Features and Benefits – This is where you describe the features of your product and how they can directly benefit your visitors
  • Authority – In this section you describe why your brand is uniquely positioned and qualified to solve your visitors’ problems
  • Build Value – If you have testimonials, use them! Testimonials are most effective when you can include a picture of the customer. Video testimonials are even better than written testimonials (when done correctly). Another way to build value is to provide case studies, or before-and-after pictures or scenarios.
  • Calls to Action – Throughout your website you should be inviting your visitors to take action. Some possible actions might include:
    • Signing up for a newsletter
    • Learning more about a service
    • Scheduling an appointment
    • Making a purchase
  • Pricing (Optional) – If it makes sense for your value proposition, you can include different pricing options

Most of these elements should be present on your home page, but they can (and should) be utilized on your other pages as well – mixed and matched into a layout that your visitors will respond to.

In Conclusion

Getting your web design right can be a daunting task, especially for those of us who do not believe ourselves to be artistically talented. However, in this article, I’ve provided you with the elements and concepts you need to get started on the right foot.

Ideally, for each of your online sales funnels, you’ll create a few different landing pages. You can use both landing pages interchangeably and then use conversion rate metrics to determine which is most effective. In our next article we’ll focus on how you can use A/B and Heuristics testing to get the most out of your website and landing pages.

In my next post, I’ll talk about testing your web and landing pages to further increase conversion rates.

1 thought on “Web Design: Elements for Conversion”

Leave a Comment