x8xgjw
Last Updated: February 25, 2016
·
1.383K
· alexanderbrevig
Feb007acc38e70d57f7b4c205f7e8b26

The Blur Method

The goal of the blur method is to identify areas in your design with a high contrast. Spots where the eye will tend to move. This can be achieved by crossing your eyes but it's hard to be consistent and it's not good for you.

This post is meant to demonstrate a technique, not discuss the design of the example which is github.com in this instance.

So, let's just look at an example. I have cropped a section from the top of the landing page of github, with a message.

Let's start by looking at the crop through a 5px Gaussian blur:
Picture

In this image, it's clear that whatever the green horizontal banner, and the four yellow rectangles tries to show - it's very important.
This is definitely the areas of most contrast.

Then, here is the same crop with 2px Gaussian blur:
Picture

At this point we see much more detail, and the dashboard tools and the upper right 'News Feed' link shows up more clearly.

Finally, this is the crop with no blur:
Picture

In this case, the heavy use of contrast was intended, and good. Your eyes were meant to be drawn to the notification. If you do this to your designs and discover areas of high contrast which really is of little or no importance, I think you should consider making it a more integrated part of the design.

Paprikka has made a contrast tester utility that we all can use while getting the design just right.

Say Thanks
Respond

4 Responses
Add your response

5948
Photo

Very interesting, indeed! Basically, I'm doing the same think when creating prototypes and you've described the method so well, that I just had to create a simple web app, which could be used as a tool for it :)

Test contrast - chrome only

I you think this might be helpful, don't hesitate to include the link in your protip, so I could add a reference to your comment in my app.

over 1 year ago ·
5950

Really cool and simple way to know if you have to highlight anything on your design. Good work!

over 1 year ago ·
5952
Feb007acc38e70d57f7b4c205f7e8b26

@paprikkastudio link added, thanks! A very cool little app :)

@sergivives thanks!

over 1 year ago ·
5986
Photo

@alexanderbrevig I've just updated my app and repo location:

http://paprikka.github.io/le-bat/

Sorry for the confusion, but I'll have to use the other name for a different thing soon.

over 1 year ago ·