Blurry, Colorblind and Brilliant

Posted by: Josh Walsh in User Experience.

“Design is in the details.”  - We hear it every day and it is absolutely true.  However, details without a blueprint to tie things together can lead to problems.   We are passionate about details, perfect grid alignment, perfect color combinations, gradients, reflections and textures.   These visual details have a major aesthetic impact on the website, but they can’t replace the content – The reason the website exists in the first place.

When working on the visual concept for a web design or application I always start with the epicenter.

Epicenter design focuses on the true essence of the page — the epicenter — and then builds outward. This means that, at the start, you ignore the extremities: the navigation/tabs, footer, colors, sidebar, logo, etc. Instead, you start at the epicenter and design the most important piece of content first.37 Signals – Getting Real

I work in grayscale.  I use varying shades of grey and font size to denote emphasis and priority.  I work in sans-serif fonts and follow basic typography rules.  I let the content speak for itself.

Garrett Dimon gave me a great little tip: blur your design.

I often find it useful to zoom out and use a Gaussian blur on visual designs to ensure that they have a clear visual hierarchy and appropriate use of whitespace.Garrett Dimon

When I follow this procedure my designs start to crave their own details.  It becomes obvious what visual embellishments to use.  You can see the impact that a certain color or font has on your overall design blueprint.

As a left brained designer, I can get pretty close to a finished design with just this procedure.  Then I hand off the concept to a graphic artist to make prettier.