Facebook Pixel
Join our Facebook Community

Principles of Effective Blog Design

Posted By Guest Blogger 30th of September 2011 Blog Design 0 Comments

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:

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.

The rule of thirds

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:

aext.net follow invitation

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

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

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:

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.

About Guest Blogger
This post was written by a guest contributor. Please see their details in the post above.
Comments
  1. It’s amazing how doing very simple things can make a huge difference.

    Great post! Thanks!

  2. These are some really great tips. I never really paid much attention to the search bar, but I’ll be sure to move mine up now.

    Blog design makes a huge difference in the way people perceive your writing. It all comes back down to first impressions–if their first impression of your work is a badly designed blog, they’re not going to be very likely to come back.

    • Yup, people are lazy and impatient. They want to find what they’re looking for fast and don’t want to waste time figuring out where the search bar is.

      Thanks for reading.

    • Same here. My search bar was slightly below the fold under a short message and social networking block on my sidebar. I immediately moved it to the top and installed a better search plugin.

      These simple tips give me much more confidence in my blog layout.

  3. Excellent article! I was happy to see I took a lot of these tips into consideration with the new redesign of my biggest blog (launched last night).

    The feedback has been overwhelmingly positive. I’m using a 16-pt font, with lots of whitespace so it feels more open and airy.

    I’m installing the Relevanssi right now :)

  4. I have just started and this has been by far the biggest issue. I’ve had some design background and zero coding. This translates to I know what I want but I have no idea how to put it on the screen.

    I’m pretty happy with what I got now, I learned that simple is best. Since I didnt have the money to spend on a big designers, instead of having the brand and logo I had in my mind fit the blog theme I decided to pick a stylish theme and fit my logo and design to it.

    I’m pleased with the results.

    All the points you had on there are wonderful, they’re actually things you are taught when you’re learning digital design. I was lucky enough to learn design and aesthetic as a teenager but for those who werent, they should definately take the time. EVERYTHING they do will be benefited by it (even tax attorneys need letterheads).

    • Definitely!

      I also feel you don’t need to spend big bucks to find quality blog designs. Some premium designs for like $30 (on Themeforest and the like) are really good.

  5. Good article and awesome examples! I want to take that “The One Question” test now! It sucked me in already!

    When I saw the first picture though, I thought it was going to be that ‘golden voiced’ homeless dude that got a makeover on the Today Show. Ted Williams I think. So I was expecting a story about how the site content stayed the same, but with a better design, had greater conversions.

    • Haha, yes take the test – find out your purpose!

      Sorry, the post has nothing to do with Ted Williams.

  6. I recently started a blog for a class project and found this blog post extremely helpful. Thanks for the advice and tips! Do you suggest WordPress as a good starting platform? Do you feel it’s necessary to customize beyond what the free templates provide? Also, do you recommend any sources for finding images on the web? Thanks.

    • Hey Tiffany

      Definitely go with WordPress, it’s the best. I do recommend some customization, otherwise your blog will look just like hundreds of others!

      Best source of images is Flickr. Look for creative commons licensed images and make sure you attribute the author when using them.

      • Frederic Sidler says: 10/09/2011 at 5:04 am

        Do you host or embed Flickr image. How do you attribute them?

  7. I can’t agree enough with this post. I can’t tell you how many blogs and sites I click away from because of ugly design and clumsy navigation. That saying “Don’t judge a book by its cover.” doesn’t ring true for the internet. You can have great content but if I can’t find it because of lousy design, it means nothing to me.

    • Exactly! People won’t bother reading it if it doesn’t appear trustworthy, modern and what not. Or they distrust the content.

  8. Your post forced me to think once more time about my blog design. I am little bit confused whether i should do it myself or outsource it. Thanks for this beautiful post.

  9. I didn’t know about the limitations of the WP search function. I downloaded the plugin
    Thank you!
    Mark

  10. I love Rule of thirds! It makes sense — the image is pleasant for the eyes. :)

    • Isn’t it? I’m shooting all of my photos using the rule of thirds. Makes way better pictures!

  11. This was a really great post, specially the the many links to CSS edit and the fonts

  12. Useful tips. I think the most important part is to use large fonts and a neutral color in your background, this is what I have been doing with my blog.

  13. Thanks guys.

    @Rakesh If you’re not a kick-ass designer, it’s definitely worth the effort to outsource it. Remember – you get what you pay for. Don’t choose based on the price. An amazing designer is worth every penny.

  14. Golden post, thanks!

    Luckily, I seem to be on the right track, though text could be a bit bigger. I’m constantly looking ways to improve my blog so this was very, very helpful :)

  15. Excellent post, thanks so much for the tips will try in integrate some of these into our website design.

  16. The is by far the BEST post I have read on Problogger! Very, Very useful trenchant analysis of web design. Plus the links are great.

  17. Great post! You know, this applies to much much more than just blog design… I mean you could legitimately give this to new web designers as a “Web Design 101” course. Good, concise information, thank you!

  18. Excellent article. I had always wanted to change my blog design but had no place to started. Right now, I’m changing the fonts and creating a colour scheme, maybe even a new theme. Thanks for the tips.

  19. I didn’t understand the rule of thirds. How is the right image better than the left?

    • Don’t center the object you’re taking a photo of, but instead align is left or right along the imaginary line. It will make more interesting photos.

      • does that always work?

        in the image of Quotic logo the truck is placed in the center. if it were right or left, i think the photo would have worsened.

  20. Excellent, I really didn’t realise how much images have to play in the importance of a blog post. I will certainly be looking to use more images in my own posts from now on. Also really like the advice for inviting repeat visits, I find many people are still a little confused on how to set up and use RSS feeds, so perhaps a detailed post on that would be really useful too.

  21. Well said. Many bloggers overlook the importance of invite repeat visits. It is also interesting to learn that actually text logo can work better.

  22. I’ve done pic upgrades recently and have seen a huge jump in client interaction. What looks good, is good. As always, great read and thanks for the tips.

  23. My current blog design is deplete of white space. I am thinking of a change to more white space as your blog looks. Thanks for the tips. But I do hope I do not end up a copycat in the process.

  24. I like your advice especially on the use of white space in the blog. My current blog template is so cluttered — with dark background design and with fillers of any kind for blank spaces. I am presently looking for a template to follow your advice. Many thanks!

  25. I agree with Josh, sometimes the simplest thing can provide the biggest reward. Usability makes a big difference for blogs.

  26. Great blog! After spending about a year launching a new health provider website, I did user testing with 5 different individuals. Within 30 seconds all 5 told me without hesitation that they would not come and see me. This was based on stock photography, website colors, and more than anything, my picture on the homepage. What an eye opening experience. All told me that the navigation and information on the site was great, but upon initial impression I had already lost them.

  27. What search bar? Guess I don’t have one. Love taking my own photos, even if they are photos of pictures in magazines (vintage mags.) I don’t usually read a blog that is all type, unless I have been following the person for a while, since they usually have great photos, but decided this time just to go with a narrative. And, I should go get me a word press site, too!

    Thanks for all the pointers, appreciate them. Hey, where is the RSS feed so I can follow just the follow-up comments?

  28. I have just updated my domain and revamped my branding on my branding and marketing blog, Twitter page and Facebook page (I’d be interested to know what you think?)

    I’d add a couple of points regarding your brand personality:

    1) what tone of voice do you want your brand to have? Eg. Authoritative, cool, fun, organic, sensible, trustworthy. The brand tone of voice from a design point of view says more about you than where the search bar is (as important as that is, that is more UI design)

    2) Your brand tone of voice should echo from your design into your style of writing. They are one and the same.

    3) Is your brand voice consistent across your different online environments. Does twitter and Facebook say the same thing as your home base blog?

    4) Your ‘About Me’ Is a great way to tell your brand story. It’s not just facts but a chance to connect on an emotive level with your readers.

  29. Awsome! After reading this article today morning I became more confident in my design projects. Thank you for writing this. Great job!

  30. Great article, it’s amazing how you can miss the simple things in the rush to go live and then the routine of general updates. I’d never heard of relevanssi-will be downloading it tonight. Ps, this blows renders really well on a mobile too!

A Practical Podcast… to Help You Build a Better Blog

The ProBlogger Podcast

A Practical Podcast…

Close
Open