post

<p>The homepage of your blog is like the cover of a book.</p>
<p>Though we all know not to judge a book by its cover, we&#8217;ll likely pick the one with an intriguing title and beautiful imagery over something that looks dated and bombards you with too much text.</p>
<p>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.</p>
<p>If that sounds daunting to you, don&#8217;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.</p>
<h2 id="chapter-1">The purpose of a blog homepage</h2>
<p>Your homepage is the hub of your blog, the main <a href="https://convertkit.com/features/landing-pages">landing page</a>. It serves three key purposes:</p>
<ul>
<li>Attract and captivate visitors</li>
<li>Educate visitors on your brand</li>
<li>Encourage readers to visit other pages on your website</li>
</ul>
<p>So when you&#8217;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&#8217;re all about so they know they&#8217;re in the right place.</p>
<p>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.</p>
<h2 id="chapter-2">How to structure your blog homepage design</h2>
<p>As the late Steve Jobs once said, &#8220;<i>Design isn&#8217;t just how it looks. It&#8217;s how it works</i>.&#8221;</p>
<p>So before you start thinking about your logo and what color you should make your buttons, let&#8217;s think about how you&#8217;re going to structure your homepage and what information you&#8217;re going to provide on it for your visitors.</p>
<p>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.</p>
<h2 id="chapter-3">Static blog homepage vs featuring recent posts</h2>
<p>A homepage that simply features a reverse chronological (aka newest first) stream of posts is one designed with a regular visitor in mind. They&#8217;re the ones who will be coming back to your blog regularly looking for the latest content. That&#8217;s great and you definitely want your latest articles to be easy to find, but what about newer readers?</p>
<p>Rather than only serving up your most recent content, it might be a good idea to feature a few popular posts you feel are &#8220;recommended reading&#8221; 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.</p>
<p>Check out Sarah Morgan&#8217;s blog homepage design on<a href="http://xosarah.com" target="_blank" rel="noopener noreferrer"> xosarah.com</a> as an example. She has clear navigation that makes it easy to click on &#8216;blog&#8217; and get her latest posts if you&#8217;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&#8217;re new to her site. You&#8217;re bound to find something to learn from, no matter what level you&#8217;re at.</p>
<p>An example that focuses more on the content is fashion/beauty blogger<a href="http://www.lilypebbles.co.uk" target="_blank" rel="noopener noreferrer"> Lily Pebbles</a>. 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&#8217;s all about and lets you easily access her latest posts while being a bit more interesting than a simple chronological stream.</p>
<div id="attachment_4970" class="wp-caption aligncenter"><a href="https://media.convertkit.com/2017/03/blog-examples-scaled.jpg?fm=pjpg"><img aria-describedby="caption-attachment-4970" decoding="async" loading="" class="wp-image-4970 size-full lazy" data-src="https://media.convertkit.com/2017/03/blog-examples-scaled.jpg?fm=pjpg" alt="static homepage vs featured article homepage" width="2250" height="3520" data-srcset="https://media.convertkit.com/2017/03/blog-examples-scaled.jpg?fit=scale&amp;fm=pjpg&amp;h=1202&amp;w=768 768w, https://media.convertkit.com/2017/03/blog-examples-scaled.jpg?fit=scale&amp;fm=pjpg&amp;h=1536&amp;w=982 982w, https://media.convertkit.com/2017/03/blog-examples-scaled.jpg?fit=scale&amp;fm=pjpg&amp;h=2048&amp;w=1309 1309w, https://media.convertkit.com/2017/03/blog-examples-scaled.jpg?fit=scale&amp;fm=pjpg&amp;h=3004&amp;w=1920 1920w, https://media.convertkit.com/2017/03/blog-examples-scaled.jpg?fit=scale&amp;fm=pjpg&amp;h=923&amp;w=590 590w, https://media.convertkit.com/2017/03/blog-examples-scaled.jpg?fit=scale&amp;fm=pjpg&amp;h=240&amp;w=153 153w, https://media.convertkit.com/2017/03/blog-examples-scaled.jpg?fm=pjpg 1636w" sizes="(max-width: 2250px) 100vw, 2250px" /></a><p id="caption-attachment-4970" class="wp-caption-text">static homepage vs featured article homepage</p></div>
<h2 id="chapter-4">Elements to include on your blog homepage design</h2>
<p>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&#8217;s some ideas of design elements you might want to include on your homepage:</p>
<ul>
<li>Recent posts</li>
<li>Categories</li>
<li>Popular posts</li>
<li>Information about you</li>
<li>Social media links</li>
<li>Navigation</li>
<li>Digital products</li>
<li>Email list sign up</li>
<li>Instagram feed</li>
<li>Latest YouTube videos</li>
<li>Twitter feed</li>
<li>Resources</li>
</ul>
<p>That&#8217;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&#8217;t try to cram too much in. You don&#8217;t want to overwhelm your reader with too much information or too many choices, so only include what is most relevant.</p>
<p><a href="https://contently.com/strategist/2012/04/10/homepage-design" target="_blank" rel="noopener noreferrer">The Content Strategist</a> said it well:</p>
<blockquote><p>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.</p></blockquote>
<p>Abby Lawson handles this well on <a href="http://justagirlandherblog.com" target="_blank" rel="noopener noreferrer">Just a Girl and Her Blog</a>. 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.</p>
<p><img decoding="async" loading="" class="wp-image-5040 size-full lazy" data-src="https://media.convertkit.com/2017/03/blog-example-just-a-girl-scaled.jpg?fm=pjpg" alt="what to include on your blog homepage design" width="2250" height="2741" data-srcset="https://media.convertkit.com/2017/03/blog-example-just-a-girl-scaled.jpg?fit=scale&amp;fm=pjpg&amp;h=936&amp;w=768 768w, https://media.convertkit.com/2017/03/blog-example-just-a-girl-scaled.jpg?fit=scale&amp;fm=pjpg&amp;h=1536&amp;w=1261 1261w, https://media.convertkit.com/2017/03/blog-example-just-a-girl-scaled.jpg?fit=scale&amp;fm=pjpg&amp;h=2048&amp;w=1681 1681w, https://media.convertkit.com/2017/03/blog-example-just-a-girl-scaled.jpg?fit=scale&amp;fm=pjpg&amp;h=2339&amp;w=1920 1920w, https://media.convertkit.com/2017/03/blog-example-just-a-girl-scaled.jpg?fit=scale&amp;fm=pjpg&amp;h=719&amp;w=590 590w, https://media.convertkit.com/2017/03/blog-example-just-a-girl-scaled.jpg?fit=scale&amp;fm=pjpg&amp;h=240&amp;w=197 197w, https://media.convertkit.com/2017/03/blog-example-just-a-girl-scaled.jpg?fm=pjpg 2101w" sizes="(max-width: 2250px) 100vw, 2250px" /></p>
<p>That&#8217;s a lot of information! But the way it&#8217;s organised makes it very easy to navigate and lets the content shine, both of which are essential to a good blog design.</p>
<p>Speaking of which&#8230;</p>
<h2 id="chapter-5">How to create focus with content on your blog homepage</h2>
<p>When it comes to the visual design of your blog, don&#8217;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 <a href="https://convertkit.com/create-blog-visual-identity" target="_blank" rel="noopener noreferrer">the imagery</a> you use.</p>
<p>A key to letting your content stand out amongst all the other elements you&#8217;ve chosen to include on your homepage is establishing hierarchy. This means making the most important information the focus of the page.</p>
<p>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&#8217;ll overwhelm them. It won&#8217;t be clear where they should start.</p>
<p>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&#8217;t overshadow your main action. When you try to make everything stand out, nothing stands out!</p>
<h2 id="chapter-6">Are you ready to build your homepage?</h2>
<p>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.</p>
<p><img decoding="async" loading="" class="wp-image-5088 size-full lazy" data-src="https://media.convertkit.com/2017/03/rBIqw0uu-courses-wireframe.png?fm=png" alt="free blog homepage template for online courses" width="1500" height="1656" data-srcset="https://media.convertkit.com/2017/03/rBIqw0uu-courses-wireframe.png?fit=scale&amp;fm=png&amp;h=600&amp;w=543 543w, https://media.convertkit.com/2017/03/rBIqw0uu-courses-wireframe.png?fit=scale&amp;fm=png&amp;h=1024&amp;w=928 928w, https://media.convertkit.com/2017/03/rBIqw0uu-courses-wireframe.png?fit=scale&amp;fm=png&amp;h=848&amp;w=768 768w, https://media.convertkit.com/2017/03/rBIqw0uu-courses-wireframe.png?fit=scale&amp;fm=png&amp;h=1536&amp;w=1391 1391w, https://media.convertkit.com/2017/03/rBIqw0uu-courses-wireframe.png?fit=scale&amp;fm=png&amp;h=651&amp;w=590 590w, https://media.convertkit.com/2017/03/rBIqw0uu-courses-wireframe.png?fit=scale&amp;fm=png&amp;h=240&amp;w=217 217w, https://media.convertkit.com/2017/03/rBIqw0uu-courses-wireframe.png?fit=scale&amp;fm=png&amp;h=2048&amp;w=1855 1855w, https://media.convertkit.com/2017/03/rBIqw0uu-courses-wireframe.png?fm=png 1500w" sizes="(max-width: 1500px) 100vw, 1500px" /></p>
<p><img decoding="async" loading="" class="aligncenter wp-image-5087 size-full lazy" data-src="https://media.convertkit.com/2017/03/T2wsWWFJ-content-wireframe.png?fm=png" alt="free blog homepage template for content" width="1500" height="1656" data-srcset="https://media.convertkit.com/2017/03/T2wsWWFJ-content-wireframe.png?fit=scale&amp;fm=png&amp;h=600&amp;w=543 543w, https://media.convertkit.com/2017/03/T2wsWWFJ-content-wireframe.png?fit=scale&amp;fm=png&amp;h=1024&amp;w=928 928w, https://media.convertkit.com/2017/03/T2wsWWFJ-content-wireframe.png?fit=scale&amp;fm=png&amp;h=848&amp;w=768 768w, https://media.convertkit.com/2017/03/T2wsWWFJ-content-wireframe.png?fit=scale&amp;fm=png&amp;h=1536&amp;w=1391 1391w, https://media.convertkit.com/2017/03/T2wsWWFJ-content-wireframe.png?fit=scale&amp;fm=png&amp;h=651&amp;w=590 590w, https://media.convertkit.com/2017/03/T2wsWWFJ-content-wireframe.png?fit=scale&amp;fm=png&amp;h=240&amp;w=217 217w, https://media.convertkit.com/2017/03/T2wsWWFJ-content-wireframe.png?fit=scale&amp;fm=png&amp;h=2048&amp;w=1855 1855w, https://media.convertkit.com/2017/03/T2wsWWFJ-content-wireframe.png?fm=png 1500w" sizes="(max-width: 1500px) 100vw, 1500px" /></p>
<p><img decoding="async" loading="" class="alignnone wp-image-5089 size-full lazy" data-src="https://media.convertkit.com/2017/03/rUOlzq42-emails-wireframe.png?fm=png" alt="free blog homepage template" width="1500" height="1656" data-srcset="https://media.convertkit.com/2017/03/rUOlzq42-emails-wireframe.png?fit=scale&amp;fm=png&amp;h=600&amp;w=543 543w, https://media.convertkit.com/2017/03/rUOlzq42-emails-wireframe.png?fit=scale&amp;fm=png&amp;h=1024&amp;w=928 928w, https://media.convertkit.com/2017/03/rUOlzq42-emails-wireframe.png?fit=scale&amp;fm=png&amp;h=848&amp;w=768 768w, https://media.convertkit.com/2017/03/rUOlzq42-emails-wireframe.png?fit=scale&amp;fm=png&amp;h=1536&amp;w=1391 1391w, https://media.convertkit.com/2017/03/rUOlzq42-emails-wireframe.png?fit=scale&amp;fm=png&amp;h=651&amp;w=590 590w, https://media.convertkit.com/2017/03/rUOlzq42-emails-wireframe.png?fit=scale&amp;fm=png&amp;h=240&amp;w=217 217w, https://media.convertkit.com/2017/03/rUOlzq42-emails-wireframe.png?fit=scale&amp;fm=png&amp;h=2048&amp;w=1855 1855w, https://media.convertkit.com/2017/03/rUOlzq42-emails-wireframe.png?fm=png 1500w" sizes="(max-width: 1500px) 100vw, 1500px" /></p>
<p>We shared a few examples in this post, but what are some blog homepage designs you love? Link them in the comments!</p>


How to choose the best blogging platform for you

How to create a style guide for your blog

Homepage design

The purpose of a blog homepage

How to structure your blog homepage design

Static blog homepage vs featuring recent posts

Elements to include on your blog homepage design

How to <a href="https://convertkit.com/blog-graphics">create focus with content on your blog</a> homepage

Are you ready to build your homepage?

How to create a homepage design for focus and clarity

How to create a homepage design for focus and clarity

In this Article

Charli Prangley

How to create a style guide for your blog

How to choose the best blogging platform for you

Creator Network