Whitespace & Contrast: Why are they Important?

In honour of the new blog design, I thought I would share some blog design tips! I have to admit that the topic was inspired by one of my colleagues when he commented on the design: “Ah, the header is too dark and it’s taking up too much space”. Folks, it’s like music to my ears! (why?) How many times have we designers heard similar comments from clients or colleagues? How do we overcome this challenge?

I’ve been working in the web design industry for 10 years and, like most designers, I can attest to the fact that very few people realize the importance of whitespace and contrast in a site’s design. The graphic design term “whitespace” literally refers to any area of a page that’s not covered by type, illustrations or photos.

Why use whitespace

While most clients feel a need to fill every inch of a web page with photos and text, having empty space on a page is as important as having your company logo on your site. Without carefully planned whitespace, a design will feel cluttered (and give the same feeling as trying to walk in a too-crowded room). Whitespace helps a design to “breathe” by guiding the user’s eye around a page, but also helps to create balance and harmony visually.

Elements on the page attract the eye. The more elements there are, the more things there are to notice and users will be less likely to notice the important information. This is where contrast comes into play. Our role as designers is to enable communication by minimizing visual noise and creating visual hierarchy. It’s good practice to indicate the top of the page with a section that visually separates the primary-level page elements from the main site content.

Thinking of designing a blog site?
A few tips…

A blog site has a very different purpose than a corporate website. So I like to take a different approach when designing blogs. When users browse a blog site, they don’t expect to be bombarded with visual noise, so visual elements should be kept to a minimum so things look clean and simple.

The top section of a blog should be visually distinct from the rest of the page content. The best way to differentiate is to use a bold, solid block of colour, or some kind of tone or pattern that differentiates it from the rest of the page. So it’s a good idea to create a clear space at the top of a site design that positions the logo and navigation. Since blogs are mainly about the articles, it’s important to keep the text on a white background (much easier on the eyes). Instead of focusing on elements such as backgrounds, patterns and shapes, careful thought should be put into margin size, paragraph breaks, line spacing, header, text and link styles. Using photographs in posts from time to time will help to break up the text and create visual interest.

Whether you are designing a blog site or a corporate website, the concept of whitespace and contrast must be used and should be applied with careful thought.

I’d love to hear some of your thoughts and experiences on this topic. How many times have you had to explain your reasoning behind using whitespace? In your opinion, what makes for a successful blog design?