7 Tips for a beautiful sidebar

One of the key reasons visitors don't pay attention to sidebars is poor design. If your sidebar is cluttered, boring or dull then there's a fat chance you're going to miss out on page views, followers and even sales! I've designed a lot of blogs since I started my design studio, so here are my top 7 tips for a beautiful sidebar!

01. Width

The width of your sidebar plays a large part in it looking cluttered or overwhelming. Your sidebar shouldn't look like it's fighting your blog posts for center-stage! Your sidebar should compliment your posts and sit nicely at the side. I often think that a sidebar width of around 200 pixels is OK. If you have two sidebars right next to each other (like this blog) then make sure both sidebars are easy on the eye.

02. Colors

If your blog posts are super colorful then you should keep your sidebar colours neutral so they don't clash. If you do want pops of colour in your design, then stick to 3-4 complimentary colors (or even less!!) and use these colors in your blog post images. I like to visit Design Seeds for colour inspiration, and I also have a Pinterest board filled with pretty colours to choose from. As I've mentioned before, if you see colours on the web that you love and want to use, simply download a color picker add-on for your browser, like this one. Then, if you see colors on the web that you love, use the color picker to immediately get the hex code for that color.

03. Headers

It's important to have headers in your sidebar so that readers can easily find what they want. It can get pretty frustrating when you're looking for something and can't find it because it's hidden in a messy sidebar. I like to stick to about 5 header sections so my clients sidebars aren't overbearing.

04. Typography

You shouldn't really use more than 2 fonts in your sidebar: one for your headers, one for the text. Any more and it becomes confusing. I'm going to post more soon on ways to find fonts that compliment each other, but for now you can check out my typography board on Pinterest. There are plenty of ways to make your headers stand out in your sidebar: use a different color, make them bigger, center them... just experiment!

05. Ads

There are a few messy mistakes I see bloggers make with ads: sometimes the ads aren't all the same width, there are too many animated ads, and sometimes there are too many ads in general! Your sponsors don't benefit from being among dozens of ads because no one will really notice them (unless their ad is neon green or something!)

06. Order

When deciding on the order of your sidebar elements, ask yourself 'what do I want my readers to do first when they visit?' If you want them to opt in for your newsletter then that should be at the very top of your sidebar (and preferably in a few other places, like your footer and header.)

07. Length

A never-ending sidebar is always a turnoff! Remove the things you don't need in there, like your list of favorite blogs for example. It's always great to support other bloggers but why would you want to divert readers away from your blog to ones they might prefer?

Tell me in a comment- what improvement could you make to your sidebar to get visitors to take an action?

Nesha Woolery

I build beautiful brands & websites for passionate entrepreneurs!