5 Rules for Using Design as a Competitive Advantage

Just like carefully chosen words increase the effectiveness of a landing page, carefully crafted design can make a big difference to conversion rates.

In this video, you'll discover the 5 simple rules you can follow (as a non-designer) to make sure web design is working to your advantage.​

More...

Bonus Download!

Get the downloadable video summary of the 5 rules + my favorite web design resources (including the best sources for free images, icons etc.) right here:​

The 5 Rules for Conversion Focused Design

Here's a brief summary of the five rules laid out in more detail in the video:

Rule #1: "Outsource" Your Design Work

Your main role in your business is not to create design work (unless you happen to be a pro designer working for the business). Even if you have good design skills, your time is put to better use if you let designers do design work while you focus on tasks that are more closely matched to your core competency.

The best way to "outsource" design work without breaking the bank is to make use of themes and templates that were created by designers + with conversions in mind.​

Rule #2: Keep it Minimal

For any of your own editing and tweaking you do, keep the design minimal. The more complex a design you try to create, the more likely it's going to look amateurish and the more of your time it will take (which is probably a bad thing, see rule #1).

Rule #3: Keep it Consistent

A sure-fire way to make a design look messy and chaotic is to mix many colors, fonts, font-sizes, text-alignments and image styles. And easy way to keep a design looking clean and professional is to keep all these factors consistent throughout the page.

Rule #4: Focus on Readability

​Once you've managed to catch a visitor's attention, the copy on your page becomes the most important element. Because of that, the design of your page should always serve the readability of the copy. Always make sure the text on your pages is easy to read and easy to follow.

Rule #5: Pay Attention to Visual Hierarchy

​The design of your page determines the visual hierarchy of all the elements on it. Visual hierarchy communicates subtly about what's important and what's secondary and if you get it wrong, visitors might ignore the most important parts on your page.

Good conversion focused design means that the most important elements on a page (e.g. headlines) are also the most visually highlighted elements. Understanding and using visual hierarchy gives you the ability to direct your reader's attention more effectively.

Because this is so important, I've put together a quick tutorial for a test, that doubles as a very effective method for learning to understand visual hierarchy:​

How to Create a Blur Test (for Free)​

One of the ways to test the visual hierarchy on a page is the blur test, as mentioned in the video. Here's how you can do this test, using only free tools:

Step 1​

Navigate to the web page you want to test and take a screenshot of it. Here, we're using AwesomeScreenshot to do this:​

Save the image to your hard drive.

Step 2​

Go to the Pixlr web editor and open the file you just saved.​

Step 3

In the editor, choose "Adjustment" and "Blur":

​Set the blur level high enough so that you can't read individual words on the page anymore. Setting the level to 100 works in most cases.

Step 4​

Go to "Adjustment" and "Color" and then set the saturation level to -100:

That's your blur test complete! You can either download the image or just inspect it inside the editor. Here's part of a blog post I did the blur test on, so you can see what the end result should look like:

And here's a short video to give you an example of how to evaluate a blur test and what factors to consider:

Alright, that's a whole lot of design know-how for you! Don't forget that you can also get our bonus PDF with our top (free) design resources:

Bonus Download!

Get the downloadable video summary of the 5 rules + my favorite web design resources (including the best sources for free images, icons etc.) right here:​

I hope you enjoyed this post! If you have any questions, please leave a comment below! We appreciate every share. :)​

Shane

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.

  • Hieke v says:

    Tnx! You can also do the blur test looking through your eyelashes.

  • Trish Jones says:

    Shane, whenever I open your emails, you make me feel as though Christmas has come early. Big thanks!

  • Good stuff Shane!

    As a designer for many, many years, I can attest to the great job you guys do with your Thrive products in terms of design. As someone’s been in the design business for over 25 years, it’s obvious you know what you’re talking about when it comes to good design and a good user experience.

    All the best,

    David

  • Adam D says:

    Shane, bit of a left-field question: I’m looking for a video-hosting provider and notice that some of your videos are hosted on Wistia, and others on Youtube. I read previously that you were quite a fan of Wistia so why are you hosting on Youtube? Is it a marketing decision? A financial one? Can you enlighten me please?

  • Mark says:

    Hi Shane,

    As a professional videographer, there’s something I’d like to humbly and respectfully suggest…, to perhaps adjust in your videos….

    The black and white cuts that you choose to break up your main video presentation….you should be placing yourself at the ‘right’ side of the screen in this particular case.

    Firstly, the right side as it is, just shows this overly lit brick wall that’s not that pleasing, then…., with you so far to the left side of the screen, looks like you’re ‘talking off’ the screen.

    If you were on the right side of the screen, your face is clearly lit as the ‘main attraction’ per se (not the brick wall) then the brick wall can nicely fade off into darkness in the background. Plus, your face pointing to the left side of the screen FROM the right side, doesn’t give the appearance that your words are basically falling off the left side of the screen, as it is in this current video.

    Of course it’s all personal preference in the end, but keep in mind that it’s all a psychological element in videography, and what the eyes and mind interprets subliminally. But believe me, there is a difference in the two positions, and where your face and direction of your commentary is pointing towards.

    Best wishes,
    Mark

    • Shane Melaugh says:

      Thanks for your feedback, Mark. We’re doing a lot of experimental stuff with video at the moment (both here and on imimpact.com). It’s likely you’ll encounter further videos with things you find disagreeable in the future. It’s because I believe you have to overstep boundaries to know where they really are and through this experimentation, we aim to get better at communication through video. Your feedback is appreciated and it’s part of the learning experience.

  • David D says:

    @Mark
    Do you have a website with more information on that?
    IMO, there is a lot to learn from the way Apple make their videos.
    There is also a lot to say about consistently using the same color combinations over different scenarios/use cases, and the emotional thrust/likability feelings that are grown with it over time.

  • Cynthia says:

    As someone new to trying to make a website, I can’t say enough how much I love Thrive Themes. Your helpful, concise videos are fabulous. The time you have saved me, learning about stuff new to me, is immense. Plus, the few times I did need support, because I couldn’t find an answer in knowledge base, it was fast! (and helpful…and courteous…I didn’t feel ‘talked down too’ if that makes sense.) A big thank you to you all.

    • Shane Melaugh says:

      Thank you for this comment, Cynthia! It’s very motivating for me to see this kind of feedback.

  • What a pattern interrupt it was when you appeared on screen with the tank top! I couldn’t stop laughing! As usual, fantastic content. Can’t get enough of it.

  • Emil M says:

    Hi Shane,
    Thank you for another gem of useful information delivered cristal clear!
    I appreciate more and more what you’re doing, and I guess that means I am a happy customer. But even if I wouldn’t be your customer, I’d read your articles, watch your videos and put in practice what I learn. Thank you for doing a great job on helping people focus on the essentials on their online business and giving us tools for making things easier!
    All the best,
    Emil
    P.S. The G+ button didn’t work for me, I only was able to download the pdf after I used the Tweet button

    • Shane Melaugh says:

      Thank you for your comment, Emil! Sorry about the G+ button issue. We’re working on improving this share locking thing to make it more reliable.

  • Keith James says:

    Great post. I was just wondering why you think it is necessary to also desaturate the colors? Aren’t colors used to draw attention?

    • Shane Melaugh says:

      Hi Keith,

      If everything’s highlighted, nothing is. The same is true for colors: yes, they grab attention. And they grab even more attention if they aren’t omnipresent.

  • Louise G says:

    Hi Shane – great tools. Thank you for sharing!

  • Kelly says:

    I keep learning from you and applying it to a rework of my current site. Before too long, I’ll be launching a nice new Thrive Themes site and putting your practical tips into action. Thanks for great help.

    • Shane Melaugh says:

      That’s great to hear, Kelly! Very good to know that you find our tools and training valuable.

  • Jim says:

    to get the bonus download, i just shared on twitter using your buttons but i didn’t get any link. anything wrong on my side?

  • Maricarmen says:

    That was hilariuos and totally unexpected! Loving your videos more and more (and super happy to a Thrive member), thanks a lot!

  • Hi Shane, just to add to Emil’s comment, g+ unlock button is not working for me either. It just toggles between adding and subtracting one g+ share, but no download button appears.

  • John S says:

    Such a wonderful article! I am a keen to webdesign so this was a great education. Keep up the good work!

  • Yasin Rishad says:

    Hi Shane,

    So glad to see your content on conversion focus design. To make best design it should be minimal and smart. Thrive leads and content builder has minimal design with focusing on conversion. I think that’s the best example for making smart design.

    Thank you for your brilliant video on visual hierarchy which give clear concept on conversion focused design.

  • Fakharuddin says:

    Good sharing Shane.
    Thanks for the cool videos.

  • abbey bella says:

    This article gives us a good insight about. Highly appreciated, very thoughtful.

  • Drew says:

    Great advice for designing your website. Keeping it as simple as possible will be your best option. A slow or difficult to navigate website will not help your customers.

  • Vivek Ghai says:

    Thanks for sharing. !! A/B Testing also plays an important while designing the website

  • Wumi says:

    Thanks Shane, awesome! I shared this post on twitter, Facebook and g+1 , but didn’t get to download the PDF copy.

  • JD says:

    Great post, Shane!

    Just stumbled upon your blog actually.. looks like I have a lot more reading to do :)

  • Annie Snow says:

    I’m so glad I found Thrive. I have plans for a niche blog. I have looked at hundreds of themes and even did a failed trial run at another design site.
    Finding the “perfect” theme, even a very expensive, popular theme doesn’t ease my pain. Then I would have to buy graphics, and the available graphics are usually inferior and expensive. And I would have to outsource the website design. “Drag and drop!?” Please, Drag what and drop it where!?
    Imagine my relief when I watched the demo videos of Thrive in action. A Thrive membership is going to be such an exciting way to get started. I can do content. I just couldn’t figure out how to present it in a professional, pleasant format. Merry Christmas to me!

  • Nice tips concerning the design ! thank you a lot Shane !

  • Juan Z says:

    I love this post. Greetings from spain

  • Suresha B says:

    Awesome stuff and its more helpful guide. thanks for sharing Shane Melaugh !

  • Rob says:

    Great info but you do not get things FOR free any more than you would FOR expensive.

    Free is an adjective or an adverb and does not require the use of a preposition such as FOR.

    You get things free.

  • Elizabeth R says:

    Thrive Themes is one of the best Content building tools I have purchased in a long time. I appreciate the Professionals at Thrive Themes and the service given to us as customers. As a none techie, I have been working very hard with all of the great information shared by you and your team. I love the presentation, and I will be trying to improve my site by using the themes on a daily basis.
    Elizabeth

  • 2maree says:

    I’m a huge fan of yours Shane. But if you really want to make a cut above the rest blogging about pointless “top 5 lists”, you need to provide unique, stand-out content. I did’nt learn anything new here.

    Totally, loved the humour angle you were experimenting with the “you need to look the part” – now I know you’re not all serous :-) best wishes. Ram

  • Dan N says:

    Great post – I wondered how do you have one part of your side-bar floating in thrive themes?

  • John A says:

    Great tips as usual, Shane. That blur test is intriguing.

  • >