6 min read
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.
Your homepage is the hub of your blog, the main landing page. It serves three key purposes:
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.
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.
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 popular 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.
Once you realize 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 design elements you might want to include on your homepage:
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 creates blog posts 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.
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…
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!
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.
We shared a few examples in this post, but what are some blog homepage designs you love? Link them in the comments!
Download this issue of Tradecraft as a PDF to read and reference at your own pace.