Beginners Guide to Designing a Blog

 
 

Beginners Guide to Designing a Blog

If you are just starting out or looking to freshen up your current blog you may feel overwhelmed with where to even begin.

You know that you need a blog that:
 

  1. Is easy to navigate

  2. Converts

  3. Has a clean design and isn’t overcrowded with information

  4. You are proud to call it your online home

The good news is that with some guidance, a little planning, and a lot of inspiration you can turn your blog into a space where people love hanging out.

Let’s dig in step-by-step, shall we?

My biggest tip when designing your blog is to take it one section at a time.

For example, avoid hopping around your site designing random things when you feel like it. Jumping all over the place leads to frustration, being overwhelmed, and before you know it you’ve given up.

Below I’ll take you through each section in your blog and give you design tips, advice, and what to avoid.

 

Navigation Design

Let’s start at the very top of your blog. You might think navigation design isn’t that big of a deal and you might not spend a whole lot of time worrying about it.

However, when it comes down to it your navigation is one of the most important things on your blog. It directs people to different areas on your blog. If your navigation is hard to find, doesn’t stand out, and is cluttered you are missing out on people diving deep into your site.

 

Advice

When putting together your navigation you want to keep it minimal while including your most important links.

Here is an example of my navigation



My blog has a Start Here page so I avoid adding blog categories in my navigation. I could have my categories in a drop down menu under the blog link, however, I prefer my categories in my sidebar. This is personal preference.

I would avoid having eight or more links in your navigation, you don’t want to overwhelm your readers which too many choices.

If you offer services or if you have a product you want people to check out I would suggest making it more prominent so it catches your reader’s eyes. I want people to hire me for their design needs so I have it sitting on top of a bright yellow button.  

Design Tips

When it comes to designing your navigation menu you want to make sure it’s readable and noticeable.

A good and safe option is to have it sit on a white background with black text or a dark colour or on a black background with white text.

And finally, make sure your fonts are readable. Avoid using text that is too small or too large. You should also avoid using script fonts as they are very hard to read on-screen. A sans-serif is your best option.

 

Header Design

A header image is a great way to get people to sign up for your service or opt-in to your freebie.

Most of my subscribers are brought in from my header opt-in.

Check out my design below.

 

Advice

You are going to want to promote your best freebie or service in your header. For example, if you are currently trying to get people to sign up for your opt-in that will eventually lead to promoting your upcoming course to them then you most definitely want to promote that free opt-in in your header.

Personally, I try and keep my header promotion on every page on my blog. People generally need to see something several times before they decide to take action.

Your free opt-in is the next step after your reader finishes your blog post. For example, if you have a blog post on, how to bake the best chocolate chip cookies ever. Your free opt-in might be a grocery store checklist for the ingredients needed to bake the cookies.

A free opt-in can be as simple as a checklist, a workbook, a video series, a PDF download of your blog post, etc.

My current opt-in is a list of 60+ design resources that I love. This does extremely well and people love learning about new tools.

Design Tips

In this case, you want people to notice your opt-in so using bright colours and being flashy is okay just don’t be obnoxious.

Bright colours like yellow draw your readers in.

For my header, I didn’t go for a flashy bright design but I did include a big yellow button and a preview of the freebie. Having a preview of your item is proven to get higher convert rates.

The one thing to remember is you have only a few seconds to catch your reader's eye before they move on so keep your headline short and catchy.

Sidebar Design
If you decide you want a sidebar on your website there are a few things to keep in mind.

Advice

People who decide against sidebars usually have the same reason, they want their reader’s to focus on only their blog content and not get sidetracked with sidebar clutter.

Although I totally agree with their reasoning, personally I’m a sidebar gal. I love having the extra space to promote and organize items.

If you are going to have a sidebar it’s important not to clutter it

These are a few things I suggest having in your sidebar:

  1. Your photo

  2. A short bio

  3. Categories

  4. Social media icons

  5. Search bar

  6. And a content upgrade / service you want to promote

That’s it.

Things you should avoid in your sidebar are:

  1. Flashy gifs

  2. Ads

  3. Long lists

  4. Too much text

  5. Grab my blog button

  6. Too many widgets

I even suggest leaving out your Instagram photos, a good place to put them is in your footer.

Design Tips

First things first, make sure your photo is bright and professional looking.

Having a professional looking photo doesn’t mean you need to spend hundreds on a portrait session. Take your smartphone, stand in some natural light and snap that photo. Dark, grainy photos are unattractive and make your blog look unprofessional.

Check out my sidebar design below. I took my photo with my iPhone, standing against a white door in the sunshine.

Next up, keep your long lists in a drop down menu. For example, I have archives in my sidebar and I keep it nice and hidden in a drop down menu.

And finally, avoid using too many flashy colours. Too much flash is very distracting and it will distract your reader from your content and make it very hard for them to focus.

 

Footer Design

Your footer is a great place to add things to grab your reader’s attention one last time.

It’s a great place to house things such as:

  1. Your FAQ page link

  2. Your privacy policy page link

  3. Your instagram widget

  4. Contact Form

  5. And social media icons

Advice

You want to avoid link overload, much like your main navigation you want to only include important links. Instead of putting your privacy policy, FAQ, and copyright info in your main navigation your footer is the perfect alternative.

Here is an example of my footer

As you can see I’ve added an opt-in freebie in my pre-footer section. This converts really well and it brings in a lot of new subscribers.

I would suggest using a completely different opt-in freebie than the one in your header. If people aren’t interested in your header opt-in they might be interested in your footer opt-in. Always give as much variety as possible.

 

Design Tips

It’s important to remember your footer isn’t your attic. Don’t just throw in anything and everything because you couldn’t find a place for it on your site.

Keep the design simple and clean. You want your footer to breath and not feel cramped.

When designing my footer I like to keep the items in a grid format. Whether it’s a horizontal or vertical grid it lays out each item nicely.

If you are looking for footer inspiration I suggest checking out Dribbble. https://dribbble.com/search?q=footer+design

I hope this post has helped you! Just remember less is more, keep things clean, organized, and breathable.

Happy designing!