A Simple Framework to Create More Beautiful AND Higher Converting Websites
Let me share one of my secrets with you: a key to the way I work and learn is in how I think. How I think about everything I want to get better at: I look for the underlying principles.
I try to get at the core of things. I try to dig until I "see the matrix" and from there, I learn faster and make better decisions.
If you're reading this, you have a website and you want to improve that website, right?
Well, what exactly does it mean to improve a website? It basically means creating a higher converting website. And what are the underlying principles of a high converting website? Let's find out...
Design is Not About Design
A high converting website consists of high converting pages. As an online entrepreneur, you need the ability to design such high converting pages. But there's a problem with this word - "design".
Most of us think of design to roughly mean "making things look awesome". A good designer is someone who can draw and create badass looking stuff in Photoshop, right?
Following that idea, one could say that the car on the left is designed and the car on the right is very designed:
Following that idea, one could say that the car in the top image is designed and the car on the bottom image is very designed:
What we tend to forget is that most design is actually engineering, not illustration. In other words, design is mostly about making a car work and fulfill a specific purpose (e.g. going fast or being safe). Making it look cool is secondary.
Function Layer & Presentation Layer
In the example above, the engineering of a car is the function layer. And the paint job and maybe some details about the shape are the presentation layer on top of that.
Here's why I'm making this analogy: in a car, we can easily recognize that the presentation layer matters a bit, but not much. It doesn't matter how cool a car looks if it doesn't work well.
In websites, there's also a function layer and a presentation layer. And the mistake we are prone to make is that we focus too much on the presentation layer.
We want our websites to look pretty.
We see other pretty looking websites and we get "design envy". We want to make ours look just as pretty.
Whenever you're thinking about colors, gradients, fonts, logos and so on, you're thinking about the presentation layer of your site.
And the presentation layer is what we see and notice, hence the design envy. Good functionality in a website is, for the most part, invisible. We don't generally notice things that are easy, seamless and working well. We do notice when things aren't working well.
How to Make Use of This
There are principles that make for an effective website. This is the below-the-surface functionality stuff that excellent websites have in common. And when you understand this, you can systematically create great web pages – pages that have an excellent function layer – and then add a presentation layer on top.
With websites, it's pretty simple. The functions any page has to fulfill are:
1) Provide Clarity
A visitor to your site should immediately understand what your website is about and what kind of website it is. The good news here is that we can rely on prototypical designs for this. And in fact, we should. ConversionXL have a great post about this, here.
We have certain expectations about what an online shop looks like, what a news website looks like, what a personal blog looks like and so on. Your website should not defy these expectations, since that will only make it more difficult for visitors to figure out whether they should stay or leave.
2) Be Easily Navigable
The visitor to your website should never feel lost. If there are pages to navigate to, it should be easy and obvious to do so. Navigation elements and menus should be where the user expects them to be, labels should be clear and unambiguous.
Also, the number of available choices should be chosen carefully. Choices should never be overwhelming.
3) Seamlessly Lead to the Next Conversion Step
Every page should have a main conversion goal. And the process towards the next step in the conversion funnel should be as seamless as possible.
That's it. If your page does a good job at these 3 things, it will be a highly effective page. And any presentation layer design choice you make should serve these 3 factors or leave them unaffected. Any presentation layer choice that hinders these 3 factors in any way should be avoided.
Apply Directly to Your Landing Page
Give it a try. Open a page on your site and think about how you could improve the design, with this framework in mind. As you'll see, it's a completely different way to think about design instead of just focusing on what looks pretty.
And of course, this focus on functionality first is already baked into every single one of our 200+ landing page templates for Thrive Architect. The landing pages also come with a really nice presentation layer ready for you to use or customize. ;)
If you want to see practical examples of how we put these principles into action, check out our Website Review blog posts.
Did you enjoy this post? Do you know someone who could find it useful as well? Send them a link to it!