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!


Author: Shane Melaugh

Shane Melaugh is a co-founder and the CEO of Thrive Themes. When he isn't plotting new ways to create awesome WordPress themes & plugins, he likes to geek out about camera equipment and medieval swords. He also writes about startups and marketing here.

  • Rob says:

    Hi Shane, thanks for the info. I run an online language academy, and have often wondered if my design is okay, and how it could be better (although I don’t come up with many answers). Do you have any suggestions or specific examples for the “prototype” of an online course? Thanks!

    • Shane Melaugh says:

      Hello Rob,

      I’ll give a more general answer: to learn about prototypical design, look at the leading websites in a category. For example, Amazon is so dominant, that it drives expectations of what an ecommerce site looks like. For online courses, I’d look at Udemy and other large learning platforms to see what they have in common.

  • Sally P says:

    In the last two weeks I’ve started using this method to help me prioritise my to-do list. I do all my functional tasks before the cosmetic/pretty ones. Putting function first is such a time-saver!

  • Ahrale says:

    Correct & good reminder, as well as the extra value of Thrive Themes. The change from theme to framework, especially with last improvement of option to cancel loading of theme css, are great progress. Thanks for keeping on & keeping it up. Thumbs up.

  • Tommy Sikes says:

    Shane, great video as usual. One of the best ‘design’ techniques you ever shared was the text-only version of a page. Forces you to think about clarity, functionality and conversion messaging. All before working on the look…

    • Shane Melaugh says:

      Thanks for your comment, Tommy! Ah yes, the copy-only landing page… I should have mentioned that in the video. :)

  • Frank Okun says:

    Shane, thanks for publishing this article in reference to design. Greatly appreciated. I have adopted your views, especially when it comes to replacing sliders with a single image. Less is More as they say. Faster loading time. I find that YouTube and other video embeds also reduce loading time. Especially when placed on the home page. I would like your thoughts on placing videos on a site, and how they might affect website loading time and conversions.

    • Shane Melaugh says:

      Thanks for your comment, Frank!

      Videos are definitely a “heavy” element to add to a page. But I still use videos a lot. A good video player (including YouTube embeds) will load asynchronously, meaning that it doesn’t slow the rest of the page load down, if the video player is still fetching data. And the heavy load of a video is worth it because video is such a strong medium to communicate through.

  • Thomas says:

    Wow. That feels like a slap on the face! I guess many of us reflexively are aware of this but never articulate these ideas clearly either in thought or in action. Working on a landing page right now so this is pretty apropos.

  • Thank You for these clear, navigable and seamless hints!

  • Louis Reingold says:

    This is the classic excuse from people who design things that look like shit.

    • Shane Melaugh says:

      If these things that look like shit perform exceptionally well, is it still an excuse?

      Also, no one said you should make ugly things. This is what a lot of people seem to miss: you don’t have to compromise design for functionality. You can make things wonderfully beautiful without compromising functionality and that is good design.

  • Victor says:

    The function design should be primarily, and the visual design is secondary, in the pecking order or priorities.

  • Sam says:

    Great input and the Tipp of the day: focus on what matters – nice graphic is fine but in the End does not make a visitor to a customer…
    Thanx Shane!

  • Jerry says:

    Hey Shane… It may be important for the chair to be comfortable… But if the chair is ugly… won’t it greatly affect how many people sit in it anyway.

    • Shane Melaugh says:

      I think there are two important things to keep in mind here:

      1) An ugly, comfortable chair (e.g. in a cafe) will see much more use than a beautiful, uncomfortable one. People will sit comfortably in the ugly chair and face it in the direction of the beautiful one, so they can look at it, maybe.

      2) I am in no way saying that we should aspire to create maximally ugly things. The presentation layer is important. Yes, make things look nice. Make a beautiful chair so long as the aspects that make the chair beautiful don’t compromise how comfortable it is to sit in. Make beautiful websites, so long as you don’t compromise the functionality.

      • John H says:

        Hi Shane,
        sometimes, chairs in cafés are voluntarily uncomfortable so that people would not stay too long and help with the turnaround of customers.
        But I do get your point though.

    • joan a says:

      Craigslist and Reddit are pretty ugly. My highest converting product was on the ugliest sales page I ever made. And have you ever seen Gawker?

      Function, speed, content – appearance seems to be least important. Eye-candy design doesn’t matter as much, especially to mobile surfers.

  • Mary L says:

    This explains why I rejected so many themes when I first began building my blog. I thought it was because of their “look,” but it was actually because of their lack of functionality. After watching your video and reading your post, I realize I have actually been doing some things right. And a few things wrong… Time to make some corrections. Thanks for the insight.

    • Shane Melaugh says:

      Thank you for your comment, Mary! I’m happy to know that this video sparked some inspiration for you. :)

  • Shane, you forgot the single, massive exception to the rule: women shoes.
    They are chosen because they look good and sexy, even if they are a terrible torture to wear!

  • John H says:

    BTW, should speed not be the very first concern?
    A WP install with many plugins kills speed and that a huge problem for referencing.
    What are your thoughts on that?

    • David M says:

      I’ll step in on this: just ask yourself if you’re willing wait 30+ seconds for a page to load…
      -social plugin
      -adserver dsiplay network content
      -brainshark alt/content

      Yes – speed is critical, it’s the new digital blood.

      If the page/post never gets loaded it never gets seen and conversions are only ghost dreams. It seems to me that a balance between site owner (perceived) needs vs. visitor needs to happen, with the balance in favour of the visitor. Be polite, be considerate, be invitational – when your site takes too long to load, you are kinda insulting your targets and saying your *stuff* is more important than they are.

  • Andrew says:

    Function Vs. Aesthetic design has been dissected and elaborated to death adinfinitum! I like your simple explanations a bit better; especially as it relates to website and landing page engagement and conversions. Big Thanks!

  • Dave says:

    Hi Shane,

    This was very timely for me as I’m starting a couple of site redesigns that are rather old. Can you comment on the use of the more traditional sidebars that run alongside the content area.

    I see the trend toward grid design with columns. In the past, the traditional design was a “Content -> Sidebar” default. There was the content area and usually a static sidebar on every page. I’ve seen that going away as it seems to be more distracting. I realize the same effect can be accomplished with column layouts, but wondered if you feel that the WordPress standard default layout of “Content -> Sidebar -(usually static)”, is a thing of the past.

    Thanks for the great information, as usual!

  • Antonia says:

    Couldn’t agree more. Traditional design is meant to guide the eye across a page. With web design it starts with creating a road map you would like a visitor follow and then adding the design to that journey.

  • Pete C says:

    Thanks, Shane
    I hear you, I may tend to oversimplify, however, one of my sites is about being minimal.
    Finesse over substance or form over function seems to be everywhere.
    A few years ago my two favorite sports F1 & MotoGP revamped their sites. What was once an easily navigable experience became a pain. Just to find times, results, the basics, is a hunt and search exercise. Lots of pretty images now, each article has an image on the front page, however, you have to do a lot of scrolling to find things. A lot of clicks to get to stuff, you have to wade through what they want you to see first even though you may not be interested. On a phone, it’s worse. I’m sure the marketing folks and web designers were very proud of their new, flashy site. It still annoys me to this day.

  • Uwe Hewig says:

    Thanks a lot, Shane. Your videos always get rigth away to the point. Easily to follow and to understand. I´m a great fan.

  • Rob says:

    Great article, thank you.
    But as I was reading it on mobile phone, your left and right car example changed to upper and lower. So this was a nice example for a little design mistake within the text ;-)
    (So much to care about! ;-)

  • >

    Join Thrive University (it's FREE!)