Experience this issue your way.

Download this issue of Tradecraft as a PDF to read and reference at your own pace.

Download PDF

Issue #3 • March 2017

How to Design Your Blog Home Page for Focus and Clarity

Build Your Audience

The homepage of your blog is like the cover of a book. Though we all know not to judge a book by its cover, we'll likely pick the one with an intriguing title and beautiful imagery over something that looks dated and bombards you with too much text.

The same is true of your blog homepage design: it could be the make-or-break reason why someone decides to dig deeper into your content or to leave the site and search elsewhere.

If that sounds daunting to you, don't panic. Creating a good blog homepage that makes readers stick around is all about making the right choices in what content you choose to display, and I’ve got some advice to help you do just that.

The purpose of a blog homepage 

Your homepage is the hub of your blog. It serves three key purposes as laid out by the Inbound Marketing blog:

  • To attract and captivate visitors
  • To educate visitors on your brand
  • To encourage readers to visit other pages on your website

So when you're thinking about what to include on your homepage, make sure it fits with those three goals. Visitors will use your homepage as a jumping off point to dive into your content, projects, and products so making it easy to navigate is a must. They should also be able to get a quick overview of your brand and what you're all about so they know they're in the right place.

Creating a blog homepage layout that hits those goals takes planning and thoughtful design. It’s well worth spending the time on getting it right, so here’s some advice for what to consider and how to go about designing it.

How to structure your blog homepage design 

As the late Steve Jobs once said, “Design isn't just how it looks. It's how it works.”

So before you start thinking about your logo and what color you should make your buttons, let's think about how you're going to structure your homepage and what information you're going to provide on it for your visitors.

These days many bloggers are moving away from the classically simple stream-of-posts-with-a-sidebar and are instead creating custom dynamic homepages highlighting certain posts or categories, integrating their social media feeds, and making it easy to buy their products.

Static blog homepage vs featuring recent posts

A homepage that simply features a reverse chronological (aka newest first) stream of posts is one designed with a regular visitor in mind. They're the ones who will be coming back to your blog regularly looking for the latest content. That's great and you definitely want your latest articles to be easy to find, but what about newer readers?

Rather than only serving up your most recent content, it might be a good idea to feature a few posts you feel are “recommended reading” for new visitors to your blog to get them up to speed, or perhaps give a selection of categories to choose from so they can easily find the most relevant content for them.

Check out Sarah Morgan's blog homepage design on xosarah.com as an example. She has clear navigation that makes it easy to click on ‘blog' and get her latest posts if you're a regular reader, but the homepage features a short explanation of what her site is all about, enticing links to some of her courses, and then links to a few new posts. Her blog homepage provides great choices for jumping into her content if you're new to her site. You're bound to find something to learn from, no matter what level you're at.

An example that focuses more on the content is fashion/beauty blogger Lily Pebbles. Her site features a grid of her latest posts mixed in with her latest YouTube videos, Instagram posts, and links to things like her curated store or particular categories. This mix of content gives you a good idea of what she's all about and lets you easily access her latest posts while being a bit more interesting than a simple chronological stream.

static homepage vs featured article homepage

Elements to include on your blog homepage design

Once you realise there can be more to a blog homepage than simply your latest posts, it opens up a lot of different options for elements that could go on it. What you choose will depend on your industry and business, but here's some ideas of elements you might want to include on your homepage:

  • Recent posts
  • Categories
  • Featured posts
  • Information about you
  • Social media links
  • Navigation
  • Digital products
  • Email list sign up
  • Instagram feed
  • Latest YouTube videos
  • Twitter feed
  • Resources

That's not to say you should include every element on that list. Think of your homepage as a taster of the different kinds of content you offer, but don't try to cram too much in. You don't want to overwhelm your reader with too much information or too many choices, so only include what is most relevant.

The Content Strategist said it well:

Hold back from integrating every widget and feature available into the homepage. Every element of the page should have a purpose for the content to thrive and stand out.

Abby Lawson handles this well on Just a Girl and Her Blog. She has clear categories up at the top that immediately give you an idea of the content she blogs about and a call-to-action to sign up to her email list. Then underneath you see her latest posts with a sidebar that features a short bio and links to her social media and digital products.

what to include on your blog homepage

That's a lot of information! But the way it's organised makes it very easy to navigate and lets the content shine, both of which are essential to a good blog design.

Speaking of which…

How to create focus with content on your blog homepage

When it comes to the visual design of your blog, don't overdo it. Nothing makes a homepage feel more cluttered than filling it with lots of decorative elements or a complicated background. Instead, let your content be the thing that personalizes your site. Your brand will come across in the way you write about your topic and the imagery you use.

A key to letting your content stand out amongst all the other elements you've chosen to include on your homepage is establishing hierarchy. This means making the most important information the focus of the page.

Be strict on yourself with this! Sure you want your readers to look at your courses, read your posts, follow you on social media, and sign up to your email list, but if you try to encourage them to do all of those things at once you'll overwhelm them. It won't be clear where they should start.

To combat this, choose one action to focus on and make that your main call-to-action on the page. The rest of your content can still be there of course, but they shouldn't overshadow your main action. When you try to make everything stand out, nothing stands out!

Are you ready to build your homepage?

Take it one step at a time, starting with deciding what content to include and then designing the page so that your main call to action is the most obvious. To give you some inspiration, here are three different blog homepage wireframe ideas that each have a different focus.

 

free blog homepage template

free blog homepage template

free blog homepage template

We shared a few examples in this post, but what are some blog homepage designs you love? Link them in the comments!

Charli Prangley

Charli is a designer from New Zealand currently living and loving life in London. She’s passionate about side projects and when she’s not designing at ConvertKit she's running an online store, and creating content for her design-centric YouTube channel and podcast with the aim of helping out young creatives.

Experience this issue your way

Download this issue of Tradecraft as a PDF to read and reference at your own pace.

  • Oh my goodness, this is such a great resource, Charli! Thank you so much! I will be referencing to this next week when I’ll be tweaking my home page! THANK YOU! This is GOLD! <3

  • Thank you so much for sharing this, it’s been super helpful. I’ve been trying to find ways to improve my homepage, and this has given me some good ideas. Thanks again!

See ConvertKit in action.

Join one of our experts on a live tour and get the answers you need.

Request a Demo