What do you do first when you click on a blog post?
Read every word?
OR
Skim through the content?
At least 80% of readers do the second one. We all skim through the content, read titles, and visualize data before deciding if the content is worth our time. All of these characteristics are part of your blog design.
The internet has so much written about content and less about its presenter. The design and structure of the blog make content easier to find, share, and understand.
We analyzed top marketing blogs to understand good blog design and how you can interpret it for your website.
Let's get started.
What is Blog Design?
Blog design refers to the visual layout, structure, and aesthetics of a blog hub or the article itself.
This includes fonts, colors, typography, navigation, and other geographical components to create an appealing and functional user experience.
Good blog design aims to attract and engage visitors, make content easily accessible, and reflect the personality or branding of the blog owner or organization.
Why is Blog Design Important?
Brian Dean, the founder and former owner of Backlinko, credits his blog design as one of the top reasons his blogs got noticed in the early days.
Today, Backlinko receives over 522k users monthly and still prioritizes design for his blogs.
Brian says, "Even though my blog has grown exponentially since my early days, my entire team and I still prioritize design for the blog."
If you are still in doubt why blog design is important, let me give you some reasons:
1. User Experience
The design of your blog is often the first thing a visitor notices when they land on your site.
A well-designed blog makes it easy for users to find what they are looking for and consume your content. On the other hand, a badly structured blog frustrates users, forcing them to leave and never return.
2. Visual Appeal and Readability
Visual appeal and readability are two key factors that make or break a user's experience on your website. In fact, 75% of people form their opinions on a website based on their aesthetics.
A visually appealing blog encourages users to explore your site further. Readability, on the other hand, makes it easier for them to understand what you are trying to convey.
3. SEO and Discoverability
Search Engine Optimization (SEO) is the practice of ranking content through keywords, quality content, and relevance of your content on a user's search query.
Investing time and money in SEO can increase your chances of getting discovered by people looking for your solution.
4. Branding and Consistency
Your company's logo, typography, and color scheme give identity to your blog. Sticking consistently to the identity makes it memorable and easier to recognize.
When creating a brand, it's crucial to have a unique identity that establishes trust and increases the chances of users returning to your website.
5. Monetization and Revenue Generation
When you invest time and effort into something, you expect it to generate revenue. Suppose you are a blogger looking to turn your passion for writing into a source of income.
In that case, you can monetize your blogs through affiliate marketing, advertising, selling products or services, or sponsored content. The key to success as a blogger is to create a sustainable business that is aligned with your goals.
Important Elements to Add to Your Blog's Design
There are no hard-and-fast rules that a blog page should have all these mentioned elements. But, if you are looking for some thumb rules to get started, have a look at these:
1. Search Functionality
Imagine you are on a website with hundreds of blogs and no search bar. What would you do? You are most likely to bounce back and look for other resources.
Nowadays, users have become accustomed to hit search and the convenience of writing a query and having relevant results returned.
A well-built search function helps users navigate a site and may want to search, especially if they know what they are looking for.
How do you see if your visitors are actually using your search bar?
Use the Google Analytics tool to find what people are searching for on your search bar.
Go to Behavior> Site Search>Search terms; you will get a list of keywords (long and short) or topics people are interested in learning from your website.
Searches are a good sign. People searching on your website mean they like it. Nobody would take the time to search on a website that’s garbage.
You can place your search bar at the top or in the sidebar. It's important to put it where users can easily find it and not get distracted by anything else on the page.
2. Author Name and Photo
Author bio matters a lot for SEO. Google's new update ranks content on their EAT score. EAT means Expertise, Authoritative, and Trustworthiness metrics. It checks out the reputation of your authors to determine whether the content is valuable to the readers.
Author bios are how Google assigns value to a person. For instance, Neil Patel could write for any domain, and the site would gain value because of his knowledge status.
A good author bio is relatively short and well-crafted, between 50-100 words. Besides author’s full name, it has these elements:
- Author’s title/designation
- A clear headshot
- Byline
- Professional expertise and interests
- Links to social media profiles
This is an excellent example of an author bio on Hubspot. It contains the author's full name, mentioned at the beginning of the bio, followed by his social media profiles and website link. The bio also highlights the author's area of expertise or focus within the broader realm of marketing, sales, or customer service.
Optimized pictures in the blog author pages make your bio appealing and give visitors a face to associate with the name. People often recognize authors solely based on their bio photos. It makes content more human and forges a strong connection with the readers.
3. Published Dates and Last Updated Dates
Adding a published date is non-negotiable and a last updated date is good to have. When you put a date on your post, you give readers the privilege to assume how recent the content is.
Blog posts without dates mean that someone reading your post has no idea when the post was written and whether they should trust the information provided in the blog.
A post by Val Head on X (Twitter), the designer at Adobe, is frantic about blogs that don't have dates. She says that following old tutorials can be misleading for brands and users who are new to the topic.
So, what should you do—date or no date? Adding published dates depends on your niche.
If your post is timeless, i.e., it doesn't really matter when you read it; the content would still be as relevant as it was yesterday, so adding dates might be optional.
For instance, a blog post on “Choosing the right link building agency” by Profitengine is evergreen content unless Google brings a radical change in its ranking system. You will find this content relevant to the end of time.
Now, if your niche is technical and you mostly write about tutorials and the latest technologies, having a date quickly allows readers to assess the value of the information. Bonus: Add updated dates for readers to know when the content is updated.
Now, if you check out this article on The Future of Artificial Intelligence by Scribe, the future of artificial intelligence is bound to evolve over time. Some things that are written today might not be relevant with new technological advancement in AI.
4. Social Share Buttons
While SEO will be your primary traffic source, you should still promote it on social media. According to Hubspot, 30% of blog readers discover blogs through social media posts.
If somebody likes your content, sharing it on their social channels makes it easy. Research shows that most people place their share buttons either at the top of the search post (36%) or on the side that often follows the reader till the end of the page (33%).
Many websites also add the share buttons in line with the rest of the content. So readers can share the exact phrase they found valuable. A prime example of this would be Medium. You highlight, write your comments, or share selected content on X (Twitter).
5. Email Signup Box
Visitors who start their visit on a blog post are less likely to become customers but are very likely to subscribe to your mailing list. Signup boxes can be built into your WordPress theme and can be added using a plugin (in your CMS) or a third-party widget or plugin.
Here is a list of places where you can put up your email signups for a blog:
You can also use resources or lead magnets to attract users to sign up on your email list. The call-to-action (CTA) should be prominent and tell visitors exactly what they are getting.
Check out this email signup box on MailerLite's blog post. It promises to offer a free email marketing series delivered across 10 days. For someone who wants to learn email marketing but doesn't want to spend money, this could be an excellent opportunity. For MailerLite, this can be an opportunity to prove their skill and expertise in email marketing.
6. Call-to-action
A call-to-action is a short message or button on your website that encourages your readers to take a specific action, like downloading an ebook, filling out a form, signing up for a product, or an email newsletter.
Having a clear and compelling CTA gives your readers a clear path on what to do next. You don’t want to lose them. The internet has millions of blog posts, so the chances of meeting a reader again are negligible.
Here are three types of CTAs you need to have on your blog:
Email CTAs
Newsletter subscriptions are crucial to directly reach out to your audience with new information. But, they need to be done well to be effective. Your email sign-up form should tell your readers exactly why they should sign up and what they can expect.
This is an email CTA by Orbit Media that establishes authority through the number of people who trust them with their personal emails.
Get started CTAs
When a person first clicks on your blog, they are not ready to buy from you right away. However, there’s information that they would love to know about your product or its features. You can add a “Get Started” CTA at the end of a blog post to encourage users to take action.
For instance, check out Sender’s CTA, where it mentions its features and why you should use it for email marketing. Plus, you can click on the CTA box to start using Sender for free.
Read more CTAs
Every website owner’s goal is to pull people deeper into their site. A “read more” CTA provides other relevant content related to what a reader is currently reading. This kind of CTA is very common and makes a lot of sense to readers.
ActiveCampaign’s related posts section keeps users on the website longer by providing them with additional content that is relevant to what they've just read.
The type of CTA you use on your website depends on your website’s objective. But, the purpose of each of your CTA should be to:
- Encouraging visitors to become top-of-funnel leads
- Assessing and qualifying top-of-funnel leads
- Converting leads into customers
To enhance your website conversions, ensure your CTAs are unmistakable, prominent, and provide something of value.
7. Table of Contents
Search engines utilize the Table of Contents (TOC) and anchoring links from blog posts as featured snippets in search results. A TOC is a simple list of topics usually displayed at the beginning of a post so readers can quickly see what they are looking for and whether they want to continue reading.
For instance, this TOC by Later serves as a roadmap for readers, guiding them through the structure and content of a blog. The hyperlinks included in the TOC allow readers to click on a chapter or section title to navigate directly to that portion of the blog.
The modern version of a TOC allows readers to directly jump to that section in the article. This is extremely useful compared to reading a 2200+ word article only to realize it doesn't cover the topic you were looking for. Most people seek simple answers to their queries, and a TOC helps them provide the information needed to make a decision.
7 Expert Design Tips For Better Engagement
Now that you understand the importance of the relationship between content and design, let's explore how to design your content for maximum impact.
1. Create a Style Guide For Your Brand
Without a brand identity, there's only so much you can do to grow your online presence. After all, people have enough content to read online and decide, so why would they choose a brand they cannot recognize and trust? Creating a brand style guide is the best way to define your brand positioning.
Style guides determine the look and feel of a company's branding. The goal is to create a consistent experience for all the readers that improves your website's credibility among readers.
Let us explain the typical elements of a style guide through a Starbucks style guide:
Color Palette
Your brand's color palette is unique and easily identifiable. It consists of a selection of colors your company utilizes for branding purposes. A brand color palette should encompass primary, secondary, and neutral colors to offer diverse design choices with depth and variety.
Starbucks' color palette is its most identifiable asset. The use of green is evident from the color of their logos to the staff's apron.
Typography
Typography encompasses more than just selecting a font; it involves choosing primary and secondary fonts with different weights and styles to cater to various purposes. It significantly influences a website's user experience by enhancing accessibility and readability.
Starbucks' typography is based on three fonts: Sodo Sans, Lander, and Pike. These bold and expressive fonts can be condensed to write functional headlines.
Imagery and Iconography
Approved imagery and pre-designed icons serve as unique symbols representing your brand. These icons are versatile elements that can be utilized consistently throughout various materials such as blogs and eBooks to maintain a cohesive visual identity.
Starbucks' imagery and illustrations are rooted in its brand and legacy and are evolving with trends to give a custom feel.
Brand Voice
Establishing a brand voice defines your company's character, whether it's friendly, casual, or formal. This clarity helps guide writers, salespeople, and marketers in effectively portraying your brand across online platforms.
For reference, you can check out the brand style guide for Walmart, Asana, and Netflix. All of them have a consistent brand style throughout their marketing collateral.
2. Include Images, But Don't Overdo It
What happens if a reader comes to your blog post and sees only a large chunk of information? They'll probably bounce back.
Adding visuals to your content helps your audience skim through it and keep them entertained on your site. If you check out websites like Visme, Semrush and Shopify you will probably find a lot of visuals and images throughout their content.
The content around interactive form builder on Visme includes visuals like infographics, graphs, and videos to help you better understand a topic.
It's important to note that visuals are not here only to make your posts look pretty. Instead, they provide visual proof for all your claims. When choosing images, consider the following elements:
Size: The size of an image will directly impact the loading speed of your page. Keep it small so it doesn't take more than a second to load on a device.
Resolution: Choose a resolution that fits the screen of your platform. Keep it small, like 500 x 750 or 500 x 500, for a perfect square. But make sure the quality of the image is top-notch.
No. of images: Use at least one image after every 150 to 200 words.
Alt text: Add alt text to images to help readers identify what it is about, even if their browser does not support the image format.
Index your images: Add them to the sitemap so they can appear on Google Images.
Visuals are often the best way to understand complex topics, but be careful not to overdo them. Too much clutter on your website can make loading slower. You don't want a blog post to be a library of photos.
3. Focus on Readability
Blog design plays a crucial role in determining its readability. Every design element on your blog significantly impacts how users perceive your content. An easier-to-read blog keeps people from leaving your website, and they might also be more likely to share your content on their social channels.
Here are some ways to improve the readability of your blog post:
Use a simple and straightforward layout to make it easy for readers to skim through the content and pick out the necessary information. Most readers scan left to right at the top of the page and then scroll down until they find a specific subheading. This is called the F-pattern of reading, which you can use for your blog layout.
Colors on a blog post evoke emotions and guide the reader through important elements on a page. A good rule of thumb is to use a limited color palette, like using a light-coloured font on a dark background or vice versa, which can improve the readability of your blog post.
Use white space effectively to create a visual hierarchy and make it easier for readers to follow your content. White space also helps reduce eye strain by providing regular intervals between each text block.
Write short paragraphs, no more than three lines, to make your blog content easy to digest.
Use tools like Yoast, Hemingway or Grammarly to check your readability score. Once you have this information, it's important to change your blogs accordingly.
The best way to simplify your blog post is to write your content in a conversational way. Try to imagine you are speaking to an 8th grader. Once you write beyond this, 50% of Americans will not be able to understand it well.
4. Add Videos to Explain Things Better
According to Vimeo, 80% of people prefer watching a live stream or an online video rather than reading a blog post. Many people don't like reading and want to consume content through visuals. People watch videos while sitting at work, doing chores, or just sitting in traffic. Anytime they have some spare minutes.
No matter what type of content you create, you can include a wide range of video content for your blog-
Product reviews
Video product reviews can help you discuss the pros and cons of a product, including its features and comparison with similar products on the market. As a result, viewers see the product in action and are more convinced to buy it.
Ahrefs, a popular SEO tool, delves into its key features through videos to help users understand how to perform tasks on the platform.
Tutorials
People would love to see a step-by-step method for performing specific functions with your product. Many SaaS tools use these videos when onboarding users to help them get the maximum value from the product.
This Userguiding tutorial tells you the step-by-step ways to create a line graph in Google Sheets. If, by chance, you don’t like reading through multiple, you can simply watch this video.
Webinars
Linking webinars on your blog post is an excellent opportunity to share your knowledge and expertise and grow your blog's brand. These videos will keep readers hooked on your page for a long period.
For instance, SEJ using webinars as blog posts helps them delve into topics in greater detail compared to traditional blog posts. Incorporating webinar content allows you to provide comprehensive information, offering value to your audience and positioning your blog as a go-to resource for in-depth knowledge on the subject matter.
News and Updates
The visual representation of important news and updates are greater than plain text. You can announce upcoming events, new products, or other life changes that build excitement for what's coming.
Check out Figma’s news and update section to know about its latest features and to stay informed about the latest changes and improvements.
5. Design Mobile-first
Mobile-first design is an approach that prioritizes mobile user experience and then expands to create for tablets and desktops. Mobile devices are most commonly used for web browsing, making up around 60% of all web searches. So, it makes sense to focus your design on mobile devices.
When designing mobile-first, there are several key combinations to keep in mind:
Prioritize the most important information and actions, like blog content, header navigation menu, search functionality, call-to-action buttons, and footer. A well-structured layout is essential to designing mobile-first to help users easily navigate the website.
Optimize your application for slow internet speeds and limited data plans. We can achieve this by optimizing images and video content, compressing data, and resolving server requests. This ensures your site loads quickly and efficiently, even on slower mobile networks.
Finally, keep responsiveness your priority. This means your website should be able to adapt to different screen sizes and resolutions, allowing users to access your web page easily.
Content is key to creating a mobile-first web page. Create a prototype of your website to check the content hierarchy and flow, and ensure your content is readable on all devices, including phones and tablets.
6. Use Content Management Systems With Good Design Templates
While you should design your blog from scratch, modern content management systems (CMS) simplify launching and maintaining your blog. Here are some popular blogging platforms you can use to build your website:
WordPress
WordPress is the oldest blogging platform used by thousands of developers to create custom blog designs or choose from hundreds of WordPress themes. You can also integrate your favorite tools or use WordPress plugins to increase functionality.
Ghost
Ghost has an intuitive UI that is easy to learn and navigate. A built-in editor with SEO, signups, and newsletter memberships provides everything you need to start your blog or newsletter. Ghost also offers detailed engagement analytics to help you understand what content is getting the most attention and who are your biggest fans.
Wix
Wix is a top-rated website builder offering unmatched website features, an easy-to-use editor, and over 900+ templates. With Wix, you can create portfolios and run your online store.
Framer
Unlike traditional design tools that offer static mockups, Framer allows designers to create fully interactive prototypes that mimic the user experience of a live website. From smooth page transitions to dynamic content loading, Framer empowers designers to easily prototype complex interactions, providing stakeholders with a realistic preview of the final product.
7. Make Navigation Easy
Website navigation is one of the most important features that help users find what they want. In fact, even a well-designed website can lose up to 55% of its visitors due to poor navigation.
If your visitors cannot find what they are looking for, it’s a case of poor blog UX design. It will lead to higher bounce rates and low conversion rates.
Now, let's understand how you can make navigation easy for your viewers:
Add categories
To make navigation easier, your website's content should probably be divided into several categories, columns, sections and subsections.
For example, if you visit the homepage of a news website, you will see different categories in the header menu. This change makes it easier for users to navigate the site, even when it has tons of information that can easily get lost.
Add breadcrumbs
With breadcrumb navigation, users can easily retrace their steps to other web pages with a simple click. If your website has a hierarchy with multiple levels (more than 4), breadcrumbs can be a great way to show where they are on your website.
Use TL;DR
Sometimes, blog posts can be lengthy, and not all readers have the time or inclination to read the entire piece. A tl;dr section provides a concise summary of the main points, allowing readers to quickly grasp the gist of the content without having to read the entire post.
This TL;DR from UserGuiding quickly conveys the main points or key takeaways of complex or lengthy information from the blog intended to provide a quick overview for those who may not have the time or inclination to read the entire thing.
Avoid icon-only navigation
Icons save space but make them ambiguous and open to interpretation. What seems clear to one person may be confusing to another. Text labels, on the other hand, can be easily translated into different languages, ensuring that the navigation remains clear and accessible to users worldwide. That's why always use icons with labels if you want to use them.
Wrapping Up
Blog design plays an important role in determining the level of engagement on your website. It affects your brand's credibility, how easily someone can find the information they are looking for, or how they spend time on your website.
A well-designed website can help you increase engagement and keep visitors coming back for more. Important elements to add to your blog's design
- Search functionality: for readers to easily find your blogs
- Author name and bio: to add credibility to your blogs
- Published and last updated dates: tell the recency of your blogs
- Social share buttons: to allow readers to easily share your content
- Email signup box: to attract users to sign up on your email list.
- Call-to-action: a short message that encourages your readers to take specific action
- Table of contents: a simple list of topics usually displayed at the beginning of a post
You can check out the latest blog design inspirations to create your blog page.
