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.

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:

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