3 Simple Design Tests to Improve Your Aesthetics

Testing JavaScript Performance with High Resolution Timestamps

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.

Nick Pettit

Nick is a designer, public speaker, and teacher at Treehouse. He is also a co-host of The Treehouse Show. Twitter: @nickrp

Comments

13 comments on “3 Simple Design Tests to Improve Your Aesthetics

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

  2. 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.

  3. 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!

  4. 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.

  5. 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.

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