What Every Blogger Should Know About Design When Buying a Theme
Web Design Blogging

What Every Blogger Should Know About Design When Buying a Theme

by Seth · 36 comments

Getting a new design for your blog is both time con­sum­ing and expen­sive.  There are many great options for free themes but too often these themes do not have very many fea­tures and require a lot of extra work.

Pur­chas­ing a theme from pre­mium theme design­ers or pay­ing for a cus­tom design can not only give you many extra fea­tures but also allow you a unique and use­ful user interface.

Get­ting a design is much more than choos­ing col­ors, unique­ness and price.  There are a lot of impor­tant design ele­ments you should know about before get­ting a new theme.  Here are your most impor­tant areas of inter­est as well as a buyer’s checklist.

Fun­da­men­tal Design Elements

There are a few very impor­tant things to con­sider when eval­u­at­ing the design of a poten­tial theme.  Some of these ele­ments are often mis­un­der­stood so I will point out the what is usu­ally left out of posts about theme design.

We all know that fea­tures are impor­tant and themes with jquery or admin pan­els add extra cus­tomiza­tion to your blog theme, but lets go back to the fundamentals.

White Space

WhitespaceIn the image above all you see is the words.  The “white­space” is exactly what the name implies.. the area around the image that is white.  Now to cat­e­go­rize as white­space an area in design does not have to be “white”, just clear of any text or images.

White­space is impor­tant in design because it focuses the eye on to what is impor­tant.  A good exam­ple of how this doesn’t work is when you go to a site and the design’s back­ground is intense with a col­lage and mil­lions of col­ors.  The text or image you are try­ing to high­light never even gets any atten­tion.  Here’s an exam­ple of zero whitespace:

Bad WhitespaceIn the bad exam­ple you can tell that the words are there and we even could accent the text with either a drop shadow, outer glow, or stroke around the text to make it more appeal­ing.  But can you see how with­out white­space your eyes are too busy.

Your eyes are tak­ing in all of the back­ground and try­ing to work out the text from all the other inter­est­ing images.

If you had an entire pack of with no white­space then very eas­ily you could find your blog with no read­ers, lit­tle click-throughs, and no brand.  Actu­ally you would have a brand.. you’d be the blog every­one remem­bers not to go to.

Avoid any design that does not have enough white­space around impor­tant areas like the logo, nav­i­ga­tion menu, and con­tent area.  Try­ing to make your theme busy only leaves your site empty.

Eye Track­ing

For the avid read­ers of Blo­gus­sion I apol­o­gize, this next part is a repeat idea from a post last week, Your a Blog­ger Not a Crack­head! Its about find­ing a design that high­lights the things that are most impor­tant to you.

The num­ber one thing is your logo which brands you and should include near by your nav­i­ga­tion menu and then your con­ver­sion tools.  Your con­ver­sion tools are your sub­scriber boxes, prod­ucts, ads, etc.  What­ever your goals are for your blog is what your con­ver­sion tools should be point­ing too.

Let’s look at the exam­ples of good eye track­ing to remem­ber what it is.

Blogging EyesThe Eyes #1 is the area your eyes first see on a page and the Eyes #2 is the sec­ond area your eyes then go to.  Eyes#2 is the area that you are try­ing to get peo­ple to see.  In our blog its about con­vert­ing peo­ple to subscribers.

Clean Con­tent Areas

In one of my favorite posts on Blo­gus­sion, Alex describes some of the best ways to style your con­tent area.  If you have some time you should def­i­nitely read the entire arti­cle because Alex does an amaz­ing job at break­ing it down — Stel­lar Tips for Styling Your Content

To high­light some of what Alex said here is one of his main points:

Head­ings Mat­ter — Alex talked a lot about head­ings because they really do mat­ter.  They draw atten­tion to your post and bad head­ings with unat­trac­tive fonts or the wrong typog­ra­phy (text) can quickly scare away your read­ers.  Be sure your the head­ings in any blog you are look­ing into are clear and clean look­ing.  They should be promi­nently located on the page for max­i­mum results.

Typog­ra­phy

Your text is the pri­mary instru­ment for gain­ing more traf­fic and keep­ing read­ers.  We talked yes­ter­day about how to write pow­er­ful con­tent and have pre­vi­ously talked about the impor­tance of good con­tent, but now I want to talk about the typog­ra­phy (font design) of your text.

typography

Typog­ra­phy is the intri­cate design of the fonts you are using on your blog.  Although there are plu­g­ins to add extra font fea­tures to any word­press blog, the orig­i­nal func­tion­al­ity of the blog theme you are using makes life a lot easier.

For exam­ple The­sis theme comes with over a dozen options for typog­ra­phy.  Other fea­ture rich themes do too.  The key is many of the free themes don’t and unless you have the patience to setup a com­pli­cated plu­gin then you should look into typog­ra­phy early on.

For the best prac­tices of good typog­ra­phy, and to learn what all of the most pop­u­lar blogs are using for their sites, check out Smash­ing Magazine’s Typo­graphic Design Patterns

Nav­i­ga­tion Menu

Menus are one of the most impor­tant ele­ments to your entire site.  A bad nav­i­ga­tion menu will com­pletely ruin a blog.

You heard that right:

A BAD nav­i­ga­tion menu will RUIN your blog

Here’s the rea­son why I think this is true.  Nav­i­ga­tion menus are the life blood of your blog.  Peo­ple will see your con­tent, con­ver­sion tools, and logo on almost every page but to get from page to page or post to post the best option is a nav­i­ga­tion menu.

If your menu is not help­ful and never sends any traf­fic through your blog its time to look at what you can do to change that.

My opin­ion is to always have an archives page with lots of use­ful tips.  For help cre­at­ing a use­ful archives page check out a post we’ve writ­ten on Cre­at­ing Archives.  Addi­tional menu items should point toward more con­tent and resources you’ve cre­ated to fun­nel traf­fic and reach your goals.

For the Best prac­tices in Nav­i­ga­tion Menus, again check out the resources Smash­ing Mag­a­zine have put together.. they are phe­nom­e­nal. Nav­i­ga­tion Menus: Trends and Best Practices

Wrap­ping It Up

In the com­ing weeks we have more design posts planned to help you not only get the best design fea­tures on your site but also teach you what to look for.

We hope you enjoyed learn­ing more about web design and be sure to look at some  of these fan­tas­tic resources.

Go to top

Article by Seth

You just read an article from a seasoned blogger and web consultant. Besides blogging, stumbling, and twittering I enjoy road bikes, basketball and Razorback football. I am one of Blogussion's biggest fans!

From Planning to Earning

A free course that explains all you need to know about maintaining and building a powerful, money making blog.

Information is delivered through a beautiful web guide & a 10 day email course (+ a weekly newsletter). Sign up, or learn more!

Brendan Wenzel January 26, 2010 at 12:55 am

And another important aspect is clean coding of the design. If the code is jumbled and a lot of pointless code, the search engines WILL frown upon it. That is a big reason why I use thesis for all my blog designs.
Brendan Wenzel´s last blog ..Use Other People’s Traffic to Build a List

Reply

Seth January 26, 2010 at 10:14 am

Coding is an essential element to design for sure. That is such a big topic though that I wanted to be sure to cover it in its own post! Plus its easy to write an entire blog about good code.
Seth´s last blog ..How to Write Content Like a King

Reply

ZK @ Web Marketing Blog January 26, 2010 at 3:31 am

Yes today we are doing in depth analysis of every thing and today’s most important thing is eye tracking.

Reply

signs and symptoms of diabetes January 26, 2010 at 5:08 am

Thanks for sharing such a useful information. I am definitely going to consider it.

Reply

Seth January 26, 2010 at 10:16 am

If you have any questions about what I talked about or other design elements let us know.
Seth´s last blog ..How to Write Content Like a King

Reply

Heather January 26, 2010 at 6:25 am

Looking forward to the rest of these, because I think I need to rethink my own design quite a bit. Thanks for the post!
Heather´s last blog ..How to be Awesome: The Difficulty With Portfolios

Reply

Seth January 26, 2010 at 10:18 am

This series of posts should be very helpful and when we are done I think we will be putting together a free ebook of the articles for people as a guide to buying a new theme.

Is there any other areas of design that you think we should definitely talk about?
Seth´s last blog ..How to Write Content Like a King

Reply

Todd Morris January 26, 2010 at 6:42 am

Good tips. I like the idea about eye tracking … having a good reason for specific design elements … rather that just putting something there because the space need to be filled.
Todd Morris´s last blog ..My Ipod Makes Me Feel Old

Reply

Seth January 26, 2010 at 10:19 am

Right. Filling your sidebars is completely worthless and can actually hurt your blog if they are not there for a specific reason. I find a limited number of sidebar items actually increases the likelihood of readers clicking on them.
Seth´s last blog ..How to Write Content Like a King

Reply

lunaticg January 26, 2010 at 7:25 am

Thanks for the tips.
Looking for a new blogspot design that will help me on pageload and SEO.
Your advice will certainly help me a bit. Its hard to find a good advice nowadays.
lunaticg´s last blog ..Happy Australia day 2010

Reply

Seth January 26, 2010 at 10:21 am

For the seo I would recommend Thesis theme or Wootheme’s have a newly redesigned and seo friendly framework.

For page speed I think much of it comes down to your cache and there are a few excellent plugins for that. I recommend WP Super Cache. Then just put it on half cache.

If you have any specific questions just let us know.
Seth´s last blog ..How to Write Content Like a King

Reply

Jim Gaudet January 26, 2010 at 8:27 am

If you don’t know anything about coding, but want a blog that looks professional, then you should really pay for a good theme, or have one designed for you. With option pages and templates to make it easier to administer.

Typography and colors are my biggest problem, the coding is the fun part…
Jim Gaudet´s last blog ..Ode to My Family

Reply

Seth January 26, 2010 at 10:22 am

I think for many people its the coding that scares them so you have an advantage. Maybe you can find someone who is an expert on colors and typography and help each other out as part of an exchange. That way you both get to do something you are good at without charging anyone.
Seth´s last blog ..How to Write Content Like a King

Reply

krish January 26, 2010 at 9:11 am

These r good tips.Typography & colors are the main essentials which make ur blog stand out from the crowd.Also one shouls take care of the inline advertising colors & should customize them according to the color of blog.Most of them don’t concentrate on these features that makes it look awkward..
krish´s last blog ..Tips to Increase Your Sales through Online Videos

Reply

Seth January 26, 2010 at 10:25 am

Right, advertising should not be an ugly mess on a blog but instead compliment the blog design while still being clicked on.
Seth´s last blog ..How to Write Content Like a King

Reply

Brandon Cox January 26, 2010 at 1:39 pm

Excellent tips Seth! I would think some of these would be obvious, then I look around at what’s out there in the blogosphere and I want to throw up sometimes at the cramped, crammed, and crowded, poorly-planned blog designs out there. Thanks for helping keep it clean!
Brandon Cox´s last blog ..Bloggers Unite: Let’s Keep the Blogosphere Clean

Reply

Léo January 26, 2010 at 1:42 pm

I’d add a couple of other important points :

– call to actions – even if they are not really “purely” web design related, making your call to actions clear is one of the most important way to convert people. Make them clear, make them stand out, use CSS to optimise the anchor (for example you can add a button bg image that contains the words ‘click here’ to an optimised text anchor link) ;

- repeat important points : like blogussion, at the end of your articles repeat the subscription area styled differently as people who read your whole article will be more ready to subscribe.
Léo´s last blog ..8 Plugins Anti-Spam WP pour Blogs Wordpress

Reply

Kok Siong Chen January 26, 2010 at 9:33 pm

Thanks for sharing! You gave me a clear thought about how to design my blog. I think the typography really plays an important role in blog design.
Kok Siong Chen´s last blog ..9 Steps of Peritoneal Cancer Progression

Reply

Mature singles dating January 26, 2010 at 11:00 pm

Good post Seth, yes navigation menus are one of the most important element one should pay attention when designing a website. They are great important for usability purposes and creating a user-friendly website!

Reply

JR January 26, 2010 at 11:56 pm

I would add that you also need to be sure that it will be easy to customize the editor pages, and the code. Some developers use very complicated CSS and PHP, that will be very difficult to figure out in case you want to make changes.
JR´s last blog ..Hi, My Name is Dick and I’m Addicted to SERP Analysis

Reply

Agent Deepak January 27, 2010 at 4:44 am

For me navigation is most important part. Without good navigation your readers won’t be able to explore your blog.
Agent Deepak´s last blog ..Shoe Money System is Coming

Reply

Des Moines moving companies January 27, 2010 at 1:21 pm

Excellent advice regarding design. I’ve always liked those eye tracking studies because they can reveal a lot of information that would otherwise go unknown. Entire portions of your page may be going relatively unnoticed. And of course, an effective and easy to use navigational structure can also make or break your site.

Reply

Free Money Income January 27, 2010 at 1:51 pm

It’s really an advantage if you know some coding so you can optimize the theme for your blog. A clean code theme is good for search engine.
Free Money Income´s last undefined ..If you register your site for free at

Reply

Your Practice Website January 27, 2010 at 6:04 pm

Colours (colors for people across the pond) are also an important – but missing from your list ;) – element that bloggers should consider / read about in order to evaluate a theme. In your eye tracking example, the reason why the eye goes to #2 is because of the use of the orange (and the white space, but mainly because of the orange).

The theme should include “zones” that warm colours bring the attention to, if they are important, and plain / cool colours to the others.
Your Practice Website´s last blog ..Search Engine Optimisation For Accountants – The Basics

Reply

Marco Tapia January 27, 2010 at 11:31 pm

Great concerts and ideas. Supporting your article, your readers can also use our new product (under limited released for January and February) the PicNet Mouse Eye Tracking service. A SaaS solution that is provided free of charge to those who need to understand users behavior on your pages/site, including eye tracking (via mouse movement correlation) and page navigation. Suggest people try it on http://www.PicNet.com.au -> Products section.

We have piloted it with our blogs achieving great results.
Marco

Reply

Affiliate January 28, 2010 at 6:32 am

The eye tracking part of your article is interesting. However, I think there is one more factor in the case of the theme which is on your screenshot. When people look at the place with your conversion tools it may cause similar effect like looking on the banner (maybe others react in other way, but it is my experience). They may simply ignore the part asking for their email. Why? Because they came to learn something and they are looking for the information in your blog post. They have no reason to sign up for the weblog updates because they know nothing about your blog at the time when they see the box. When they finish reading the article it is the right time to ask them to subscribe in my opinion. But they are in to bottom of the page and don’t see the box. So I guess it is important to serve all page elements to the visitors in the right time.

Reply

Dennis Edell January 28, 2010 at 9:08 am

I may be unique; the very first thing I make sure of when searching for a custom theme designer is making sure they can handle a true pain in the ass. LOL. Although I laugh, I’m most serious…If I am paying you, you will do as I say; in return, you will get the money you ask for, if not a little more ’cause I’m just an awesome guy like that. ;)

OK perhaps a slight exaggeration on my ogreness, lol, but you get the gist. I WILL be back again and again for tweaks, whether large or small. :)
Dennis Edell´s last blog ..The Time Has Come. The Deal Is Done. It’s Time To Move!!

Reply

Bonnie Landau January 28, 2010 at 4:08 pm

This is an excellent overview of design for a blog. My greatest challenge is getting clients to believe this. Just today I had a client who said I didn’t really “design” her site because she wanted it all patchy colors, and funky fonts, and basically make it busy and fill up all the white space. I’m not sure how to convince clients that their design will drive people away.

I think your eye tracking info is right on. Jakob Nielsen has shown the F-pattern is the way people view sites. And Dennis, your point is a good one — constant tweaking to improve a site is critical to keep moving it in the right direction. It’s unfortunate though that many clients don’t want to pay for that, so they let their sites remain the same for years.

Great post! Thanks!
Bonnie Landau´s last blog ..Web Design 101: Please Don’t Squish the Type!

Reply

Dennis Edell January 30, 2010 at 10:11 am

If you truly tried to convince her and she just won’t budge, I may have said something like, “I’m sorry but I cannot put my name behind something I don’t believe is right, please find another designer.” And if she seems like the type to make trouble, give her some monies back and right it off.

As for tweaking, this is why I’m doing the new blog in a different way from anything seen before. ;)
Dennis Edell´s last blog ..Hello & Welcome To The All New – DennisEdell.com/DirectSalesWebMarketing.com Merged – Direct Sales Coaching Blog!

Reply

DanielthePoet February 1, 2010 at 11:19 pm

Speaking of design, I find myself constantly wanting to visit this site because I like the layout and design. My eyes are pleased when I visit, so I want to return more often here than other blog tips websites.
DanielthePoet´s last blog ..Coming Soon

Reply

Leave a Comment

CommentLuv Enabled

6 trackbacks