What Makes An Insanely-Great Blog Design?

by Derek Halpern · 31 comments

Create a Great Blog Design

Contrary to popular belief, how your blog looks has little to do with a great blog design.

Yes, a sweet blog design gives you an edge, but that’s the last thing you should worry about.

So, what makes a great blog design?

Answer this question:

Why Do People Visit Your Blog?

There are three types of blogs. There are blogs that focus on text content, audio content, or video content.

Which one do you have?

You likely have a blog that focuses on text content, and that’s perfect.

So, what’s the most important thing on your website?

It’s not your design… It’s not your opt-in forms… It’s your text.

The most important thing on a text-based blog is the text.

Go figure 🙂

But the question remains…

What Makes A Great WordPress Blog Design?

If text is the most important thing on your page, then the first thing you need to worry about is how your text looks, or your typography.

Luckily, with Thesis, many of your typography settings are already handled out-of-the-box. If you don’t use Thesis, you can use Chris Pearson’s golden ratio typography calculator and wrestle with CSS.

But after those typography settings, what else should you worry about?

How People Interact With Your Content Visually—And Why It’s Important

Each blog has what’s called a visual hierarchy, which is fancy for the information your text conveys without people reading it.

“Wait, what?”

Blog posts have structure. There are headlines, sub-headlines, regular text, links, and block quotes.

(In rare cases, you also have captions, call-outs, block quotes, and other forms of text-differentiation, but that’s for another day)

Each piece of this structure has a different goal… and more importantly… looks different than the other pieces.

So, let me break this down for you:

The Headline – The point of your headline is to grab attention, and that’s why it’s often the largest piece of text in your blog post.

The Sub-Headline – Your sub-headlines also grab attention, and their main purpose is to turn scanners into readers. So, they must be as compelling as your main headline, and thus, larger than other text on your page (aside from your headline).

The Links – Your links are often a different color than the rest of your text, and that’s the way it should be. Links beckon clicks.

(Warning: I’ve seen some people who make headlines and sub-headlines the same color as their links. That’s a mistake. There is text you read and there’s text you click. Don’t confuse the two)

The Lists – Lists break up large blocks of text, and since people have short attention spans, this helps you turn scanners into readers, and it also helps you keep readers reading.

The Regular Text – This is self-explanatory. This is the text that people read on your site, and it should be no smaller than 14 pixels.

Now why is this important?

If your blog doesn’t have structure, you’ll confuse your readers. They won’t know what they can click and what they can’t click.

They won’t know how to figure out what your article is about without reading it.

All-in-all, no structure is bad news.

But after your visual hierarchy and typography, what else should you worry about?

What’s The Main Goal Of Your Blog?

Look—when you run a blog, you’re doing it for a reason. You’re doing it for readers, revenue, and in some cases, reflection (but let’s be serious, if you did it to reflect, you wouldn’t make it public :-D).

You’re likely doing it for some financial reason, and that’s perfectly okay. Serious blogs take a ton of work, and you should be compensated.

So, given that, you’ve got to decide, what’s the main goal of your site? If it’s revenue, what’s the best way to grow that revenue?

In some cases, you may need to add ads on your blog, and that’s fine. However, if you’re selling products and services, or creating paid membership sites, I recommend email marketing for bloggers. It’s the best way to capture prospects that buy and continue to buy.

Given my focus on building an email list, the next part of a great blog design is all about how people subscribe to your email list.

You can start with the 4 high-converting email sign up forms (note how easy they are to add into Thesis).

Then, after that, you can work a Feature box into your design for the best conversions.

But now that you have your goals straight, what’s the next important thing? Is now the time to focus on the blog design?

No.

Can People Find The Information They Want?

When people visit your blog, yes your blog design matters, and yes it’s vital for building trust, but if people can’t find what they want, your design is pointless.

How can you help people find what they want?

That’s easy.

Create resource pages. A few of them. For example, we’ve got one about email marketing and WordPress SEO on DIYthemes, and that helps. We also have Thesis Tutorials and WordPress tutorials at RTFM.

You?

You need to create resource pages too, and you need to make them easy to find. I personally believe they should be featured prominently in your navigation or in your sidebar.

Most bloggers only feature navigation items like “Home, About, and Contact.” However, that’s a mistake. That’s not descriptive. That doesn’t help people find the information that your blog provides.

Resource pages, on the other hand, help them find exactly what they want… in just a few clicks.

Now what else do you need in your WordPress design?

Finally, you can focus on your WordPress Blog Design…

…But it’s not about being fancy.

It’s about having a cohesive blog design.

I write about that ‘how to create a wordpress blog design,’ but here’s the rundown:

  1. Pick a nice font for your logo.
  2. Pick another nice font for your sidebar headings.
  3. Pick a color for your links, and then another color if you want it for anything else.

And bam.

You’re done.

Now I Pass It To You…

Leave a comment and let me know what you think.

About the Author: Derek Halpern ran marketing at DIYthemes, and is the founder of Social Triggers. To get more tips on how to be confident, sign up to his list here.

If you enjoyed this article, enter your email below to get free updates!

{ 31 comments }

Liane

That’s precisely what I’m advocating now Derek! Design + Function. GOne are the days when designers opt for the “lookin’ good” vibe. Right now, it’s about smart designs- the kids that gets the job done (read: improve blog goals esp when it comes to dealing with monetization).

Great post!

Mary G Malia

Hi Derek,
Great and simple to follow advice on design! I’ve not been using sub-headlines or lists at all! Time to start.

Thanks, Mary

Ryan Shell

Glad to see you mention typography. It’s one of the things that has always stood out with Thesis – especially the fact that it’s so easy to change.

@RyanShell

Paul

I love the simplicity that you bring. I have to tell you, I stay on very few email lists, but I actually look forward to getting stuff from you. Between the aweber forms, and awesome tips like this. I can say I’m proud be a Thesis user (wiping tear from eye) you guys rock!

Fred

As always, your posts are informative, entertaining and easy to read.
Proof that you practice what you teach! Much thanks!

Jeremy

Another great post! Since signing up to your email list I am addicted to your posts. As a baby blogger trying to get starting I find the information extremely helpful and motivating. Thank you!

Gregory Ciotti

Quick question on a tiny detail: do you think it’s worthwhile to get rid of content area “boundaries”, or the framing of the content area you’ll see on most blogs?

I have it on my site (content area is also different from the site’s background), noticed that it is absent for this blog & SocialTriggers, and I feel like my eyes prefer not having a border.

Jadah {family sponge}

I love your encouragement to use resource pages. I have been working on making those– and they do work. As someone who has just started there is still a lot to learn. I am still struggling on picking the right categories and making it simple to navigate for the reader to find what they want without using a search box. I love everything you share.

treehill

So conclusion is….with thesis you dont need a web designer…or maybe just for the banner?

Dave Landis

Great post, Derek.

This philosophy embodies the KISS principle!

Rob @ Atlanta Real Estate

Great stuff. Always solid.

Helena van Gelder

I think you’re totaly right.

Lance Nelson

nice tips as always, and my blog does fine without any design. I would add make your text colour ever so slightly brown if you want to create an upscale feel. And larger the better too.

Lindsey Hightower

Great post Derek,every time I read a post about improving blogs,I use the info. and start tweaking my blogs a little here and a little there,and the changes seem to help my ratings,thanks

Jay Venka

I switched to bold headlines, just like hear, and also increased font sizes copying your style and i can see the improvement with the changes…

I prefer, clean, simple and bold designs….

Marla {Family Fresh Cooking}

We love using Thesis and incorporate a great many of your suggestions in our blog Family Fresh Cooking. In the next year we will be working on V3 & will be sure to refer back to this post. Thanks for the helpful info 🙂

William

I agree!

I chose Thesis simply because I didn’t want to spend all my time sorting out the design of my blog but rather on the content. I wonder if showing the results from a split A/B test between a “designed” blog and a simpler / fresh blog would nail the point home??

I do confess, though that when I am struggling with a blog topic, I’ll fiddle with the design, slowly trying to evolve into something more design conscious!!! *hides in shame

Thanks

William

Brad Ferris

Great post! Nothing new for me to change on my site, but its nice to have confidence when something is reaffirmed!

Mandy

My traffic has only got better and better since I started implementing your advice Derek! Thanks

….But I still need to do my resource pages….

better get onto it!

Dennis O'Brien

Good points for anybody to take in Derek, thank you for some inspiration on what to write about as well 🙂 I stared out pretty bland in my days prior to using Thesis but it’s so easy to implement changes with a few tweaks and some CSS.

I agree about the heading structure. I try to make it my introduction, my body and my close in three short sentences and then hopefully people will like the copy and read on.

One thing you might add to this is your blog should tell a story and each article is a chapter. Although mine is not as yet like this I’m trying. I just think if you pick up a good book your always waiting for the next chapter to begin. One blog in particular comes from a woman who’s background in media exemplifies this and I recommend anybody take a look. To me she is just great at doing this. http://mumpr.com.au/

Nando

Spot on, as usual.

I’d like to stress the importance on the information architecture of a website. Most people jump on the project without any plan, and pretty soon have a gigantic navigation with all sorts of random destinations on it.
I recommend using the card sorting technique for website information architecture. Simple, visual method to plan a site.

Yang

Awesome tip! What I have found is a blogger should definitely use his or her blog to GET actions, either viewing, clicking the ad or sign up with the mailing list or purchasing the product, etc. It all boils down to the actions we want our users to take. That’s all it matters there if you want your blog to do something for you. Otherwise, you would just have a casual blog at blogspot.com.

Neena

You bring up some excellent points.

But I would like to add one more – having an appealing and well organized site actually motivates me to add more content.

I have a few sites that have gotten a bit out of control from an organization standpoint – and these are the ones that I consciously or subconsciously avoid working on.

Andrew Mooers

Excellent one by one points to keep focused on the flow, guts, design, purpose of the blogs you weed and feed. Wanting, needing a following.

Kathy

Thanks for a great post, Derek. As a long-time web designer I’ve been using these principles for a long time but my favorite thing about using Thesis is that it makes it so easy to change colors, fonts, font sizes and such. I also use Nando’s card sorting technique on larger sites. It really helps to add structure to a site and then you can just drop new content into the proper slot.

Great stuff.

Darrell Evans

I’ve become so clear about the psychology you reference in your posts. I still need to create resource pages as I re-purpose my blog but I’m extremely excited as I follow your advice. Continued best to you.

Sadie-Michaela Harris

We run Thesis 1.8 on our Concierge website and have been toying with adding it to our other business sites too. Thanks for the overview makes sense!. I Also read that keeping text lines short work very well especially on websites and more over in emails. 🙂

Foufinette

Clear, concise, to the point … 2 new things I got from the post: font size 14 points minimum (I was using 12<) and more sub-headings.
Thx Derek!

Andrea

Hi Derek, I couldn’t find any other way to contact you, so hopefully you will see this. I have a “dumb” question about Thesis. Does it work with other themes? I purchased a theme from Elegant Themes which I don’t want to change, but I like the sound of the benefits of Thesis.

Gregory Ciotti

Hey Andrea, I don’t know if you got this answered, but no, Thesis does not work with other theme designs, although there are Thesis “skins” available that look great, I would personally recommend Kolakube & Themedy for skins built for Thesis.

Bruce Ammons

Simple, Clear, Helpful…Thanks Derek!