Learn3 Simple Design Tests to Improve Your Aesthetics

Nick Pettit
writes on August 12, 2013

Share with your friends


Developers often use test driven development to write simple and reliable code. Sometimes too much testing can slow down the development of a product, but in general, it’s a smart idea. The web design community doesn’t have a perfect analog to written software tests, but a few simple aesthetic exercises or “design tests” can serve a similar function. In order to perform these tests, you’ll need to open a screenshot of your website in an image editing program like Photoshop, although a simple photo editing app will do fine as well.

Update: Thomas Park created these amazing design test bookmarklets so you can do this in any modern browser! Photoshop not required.

Below is a screenshot of a portfolio website that will be used as project material in a soon-to-be-announced Treehouse course.

Normal screenshot of a portfolio website.

This screenshot of the project is the portfolio page which is intended to showcase design work. Take a few moments to examine the aesthetics of this layout before moving on.

The Desaturation Test

Black and white screenshot of a portfolio website.

With your screenshot loaded into your image editing application, desaturate the colors completely. The purpose of this test is to find areas of the image that might have a lot of contrast in color but not enough contrast in value (the difference between light and dark). For example, take a look at the portfolio piece in the top center. The number 2 has some well defined yellow edges in the color version, but as soon as it’s black and white, the lines become a bit fuzzy. This particular instance isn’t too bad, but if you run this test and find page elements that appear to blend together (especially text) then you should reconsider the colors and values.

Contrast in value is desirable for many reasons. First, humans are much more sensitive to changes in value than changes in color, so if you’re trying to highlight some page elements or make text legible, contrast is paramount. Secondly, there are millions of people that have some form of color blindness or related vision impairment. If you’re able to differentiate between two page elements using both color and value, then you’ll make your site accessible to more people.

If you only do one of these three tests, make sure it’s this one. In most cases, you’ll uncover at least one area of poor contrast that should be fixed.

The Blur Test

Blurry screenshot of a portfolio website.

In this test, you’re looking at several things. Contrast in values comes to mind, but this is also a great way to look at the mix of color saturation across the screen. For example, if you’re going for a more subdued look, you probably don’t want bright complimentary colors sitting next to each other.

It’s also a helpful technique for examining your composition. For example, in this layout, the “heavy” and dark portfolio pieces are evenly distributed in a checkerboard pattern with the “light” and colorful pieces. This adds a bit more variety and makes each piece stand on its own just a little bit more than if all the lights and darks were clumped together. I should note that this can be slightly situational. In the case of this portfolio site, we wouldn’t want an extremely graphic and colorful header to overpower the image gallery. Rather, the header should be subtle and allow the gallery to shine.

Accessibility also comes to mind once more in this test. By starting out with a small amount of blur and slowly ramping it up, you can visualize which pieces of text on your page are the most legible to people with varying degrees of vision impairment. Adjusting the amount of blur can also highlight the “scannability” of your design and show which elements people might pick up on first.

The Upside-Down Test

Rotated screenshot of a portfolio website.

Last but not least is the upside-down test. By flipping your design 180 degrees, you can isolate the composition and balance. You may even want to take this a step further and draw a line straight down the middle of the page. This will help you to identify issues with the composition where one side might feel too heavy versus the other side. Fortunately, this layout is fairly symmetrical, so there’s not much to worry about. If, however, all the dark imagery was in a single column down one side of the page with only light text to balance it on the other side, a balance problem might be much more apparent. More simply, if you’re in need of a fresh perspective (literally and figuratively) on the aesthetics of your website, this test might help.

14 Responses to “3 Simple Design Tests to Improve Your Aesthetics”

  1. Interesting ideas for testing – especially the upside down test. Thanks!

  2. Rose Cass on August 12, 2013 at 1:10 pm said:

    Thanks for the post Nick! I will have to try these!

  3. Kern typography upside down also, as you see the objects as shapes, not letters.

  4. Learnt! Thanks for sharing.

  5. NinjaAdmin on August 13, 2013 at 1:13 pm said:

    Great article! I will certainly have to apply these techniques to my next builds!

  6. Serge Seletskyy on August 14, 2013 at 5:17 am said:

    This is awesome. Thanks for great tips.

  7. Elijah Chiurri on August 14, 2013 at 2:47 pm said:

    Nick is awesome.

  8. Mason Reno on August 14, 2013 at 5:55 pm said:

    Thank you Nick! Time to test it out for a bit

  9. Nosmo King on August 15, 2013 at 5:21 pm said:

    The only useful test here is the one for those with colour blindness, the others, as a designer, you should be able to figure out without having to test. crickey, one of the most important tool for the designer is his eyes, balance, geometry and colour don’t need silly tests, they just need good eyes and judgement.

  10. Katrina Moody on August 18, 2013 at 11:52 am said:

    I love the idea of blurring the shot to see where your concentration of colors lies – I would note that looking at the screenshot upside down is a common technique I use when sketching too – it’s an easy way to remove yourself from the design and look at it objectively! Great post!

  11. Webmaster Blog on August 19, 2013 at 5:56 am said:

    Hey there, You’ve done an excellent job. I will certainly digg it and personally recommend to my friends. I am sure they will be benefited from this web site.

  12. MahaloMarlin on August 25, 2013 at 2:11 pm said:

    We even reserved one final edit pass — of entire books — for proofreading/scanning the whole thing upside down. That foiled the brain’s tendency to see what it expected, and a surprising number of typos were caught that way.

  13. Richard Donnelly on August 30, 2013 at 10:41 am said:

    Blur Test is an Good example, as a logo should stand out, if eye sight is blury

  14. Great suggestions. I especially like the Upside-Down test. You could also do these with pure CSS.
    body {
    -webkit-filter: grayscale(100%); /*Desaturation*/
    -webkit-filter: blur(6px); /*Blur*/
    transform: rotate(180deg); /*Upside-Down*/

Leave a Reply

Want to learn more about Design?

Design refers to visuals, interaction flows, wireframes, branding, and more. Learn how to use good design to enhance your website, mobile app, or business.

Learn more