Bokeh Your Web

by Jin, 03-05-09 // 8 comments
Bokeh, Lord Vader

Bokeh (derived from Japanese, a noun boke 暈け, meaning “blurred or fuzzy”) is a photographic term referring to the appearance of out-of-focus areas in an image produced by a camera lens using a shallow depth of field. Different lens bokeh produces different aesthetic qualities in out-of-focus backgrounds, which are often used to reduce distractions and emphasize the primary subject.

As I journey deeper into my photography hobby, one of my favorite effects is Bokeh, defined above. I like how the main subject is accentuated, contrasting against the soft, blurry background elements. I believe there are fundamental design elements that apply across mediums. Bokeh, should be applied to web design as well.

Of course, I’m not suggesting to blur the background of a website literally.

Visual elements have to serve the content, or the function of the site. Treat content and function as the main subject matters, and the visuals as the bokeh effect. When a website is too graphics heavy, it becomes a distraction.

I think it’s safe to say that today, the web is saturated and evolved to the point where it’s not about “Hey check out my site,” but “What can my site do for you?” It’s very important to let your visitor know what your site is about right away. To illustrate my thinking on graphics (homage to Indexed):

visual vs returning visits

I’m not down playing the importance of visual here. In fact, visual elements serve important roles from branding to invoke an emotional response of a site. However the truth is, graphics, no matter how beautifully done, have a very high diminishing return on the web. Think about those sites that whoa-ed you the first time you visited. Then think about if you still consciously paid attention to their graphics the 10th, 50th, 100th time you went back. If you’re a frequent re-visitor, chances are you’re going back for the content. Eventually, the beautiful visual elements become a “pleasant noise” in the background(if done appropriately).

If you follow design trends, you’ll notice there’s an increasing use of simplistic designs on sites that are content and function driven such as news, web application, blog, and social media sites.

Before we go wild in Photoshop, it’s important to think how the design will serve the content. Establish the hierarchy of importance first.


also feel free to contact me on twitter or via email
Jeff 03-05-09

This is an awesome article. Very well written and informative.

Steven Clark 03-06-09

Nice post Jin, too true. I can see that bokeh runs parallel with the idea both visually and from an information standpoint of bringing the most important features to the fore.

In contrast, web pages that try to bombard every message… scarey.

Jin 03-08-09

Jeff and Steven, thanks! I definitely agree that certain design elements run parallel between mediums. I plan to write more on that topic. Hope you’re having a great weekend.

Dmitry 03-09-09

It’s very difficult to create an iconic design that will last. The more visuals you use, the more likely your design will get boring more quickly because there will be more of the same. Going for minimalism with less visual elements and eye candy in the design means there is less of the same stuff you’ll be seeing again and again, so the design would likely last longer. But making things too simple risks in a design that is boring right from the start. I think the trick is to get the right balance between eye candy and simplicity — add enough polish so that the design is refined, yet don’t go too far as to make the new design just a part of a trend that won’t last. Restraint is key.

Dmitry 03-09-09

Oh dear, no edit button :( I mean an “iconic” design there in the first sentence.

By the way, nice to see you start blogging again. Looking forward to more articles! ;)

Jin 03-09-09

@Dmitry, edited :) Thanks for the comment. I think it’s very true that even minimalistic design isn’t for everyone, or every site. I think as long as every design element used can stand the test of time on their own, then years from now the site will still look good. I’m often amazed at print magazines from decades ago, how the designs still hold their own now. Finding the right balance is definitely the key.

This past month(Feb) has been very busy for me at work. I’m back on somewhat regular schedule now. In fact, writing a new blog right now!

Soh 03-10-09

Great point Jin, I was actually talking to a friend about a similar topic regarding Flash.

Excuse me for my language here but as my director says it best “Don’t j**rk your self off on your own designs – focus and please your audience’s needs”. hehe :-p

Jin 03-11-09

Thanks Soh. I agree with your comment, we may go blind otherwise :) (yes, that was my attempt at a joke)