Principles of Effective Blog Design

This is a guest post by Peep Laja, CEO of Traindom.

People judge books by the cover, and other people by their looks.

Take a look at these two men:

Now answer these questions (you can’t choose “neither”):

• Which one would you rather ask investment advice from?
• Which one would you rather have babysit your children?
• Which one would you rather have cook your dinner?

… and so on. You don’t know anything about these men. Yet you make assumptions and can even take decisions based on their looks.

What does that have to do with your blog? Everything!

“As aesthetically orientated humans, we’re psychologically hardwired to trust beautiful people, and the same goes for websites. Our offline behaviour and inclinations translate to our online existence.”—Dr. Brent Coker

Dr. Brent Coker studied the impact of attractive websites on human behavior. Websites that are more attractive and include more trimmings create a greater feeling of trustworthiness and professionalism in consumers.

People judge your blog based on the design

If somebody knows you well, they don’t care about your looks that much. If they see you for the first time, looks matter a lot.

The content of your blog is always more important than the design, but you need to woo people with your design first. You draw them in with design, and keep with content.

“Design is not just what it looks like and feels like. Design is how it works.”—Steve Jobs

The following advice will help you design a better blog and this in turn will help you sell more (whether you’re selling free sign-ups, coaching sessions, products, or whatever).

Make it easy to find stuff

Who is your site for? What are they looking for? Value function over aesthetics: 76% of people want it to be easy for them to find what they want.

What kind of blog layouts are they used to using? Remember, people spend most of their time on other websites, not yours. Avoid totally new and never-seen-before layouts. Your car isn’t unique, and your house might not be either.

For return visitors, search is vital. Make sure your search box is clearly visible (above the fold), at least 27 characters wide and that the search can actually find relevant stuff. WordPress’s built-in search is very poor, and it lists the results by date, not relevance. Use a plugin like Relevanssi to improve it tremendously.

Less is more

Use plenty of white space. Don’t fill every possible space with banners, messages, or whatever else. The more breathing room there is, the easier it is for visitors to consume the information you produce.

Here’s an excellent post on using white space.

Rule of thirds

You should never publish a blog post without an image. A visual communicates your ideas much faster than any text can.

The best images follow the rule of thirds: an image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections.

Image licensed under Creative Commons

See how the image on the right is more interesting? That’s rule of thirds in action.

Clarity matters

Content and clarity are important parts of the design.

What is this place? What can I do here? How is it useful? First-time visitors need to get answers to these questions within their first seconds on your blog.

Make sure it’s possible to clearly understand what your blog is about and who’s it for—no matter which page the visitors land on. The better you build a connection between your reader and your blog, the higher the chances they will stick around.

People start reading your website from the top-left corner. The fixations go in order from left to right. That’s where you want to place the most important information.

Readability and typography

The text on your blog should be beautiful and easy to read.

Use large fonts (at least 14px), short lines (see the width of Tynan’s blog posts), and lots of white space. Create a new paragraph every three or four lines, and a subheading after every two to three paragraphs.

The best blog typography lends a meaningful purpose to the content while triggering emotions in your readers in the process. Besides picking a beautiful web font, make sure that different text elements have a different look and feel (main headings, subheadings, regular text, italic text, quotes, lists, and so on).

Here are 10 Examples of Beautiful CSS Typography and how they did it. Also take a look at Space, a WordPress theme designed for reading.

You can use TypeTester to test and compare different fonts, sizes and so on.

Invite repeat visits

Over 95% of people won’t buy anything on their first visit. Hence you should not even try to sell to your first-time visitors. Instead, try to get them to come back so you can build a relationship and add value before you make them an offer of any kind.

How can you do that?

• Invite them to subscribe to your RSS feed (and state how many people already do as a type of social proof).
• Use a lead magnet to attract them to sign up to your email list.
• Invite them to subscribe to your blog posts over email (Feedburner is a good tool for this).
• Ask them to follow you on Twitter or become a fan on Facebook.

Make sure you focus on one of these options most (email list is best), but give a choice of up to three options.

This is how aext.net is doing it:

The aext.net follow invitation

Signup forms

The best signup forms:

• put the form labels above the input box (not next to it)
• give clear reasons to take action
• have the submit button say what’s coming next
• ask for as little user data as possible—an email address is enough in most cases.

The more fields people have to fill in to subscribe, the less likely they’ll be to do it. Email personalization by name is not working as well anymore anyway, so you might as well not ask for those details.

The One Question, a site helping people find their life purpose, has 30% of new visitors sign up via this form every day:

The One Question subscription form

Why is it so effective? The form offers the exact thing people search for on Google to come to the site. If you offer people what they want, they are happy to sign up.

Text logo: 1% pain, 99% gain

You don’t need to hire a fancy designer and pay top dollar for your logo. Even huge budgets might not make much difference here.

You can create a beautiful logo using text. Pick a beautiful fontand a background color you like—and voilà! A designer from Edicy took just 15 minutes to create this logo for an imaginary company (Tajo Oja):

Edicy's text-only logo example, by Tajo.ee

Careful with stock photos

Stock photos seem like a good idea, but 90% of them are utterly fake and cheesy. Have you googled “women laughing alone with salad” recently?

How can you expect to be taken seriously if you feature suits shaking hands and half-naked women measuring each others waists?

Some people advocate that given the proliferation of low-cost cameras and smart phones, your own photography should be used rather than stock.  I agree.

Can’t decide on the color scheme?

Let’s say you like the color red, but can’t decide what other colors match your favorite shade of red.

You don’t have to guess or ask your friends. You can use online color matching tools for this:

• Adobe Kuler
• Aviary Color Swatches
• Colorexplorer

How often should you revamp your blog design?

That’s actually not the right question to ask. You should only change it if there’s a real need behind it. What’s not working for you today? Put the goal first, and the redesign second.

Will the new design help you get more clicks to your ads? Increase pageviews or signups?

Ideally you’ll see your blog as a living, breathing organism that never stops evolving. Constantly A/B test your most important pages and design elements, and measure the improvement. You can only improve what you measure.

Peep Laja is the CEO of Traindom, online software for building online courses and membership sites.