Menu

Blog Design

Blog Design

What Is Blog Design?

Blog Design is the practice of optimizing a blog’s look, feel, branding, readability and functionality in order to maximize visitors, readership and conversions.

Why Is Blog Design Important?

According to the latest numbers from WordPress, 70 million blog posts are published every month.

WordPress – Number of posts published every month

So for your content to get noticed, yes, you need to publish high-quality content.

But that content also needs to LOOK really good.

In fact, according to NN/g, website design has a dramatic impact on a site’s trustworthiness and credibility.

NN Group – Article about trustworthiness

I’ve seen the impact that blog design can have on a blog’s success firsthand. When I first launched my blog, I was a new player in the highly-competitive digital marketing space.

And I knew that design would help me stand out from the big blogs in my space.

So I put a lot of time and effort into my initial blog design.

Backlinko – Early blog design

I also invested heavily in visual content, like infographics.

On-page SEO infographics

And this focus on design helped my blog get noticed in the early days.

Even though my blog has grown exponentially since then, my entire team and I still make design a high priority for the blog.
Not only do we do the extra mile with custom screenshots:

Custom design screenshots

But we work with web designers to create custom-designed guides.

Custom design – Post

In fact, we get comments on a weekly basis from people complimenting us on our design.

Comment on Backlinko about post design

And I can confidently report that design is one of the main reasons that our blog brings in 304,265 monthly visits.

Backlinko – Monthly visits

The one caveat here is that custom designed pages can be expensive. You essentially need to have someone design a webpage from scratch. Then, have the page coded up and integrated into WordPress.

So if you don’t have a huge content marketing budget, focus on cheaper design elements, like blog post banners and visuals.

Now that you’ve seen exactly why blog design matters, it’s time to make sure that your blog is designed the right way.

Best Practices

Focus On High Readability

When most people hear “blog design”, they think about things like colors, illustrations, branding and UX.

And yes, those things are important for a blog’s design.

But they’re not nearly as important as your typography.

After all, a blog is a place people go to read text content. And if that text content is hard to read, the blog won’t succeed.

(No matter how amazing that content happens to be).

Fortunately, making your blog content easy to read isn’t rocket science.

The most important thing is that you use font that’s between 15px-18px.

In fact, a study out of Carnegie Mellon University found that larger font is easier to read and understand.

Carnegie Mellon University – Study on font size

This is something I’ve noticed from my own experience. If I land on a blog with a small font, I usually click away.

But if I wind up on a blog with highly-readable font I’ll usually give the content a chance.

Medium.com is the king of readable font.

They use 21px font. And it’s big, bold and insanely easy to consume.

Medium – Body copy font size

Other than font size, you also want your blog’s design to include plenty of white space around the text.

For example, here’s a blog with text that’s all squished together.

Blog with squished text

That’s super hard to read.

On the other hand, on our blog, we use a ton of white space around the content.

White-space example on Backlinko

Last up, use a blog layout that’s easy to read… and skim.

This means using wide margins, like this:

Wide margins on Backlinko

And creating bold subheaders that break long-form content down into smaller chunks.

Bold subheader on Backlinko

Use a Consistent Design

Like any website design, consistency for your blog’s design is HUGE.

A consistent design makes it easier for people to remember your blog. Which, considering how many blogs are out there, is super important.

For example, at Backlinko, we use “Backlinko Green” on our blog’s homepage, about page and on every post.

Usage of Backlinko green over web page

And at AngelList, they use custom-illustrated blog post banners that all have the same look and feel.

AngelList – Blog header design

The NerdWallet blog uses non-cheesy stock photos at the top of every post.

NerdWallet – Blog header stock photo example

If they used a stock photos for one post and an illustration on another, their blog design would look all over the place. But this consistency helps their blog look super professional.

In fact, if you stripped out the text from each blog, you’d still be able to tell which blog you were on based on design alone.

Blogs without text

That’s the power of consistent design.

Design to Stand Out

Your blog should be easy to read. And use consistent design elements.

But if your blog looks like every other blog in your niche, it’s going to blend in.

Which is why at least some of your blog design should be dedicated to standing out.

That’s not to say that you need to reinvent the wheel. But your blog should do something that makes it look different than competing blogs.

Here are a few examples of things you can tweak to make your blog design look unique:

  • Your blog feed
  • Your banner images
  • Your WordPress theme
  • Font and typography
  • Illustrations
  • Comments section
  • Site navigation
  • Footer

To give you some design inspiration, let’s look at a few examples of blogs that do a great job of standing out.

Intercom has a really unique layout for their blog feed.

Intercom blog layout

Most blog feeds are vertical with a single-column. But Intercom features their latest post at the top of the feed…

Intercom blog – Latest news on top

…and has a list of their older content in a 3×3 grid.

Intercom blog – 3x3 grid layout

Whether this makes Intercom’s content easier find it another story. But there’s no denying that their design really stands out.

The Drift blog is another great example of stand-out blog design.

All of their posts use massive, bold font, emojis and other design elements that look really different from most other B2B blogs.

Drift – Blog post example

And if you’re a personal brand, I highly recommend checking out Marie Forleo’s blog.

Marie Forleo – Blog

Marie’s layout, typography and style is 100% unique to her.

Marie Forleo – About page

Feature Your Best Content

Most blog feeds look something like this:

Normal blog feed

You have their latest post at the top. And their older posts underneath.

Now:

There’s nothing WRONG with this layout.

(In fact, that’s what we use here at Backlinko).

But there is one big downside with using the chronological approach: it’s hard to find your blog’s best stuff.

For example, let’s say you published an amazing guide 2 years ago. Well, someone that lands on your blog for the first time has no way of easily finding that guide. It’s probably buried on page 10 of your feed.

That’s why more and more blogs are using a “library approach” to their blog feed.

With this approach, you highlight your best stuff… not the content you published most recently.

For example, the Lattice blog feed isn’t really a feed at all. It’s a curated list of their most popular content.

Lattice library

In fact, you have to scroll down to the bottom of the page to see their recent posts.

This approach isn’t for everybody. If your blog covers industry news and trends, then you probably do want to use a traditional blog feed.

But if you publish lots of evergreen content, then a library approach might make sense for you.

If you’re married to the blog feed format, you can show off some of your best content in your blog feed sidebar.

Backlinko – Blog sidebar

Add Visuals and Images

Blog design isn’t just about the design of your page.

Your content’s format, layout and even the copy itself can impact design.

And to give your content that little bit of extra pop, I recommend adding visuals and images throughout your post.

For example, take a look at this blog post made up of 100% text.

Blog post made only with text

On the other hand, check out this section from one of our posts.

Image-rich post section

These screenshots and images make our content look more interesting. But we don’t use images just to make our posts look pretty. Our images break up the content, which makes it easier to read.

That’s not to say you should add images just for the sake of adding images. But when you CAN use an image, you SHOULD use an image.

Create Custom Pages for “Big Content”

For lists posts, case studies and other run-of-the-mill posts, your standard blog layout will work just fine.

But what about when you publish something HUGE?

Well, that’s where you might want to consider a custom page design.

For example, most of our posts use the same exact layout.

Backlinko – Normal post layout

But every now and again we publish a piece of “big content”, like an industry study or report.

When we do, we use a custom design to let people know that this content is a big deal.

For example, when we published the results from a survey, we created a custom header just for that post.

Backlinko – Custom post header

Because the rest of the post was exactly the same, this custom design was pretty easy to pull off.

But you can also go crazy and create an entirely new page just for one post.

In fact, that’s what FYI did with their “Why Everyone Loves Remote Work” post.

FYI – Custom post type

This post is a completely custom-designed page with hundreds of custom images, graphs and design elements.

 

Create a Blog “Homepage”

For most people, their blog’s “homepage” is their blog feed.

Normal blog "homepage"

The upside is that this layout makes it really easy to find your content.

But it’s HORRIBLE for conversions.

Instead, I recommend testing out a blog homepage that’s designed solely to build your email list.

Then, put your blog feed on a /blog URL.

For example, our blog’s homepage used to be a normal feed.

Old Backlinko homepage

But a few years ago, we moved the feed to /blog. And launched a homepage that was optimized for list building.

New Backlinko homepage

And because that homepage was designed to collect emails, it converted 8x better than our old blog homepage.

Use a Byline

Ever land on a blog and wonder: “Who the heck wrote this?”.

It’s human nature: we want to know who’s behind the content we’re consuming.

Which is why you want to use a clear byline at the top of every post. Preferably with a headshot of the person that wrote it.

For example, the Buffer Blog features the blog post author right underneath the blog post title.

Buffer blog – Author section

And even though Backlinko is a single-author blog, we still have a byline on every post.

Backlinko – Author section

Add Social Sharing Buttons

If you want more people to share your content on social media, you need to make it SUPER easy for them.

Which is why I recommend incorporating social sharing buttons into your design.

In our case, we use floating buttons that follow you down the page.

 

But you can also just add static buttons to the top or bottom of your post.

Pro Tip: Pick the 2-3 social media sites that your audience spends the most time on. And ONLY feature those networks there.

Not only does a long list of buttons look super ugly…

Long list of social buttons

…but it makes it less likely that they’ll use ANY of your buttons.

(Option overload)

For example, most of our audience shares content on Facebook and Twitter. So we only use Facebook and Twitter buttons.

Social share buttons on blog post

But if your audience is all about Pinterest, then you’d want to use that.

Learn More

Why Your Blog is Set Up Incorrectly for SEO: An excellent video by Ross Hudgens that outlines a few creative ways to set up your blog feed layout.

Designing & Building My Blog (Charli Marie): A case study/tutorial that shows you how to design a blog using WebFlow. I like how Charli breaks down the thought process behind every design decision.

Why I Spent $25,100 On A New Blog Design: In-depth case study of how one popular blogger rebuilt his blog’s minimalist design from scratch.