The Non-Designer’s Guide to WordPress Blog Design

  • November 10, 2011 by Corbett Barr
  • 38 Comments

You’ve heard the rumors, and they’re true. Having a great looking blog is important if you want to attract a big audience.

Your design is your “first impression.” People typically spend just 10 to 20 seconds on a web page. A great design can buy you time because it stands out and puts your visitors in a comfortable frame of mind long enough for them to get hooked on your incredible content.

To create a great looking and functional design, you have a couple of choices.

First, you can hire a designer to do it for you. If you have the money, this is a pretty good place to spend it. A designer can create a completely unique site that no one else has, and they can use the design itself to better convey your message and meet your goals.

Since you’re still reading this “non-designer’s guide,” I’ll assume you either don’t want to spend the money on a good designer (which can cost from $2k to much, much more), or you’re wondering if you can really do it yourself. Or, maybe you’re just up for a challenge.

When I started blogging back in 2009, I decided to create my own design. It wasn’t anything special, but I focused on keeping things simple. That simple design served it’s purpose and I was able to grow decent sized audience around it. That’s what I recommend you do as well. Don’t try to compete with the fantastic designs from top designers when you’re just starting out.

Instead, keep things simple using these rules I’m about to share with you.

We’ll also cover some of the technical aspects of making your theme and WordPress do what you want it to do, so keep reading.

Expert Enough as a Case Study

If you’ve been following along with the Million Dollar Blog Project, you know that we launched our new blog Expert Enough this week. We’ll update you on the launch results next week, but let’s talk about the design today (if you’re dying to know, we attracted around 7,000 visitors during our first two days and have shot up to page one on the MDBP leaderboard already).

Instead of developing a completely custom design for Expert Enough (like I did for Think Traffic), we decided to go with something much simpler. We wanted to use a pro theme with limited customization to show you that you don’t need a huge budget to build a popular site.

Take a look at the design:

This design is based on nothing more than a $70 theme from WooThemes out-of-the-box plus about a day’s work in tweaking it to our liking.

Starting with a professional theme is a great way to go because it gives you a little personality and doesn’t look like every other blog in the world using the default theme or a popular free theme.

Using the tips in our video below, you can customize a pro theme and make it different enough from the basic version to stand out.

I highly recommend WooThemes if you’re looking for a solid, good looking theme that will be easy for you to change. It’s great for beginners.

You’ll notice that I use WooThemes on several sites (like Expert Enough and CorbettBarr.com). I also like to use the Thesis Theme (like we do here at Think Traffic). Either is a solid choice, and I regularly use both of them. WooThemes has a slight edge for beginners, and they have many more choices of pre-designed themes (over 100 of them).

I’m going to show you exactly how to install and customize a theme later on in this post, but let’s talk about some design ground rules first.

What Makes a Blog Design Good?

As they say, good design is like pornography. It’s hard to define, but you know it when you see it.

One person’s ideal design might be another person’s worst nightmare. Part of design is about personal preference. But there are also a whole lot of simple rules you can use to make your design generally more appealing.

Design takes years to master, but you can learn the basics pretty quickly. By learning the basics of colors, grid layouts, fonts, spacing, graphics and a few other things, you’ll end up with far better results than if you just jump into things and start tweaking your site.

Five Easy Design Enhancements to Make Your Site More Magnetic

To help you navigate the basics of design, Pamela Wilson from Big Brand System put together a mini-guide just for Think Traffic readers called Five Easy Design Enhancements to Make Your Site More Magnetic.

To get this guide, just enter your email below. It’s part of our subscriber traffic toolbox. If you’re already an email subscriber, you’ll get instant access to the guide. If you’re not a subscriber, just enter your email address below and you’ll also get blog updates from us. You can always unsubscribe at any time.

Enter your email to get instant access to Five Easy Design Enhancements to Make Your Site More Magnetic:

Looking for Inspiration and Planning

One of the best ways to develop your own great blog design is by looking for inspiration elsewhere online. Think about your favorite sites and what you like about them. Think about why those features, colors, layouts, etc. are attractive.

Don’t just copy one site you like, that would defeat the purpose of customizing your design to make it unique. Instead, just keep track of the things you like from different sites. Make notes, and try to mashup certain aspects from several different sites you like to create something special.

Design blogs are another great place to look. Start with Smashing Magazine. Then, hang out where designers hang out and see what they’re working on. Dribbble is a great place to see the cutting edge of web design.

If you’ve been taking notes, so far you should have an idea of the basics of your design (colors, layout, fonts) and you should have some sources of inspiration. Next we’ll talk about how to actually customize your blog, and then we’ll cover the essential elements your blog needs to function well.

How to Choose and Customize a WordPress Theme

I mentioned above that I recommend WooThemes to non-designers who want a great looking blog. In this video below, I’ll show you why, and I’ll also show you how to choose and customize your theme, including how to customize aspects of your blog that don’t have built-in settings (using CSS – don’t worry, it’s not all that complicated once you learn).

There’s really no magic to customizing a WordPress theme. It’s just about learning some basic HTML and CSS, and about knowing where to place your code. If you plan to customize your own site instead of using a designer, invest a little time into learning CSS.

Before you start tweaking your site, try jotting down a list of what you want to include on your site, and how you want it to look. If you’re brave, you can sketch your ideas out, or use PhotoShop to mock things up.

WordPress Plugins

I didn’t mention it in the video, but WordPress plugins can be a godsend for customizing your blog, especially for functionality (less so for design). For example, there are all kinds of plugins to add social media buttons to your posts (I like Social Sharing Toolkit, which we used at Expert Enough).

To choose good plugins, I typically look for a good rating (4+ stars) and a healthy amount of downloads (say 20,000 or more). That usually ensures there aren’t any major bugs.

There’s a plugin for almost anything, so look around before you try to code something up yourself. Also, if the plugin you found doesn’t do the trick, try another one that offers similar functionality.

Just be careful about using too many plugins because they will impact performance if you have too many. I try to do without unless they’re absolutely essential. Try to keep your total plugin count as low as possible (most of my sites use just between 5 and 15 or so).

Blog Design: Essential Components

Alright, once you know how the basics of design, have some sites in mind for inspiration, and know how to customize your theme, it’s time to think about the essential elements your blog needs.

Aside from being visually pleasing, there are three main goals your design should achieve:

  • Present your impressive content in an easy-to-digest way
  • Lead your visitors to connect with you so they’ll come back, either via social media, or by subscribing for email or RSS updates
  • Make it easy for visitors to share your content

Keep in mind, there are no “right” answers when it comes to blog design.

You can achieve these goals in lots of different ways, so don’t feel you have to do exactly what everyone else is doing.

Here are some guidelines for things you should probably include somehow and answers to a few questions you might have.

Home Page: Full posts or excerpts?

You can go a couple of ways with your home page. You can include full posts (like Julien Smith does at In Over Your Head), or you can include one featured post and some excerpts (like Chris Ducker does at Virtual Business Lifestyle).

Or, you can include just one post on the home page, either in full or as an excerpt (like Zen Habits does).

For Expert Enough, we chose to use just excerpts on the home page, along with a big featured section.

Like I said, there is no right way. Any of these approaches can obviously work, since each of these sites are successful.

Just think about what you prefer and what your readers might prefer, and choose one style you like.

Email Sign-up Forms and RSS Buttons

One of your biggest goals should be to get your readers to subscribe, so it will be more likely they’ll return. It’s very difficult to grow a big audience unless you convert your hard-earned traffic into return visitors.

For blogs, you should focus on email subscriptions as your first priority, with RSS as a second option. Email has by far the biggest return rate of any connection method, including social media.

I recommend AWeber as an email service provider, although MailChimp can be a fine choice as well. Read this post on why I switched to AWeber if you’re interested in the details.

There are four key places where I recommend you place your email sign-up forms:

  • in your sidebar
  • at the end of each post
  • in your footer
  • on your about page

These are typically the highest converting places for a new blog. Once you’re up and running, you can also use sign-up forms on special resources pages and on other pages. Occasionally you can use them within a post, as I did earlier here.

You’ll also want to make your RSS feed link easy to find. Over at Expert Enough, we included an RSS link in the header, sidebar and footer.

Social Media Connect Buttons

In addition to email/RSS, you should also make it easy for people to connect using Twitter, Facebook, Google+ or whatever other social networks you use.

Like your sign-up forms, you can put these in your header, sidebar, footer and on your about page. You can also put “follow me on Twitter” links or similar within your post byline, or at the end of posts, depending on your goals.

Again, there is no “right” answer, but make sure you have these somewhere easy to find. The more important a particular social network is to you, the more prominent you should place the connection option.

I like to use both simple links/images, as well as the automated one-click sign-up scripts, like this:

Keep in mind, if you don’t have many followers yet, you may want to disable the follower count on these widgets for now. A low follower number can serve as negative social proof. Anything above 500 or so should be impressive enough to work in your favor.

Social Share Buttons

Within each blog post, either at the beginning or end, or both, you should include social sharing buttons so your readers can easily share your stuff.

Which networks you use really depends on what kind of content you offer. Some audiences are more suited to Facebook (more general and older audiences) and some are more suited to Twitter (tech/media savvy and younger), while for some (business types) would be better served by LinkedIn.

Other Elements

You’ll also need a logo (tagline optional) and navigation bar on your site. Where you place these is up to you, but keep in mind where people expect things to be. Deviating from standard layouts can sometimes confuse people.

You’ll probably want a sidebar on your site as well. Whether you place it on the right or left is a matter of personal opinion. One sidebar is probably plenty, but you can go with two like we did here at Think Traffic if you want to be fancy :)

Need More Help? Join Our Class on Blog Design Today

This article should get you started. If you’d like to spend an hour with me as I show you step-by-step how to customize a site and dive much deeper into good design principles, we have a live class today at Noon Pacific / 3pm Eastern.

You’ll also get a full recording if you can’t attend the class. We’ll do live Q&A on the call so get your design questions ready.

Questions? We’re happy to help, just ask below. What did I leave out of this guide? What would you add to it?

Also, if you’re participating in the MDBP, I’d love to hear how you developed your own design. Please share in the comments below.

Written by . Corbett is cofounder of Fizzle, a place for creative entrepreneurs, writers, makers, coders and artists, all working to support themselves doing what they love independently on the Internet. Follow Corbett on on Twitter.


Think Traffic is now The Sparkline. Click here to check it out.

Or View The Archives

David Hill November 10, 2011 at 5:54 am

Awesome post. You can definitely create a great looking design using themes, I heavily customized a theme for my site.

David Hill November 10, 2011 at 5:59 am

Forgot to add one great way to help with customization is to use FireBug in FireFox, you can edit in live view without destroying your site.

Corbett Barr November 11, 2011 at 5:00 pm

Thanks for mentioning that David, I forgot to in the post. Cheers.

Social Media Assistant November 12, 2011 at 10:48 am

David,

Do you have a link to FireBug please?

Colleen November 10, 2011 at 6:30 am

Design is a tricky area for me. I learned HTML3 (I’m old), but stopped designing about the time CSS became popular.

So I know … not quite enough to make me dangerous.

I launched Inappropriate Metaphor as part of the MDBP, and these are my notes about what I wanted for my design:

–Clean, easy to read header. It took me some tries, and learning how to use a child theme, but I got something that pleases me. It’s simple and practical – much like how I want my content to be.
–Interesting colors. My theme is “connecting the dots” and, with a name like “Inappropriate Metaphor,” I needed something unique. I went with “motherboard green” and “fairy pink.” Visually, they’re very different, and bring to mind different ideas, but they blend well. Perfect for my overall philosophy.
–Follow best practices in my sidebar. That meant sharing and email signups above the fold, and not too much to clutter up the site. I had several iterations where there was just too much there. Now, I think it’s pretty streamlined.
–A clean, non-distracting design. The pearl grey background is simple and clean. All the bright colors lead to content.
–No featured images. Just a personal choice, but I like having the stable header image on all my posts.
–Free and simple. I don’t have the luxury of hiring a designer, and I stayed away from the premium themes, mostly because I can’t extensively customize them with my current level of skill. (And, lately, all the Thesis and Genesis themes have started looking very similar to me.)

I was going for a mix of professional and whimsical, so I think I’m not too harmed by going with a free theme. (I also chose one of the not ubiquitously popular ones, I think.)

Whew. Wrote you a book. But you asked. :)

Corbett Barr November 11, 2011 at 5:03 pm

Hey Colleen, nice site name :)

It sounds like you really thought your design through before implementing it. Are you happy with the results?

Shane November 10, 2011 at 6:43 am

Hey Corbett, awesome article. I also wanted to share a link for your readers from SEOMoz that shows good blog design components as an easy to view info graphic. It’s an awesome way to visually see most all of what you covered here in the article:
http://www.seomoz.org/blog/blog-design-for-seo

Corbett Barr November 10, 2011 at 8:46 am

Oh, cool, thanks Shane. Thats a nice looking guide.

Tom November 10, 2011 at 6:56 am

Wow, what a great article – just in time for me as i am in the process of redesigning some of my sites (going from plan html to WP for enhancing user-experience and my own admin abilities). Also thanks for the ebook – will read it later tonight.

Running A Small Business November 10, 2011 at 9:01 am

This really is a great post and just what I was looking for. I watched the tutorial and downloaded Google Chrome as well. I have 2 sites that I started with one as Thesis, which I didn’t know how to do much with. The other is okay but neither one of them shows me.

It wasn’t until recently that I found my writing style. Do you think I should should start a new blog around that or keep the others?

Corbett Barr November 11, 2011 at 5:03 pm

It’s hard to say whether you should start a new site, but in general it’s very difficult to maintain more than one site at a time.

Gregory Ciotti November 10, 2011 at 9:07 am

I also recommend the Standard Theme (I used it on Sophistefunk [http://www.sophistefunk.com/], my MDBP blog) for people not too keen on design.

The reason being is that they have a lot of documentation in the support section to make changes (font changes, layout changes etc.) and also because it comes with a very good layout and has easily customizable backgrounds.

I’m going to go over a post like this as well, for now I also recommend people check out resources like SubtlePatterns.com for tileable patterns for their blogs, which can really step up aesthetics for no cost at all.

Corbett Barr November 11, 2011 at 5:04 pm

Thanks for the recommendations Gregory!

Ken July 3, 2012 at 8:49 am

Gregory,

We just rebuilt our blog using Standard Theme — out of the box with no customizations — and in just four months we are averaging 800 pv a day with a recent high of 1054 pv. It took us a year to reach that using Blogger.

JB @ My University Money November 10, 2011 at 9:46 am

Very good article. We tried using a free theme but once i got my hands on the Canvas theme from woothemes I was hooked. The site was faster and “WAY” more crisp. Also a great support base!

Eric November 10, 2011 at 12:32 pm

Can anyone recommend a plugin that places Facebook/Twitter/LinkedIn share buttons at the top or bottom of post pages?

Caleb Wojcik November 10, 2011 at 1:11 pm

Sharebar is a simple plug-in that puts share buttons on the side or top/bottom of your posts.

Chris C. Ducker November 10, 2011 at 8:20 pm

Great post! And, thanks for the mention…

What I loved about this is that you laid things out nice and easy. For beginners, its tough to get started with their blog design, I know I struggled with it, bigtime!

I’m happy with my current design – but, knowing me, I’ll probably re-jog it again in the future at some point.

Keep rockin’, guys.

Chris

Design and Branding Moorpark November 10, 2011 at 8:46 pm

I visited website with such high quality information. Thank you so much for providing such helpful information. This is really informative and I will for sure refer my friends the same.I was simply checking out this blog and I really admire the premise of the article and this is really informative. Thanks.

IyagiDad November 10, 2011 at 9:02 pm

Hey, this is perfect…I noticed you mentioned both Thesis and WooThemes. I heard a bunch about Thesis and then got it. But…actually…it seems to be hard to make look good. There are lots of options to configure, but I don’t know how to actually configure colors and fonts to make it look good.

It seems like WooThemes would be a better way to have gone. What is the benefit of Thesis? Is that for having a designer come and create a skin?

Or am I missing the power of Thesis for a non-designer (I do know CSS, but just not sure how to make it look good).

Thanks…!

Extreme John November 11, 2011 at 4:57 am

A very informative post. Wordpress design is composed a many elements each of which you can create your own style or design. I totally agree that design can indeed make a difference in terms of making visitors stay longer in addition to having great content.

Adam November 11, 2011 at 1:55 pm

Really helpful post, thanks for sharing. Can’t wait to dive in further to the details of my sites’ designs.

Justin | Personal Growth November 12, 2011 at 3:47 pm

Hi Corbett,
Wow, you have a lot of information in this post. I am also a huge fan of clean and simple themes. There are so many blogs out there with pop up newsletter forms and ads all over the place, plus social sharing buttons galore.

Less is more.

MaAnna November 12, 2011 at 8:38 pm

Corbett, I respectfully disagree with several points in this post. Having a site customized by a professional designer does not start at $2,000 and makes me wonder who ripped you off. And, good site design can be defined. There’s a reason sites are laid out the way they are and why very specific elements match directly to factors that appeal to the target audience. That’s the kind of knowledge and experience that businesses pay top dollar for. Not all designers have that knowledge, in fact, most don’t.

Learning the mechanics of site design is the easy part. Building a site with the psychological aspects of target audience in mind is a lot tougher, but more advantageous.

That said, since there are so many poorly designed sites on the web, viewers have grown accustomed to forgiving an ugly site if it consistently feeds them the information the seek.

I’ve reviewed many sites that had almost everything wrong with the design, according to best practices, and yet they had a large and loyal following from whom they garnered a significant income.

So, to me, the bottom line is to focus less on the theme and direct more energy toward creating content that gets found, read, and acted upon. Have a theme which enhances that experience and doesn’t compete with it.

Steve November 13, 2011 at 5:12 am

Thanks for the article. I am new to blogging and sometimes I feel design is not my specialty.

Ryan Critchett November 13, 2011 at 3:17 pm

LOL, “you know it when you see it!” Yeap, sounds about right!

More Web Site Traffic November 13, 2011 at 9:15 pm

Hi Corbett Barr

Thank you for this blog. Thats all I can say. You most definitely have made this blog into something thats eye opening and important. You clearly know so much about the subject, youve covered so many bases. Great stuff from this part of the internet. Again, thank you for this blog.

Scott Dudley November 15, 2011 at 5:27 am

Yeah I think it is a great idea to learn how to do it yourself, because if you want to change things around you have to keep paying someone else to do it.

WordPress is extremely user friendly and with a bit of searching around on Google you can basically customise it to do anything you want, if you are patient enough.

I spent many hours learning how to customise Thesis, and saved myself hundreds in the process. Paying someone to do it is the lazy man’s solution in my opinion.

Steve November 24, 2011 at 11:23 am

Thanks Corbett, just what I needed, a little primer into getting into the code/css. I see the importance of understanding how to work with WP themes.

Robert Mishovski June 1, 2013 at 8:54 pm

Hey Corbett,

I just imagined you locked in your office, surrounded by cups of coffee, all sweating with your fingers on fire trying to write to best post ever done in history of blogging :) This post is so valuable that I can’t believe you’re giving this informations for free! I just hope you never gonna stop blogging because without you teaching me I’m a dead man :)

Colleen November 11, 2011 at 5:49 pm

More or less. There are some areas that look a little rough, but I’m certainly pleased enough with it. I have a Phase 2 planned for getting it professionally done, but I think it manages to stand out some as it is.

Corbett Barr November 13, 2011 at 10:18 am

Comments on this entry are closed.

Sites That Link to This Post