5 Ogilvy Tips for Blog Design

Filed as Guides on August 17, 2009 9:25 pm

Repost This

ogilvyonadvertising

David Ogilvy is a legend in the advertising world, despite having first retired some 30 year ago and not having published a book in nearly 25. His works are required reading for advertising students today and his philosophy of creating ads that generate sales made millions for his clients. He had a characteristic style or writing and design that remains instantly recognizable to those who’ve studied him, even today.

Though Ogivly died in 1999, just as the Web was beginning to take off, many of his lessons and ideas remain just as valid today as they did half a century ago. Last year I wrote an article entitled “7 Blogging Tips from David Ogilvy” that focused on applying some of Ogilvy’s techniques to blog writing. Ttoday however, I’m going to focus on how his design tips can help you choose a good look for your blog.

Ogilvy had a very famous and classic layout that focused on combining visuals with easy-to-read text. It’s a simple layout that draws the reader’s eye and lures them into the content. It’s a design that at least some elements easily apply to blogs, including the ones below.

1. Clean Layout

Ogilvy’s layouts were very clean. A visual element at the top, a strong headline and text below. The eye had a set course to follow and nothing in the ads was allowed to take away from the focus on the content.

Blog design can learn from this too. The WTF Blot Clutter series on the site contains some excellent examples of things that could distract your readers from your content, thus making it less likely to be read.

Be smart about what you put around your content and make sure it is worthwhile before adding something that could be a diversion. Is it something that’s useful and warrants a potential distraction, or just “fun” and “interesting”.

2. No Reverse Type

David Ogilvy repeatedly found that reverse type (white text on a black background) is harder to read and that having black text on a white background. Though the rule was written for the print world, where Ogily did the majority of his work, it seems to function well on the Web.

Though some environments that people are going to look at for long times at a stretch, such as programming and Web development applications, are easier to view in reverse type as it can reduce eye strain, most people find it easier to read regular type on the Web.

The exception, of course, is if your readers are used to reverse type. At that point, it most likely is better to use it. However, always make sure that your text and background are of a high contrast (no gray on white, for example) to one another for easier reading.

3. Visual Before Text

Ogilvy’s advertisements had a visual element to draw the eye of the reader to the ad and to lure them into the text. To aid in this, the visual element, the largest one at least, was placed BEFORE the text, so the ad could create a trail for the eye to follow, visual, text and then the call to action.

The idea is simple, get people to look at the text with a good visual, hook people into the text with great writing and then walk them through with subheads and compelling copy until they read the call to action.

Remember, with blogs, you aren’t just designing for the Web but also for RSS. Feeds need a strong visual center as well to help them stand out from the hundreds of other feeds your readers likely subscribe to.

4. Font Play

When it comes to choosing fonts for your site, it is more important to use what your readers are familiar with than follow any specific rule. Some readers find serif fonts easier, others find sans-serif fonts easier to read.

It seems to largely be based upon a digital divide, those who are more used to printed works are fans of serif fonts while those who are more used to reading materials on the Web prefer sans-serif.

The important thing, however, is to NOT use a font that is outside of the norm. Fonts that are too new and too unique are difficult to read and will turn readers away. This also means keeping your font size within the normal range too, usually between 10 and 12 pt.

5. Narrow Columns, Small Paragraphs and Subheads

Your writing has a direct bearing on your design so you have to write for the eye as well as for the ear. Use shorter paragraphs and regular subheads to give your readers breaks and make long copy seem shorter.

Also, make sure that your main column is narrow enough to be easily read. Ogivly used a newspaper layout with multiple columns per page. This is not something most blogs can use, but with monitors approaching 2000 pixels wide and beyond, place some controls on how wide your main column can be so that the reader can easily get to the next line.

Bottom Line

Granted, there are many elements of Ogilvy’s design that don’t translate well into the Web. For example, drop caps, a staple of his ads, are all but gone from both the print and Web world, making them more of a distraction than a benefit.

However, much of it, if not most of it, does still apply very strongly and it is well worth studying. Because David Ogilvy’s design style was clean, simple and effective, not to mention ideal for layouts with a lot of words.

Though you don’t want to make your site look like a giant ad, using some of advertising’s design tricks can help make your site easier to read and more effective for your reader. It’s only logical that the industry that is expert and motivating people to buy products might hold clues on how to motivate people to do other things, whether it’s subscribe, take some kind of political action or simply come back.

As such, it’s worth understanding how advertising works and, to that end, I can not recommend David Ogilvy’s last book highly enough.

Tags: , , , , ,

This post was written by

You can visit the for a short bio, more posts, and other information about the author.

Submissions & Subscriptions

Submit the post to Reddit, StumbleUpon, Digg or Del.icio.us.

Did you like it? Then subscribe to our RSS feed!



  1. By xensen posted on August 18, 2009 at 3:40 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Notice that the illustration (the one that says OGILVY ON ADVERTISING) breaks the supposed image-before-text rule. Clearly the image was positioned after determining that the word “on” in the copy would produce an empty space.

    Reply

  2. By Brahm posted on August 20, 2009 at 10:47 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Good ideas and call to re-focus on the basics, which many of us should do more of; I find as i write that sometimes enthusiasm can run ahead of smarts and colours and fonts collide and explode and become painful to look at and read.
    Ogilvy was brilliant and agree with your reccomendation on his book. Also just saw a really good docu bio of him, in all places on Air Canada as I sat on the runway waiting to take off. or for food. or clean air.

    Reply

  3. By Jamie Allsop posted on September 4, 2009 at 2:34 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    This is some really useful information. I agree with @Brahm, we need to remember the basics. Sometimes it is the basic things which make the design of your blog different from everyone elses.

    Reply

    Your words are your own, so be nice and helpful if you can. If this is the first time you're posting a comment, it might go into moderation. Don't worry, it's not lost, so there's no need to repost it! We accept clean XHTML in comments, but don't overdo it please.

    Current day month ye@r *