13 Characteristics of Outstanding Blog Design

Most web designers and getting more and more requests from clients to design custom blog themes.

While designing a blog theme isn’t entirely different from designing any other type of website, there are some unique challenges that blog theme designers face.

There are plenty of sources available for designers who are seeking inspiration from high quality blog design, but it’s also important to understand specifically what will influence and determine the success of a blog theme design. In this article we’ll examine 13 characteristics that separate great blog themes from the rest.


1. Readability

Since blogging revolves around content, readability is a critical priority. Even great content with poor readability will struggle to attract and retain readers. While a blog theme’s design is important, it shouldn’t detract from the content itself. When designing a blog theme, areas of the design like the header, navigation and sidebar often get a lot of the attention, and styling the content within the post itself is frequently overlooked.

There are a number of factors that influence readability, all of which should be considered when designing a blog theme:

Padding – The padding or margin that separates the content of a post from the edges of the content area can help the reader to visually separate the content and focus on it without distraction.

Freelance Switch uses plenty of padding to keep the content easy to read.

Short Paragraphs – Readers will have an easier time with short paragraphs. Long paragraphs on a screen can be difficult and intimidating to readers. Short paragraphs often draw readers in because they can be reader faster.

Lists – Use unordered (bulleted) lists or ordered lists when appropriate. Instead of using paragraph format exclusively, lists help to break up the monotony of the text and allow for easier scanning. The points will also stand out more as they grab readers attention.

Bold Text – Having a screen full of text that is all the same weight and size makes it more difficult for readers to quickly see what’s important. Many blog visitors are not going to read posts word-for-word, so your options are to make it easier for them to scan, or watch them leave.

Line Spacing – Especially for blogs that publisher longer, more detailed posts, it’s important to have sufficient space between the lines of text. Not spacing the lines properly causes the text to be crammed.

Sub Headers – Blog posts can be broken up by sub headers (usually h3 or h4 tags). When designing and styling a theme, these sub headers should be given plenty of attention. When done correctly they will help with readability, scanning, and they’ll help the writer to make points clearly.

Mirificam Press styles its sub headers to make a visual impact.


2. Useful Sidebars

Sidebars are an important part of blog design because they play a large role in navigation for visitors and because they provide the opportunity to add some creativity to the design. Additionally, they give the theme designer and the blogger a chance to determine what content or pages on the blog get exposure to all of its visitors. A good sidebar will feature an attractive design, be easy to use and navigate, feature the appropriate content, and encourage a high number of pageviews.

Some common elements in blog sidebars include:

  • Popular posts
  • Recent posts
  • Blogroll/friends lists
  • Advertisements
  • Category links
  • Date-based archives
  • Link to RSS feed
  • Recent comments
  • Promotion of products/services

To take sidebars a step further, some blog designers create multiple sidebars or use conditional tags to include dynamic content based on the page/post the visitor is viewing. This helps to make the sidebars more relevant and useful because the information and links contained in the sidebar are more likely to be of interest to the visitors.

A growing number of blogs are revamping their sidebars to encourage more reader interaction. Some bloggers are posting links to user-submitted community news items. Others are including Flickr photo streams (Flickr groups are now pretty common for design blogs) or possibly streaming information from Last.fm. Additional social media integration is another possibility, from sites such as Twitter, Delicious or Digg.

The PSDTUTS sidebar includes images from its own Flickr group as well as user-submitted community news items.


3. Unique

With millions of blogs and thousands of different blog themes out there, it’s pretty easy for visitors to have a hard time distinguishing which blogs they have been to before and which ones they have not. Great blog designs will stand out from all of the free themes and similar designs in one way or another. The designer can take a number of different approaches to accomplish this goal, but the important part is that the design will not only be memorable, but it should also fit with the message and purpose of the blog.

Possible Approaches:



One way to make your design stand out is to design something extremely creative that will easily give your blog it’s own distinct mark.

Web Designer Wall





I Love Typography




Veerle’s Blog


Interesting Headers

Mostly Lisa




Evan Eckard

New Concept

Of course, these are only a few different styles and options for designers. There are countless ways that you can go about creating a unique theme, however, the blog should have some type of distinct look that helps to brand the site and keep it from blending in with all the other blogs.


4. Comment Design

The comment area is often a last priority for theme designers, but a well-designed comment area can give the blog a totally different feel for readers, especially those who comment themselves. Designers have the options of including avatars for commenters, styling author comments to stand out from others, alternating comments with different styles, using speech bubbles, etc.

Avatars are becoming increasingly common on blogs, in part because of the ease of doing so with WordPress and Gravatars. Avatars help to give the comment area a more personal touch and to give each commenter more of a personality of their own.

Pro Blog Design makes excellent use of avatars and color in the comment area.

Darren Hoyt uses smaller avatars and different style for author comments.


5. Integration of Ads

Most blogs today (at least those that are professional and not personal) are using advertisements of some sort to monetize the site. This could include AdSense, affiliate ads, or direct banner ads. While ads are a necessity in most cases to keep the blog going, they can also have an adverse effect on the design and the user experience if they are not implemented properly into the design.

Some bloggers and designers choose to place ads in locations that will draw a lot of attention, such as within the context of the blog posts. While this may help to produce more ad revenue, it will decrease the overall look of the blog and will put off some readers. This is a decision that will need to be made by the blog owner, but from a designer’s perspective it’s best to keep the ads in places that are specifically designated for ads.

Location of the ads is important, but styling the ads, or the area around the ads, is also an option for the designer. The ads may feel as though the are more a part of the theme and less intrusive if they are treated as part of the design.

CSS-Tricks uses a border on banners in the sidebar that changes to a red color on hover, and the header banner is placed on a grungy background that also has a hover effect.


6. Effective, Usable Navigation

Navigation is one of the most significant factors in determining the user’s experience on the site. Nothing is more frustrating than not being able to find what you’re looking for, and visitors are bound to leave if this happens to them. On the other hand, effective navigation can lead to more pageviews and a more resourceful blog that takes advantage of the content that is available.

Developing and maintaining effective navigation is a challenge for blog theme designers, because content will be continually added to the blog, making it easier for posts to get buried in the archives. In some ways, maintaining the navigation is up to the blogger, in terms of using internal links within posts and updating older posts with new links. However, there are some steps the designer can take to improve navigation.

First, there should be a primary navigation menu that takes visitors to any major page on the site (such as an About page or a Contact page), and secondary navigation menus are often used as well.

Second, the sidebar should be used to nudge readers towards the most important content on the blog. Popular posts are a common way of doing this.

Third, the sidebar should also include some standard blog navigational elements that visitors will expect to find, such as category links or a link to an archive page.

Fourth, the bottom of the post area can be used to include links to related posts, or this can be done manually by the blogger when desired on specific posts.

The header of Noupe includes category links as the primary navigation, which makes it easy for visitors to find content that they want, plus it makes the navigation feel less like a boring category list.


7. Images in Posts

Part of a blogger’s effort to get their posts read and noticed is using pictures within blog posts. Of course, the use of images is outside the control of the blog theme designer, but the designer can have an impact on this aspect by including styles for post images. Images can be much more effective and attractive when styled with CSS to give them a nicer touch.

Designers may want to provide a few different classes for images that can be used, or for many bloggers it may be easier to style all images alike. Use of a border and padding are common, sometimes in conjunction with background colors.

Fuel Your Creativity uses about 10 pixels of padding and a gray border around images.

Spyre Mag uses a light gray background and a slightly darker border.


8. Footer Design

When designing a blog theme, or any website for that matter, the footer is one area of the design that typically gets very little attention. Most blogs include a copyright, a link to the homepage, and maybe a few other links to pages of the site (or to the theme designer and/or to the blogging platform). While many visitors won’t scroll all the way down to even see the footer, those that do will be able to benefit from a well designed footer.

What should a blog footer include? There are no absolutes, but in general, some blogs are using them essentially as an extension of the sidebar. By this I mean that many of the same elements that you would find in the average sidebar are also showing up in some blog footers. Social media integration, such as recent entries to Twitter are popular. Additionally, some blogs link to popular posts, recent comments and even blogs of friends from the footer.

In addition to just using the footer to be a home for more information and links, designers are also using this area to get creative with the theme. The footer is much like the header in that it provides a large canvas for a motivated designer to experiment.

Blog.SpoonGraphics uses a footer that points to popular content with a stylish design.

Productive Dreams includes links to recent posts and comments, as well as Twitter and Vi.sualize.us integration.


9. Color Scheme

Color is, of course, one of the most significant factors in any kind of design. Finding the right color scheme for a blog theme is something that doesn’t usually happen instantly, but getting the colors right is crucial. The colors will sometimes make the look, and other times they can destroy the design. Fortunately, there plenty of tools and resources for finding color schemes.

The color scheme of a blog will play a considerable role in the branding of the blog, and thus it is very important for the long-term success of the blog. Some blogs use a bright and vibrant color scheme, while others use fewer colors, or a monochromatic scheme. Like most things when it comes to design, there is no right or wrong, just different choices for different situations.

Web Design Ledger features an attractive color scheme with several different shades of neutral colors accented by orange and blue.

Mr. Diggles uses a very basic color scheme that includes very little color, but it works very well.


10. Icons

Icons can be used to improve the look of a site and to improve usability at the same time. The whole point of icons is to present a message to visitors without even using any text. For example, an icon of a home is commonly understood be to a link to the homepage without saying so, and a speech bubble is often used to represent blog comments.

When used properly icons provide somewhat of a subtle improvement to the design. Icons are rarely the highlight of any blog theme, but all blogs could make use of well-designed icons. Blog theme designers can either design their own icons, or use any number of free icon sets that are available.

NETTUTS, and the other sites in the tuts family, use the free icons from Function.


11. High Content

Because blogs are so dependent on content, the blog theme design should allow for the content to start above the fold. Oversized headers allow for more creativity in design, but for blogs it typically works best to focus on getting the content in view quickly. This is my personal preference and there are some well-designed blogs that push content down, but as a general rule it’s best to keep the content high in the layout.

The theme of Devlounge uses a small header area that features the start of the content very high on the page.


12. Subscription Areas

RSS and email subscribers are the lifeblood of blogs. For this reason it is obviously important for blogs to be able to convert visitors into subscribers. Many blog visitors will be accustomed to the standard blog convention of including links to RSS feeds and email subscription options in the sidebar. Usually these areas are located at the top of sidebars, but sometimes they’re a bit further down.

The benefit to staying with the norm here is that it’s easier for people to find the links, and you don’t want to make it difficult for people to subscribe. Most blogs also include RSS icons along with the link. There are countless RSS icons available for download in all kinds of variations.

Darren Rowse of ProbBogger includes RSS and email subscription options at the top of the right sidebar, a fairly standard location.

You the Designer uses the right side of the header for subscription links and an icon.


13. Social Media Integration

More and more blogs are starting to include buttons, badges or links to encourage readers to vote for their content on social media sites. When it comes to these items, overkill can harm the look of the blog. Too many buttons can cause the theme to look cluttered and unorganized. The best method is to use a design the implements social media elements, such as voting buttons, subtly without overpowering anything else in the design.

Six Revisions includes a small Digg voting button, and text links to Stumble or bookmark at the top of each post. The smaller Digg button is more friendly for the design than the bigger “Digg This” button that many blogs use. The StumbleUpon and Delicious links are placed below the title where they have very minimal interference. Additionally, the small StumbleUpon and Delicious icons help the links to be found by readers.


What’s Your Opinion?

What elements do you feel have the biggest impact on the success of a blog theme design?

  • Yamil

    Isn’t there something wrong? This blog doesn’t have almost any of the facts mentioned.

    And this post is like saying “hi” to every designer blogs out there, they are not even good examples.

    I’m happy that this is a new design blog but content must be unique & believable. I’m also afraid that this comment can be blocked, if that happens I’ll stop following it for sure.

  • http://www.webdesignerdepot.com Walter

    Yamil, the post serves as guidelines for creating good blog design, however, each blog is unique and has different challenges and goals. The post is not meant as an exact recipe that must be followed, but guidelines to take into account when designing your blog.

    WDD is still evolving based on the needs and desires of our audience, so this is not static, and will evolve based on need.

    As for the examples, I have to disagree with you on this one, I think these are good examples, but I respect your opinion. It will be interesting to see what others think.

    Thanks for the feedback.

    • http://www.tarifarak.com TARIFA RAK

      Walter, nice answer.
      I follow WDD because I find a lot os useful guidelines inside.

  • http://vandelaydesign.com/blog/ Steven Snell

    I’m not sure which items Yamil feels WDD doesn’t live up to the standards listed here. It’s certainly a unique design with readable content. The only areas I can see on this list that could be applicable here are
    – sidebars – starting a new blog with useful sidebars is difficult since there is no established content on the blog to link to.
    – subscription area – personally, I prefer this to be higher, but that’s just my opinion.

    I think if every blog theme met all of these items to a tee it could be overkill. That probably could have been mentioned in the post.

  • http://alisonfoxall.com/ Alison

    Actually I thought it to be a good, sound, post. I’m about to launch my own design blog in the coming months and this was some good insight, especially the forgotten comment section, thats one area I would like to definitely improve on.

  • http://www.fuelyourcreativity.com Adelle

    Great post! Love the details you bring out for each of the areas on the blogs. Thanks for including me as well! I really like problogger’s sidebar & WDL’s site design/color scheme. I think this post will be especially useful to those starting a new blog.

  • http://blog.oneiricdesigner.com Jody D.

    I just made my first post yesterday. Something i have always struggled with is designing for myself and this has held me back in publishing my own blog. this time around I went with a free them and once I have published enough content I will add my own design elements. I think this blog post will come in handy, like a check-off list. Great job!!

  • http://www.faqpal.com Geoserv

    I for one was extremely glad I stumbled upon this entry. It appears that as each day goes by more and more people are taking pleasure in criticizing or trying to put down people who blog their opinions.

    This blog couldn’t be more original theme wise, the comments section is well designed and laid out. The examples shown are spot on and are great blogs that I for one frequent for inspiration, knowledge and ideas.

    Great post and I look forward to reading many more on this blog.


  • http://www.webdesignerdepot.com Walter

    Yay! That made me feel a bit better Geoserv!! Thanks for that ;)

  • http://kailoon.com kailoon

    Well, so far so good :) nothing wrong and it is very useful :) Some of them are really cool and you explain them accurately.

  • http://blog.insicdesigns.com/ insic

    very useful article. im thankful that i following this blog. keep it up.

  • http://www.frucomerci.com Frucomerci

    But I’m thinking I need to redesign my blog now :)

  • http://blog.cfdesignz.co.uk Craig Farrall

    This is a great post Walter, I don’t know what Yamil is talking about to be honest, I love everything about this blog, thats why I keep visiting it regularly. I just wish I had the talents that you possess.

  • http://www.se7enize.com SE7EN

    I just wrote similar article (but much shorter) a few days ago
    (well, my blog is not design-related, the post is an entry for a group writing project and contest about blog design :P )

    by the way, I love this blog’s design :D
    but there’s white space and horizontal scrollbar on Opera 6.52 and IE6 on 1024+ px width screen. (is it intentional?)

  • http://greenflipflops.com Gabe

    I like your footer :) I’ve subscribed to the blog and I look forward to more good reading.

  • http://www.lakeside.com.np Shreemani

    Nicely compiled article. You’ve got many of the websites that I like in your list. this is just awesome.

    Keep up the good work and Merry Christmas.

  • http://www.aldrinponce.com weblizzer

    great tips, actually i’m following some of this blogs, like freelanceswitch, web designer wall, and they all great, it terms of the layout it really show the most important which boost the site more applicable to all the visitors.

  • http://flimagine.blogspot.com loveprone

    In my opinion this is a well written article with good examples.

    Thanks for providing this grouped data to go through while designing a blog.

    enjoy :)

  • http://familyblog.com.my amir

    But, sometimes, the simplest theme like Kubrick is more practical and easy to read the content.

  • http://blog.veanndesign.com anna

    Awesome! Thanks for sharing and all the good examples.

  • Pingback: BlogBuzz December 6, 2008 | Webmaster-Source()

  • http://extremeezine.com/ Brian D. Hawkins

    I like the post. It’s very informative and you obviously put alot of thought into it. I like the screen shots, especially the one of Pro Blog Design because it shows me and my puppy as I made a comment. Nice timing for me :)

  • http://house128bpm.blogspot.com/ d_evilicious

    awesome tips that i got here :)

    but is it work with blogspot? because i used blogspot as my platform :D

    keep working

  • Pingback: [arte e vício] » Blog Archive » A solução para blogueiros e designers sem inspiração e mais tutoriais e geradores()

  • http://eugrafia.com eugrafia

    I agree with Walter, every blog has its challenges and goals, and of course the personal preference from the designer – if it´s your own blog – or the client.
    Although you may find several posts on this subject on different sites, I always get something new or at least from a different perspective.
    Thanks for the effort.

  • http://elnino.co.uk reza


  • http://webdeveloper2.com Dave Kinsella

    Very impressive article, good depth and areas covered.

    Thank you.

  • http://www.flosites.com ross

    This post is brilliant, the examples are general, especially as we make blogs for photographers for a living, so several areas aren’t useful or needed, however the general points are very well pointed out, and listed. This is a definately follow blog… and beautiful design, love the colors!

  • http://edittag.blogspot.com edittag

    thank you, your articles is very useful.

  • http://www.faridhadi.com Farid Hadi

    Hey Walter,

    Thanks for a good post, keep up the good work.
    I just released a new design for my web development blog a few days back and I had taken all the points you have mentioned here into consideration whiles designing.

    Maybe you should have mentioned favicons. I always feel that a good favicon goes a long way.

  • http://www.kumailht.com/blog Kumail.H.T

    Great tips, was looking for something similar for my next project.


  • http://www.raymondselda.com/ Raymond Selda

    I needed this checklist. Thank you for this.

  • flavio pivaral

    A pesar de que algunos comentarios arriba dicen “no hay nada relevantemente nuevo” creo que tu post da puntos bien concretos para hacer el diseño de un weblog, y pues no todos tenemos un nivel de “expertos” así que es una muy buena guía para tomar en cuenta antes de iniciar un proyecto de diseño. Gracias por compartirla, muy buenos ejemplos.

  • http://mirificampress.com Matthew Griffin

    Sorry, I’m a little late. Thanks for the link.

  • Jennifer Hartley

    This is another helpful article. I’m learning so much from your site. Thanks!

  • Pingback: Clob » Les 13 Caractéristiques d’un Superbe Design de Blog[Partie 1/2]()

  • JanSimpson

    Great post – for people like me who need to start a blog – and have mind like a kid in a candy shop – I would like to say thank you so much.

    So, I am just going do it! I will be back and post additional comments as I grow in experience and provide advance level comments.

    Again, Thanks


  • http://www.beeamazing.com gabybali

    Terima kasih! And greetings from Bali ! Thank you for the tips.Looking at all these blog design samples made me realize my blog theme design from wordpress is still faaaaar from gorgeous…! But I love it anyway & thankful.Thanks to WP too!!

  • http://iaph.ro RaaVi@Design

    Like saying the title: outstanding tips for a perfect blog design. Thanks for sharing with us

  • http://www.bradstrickland.com Brad Strickland

    This is an excellent list of outstanding blog characteristics. I would only add Color use in typography for emphasis and readability.

  • http://www.powergolftips.com/full-shoulder-turn-longer-drives/ Mike

    This is an awesome looking blog and a very informative post. Wish I had another blog to have done, to apply these great tips!

  • http://perrymisley.com Perry Misley

    Lots of great ideas in here. I’ll be taking them into account next time I’m putting together or redesigning a blog.

  • http://www.meiio.se Emma

    Hi! Luv your site! I have a brand new blog and design.. I hope you will like it. I have tried to make it unike..:)

  • http://www.designinspiration.typepad.com stencil helen

    First time I have visited. I was due to change the layout, headers etc on my Design Inspiration blog this weekend (I do this every year) and have found your post enjoyable, imformative and easy to understand. I hope to implement some of your suggestions. Thanks.

  • http://blogfreakz.com mupet

    Awesome i juts thinking redesign my blog, so where is tutorial for this stuff

  • http://www.pinchearnold.com Arnold

    Any points for minimilism? – I guess maybe in the readability realm.

    Great article!

    – Arnold

  • http://www.marocplus.net Directory marocplus

    Excellent work

  • Lune

    Good post, though I think the guidelines are more applicable to blogs that have sort of niche or target audience, as the sample sites show. Personal blogs, especially those that don’t really care much for ads or extras (like mine) can do away with a few of the others.

    But if you’re gearing your blog up for anything other than personal use, this is pretty good. Thanks!

  • http://noprescriptionrequired.blogspot.com Shalini

    It would be interesting to know if plain, SEO-friendly blog designs are becoming hip and trendy. These designs look super cool, but I think some people would shy away from them.

  • http://michaelynch.com Michael Lynch

    I am in the process of starting a design blog and this has been great help. Thanks!

  • http://bloggerstools.com Bloggerstools

    I have been looking for a place to learn how to better tweak my blog themes, and I have finally found them here, thanks a lot.

  • http://www.creativonline.com Xhinnus

    Usefull, but i think you forget footers.

  • http://chikabebe.com/ Chikabebe

    i love your examples.. this post is one of a kind :)

  • http://xn--diseo3-zwa.com natalia

    Very good analysis of the blog design elements, right now I’m redesigning one of my blogs themes and this article come very handy. Besides the comments, sometimes the date and the author are also typical elements of a blog that can also contribute to have a unique design.

  • http://www.miscah.blogspot.com Blog go blog

    Great article..very nice design

  • http://www.mindauthor.blogspot.com/ mind author

    i think your design is very cool and great template

  • http://www.roza29.blogspot.com Roza

    tips and tricks that are always right in waiting, i always to learn in this blog again,thanks

  • http://www.trkangal.com kangal

    I am thanking for the knowledge

  • http://www.philippineglobaloutsourcing.com Philippine Global Outsourcing

    great list! thanks for sharing!

  • http://www.sohbethiphop.com Dans

    Very successful and smooth construction thanx…

  • http://www.kangalefsanesi.net dogger

    Very successful

  • tee_tz

    Great guidelines for anybody who has or is planning on developing a blog. And I think your blog meets practically all of the requirements.

  • http://www.matrixnmedia.in Matrix

    Nice collection of comment form designs I like this one.

  • http://www.clippingimages.com Shamima Sultana

    nice tuts…

  • http://www.sharepointwind.com Sharepointwind

    Awesome Post! really its very useful..thanks for sharing

  • http://argehaber.blogspot.com argehaber

    some sentences, but in general did not exactly turn a nice and helpful article. Thank you and good work.

  • http://www.thomascraigconsulting.com Thomas Craig Consulting

    Excellent post, I am in the planning process of adding a blog to my company site and will be revisiting the points mentioned to make sure all aspects are covered.

  • http://www.disbeyazlatma.net diş beyazlatma

    And I think your blog meets practically all of the requirements

  • http://www.wearingrainbows.com/mens-waistcoats-ties-c-2659.html Billy

    A nice introduction to Blog design, I think this will be very useful to those looking to start a serious Blog. Good work!

  • http://www.templatetango.com Frinley Templatetango

    hey nice blog designs, very useful

  • http://www.billergeeks.com chicago medical billing

    Great guidelines for anybody who has or is planning on developing a blog. And I think your blog meets practically all of the requirements…thanks.

  • http://www.conceitodigital.com Paulo

    Very nice

  • http://flaviopaiva.com/ Flavio

    Yes, the readability is the main purpose of a blog.

  • http://mainstreet-seo.com seo sites sarasota

    i agree readability and functionality of sidebar plays is very important for a blog design.

  • http://sentientmeat.net Sentient Meat

    Typo, “… because they can be reader faster.” Should be ‘read.’

  • http://www.wilsont3ch.com Burton Haynes

    This web site can be a stroll-via for all of the information you wanted about this and didn’t know who to ask. Glimpse right here, and also you’ll positively discover it.

  • http://www.live.com.eg zaool

    thank you for all , good

  • http://www.ebiznizindo.com lowongan kerja

    could I cite the article above?

    I want to write an article for my research…


  • http://www.megahost.ro web hosting

    very good article, there are alot of people wich whant to make a blog bo don’t know what are the most importantat characteristics wich to follot

  • ai

    wow…this is very amazing, thanks so much for your share
    Wells Fargo Retirement

  • http://www.porndvdsvideos.co.uk porn

    There seemed to be this time when i was bored to tears reading other’s thoughts and mind via his or her blogging. However before long when i got right here to your articles ., the particular enthusiasm of reading and smiling on peoples’ everyday post appears to return, my personal curiosity has peaked once again all thanks to you actually my good friend. I think you’ll continue this a long time. Excellent work my good friend.

  • http://www.culversnutrition.net nutrition

    Blogs are usually maintained by an individual with regular entries of commentary, descriptions of events, or other material such as graphics or video.