Pro Blog Design

Photo by pshanEvery site has a reason for being online. It has a purpose. Good design takes into account that purpose, and then works towards it.

Site goals are what you want your visitors to do on your site. It is important to make the distinction between what you want, and what they want (Although the two may often overlap).

For instance, your readers may not originally want to sign up to your newsletter, but if you want it enough, you just might persuade them.

The first stage in creating a great design is to lay out your blog’s goals. My advice is to scribble down everything that you would like to gain from your site (RSS readers, advert clicks, sales leads etc.), then take that list and order it by importance. It is important to think this through now because it will make decision making during the actual design much, much easier.

It’s All About Prominence

Readers will not read everything on your page. The path to achieving your goals rests on choosing what you really want visitors to see, and knowing what you won’t mind them not seeing. In short, it is about giving prominence to the important elements.

The tricky thing about prominence is knowing not to overdo it. There are many ways of giving an element prominence, and they will be discussed below, but it is crucial to realize that in order for one thing to stand out, another has to fade in.

In short, for every element you give prominence to, you lessen the overall effect of those elements. This is the main cause of clutter. When a person attempts to highlight too many sections of the page, the effect is ruined, and instead of one or two things drawing a reader’s attention, everything tries to draw that attention, causing confusion and loss. Minimalism is about drawing attention to just one or two, crucial, elements.

How To Create Prominence

• Positioning. The key locations are the top of the page, above the fold, and in the center. User eye movements will tend to flicker over these locations, so placing important content here will make it more likely to be noticed.
• Color. There are a number of ways of making a certain color pop out of the background it is on. Does it contrast with the background? Is it a more intense, saturated color? Most backgrounds are cold colors (How often do you see blue backgrounds?), so using a warm color will make the element stand out. Various color combination tools can help you out.
• Size. If it’s big, it’s worth noticing, right? Size tends to be a decent indicator of importance. Can you think of a time when a blog’s title was the same size as it’s body copy?
• Inconsistency. Certain styles have consistent traits, like a certain font that is used again and again. If you want to make an element stand out, then break the flow of what the user expects to see (Post headings use a serif font here). Be careful though. Break the flow too often and all you will do is make a mess.
• Active whitespace. Whitespace is simply empty space. Passive whitespace is when we use empty space to pad out a design, and prevent it from feeling claustrophobic. Active whitespace however is when we purposefully space out a certain element, causing it to draw attention.

I bet you read this. Whitespace rocks!

Test your own design out. What is the first thing you notice? Is it really the thing that you want people to notice most? And what caused you to notice it?