Blog Design On A Budget: The Complete Guide For Creating A Beautiful, High Converting Blog

As  you by now know, this blog is focused on content marketing for established and aspiring brands using the good ol’ fashioned WordPress blog as the foundation.

I’ve covered how a simple WordPress blog and effective content marketing can skyrocket a real business in my recent interview with Brian Gardner.

One of the biggest questions I see (and even get), however, comes in the form of design questions.

Many people, ready to start their content marketing efforts on WordPress, whether it be to build awareness for their product or to start a successful blog, get hung up on the design aspects of their site.

I’d like to think that this post will put these worries to rest.

Why It’s Important

The 3 biggest things that I think drive people mad about their impending blog’s design are the following…

1. They don’t know what they need
2. They don’t know how to design it
3. They don’t know how to implement it

And there is no shame in that. If you’re a writer, your craft is in writing, not in designing blogs.

There is a big problem though, and it’s one that most bloggers inherently realize even if they don’t have the data to back it up.

Blog design matters.

A lot.

In fact, that recent study on a the “trustworthiness” of websites (how many times must I link to this? ) that we talked about last post, has shown that peoples opinion’s on the sites trustworthiness had little to do with the content (on a first impression).

It had to do with the site’s design.

A site’s design can give people a lasting impression that will make it’s content a second thought.

Why?

People will leave your website if the design doesn’t come off as trustworthy or professional.

Unfortunately, most bloggers are pretty bad at the aesthetics of their site (I’m not trying to be mean, but you’ve likely seen some “questionable” sites yourself).

So, what does a good design design really need to keep people around?

Squeaky Clean

Before you go worrying that you have to spend $5,000 on a completely custom site redesign, let me introduce you to an easy way to think about good web design.

Whenever I build a new WordPress site myself, I think about how “clean” the site is.

This doesn’t mean how much white space, and it doesn’t mean boring either.

A “clean” site is an inviting site that is easy to read, easy to navigate, but that still has some personality.

One of my favorite examples of a “clean” site is SEOBook by Aaron Wall.

Let’s check out a few things that SEOBook does well, that any WordPress blog can learn from:

1. Liberal white space around content (black on white is almost universally preferred, don’t use anything else and don’t be scared of whitespace)
2. Focused, fun, inviting color scheme (sticks to a few colors, the colors are implemented well into the design, and the colors are “inviting”: on an SEO blog, light colors would do well to build trust)
3. Still has personality (cool logo, liberal use of images)
4. Excellent fonts (large title fonts, familiar and readable body font)
5. Classic layout (it’s okay to have that classic content/sidebar layout, and as one of the biggest SEO sites in the world, I think this proves it)

Now obviously Aaron Wall has a few spare dimes under his couch to afford paying a designer to do this custom design for him…

But that doesn’t mean that you also can’t have a similarly clean & amazing design using nothing but your own skills and a few helpful resources.

General Layout

WordPress themes are an area so vast, it would be hard to touch on even the tip of the iceberg of my “recommended” themes in this post.

What I will do for you is go over some of my favorite themes for are “clean” strategy, and in a later post I might even create a post on the best free WordPress themes for content marketing (boy, that one is going to be an undertaking!)

The other thing I’m going to address in this theme section is good layouts, styling, and features to look out for when selecting a them.

So let’s get started…

Content & Sidebars

Content/sidebar is a classic layout that you really can’t go wrong with, and if you don’t believe me, you can check out a list of world class blogs that all follow this similar style.

For your content area, you need to keep the width between 500-600px, depending on your font size.

Your “content area” (the area where people read, or right here where you are reading now) needs to be totally white or at least a very light color with very dark text, don’t be afraid to go #FFFFF / #00000 (pure black text on a pure white background).

Font size needs to be 14-16, that is the web standard font these days and is much closer to reading a book or offline publication, so you should match your font to these sizes.

These are the fonts I would recommend (14pt or higher for all):

1. Arial
2. Georgia
3. Verdana
4. Hevletica (needs to be large enough to read)

I like sidebar width to be anywhere between 250-300px, and your overall site width shouldn’t be too much larger than 960px, for people with oldschool monitors .

Themes & Frameworks

I decided to put this part after the content & sidebar section because the themes I recommend below make it easy to fit the guidelines described above, along with having excellent typography and whitespace, along with the general blog layout.

In short, the following themes and frameworks below are the ones I personally use to fit the ideal “clean” site that I’ve described above, check them out and see if they work for you.

So, where do I get my themes?

Frameworks

• Genesis Theme Framework
• Thesis Theme Framework
• Standard Theme Framework

Theme Sites

• WooThemes (especially the Canvas Framework)
• ThemeForest
• ThemeFuse
• SimpleThemes

There are of course, tons of free themes available for WordPress, but you should only be looking for them on WordPress.org, because the consequences can be dire if you download them elsewhere.

What’s the deal with these premium offerings anyway?

I won’t get into the debate here, but in a nutshell, you aren’t really paying for the theme design, you’re paying for the support & updates.

A free theme is “released into the wild”, oftentimes to received no support and updates over the years.

Premium offerings, however, are businesses, and the owners damn well better be on top of WordPress changes and new features, otherwise they’ll find themselves with no bread on the table.

That means support & updates abound, typically worth the cost if you are going to be running a blog as a business yourself.

What’s Important

Okay, so let’s skip the small talk and get right into what’s important with a high converting theme.

1.) Opt-In Forms

First things first, opt-in forms, as in, where should they go?

I covered the best places for opt-in forms in this AWeber guest post, but I’ll list them again here:

1. Feature box
2. Top of sidebar (right or left)
3. End of each single post
4. Your “About me” or “Start Here” page
5. A dedicated “Get Updates” or “Newsletter” page

Really, that’s it.

I’ve covered some other interesting email conversion strategies before, but for many folks, adding good looking opt-in forms in these locations will be enough, now they just have to work on great content :).

2.) Easy to Read & Easy to Navigate

The typography on your blog is more important than you might think… although you should be thinking it’s important, because your posts are your blog’s lifeblood!

I can sum up this whole section by saying the following: 14-16pt font (Georgia, Arial, Hevletica, or Verdana) with line spacing between 22-24.

Or you can read all about typography on Chris Pearson’s great post.

Seriously people: use big, easy to read fonts for your content!

The real thing I want to talk about here is navigation.

Rafal Tomal said it best:

If people don’t know where to go, they will always find an exit.

Things like categories, archives (unless you have TONS of posts) and other non essential links (author links) do not need to be present.

Your “nav bar” should be replaced with “resource pages”, which cover a broad topic with an introduction and some links to your best content.

Want to see an example?

Check out Copyblogger’s resource page on email marketing, it does pretty much everything right.

Resource pages are going to cover some of your blog’s biggest topics.

Do you write about fitness, with a heavy focus on free weights? You need a free weights resource page, linking to your best articles involving weights.

Writing about photography, and you also specialize in animal photography? Resource page, along with your best examples and of course, links to your best posts on the subject.

Get the idea?

The thing is, when you create only these pages (and take out the junk, like “category” pages), you control what readers are going to see a lot better.

You only link to things on your homepage that are going to impress readers or convert them into subscribers, that’s why I have putting an opt-in form on your “About Me” page, since it’s going to be one of the most popular on your site (go ahead, check your analytics and tell me I’m wrong).

Control where people go, make it easy, or they’ll use their “Plan B”: they’ll leave your site.

3.) A USP & Memorable Branding

The last thing a high converting blog really needs is a unique selling proposition and something memorable about it’s branding.

The thing with USPs that’s gets people too held up is that they try to focus on something that is completely unique, rather than something that is actually useful & has an audience and putting a twist on it.

The key is to be “newish”, mixing things that go well together, or even a generic topic with a new presentation.

I talk content marketing, that’s nothing new, but I focus on interviews, psychology, new content mediums & citing research studies, which is something a lot of marketers don’t do.

You could start a personal finance blog that focuses on finance for college students, that typically enough of a “twist” for standing out in your niche.

Think of a large segment in your broader topic that could use more attention, but make sure that they audience is there, you can do this with things like the Google Keyword Tool, it’s not just for niche sites you know!

Keyword research like this can really help you see if people are searching for your topic, and you can mimic the highest searches to see if that need is getting fulfilled.

You can also use general awareness: “Are there bloggers in the ______ niche doing ______? Is there a demand for that? How could I fill that void?”

For example, on Sophistefunk, I noticed that on a lot of the social sites I went too, people were commenting that too many electronic music blogs focused on the “dance scene”, or electronic music made to dance and party too.

My site then focused on the mellow, the serene, and my audience appreciated me for tapping into that sound, because so few blogs do it, even though there are a TON of electronic music blogs out there.

The reason this matters for conversions is that if you have a target audience, you will convert more and BETTER subscribers when they find your site.

How does design fit in?

You need to brand your site to fit their expectations.

My focus on research here on Sparring Mind lead me to use a big graphic head with a colorful brain on my homepage.

It speaks to the topic, just like the title of Sophistefunk speaks to it’s topic (sophisticated + funk, or the type of music I post).

If your design & branding keeps in mind your USP, you’ll catch visitors attention and I guarantee you’ll see higher conversion rates.

Color Palettes

Another quite easy way to ensure your blog has a professional look to it (while keeping a budget) is to be knowledgeable on good color schemes (or color palettes).

This just means using colors that work well together and that can help your brand your site and be more memorable.

It doesn’t take hours of studying colors either, simple check out palette resources like the collection on StudioPress or on ColorLovers and find one that suits your tastes.

Here’s a sampling below:

I currently love the StudioPress layout of this resource, but ColourLovers offers more of a selection at this point.

The key point here: A unique color scheme is a great way to add a professional look to your site (and helps with branding) without having to know anything about design.

Best of all, these color palettes are easy to copy, if you click on an individual one (on either of the two sites above), you can see their “HEX code” for each color, which you can copy and paste into your theme’s settings or code to change to that color easily (such as changing link color).

Color is also a great way to stand out in a crowded niche: Derek Halpern of SocialTriggers has explicitly stated that he used the purple link color (and accents) on his site because nobody was doing it in the marketing niche.

A small tweak in color (and knowledge of what your competitors are doing) will help you blog stand out in any niche with the simplest of changes.

Do you find all of your fellow “personal finance” blogger using the standard green color?

Focus on Dark Green as your main color with orange accents.

Are you finding that many marketers use red?

Have your blog entirely focused on purple with a ton of white space.

Color choice seems like such a small thing, but it can serve as a great way to keep your blog different from the rest with the tiniest of changes.

Check out this awesome visual guide on how base colors & accents can work in harmony:

Notice the white space is dominant, but the site isn’t “boring” by any means.

Also note how both the base and accent colors compliment each other: you should be aiming for your site to blend it’s colors in this way.

Your design will come off as more professional just from your smart color choices, and choosing colors is where you can really insert a lot of personality into your site without effective conversions.

Utilizing Patterns

Patterns are an awesome way to give a little “life” to your site while still keeping that clean feel.

The best part is that patterns can be utilized (often for free) as a way to provide unique customization with truly minimal changes.

 

Updating your blog’s backgrounds, texture elements (accents), and just about every other element, patterns are really a game changer for the average blogger looking to spruce up their design.

In fact, Sparring Mind was created by using a typical blog theme and distinct patterns to make it more recognizable (more on that later).

Below are my favorite resources for finding “clean” patterns (SubtlePatterns & GraphicRiver being my favorites):

1. Elemis Free Patterns
2. Graphic River Backgrounds
3. Subtle Patterns
4. Creattica Textures & Patterns

Patterns can play a huge part in a site’s design because they often serve as the backdrop and accent the rest of the site’s features.

Brian Gardner is known for rocking some awesome use of patterns (typically from Subtle Patterns) on his personal site:

As you can see from Brian’s site, two simple textures (and a great layout with a new focus on a personal image & email capture) makes Brian’s site inviting and really professional looking.

If you are looking for something more “colorful”, there is an awesome tool that takes the new patterns from SubtlePatterns, and lets you customize the colors right on the page.

It can be found here, and you can save the custom color to your computer which can than be use on your site.

Branding & Logos

One big thing that bloggers always talk to me about is branding & creating a logo.

Logos are definitely a concern for bloggers under a strict budget because most people don’t understand the time investment it takes to create an original logo from scratch, and thus they are amazed when a graphic designers come back with a $$$+ cost to get a logo done.

Fortunately, if you are willing to trade total exclusivity to save a ton of money, there is an easy way to get yourself a well done (no crappy “do-it-yourself”) logo for about $29.

Head on over to the GraphicRiver logo section and you’ll be treated with a great selection of logo templates, many of which have never been purchased before:

The best part is that these logos are totally customizable in Photoshop, as you get the PSD upon purchase.

This means that you can change the color, text, really anything, very simply with a copy of Photoshop (or the trial version).

All of the logos (despite what the icon may show) include text along with a professionally done image, and often look much better when you go to their individual page than when you are browsing via search.

Here’s an example of one I really liked (you can find it here):

The “head” icon that you see for Sparring Mind is directly from this selection of logos!

I’d link  you to it, but I can’t seem to find it again!

All I had to do was change the color in Photoshop (Alex did it for my feature box) to match my site design, and I’ve had a lot of people comment on how they really think it looks great.

Normally, you could pay hundreds for a custom logo, but if you want to look sharp on a budget, the GraphicRiver templates really offer the best option.

Opt-In Form Design

Speaking of logo purchases, I have to say, there are definitely some things worth purchasing when it comes to a great looking site (but don’t worry, it doesn’t get pricey).

One of those things is definitely a clean opt-in form, if you aren’t able to design them yourself.

Luckily, you could avoid even that purchase thanks to Alex Mangini of Kolakube supplying some excellent free opt-in form designs for both AWeber and MailChimp.

If you are looking for the AWeber variety, check here.

If you need the MailChimp ready forms, check here.

I would emphasize though, if there was one thing I recommend you pay for, it’s professionally designed opt-in forms.

Why?

Not only is opt-in form design some of the cheapest out there (way cheaper than things like logos), it’s also the single most important thing in terms of your site’s success!

It’s tied closely to your mailing list, and if you don’t have your opt-in forms fit into your site design and promote a professional and inviting email list, you are just hurting yourself in the long run.

It’s definitely an investment I’d consider.

This goes especially for your Feature Box design if you feel that one fits your site and niche (check my homepage for an example).

Luckily, Rafal Tomal and the StudioPress team have designed this beautiful opt-in box for free, or for super-easy use with the Generate theme:

It’s easily customized in Photoshop if you are looking to add a little DIY to your design.

Not looking for a DIY project? Check out the themes below.

The 5 Best WordPress Themes That Focus On Conversions

One of the great things about using WordPress is that if you don’t have a lot of technical know-how, you can still create a beautiful site in literally seconds with a great looking WordPress theme.

Better yet, if you dabble with even the absolute basics of the technical side of theme design, you can customize your theme to great lengths, so nobody will know that it is an “out of the box” design and not custom.

You’d be surprised about how many people ask me how I “designed” Sparring Mind; little do they know it’s just a great looking Thesis skin that I customized a little to my liking.

Add in some opt-in forms done by Alex, and I was left with a site design people have left really flattering comments about, yet I didn’t spend much money or time on it at all.

The only downside to WordPress themes: very few focus on email conversions, most of the functionality places emphasis on new “fancy” features that the average blogger could care less about: they want people to sign up for their email list.

If you’ve been enjoying the post so far, but were afraid to get started with selecting a good theme (or making customizations), you can breathe a sigh of relief, because I’ve compiled what I believe to be the 5 best WP themes that focus on conversions.

You can literally install these, make some slight tweaks, and you’ll have a high converting blog within a day, no $$$$$ cost for a professional designer, and no headaches learning Photoshop, HTML & CSS just to get started blogging.

Note: All 5 of these themes run either on the Genesis, Thesis, or Canvas theme “framework”, I explain why at the end, but for now, enjoy these well thought out themes:

1.) The “Generate” Theme (Genesis Framework)

In chasing the all-mighty email, it’s been long known that a direct approach is often the most effective.

It’s why the debate over “lightbox pop-ups” has been raging on ever since their inception: they are admittedly annoying, yet they continue to work well, so where do you draw the line?

Luckily, the advent of the above the fold “feature box” (and some other great ways to collect emails) has made this direct approach more tolerable to those averse to the pop-up marketing tactic.

The problem?

Feature boxes are generally large, which means that they are harder to design than your typical sidebar optin, and even then, many people do not have the design knowledge necessary to create one.

Outside of hiring a designer, it hasn’t been possible (until recently) to get a theme that included a great feature box, especially one that looks as good as the one featured in the “Generate” theme.

It doesn’t end with a good looking feature box though: this theme comes present with great styling all around, but especially in the content area.

The typography is excellent, with a standard 16px Georgia and a nice bold post title font makes everything extremely readable, and easy on the eyes.

The stylized sidebar makes inputting your opt-in form code easy (if you cut out the crap code, it will appear to match the theme, buttons and all, without any modifications).

2.) The “Conversion” Theme (Genesis Framework)

Fittingly named!

This theme is the culmination of the technical skill of Martyn Chamberlin (the creator) and the insight of Derek Halpern, who’s blog Social Triggers heavily influenced the design of the theme.

The unecessary has been cut away in favor of easy opt-in adding and a conversion focus (surprise!).

Make your blog stand out with a creative feature box image & logo, and let your content do the talking for the rest of your site, and since the Conversion Theme is made for… well, conversions, the emails will start flowing in.

Minimalism more your thing? The theme also comes in the “Tribe” variety, for all of you white space junkies!

One blog I really enjoy using this theme is Jeff Goins’ blog on writing.

Jeff is a notable blogger and is rocking this very minimal theme, is it any surprise his is a site focused on content? Is it any surprise he’s been able to build a thriving audience with this site design?

The thing is (and really, the whole point of this post) is that you can and should have a clean site, but that doesn’t mean that there can’t be a lot of personality to it.

Jeff’s site has an awesome header image that is all about, yet when it comes time to read what he’s written, his theme doesn’t distract you with nonsense, and makes it really easy to subscribe.

And that’s what it’s all about.

3.) The “Canvas” Theme (Canvas/Woo Framework)

Canvas is the first attempt at a true “framework” by the folks at Woo Themes.

Canvas is great because right out of the box is comes “clean”, and it’s easy to customize.

Some people might be put off by the heavy white space, but I guarantee that if you use a colorful logo (as discussed above), and implement some nice textures & patterns into your opt-in forms and other accent areas, the white space will serve simply as the “main course” for your content, rather than being overpowering.

My buddy Tom Ewer’s site is a great example of how to turn the Canvas theme into an high converting website, with minimal changes.

4.) The “Eleven40″ Theme (Genesis Framework)

There is a lot to love about the latest theme from StudioPress, and one aspect in particular that I’d like to see being implemented in themes (and even custom website!) everywhere…

Well, let’s address that one first.

What blew me away the most was that Eleven40 features one of the best “footer opt-ins” that I’ve ever seen!

Seriously, it’s amazing, and even custom designed blogs could benefit from including something similar, yet this theme comes with it standard.

Here’s a peak at it from the demo:

Nice!

Not only does it hit the prime spot for opt-ins (after a visitors has finished reading a full post), it does a great job of selling the benefits of joining your newsletter, without being annoying.

The bullet points, the arrow & call to action, the clean professional look of it, it’s seriously great, and ever since I’ve seen it I’ve been rethinking how to do my own footer opt-ins in the future.

Why yes, I do get caught up on the details, because when it comes to building your list, they matter folks .

5.) Marketers Delight 2 (Thesis Framework)

First let me start off with some well deserved praise…

Hot damn!

Seriously though, aside from being beautifully put together, there is so much to this theme (and so much thought placed into each and every option) that it boggles the mind, this theme is definitely a game changer and I don’t say that lightly.

Let’s talk right out of the box: looks great, font selection and opt-ins (including a feature box) are build in, and everything is easy to change thanks to the extensive settings in the Thesis Framework.

I’ve interview Alex before, and he’s not only a talented designer, he’s a young guy running his own business, and he’s definitely has a marketers mind.

It shows in this theme, he’s taken a lot of the lessons promote (again) on Derek Halepern’s blog, which focus on simplicity and placing emphasis on features that result in conversions, ie, the main goal of most blogs.

He’s built in a TON of great page leads right in the them, from the basic landing page to custom pages that you have to see for yourself:

It really can be used to sell anything, and it comes beautiful out of the box (check out the demo for yourself).

It’s available on Kolakube right now, but requires the Thesis Framework to operate (it is a Thesis skin, after all).

“Why Isn’t _______ Themes Listed Here?”

A question I’m expecting when this post goes live, a lot of people might feel that I’m biased focusing mostly on Genesis & Thesis child themes & skins in my examples above.

The thing is, while there are some other great theme developers & clubs such as ThemeForest & Elegant Themes, they are typically built to look good, and not a lot of focus is given to conversions.

This does not mean that they aren’t useable, it just means that you’ll probably have to do more extensive customization (font changes, layout changes, custom opt-in forms) in order to get the theme to convert well, whereas the themes I’ve listed here come pretty much ready to go out of the box.

Don’t fret if you prefer designs from those other sites though, just don’t let their endless list of features distract you from what matters, there’s about 4000 words above this sentence describing exactly that that is .

Where Do I Find Designers?

I mentioned that some things are worth paying for, so if you’re not a designer or web developer, you need to get a hold of one.

The thing is, not all of us can afford Rafal Tomal (;)) so we work with what we got.

To be honest, a lot of people are going to direct you to places like Elance.com & ODesk.com, and that’s fine…

But to be really honest, I much prefer getting in contact with designers and web developers myself via email, finding them through mutual connections, their other projects, or through design sites like Dribbble.

For my design here, I found Alex through Kolakube, for the Sophistefunk logo, I found a designer from another blogger.

Funny how networking is actually useful like that, heh.

The thing with sites like Elance and ODesk is that it’s a mixed bag: quality is kind of a gamble, although reading reviews and looking for key signs of consistency certainly help.

The good thing is, if you are actually listening to my advice to keep your blog design “clean”, you shouldn’t need a full site redesign or a ton of work done, we’re talking logos & opt-in forms at the least (and I already showed you work-arounds for those already).

My final point: search through your connections before you hit up “for hire” sites, and use those after you’ve searched around design sites like Dribbble, Forrrst, DesignMoo and LoveDsgn.

Building A 40,000+ Reader Blog With $160

Over on Sophistefunk, my latest project (an electronic music blog if you don’t remember!), I’m up to 40,000+ unique visitors every single month (Clicky data is for 3 weeks), after only getting started a few months ago.

I wanted to break down how I did the design with practically no tech skill, to show you it doesn’t take a lot of time or money to get stuff done.

So, what did it cost me to build Sophistefunk?

Well…

1. $50 – Standard Theme Framework
2. $50 – Logo (half-off discount for being a friend of a friend)
3. $60 – Opt-In form (done by DesignPX)
4. Free – Background texture
5. Free – Subscribe button (from Dustin’s site)

The only other customization I did was to change the font to 14pt Arial…

It really doesn’t take a lot folks!

Yet, I’ve had people email me out of the blue saying how much they love the blog’s design, how easy it is to follow along (and if you are a fan of electronic music blogs, you’d know this is a big problem they have, they are like mazes trying to sift through content sometimes).

So, did I take my own advice?

• I focused on a unique selling proposition to a much larger (and popular) topic
• I chose a premium framework that was easy to work with & will get updated in the future
• I created an easily read & browsed site that aimed to get conversions (for a music site, I focus as much on Facebook as I do on email)
• I focused on a memorable color scheme so I could blend site elements easy
• I used awesome free resources like SubtlePatterns & cheap options like GraphicRiver to spruce up my site’s appearance
• I paid for elements that needed to be done right, and it’s paid me back with a successful site that converts well (REALLY well for a music blog)

#HumbleBrag

Seriously though, I’d like to think that the answer is yes, and that’s why I’m glad to publish this post, as it’s the formula I’ve used to start good looking sites time and time again while still remaining a cheap bastard .

Thanks for reading! Feel free to share the post if you found it useful!