One of the biggest questions I see (and even get) comes in the form of design questions.
Many people, ready to start their content marketing efforts, get hung up on the design aspects of their site.
I’d like to think that this post will put many of these worries to rest.
Why Blog Design Matters
The 3 biggest things that I think drive people mad about their impending blog’s design are the following:
- They don’t know what they need
- They don’t know how to design it
- 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 famous study on a the “trustworthiness” of websites has shown that peoples opinion’s on the sites trustworthiness had little to do with the content, it had to do with the site’s design.
A site’s design can leave a lasting impression, and readers will leave if the design doesn’t come off as trustworthy or professional.
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 site, I think about how “clean” the site is.
A clean site is an inviting site that is easy to read, easy to navigate, but that still has some personality.
Let’s define some timeless elements of good blog design:
- Liberal white space around content
- Focused, fun, inviting color scheme
- Still has personality
- Excellent typography
Not all that complicated, right? Simple is better.
Structuring and Layout
Let’s touch on good layouts, styling, and features to look out for when designing your blog.
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” 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.
These are the fonts I would recommend (14pt or higher for all):
- Arial
- Georgia
- Verdana
- 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?
For free themes, only use WordPress.org. Other sites are not trustworthy and may contain malware.
What’s the deal with premium themes anyway? You’re paying for the theme design and support + updates.
A free theme is “released into the wild,” oftentimes to received no support and updates over the years. Premium offerings are businesses, and the owners better be on top of WordPress changes and new features, otherwise they’ll find themselves with no bread on the table.
That support and reliability is worth paying for, trust me.
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:
- Feature box
- Top of sidebar (right or left)
- End of each single post
- Your “About me” or “Start Here” page
- 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.
Seriously: use big, easy to read fonts for your content. The real thing I want to talk about here is navigation. 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. 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 key is to be “newish”, mixing things that go well together, or even a generic topic with a new presentation.
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. 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.
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 great 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 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.
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.
All I had to do was change the color in Photoshop 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.
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” 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)
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! 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.
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 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 4
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).
Building A 40,000+ Reader Blog With $160
Over on Sophistefunk, my latest project, 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…
- $59 – StudioPress Theme (Genesis Framework)
- $50 – Logo
- $60 – Opt-In form
- Free – Background texture
- Free – Subscribe button
The only other customization I did was to change the font to 14pt Arial.
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.
You can get the job done on a budget, trust me.