You know the old saying, “Don’t judge a book by its cover?” You and I both know that no one really follows that. We judge books by their covers (both in a literal and figurative sense) all the time.
The same goes for your blog. People judge!
Not only do you want to improve your blog’s design so that it looks better, but so that it functions better. The better your design, the easier it is for people to access the information they want. And the easier that is, the more often they’ll come back.
Below are 26 blog design tips that pretty much anyone can implement; you don’t need to be a CSS junkie or artist.
Ok, show me the tips!
Disclaimer: I’m not a designer or design expert, so take these for what they’re worth: my personal opinions and observations.
Also, this post was originally about 1000 words longer, but then I realized that was a bit much for this particular post. So I’ve tried to make the descriptions for each tip as succinct as possible.
1. Tame the ads
Don’t plaster your blog with ads. Yes, this is a design infringement. Look how much more unpleasant Blogging Bookshelf would be with ads:
Not good, eh? And people are mad about Popup Domination :D
I often talk about how much ads suck, so I won’t say much more than blogs with lots of ads are ugly.
2. Control the fonts
Don’t use tons of different fonts. I’d say use three at the very most (one for the logo, one for your headlines, one for your text). I just use one (arial) for everything on my blog, and 2 would be fine for the vast majority of things.
Actually… that’s a lie. I do use myriad pro in some of my infographics.
3. Choose the right fonts
Any “normal” font (arial, verdana, georgia, etc.) will be fine for your body text, but you really need to be careful with your logo text. I often see that people get too excited with all the neat fonts on your computer and they end up with a logo that just doesn’t suit their blog.
Your fonts need to be appropriate for your niche. For example, which of the following would you trust more with your money?
Hopefully you chose the bottom one. If not… you’re probably 8 years old.
Moreover, fonts that convey a certain mood or tone should only be used in the logo (again, assuming the tone is appropriate). If a body text font elicits and kind of response, from the reader, it’s too distracting.
4. Make navigation easy
Is it easy to find the various parts of your blog? Is your navigation menu easy enough to spot and use? Do you have a search box?
Oh, and you get extra points for breadcrumb navigation.
5. Repeat, repeat, repeat
Repetition is a key ingredient to good design. Repeat the same colors and fonts throughout your blog.
6. Check your alignment
The various elements of your blog should be aligned to the best of your ability.
Here’s an example: Adjust the space around your logo to make it align with your body text. Like this:
Try to make everything align as much as possible. I do admit, however, that trying to make EVERYTHING line up is getting out of the non-techie arena.
7. Don’t have a crowded navigation menu
Do you really need 20 different pages and categories up in there? Nope! When you’ve got too much of anything, it’s hard for any one thing to stand out.
I admit that I’m on the guilty end of this one and will be working on it shortly… Here’s what mine SHOULD look like:
Note the second menu in the top right corner.
What do you think? Better? Easier to find what you need?
EDIT: I just fixed it :)
8. Pick the right colors
Some colors just lend themselves better to certain niches.
Going back to the Bank of Trust example, I wouldn’t want to go to their site and see a pink background.
9. Only use a few colors
Don’t get too crazy with the colors. Some sites can beautifully pull off a lot of colors (and if you’re a designer, then go for it!), but for the majority of us, a few colors will do just fine.
10. Put borders around images
I’ve done this for most of the images in this post, and also around the 125×125 banners on the Tools and Plugins I Use page. I personally really like the way this looks.
11. Don’t be afraid of white space
You don’t need to fill up every little inch of that sidebar with worthless widgets. Clutter is bad!
12. Personalize and customize!
In my opinion, a personal design is a good design. Try to incorporate some of your own photos or graphics. Throw a photo of yourself somewhere easily visible. Create your own unique logo rather than just having plain text. Or pull a John from Hypertransitory.com and create the greatest about page ever! (Ok, he IS an artist, so he’s an extreme example… .)
Even if you’re not a technically-savvy blogger, you can find step-by-step tutorials online on how to customize a lot of WordPress themes.
13. Simplicity is beautiful
Jason from 67Dollars has a couple great looking niche sites, my favorite being the beautifully simple Art of Becoming. There’s not much on the blog yet, but I really like the design. (Oh, and he used Thesis for that blog!)
I’d take a simple design over a fancy one almost any day of the week.
14. Only have relevant images
Do your images add value to the post? Are they more distracting than helpful?
15. Crop your photos so there’s less empty space and more detail
You don’t need to do this for every photo, but it can help, depending on what your focus is.
Check out the following photo of me rock climbing, for example:
It’s not a bad picture, and the non-cropped version is nice because you can see the whole climb, but you miss out on the details.
Compare that with this one:
You can see what’s going on in greater detail, right? It draws your eye in more.
16. Be generous with your headings
Use lots of <h2> sized headings in your posts (like I’m doing in this post). Bold headings are great, too. This makes your posts look more structured, and also makes them easier and faster to read.
17. Have short paragraphs
Big, black blocks of text are intimidating. Break them up for your readers’ viewing pleasure.
18. Use images
Images liven up the monotony of your text and make it easier and more interesting to read.
19. Make use of bulleted or numbered lists
Again, these draw the reader’s eye down the page and make them want to keep reading. They’re also easily scanable.
20. Make your font big enough to read
Self explanatory, I think. It might not be to everyone’s liking, but Rick LaPoint’s text is huge, and I’ve seen at least a couple people compliment him on it in the comments.
21. Try to avoided animations
I personally am not a fan of going to a blog and seeing a ton of ads or social media icons winking at me. They’re alright in moderation, but more than one or two is just too many!
22. Make your links visible
Making your readers hunt around for links is bad form.
Which of the two links in the text below is easier to recognize?
If you said the one on the right… You win!
23. Check out your blog in different browsers and at different screen resolutions
You want to make sure your blog is visible to everyone who comes to it. Check out BrowserShots.org to test your blog in different browsers.
24. Be consistent
For example… Don’t use <h2> headings in one post and bold, capitalized headings in another.
And yes, I am guilty of this.
25. Have other people look at your blog and tell you what they think
Your loved ones will probably lie to you, so find some strangers.
26. Think about hierarchy
What’s most important should be “above the fold.” For example, in your sidebar you probably want to have your newsletter subscription above your post categories.
[Side note: Do you ever look at categories on a blog? I never do. I’m considering removing the category widget from the sidebar and getting a better search. What do you think? And while I’m asking completely unrelated questions, do you like it when outbound links open in a new tab? I personally don’t care, and I’ve seen arguments go both ways.]
Well, that’s about all I could come up with, but I’m sure there are plenty more!
Now it’s your turn!
- What other design tips or mistakes can you think of?
- Do you make some of these mistakes on your blog?
- How can I improve the design of Blogging Bookshelf?
I’m looking forward to seeing your answers!