If that’s the case, then why bother about blog design, you ask?

Well, let’s just say that when you have great content, the best way to make sure that you’re reaching the maximum number of readers who’d benefit from your content is by way of great design. That’s the goal, isn’t it? As bloggers, we want to reach as many people as possible, and that’s why content alone is never enough!

But I also want to emphasize here that design along is also, definitely NOT enough.

There must be a balance. Your blog design compliments your high quality content. Basically, the design works to elevate your content further. But without quality content, no amount of amazing visuals is enough to sustain your blog.

Now, since you’re reading this blog, I’m assuming you’re ready to take on the challenge that is the creation of quality content. Since that’s down, let’s now move on to the visuals!

I call it the real fun stuff!

But that’s just me…

What Does it Mean to Have a Good Blog Design (with Examples)

First and foremost, let me clarify what I mean by a good blog design.

A good blog design is NOT a fancy design. not necessarily. It could be. But it doesn’t have to be.

A good design can be something super simple. Because, again, let me remind you that a blog’s core is its content. Without quality content, quality design means nothing! So, since the focus of a blog is always its content, a blog’s visual design can be as fancy or as minimalistic as a blogger wishes it to be, provided, certain conditions are met.

I will talk about these conditions shortly. But before I get to that, let me say it once more just so I know I’ve driven the point home.

Quality of content ALWAYS comes first. Everything else, including all the visual design aspect of your blog, is there to emphasize the content of your blog. The goal is to elevate the content; not have it foreshadowed by your design elements.

Let’s take a look at some great blogs and then analyze them, shall we?

Focus on Content and Lead Generation

Bloggers blog. But sometimes they do more than just blog. Depending on how much money you wish to make, you may diversify your blog’s income with things like selling digital products, courses, or offering services, counseling or consultation.

Your blog’s design should be able to take your visitors along the ride you want them to take. That’s what good design is all about. It is to make sure that whoever is landing on your blog is taking the steps you want them to take.

If you want your visitors to hire you for a service you’re offering, your design should be able to accomplish that. If you want them to purchase products from your blog, your design should facilitate that too.

But this is a subtle maneuver on the designer’s part. Sometimes the blogger’s intention isn’t as readily understood by the visitor. But the visitor goes along with the blogger’s intention none the less.

Now that is some really good design!

I love to use Jon Morrow’s blog — smartblogger.com — as an example of this.

Smart Blogger is the epitome of what you’d call, simplicity. Minimalism at its best! Take a look:

Jon’s primary earning source is his blogging courses. But you wouldn’t see that anywhere in the first page of his blog (or on any other page!) All he does is offers a free webinar that promises 1K+ monthly income from blogging. But after you sign up for the webinar, Jon does his magic and slowly, decisively, casts his net.

But you do not see all that on the first page, do you? It’s a single webinar signup button above the fold (that’s the visible area of a web page right after one lands on the page), followed by a bunch of popular blog posts.

It’s simple but quite effective. You see, Jon does most of his marketing through his emails. So, his goal is to get you signed up for that webinar, which also signs you up for his newsletter. That’s the entry point.

But Jon knows his strength. He is a great writer, so he focuses on showcasing his posts on the first page, and nothing else. Simple, Minimalistic, and mighty effective design if you ask me.

And not at all fancy!

Not fancy, sure, but great design none the less because it accomplishes Jon’s goals without a hitch!

Focus on Content Only

Now here’s what you’d call a “classic” design. Both these blogs (A Cup of Jo by Joanna Goddard and A Beautiful Mess by Elsie and Emma) are mighty successful, but their blogs, at first glance, employ your tried and tested classic look. Content on the left and sidebar on the right, right on the front page no less!

Nothing fancy here, but it works because both of these blogs rely on user engagement. They make money by selling sponsored content, and some affiliate marketing. The more users engage with the actual blog posts, the better for them. And the design does just that!

Focus on Multiple Outlets

Sometimes you have a whole different list of things going on. ProBlogger is such a blog. They have blog posts, podcasts, courses, a job board… you name it!

So, their front page has to somehow highlight all of those things. Not an easy feat, mind you. But seeing how successful ProBlogger is, I’d say that they’ve nailed it!

As you can see, ProBlogger focuses on a ton of stuff on their front page. But somehow they’ve managed to make it so that it doesn’t look cluttered or confusing. People will find what they’re looking for right away. New visitors will also figure out what this blog is about in just a couple of seconds, tops.

It’s been possible because while there are a lot of different things going on here, they are all tied together by one single theme: blogging!

Whether it’s the blog itself, or the podcasts, or the courses, they all have to do with being a better, more productive, and more successful, professional blogger. The design ties them all up nicely. Also, if you compare this page with the other blogs I’ve shown you so far, you’ll notice that their landing page is much shorter than the rest.

Funny isn’t it? How ProBlogger offers more in less? And does it really well too?

Even more curious is how the page promoted everything multiple times. First, you have the navigation with links to the blog, the podcast, the job board, the courses, the products…

Then you have the section with options to read the blog, or listen to the podcast, or subscribe to the email list.

And then you have the next section, which, again, highlights the blog, the podcast, and this time, also the courses.

Next, you have another section that highlights, once again, the courses and the blog posts, but this time, by focusing on the categories.

If you ask me, ProBlogger design is out of the world! It’s not easy to highlight so many different things in such a small space, and do it right at the same time!

But look, the design isn’t lavish. There’s no redundancy whatsoever. It’s simple, but by highlighting the same things multiple times in multiple ways, they’ve accomplished the task at hand.

These are just a couple of examples to show you that your blog design doesn’t have to be “pretty”. It doesn’t hurt, of course, but the most important aspect of a blog’s design is being able to accomplish your goals.

The 13 Points of an Amazing Blog Design

In this section, I’ll walk you through some of the most important aspects of a blog’s design. They all have one thing in common. Can you guess what it is?

User Experience.

Yes, everything that goes into a great blog design has to do with user experience. Let’s break it down, shall we?

1. Ensure Smooth Experience

What do I mean by that?

Smooth experience has to do with how your website performs. You don’t want your readers to wait in front of a screen forever until your site gets done with loading fully, now, do you?

They’ll leave before you can blink ’cause nobody’s got time to sit around waiting for your site to load.

So, what do you need to do?

You need to make sure that your site’s performance is top notch. Make sure it doesn’t take any more than 2 or 3 seconds tops to fully load. Make sure the quality of the images is crystal clear.

I have said it many times, but I’ll go ahead and say it again: Make sure you sign up with a great hosting company that has all the tools to make your site fast and secure. I recommend SiteGround GrowBig or GoGeek plans [affiliate] depending on your blogger level. SiteGround has the best bang for its bucks. It’s not the cheapest solution, but it is definitely one of the best, if not THE BEST! It is officially recommended by WordPress as its preferred hosting company. So, if you’re starting a blog, sign up with them!

And yes, this also means your blog will be on WordPress, and really, if you want to be a successful and productive blogger, WordPress is the way to go!

You can read about why I recommend SiteGround if you’re still not sold on it. Also, you can refer to this blog post if you need help setting up your WordPress site with SiteGround.

And if you need help making sure it’s a fast loading site, read this blog post — I wrote about how to make your blog fast with SiteGround and WP Rocket.

2. Pick the Right Template

The best thing about WordPress is that you can choose from a large pool of pre-made templates, fit for bloggers of any niche!

The trick is to make sure you choose the right template. One that is built by professionals and who know how to properly code that will not unnecessarily bloat up your website. If purchasing a theme, buy from reputable sources. Avoid marketplaces like Etsy where anyone can sell any template without having gone through proper vetting.

If you’re purchasing a pre-made theme (or using a free one), make sure the theme is designed to highlight the important things. For example, do you only blog and wish to mostly market the content itself? Or do you have multiple income streams via your blog and need a template that can highlight all that you need to?

These days, you also have access to visual template builders which makes it easy to create a custom theme for your blog.

Personally, I love Elementor [affiliate]. It’s by far and large the most superior and most complete template builder plugin. (Prefer Elementor over other similar builders such as DIVI, or Beaver Builder or WP Bakery.)

Since it is a plugin, it needs a base theme to work with. I prefer Astra theme (free) with Elementor Pro (premium paid). Elementor Pro (for personal use) is way cheaper than most premium pre-made templates out there, and yet, more powerful than any! You can practically build an unlimited number of templates with Elementor Pro. Create multiple headers and footers, make each of your pages have their own different template, create popups and forms, all with Elementor! No need for a different plugin for each different feature you need to implement on your site!

You can practically build whatever you want with Elementor. For example, what do you think of this blog? Yes, The Side Blogger? If your comments and emails are anything to go by, I think it’s safe to assume that a lot of you like what my blog looks like. I built it with Astra and Elementor Pro (on WordPress hosted on SiteGround).

And now, I have something for you. In case you’re curious to check out Elementor, I made a few templates for you that you can use to play around with and learn how it works!

Subscribe to The Side Blogger email list by clicking here or by filling out the form below, and I’ll send you the templates right away! Do note that the templates I have built are for you to play around with so you can familiarize yourself with Elementor. You can, of course, use these templates as is. My motivation for building these templates for you is to give you something that you can customize and build upon.

Also, note that the templates use features that are available with Elementor Pro only! So, if you’re going to use these templates, you’ll need to purchase the Elementor Pro version [affiliate].

Here’s what this starter template looks like that I made with Elementor Pro using the free Astra theme as a base.

Check out the theme in action here:

3. Focus on What You Want Your Readers to Do

Take some time to think about your strengths and your strategies.

Remember Smart Blogger? Even though Jon’s main income sources are his blogging courses, he doesn’t mention that anywhere on his front page. Instead, he focuses on two things: getting the content in front of his readers (so that readers know they can trust Jon, anyone who’s read Jon’s posts will know this guy is legit, if anyone knows anything about blogging, it’s him!), and getting email list subscriptions (through his webinar registration where he promises at least $1,ooo in passive income).

Jon understands email marketing more than anyone, so he focuses on that — lead generation, because he knows that once he gets people to sign up, he can make them convert!

ProBlogger, on the other hand, takes a very different approach. While Smart Blogger’s approach is subtle, ProBlogger’s approach is bold. Darren Rowse has no qualm about putting it all out there. His blogs, his podcast, his courses… everything is on the front page!

So, take some time and think about what you want from your blog, and then design your blog accordingly. Use visual cues to lead your visitors where you want them to be. That’s really what good design is about.

4. Use the Header Wisely

Your header is where most people find stuff they’re looking for. A typical header has two or three main components: the blog’s title (logo), maybe a tagline, and of course, site navigation menu. When visitors are looking for something, they check the navigation first by default. Lay out all the important stuff here. Check out some of your competitor’s sites and see how they’ve laid out this section for ideas.

Typically, you’d have links to the most common sections of your site in the top navigation: a link to the about and contact pages, a link to your main blog page (unless the main blog page is your homepage), and additional links to highlight the important parts. For example, this could be a resource page that you think your readers will be interested in. In addition, you may also link a sign-up page to your email list. If you sell products in your shop, you should definitely link your shop here. If you’re big on social media and want people to find out where else they may find you, you could also consider adding your social media links in this section.

Do try not to make it too cluttered. Design in a way where it;’s easy for your readers to find what they are looking for without getting confused by all the different links.

5. Use the Footer Area

Often times, people do not use their footer area properly. Granted, this is the last section on your site, but because it is the last section, you want to grab people’s attention before they scroll back up or leave your site entirely.

You could use this area to add your social media links once again, highlight some of the important links, or even add an email signup form, the sky is the limit!

However, just like with the header, you do not want this section to get too cluttered. Give people enough information that is digestible without getting a stomachache.

6. Pick the Right Fonts

Choosing the right font is important because guess what a blog is? They’re articles that people read! Yes, you must make it so that reading the content is what keeps your visitors on your site longer.

Let’s see… TSB posts are gigantic, but you already knew that. Now why would I spend hours writing this mammoth posts if nobody read them?

My goal is simple: I write everything I know, and I write for people who are willing to learn by reading my posts. So, it is my duty to make sure that I make reading my blog posts as easy as possible!

That’s where choosing the right font comes into play. Trust me on this, if you have a bad font or a tiny font, your readers will run!

Make reading enjoyable for your readers by choosing a font that is easy to read. Also, avoid using a tiny font size. Choose a font size that is easy to read. Avoid generic system fonts. Use a good font from Typekit or Google Fonts (Google Fonts are free to use!). Some people spend money on buying a quality font and trust me, it’s well worth it! But if you’re a new blogger, at least using a quality google Font is better than using something like Times New Roman or Ariel.

A general rule of thumb is to pick two different fonts with high contrast (a serif and a sans-serif font, for example), one for headlines, and the other for the body text. Pay extra attention to the body text because that’s what most of your blog is. And that’s what people will read.

Also, do not choose a black font on a white background. It’s hard to read! Choose something black-ish instead. A really dark font color that’s very close to black, but not entirely black. true black is difficult to read and strains your eyes.

Read Butterick’s summary of the key rules of typography. Seriously, read it! And then follow the rules like your life depended on it!

You can also use this tool here to to see which Google Fonts work well together.

7. Pick the Right Colors

Colors are important because they set the overall tone of your blog. Did you know that colors have meanings? If your blog niche is vegan food, you probably wouldn’t want your blog’s colors to be deep purple or blue, or even red! Perhaps something green or yellow would be better suited for a vegan blog.

Similarly, if you blog about motherhood, a black and white theme probably won’t be it either!

You see, which color you pick says a lot about your blog’s overall tone. So, choose wisely!

Read this blog post I wrote on visual branding for a better understanding of fonts and colors.

8. Go Easy on the Logo

How important is a logo? Well, I guess it depends on who you ask.

Let’s just say that less is more when it comes to logos. Do not go crazy with script fonts and illustrations. Try to keep things simple, and definitely make it legible. That’s the important part.

If in doubt, go with a simple text-based logo.

I also highly recommend creating a version of the logo that you can use as a favicon. A favicon is that small icon that you see next to a browser tab. I think it gives websites (and blogs) a professional look. But yeah, otherwise, go with something simple, legible, and something that reflects your brand.

If you’re not a designer and are not ready to hire a designer to do the job for you, use plain text to write up the logo. As a beginner, that’s plenty sufficient.

9. A Separate Homepage or Not?

As I’ve shown you earlier, some blogs use a typical blog layout as their homepage. Especially if the content is all they’re selling (A Cup of Jo, A Beautiful Mess, for example).

If you have more things to show off, then you should definitely go with a custom homepage that highlights what you want your readers to know about you and your blog right off the bat.

For example, here on The Side Blogger, I have a homepage where I highlight multiple things: the blog, the shop, and the affiliate products I recommend. The blog is to provide value to my readers which will, hopefully, gain my readers’ trust. And when they trust me, I hope they will buy from me, whether they’re affiliate products or templates from my shop. So, I’ve designed a homepage that highlights all these three sections multiple times.

If you’re just starting out and you do not have a whole lot of different agendas, you could still have a separate homepage where you highlight some of the blog posts you want people to read right away. Just like Jon did on Smart Blogger.

Personally, I prefer having a separate homepage, but that’s just me. You can, obviously, be successful without one! A Cup of Jo is a perfect example of that!

10. Use Email Optin in Multiple Locations

Making sure to get email list signups should be one of your priorities when you’re designing your blog. Do not have just one or two places where people can sign up. Have at least a few!

For example, your top navigation is a good place to link to your opt-in signup form. Upon clicking this link, people should go to a page with an embedded opt-in form that also lists the benefits of signing up for your newsletter, or it should open up a popup where people can sign up.

You should also use the footer area to add a signup form. if you have a sidebar, you can use a signup form there as well.

You should definitely add a signup form to ALL of your blog posts. Even if you do not have a post specific content upgrade, you should still use a generic signup form on all your blog posts.

Some people swear by adding a signup form above the fold. Personally, I do not have one as I wanted to highlight my shop and resource pages instead. But that’s just me. I do suggest that if you sell (or plan to sell) courses, having a signup area above the fold will be to your benefit because course sales depend heavily on how many email subscribers you have. So the sooner you can catch those email addresses, the better for your business.

11. Sidebar or No Sidebar

My simple formula is this: no sidebar on single pages (about, contact, resources, shop, etc.) and sidebar on all blog pages (the main blog page as well as single post pages). This is purely a personal choice.

Do keep in mind that in the world of design, there are no right or wrong. There’s only what works and what doesn’t.

This, of course, has led to some general “good practices” which have proven to work for most bloggers (or whatever your business may be). For blogs, somehow everyone has accepted that a sidebar is a necessary element. Does that mean blogs without a sidebar are doomed? Not at all.

But given that most people are used to seeing a sidebar on the blog, it’s not a bad idea to add one, unless you happen to be completely against it. A sense of familiarity can be useful. On the contrary, a sense of strangeness can often put people off. So, should you use a sidebar? I say yes, go ahead and have a sidebar!

12. Make Sharing Easy

All of your blog posts should be idiot-proof when it comes to sharing the content. Make sure your readers do not have to go looking for ways to share your content. Ad share buttons in multiple places. Remember, a lot of your blog traffic comes from other people sharing your content with their audience.

I have share buttons, at the top of a post, at the bottom of a post, as well as on the sides as floating buttons (or at the bottom, depending on device width and resolution).

Is it too much? I say not! You want people to share your content, so why not make it easy for them to do just that? I like a plugin called Sassy Social Share. It’s free and has a ton of customization options. You can of course use whichever plugin you prefer, but the most important thing is to have it in obvious places so that no one misses them.

13. Add that Privacy Policy Page (More of a necessity than a good design practice, but I wanted to add it anyway)

Make sure to add a privacy policy page to be GDPR (General Data protection regulation) compliant. A lot goes into this page, so here’s something I found the other day that should help you craft yours. This has a template of sorts for creating your own privacy policy page. Do check it out!

Well, there you have it! This should give you an entry point to designing your blog. You’ll refine things as your blog grows, but hopefully, this gives you some idea for starting your very first blog with a design that works to your benefit.

Again, if you want the Elementor templates I made for you, click here, or sign up for the email list below!