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):
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.