7 Best Blog Layout
A Business blog is a great way to introduce prospects and skill set to your business. In reality, a study in the UK in 2016 found bloggers to be the third most trusted source of information, following friends and family!
Your blog is a perfect vehicle to let readers know who you are, what you are doing and why they choose to do business with your company.
Creating a blog for readers falling in love with your products and services is not just about creating insightful content; it’s also about presenting the content.
Not only does your blog design attract users and guide them to your site with targeted, relevant, and engaging content, it also needs visual appeal and a unique, easy-to-navigate experience for users.
This is the best blog layout you can use as inspiration.
- A List Apart
As soon as you load A List Apart, you realize that you have found a unique blog. Instead of setting their logo left, center or even right, A List Apart spans the screen, relying on the bottom half of the letters to make the title of the site sufficiently clear.
Below a story featured in full width, the layout consists of a simple list, but it does away with the typical thumbnail image, keeping you concentrated on the text. The typography hits a nice balance between the bold headline of the sans-serif, delicately set metadata and a summary of varying length. (One of the advantages of a list design: no need to worry about keeping your summaries to the same length.)
The feed design also carries an interesting risk, highlighting a popular reader comment just below one of the top stories. It is not often that you see the homepage of a blog that sacrifices so much real estate to a comment!
A narrow sidebar on the index page of the blog calls up content from the latest issue, as well as recent posts by columnists. The latter section highlights the author with a headshot, reinforcing a column’s value as a source of a respected individual’s continued insights.
- Help Scout
The best blog styles are sometimes the simplest too. Help Scout, customer service software developers, use the innovative yet streamlined template we love on their blog— it restricts copy and visual use and embraces negative space.
What we especially like about this blog is its use of featured images for all posts, including a top-down banner that highlights a recent or especially popular entry. Both icons are placed in front of bright, block colors that catch the eye of the readers and show what this post is about. And it works— everything that says “clean” and “readable” about design of this blog.
Obviously Adobe has some of the best in creativity and design around. The white background of their blog helps the colors in their blog pictures to stand out perfectly-talking about colors, the palette they use is incredible. Throughout the blog homepage they used moving visuals which really attracts the eye, and everything is organized in a clean way.
Adobe brilliantly uses white space on their web pages. The images featured fill the screen, and then one column keeps the entire content and imagery clean and simple within the text body.
The tab at the bottom of your screen helps you to see your progress as you read through the article, and it even gives you a simple way to read the article they released before or after.
When you load Nautilus, you’re presented with a full-screen image reminiscent of the cover of a magazine— which makes sense, as it’s an online magazine. You are also given a choice: click on “SEE FULL ISSUE” to dive into a current issue index, or scroll down to see material from the current issue segment. (Nautilus ‘ problems are long-running explorations of a topic divided into chapters with a regular release cadence.)
And while the index page of the issue is beautiful, it is the index of the chapter that I love. Here you can see a tidy map of the stories featured with a combination of images and stunning illustrations. But the show’s star is the typography: Freight Sans, Display, and Text combined thoughtfully to let each style play to its strengths.
The blog of Wistia uses clean fonts and headings which focus on the content. In a cool calendar-like timeline, a well-designed “latest” column structures their recent posts, displaying the publishing date vertically to the title and author left.
Their design streamlines the user experience, targets the right content and makes it easy to understand the navigation.
May you tell us that we love these simple single column layouts? Like Adobe and Help Scout, Wistia’s articles are nicely focused. The images placed throughout the article, in addition, do a great job of separating their text and encouraging easier reading.
We’re also a big fan of how colorful boxes are added to their notes and tips, too. It entices you to read what they have to say with a simple pop of color. Clever move, Wistia!
- Microsoft Stories
Full disclosure: We have recently gushed completely over Microsoft’s “Stories” microsite. We can’t help— what better way to revitalize an old-school brand than a blog with beautiful, interactive and inspiring branded content? Plus, these stories ‘ square shape is reminiscent of the Microsoft logo, which ensures important continuity in the brand.
Microsoft Stories is also a prime example of how an entire rebrand can be a major asset for a company site. Microsoft has worked in recent years to humanize its name, largely in response to a rivalry with Apple. The “Stories” microsite has a simple tagline— “Look inside at the people, places, and ideas that move us.” That’s Microsoft’s softer side, so to speak. You can use your blog to express it when you’re trying to convey a certain brand message— both aesthetically, and content-wise.
Beyond the big, beautiful images and the variety of things to click on, it’s personalization that really gets me about Fubiz.
Fubiz makes it clear that they want you to participate in curating their content and make the site your own. How is that? By offering you several options to influence what stories you’re seeing. First, there’s the “Creativity Finder” that allows you to define who you are, where you live, and what content you’re looking for through a form of Mad Libs-style.
You get a chance to see what’s going on in another cosmopolitan city further down the page, so you can see what inspires people from Tokyo to San Francisco.
(source: webflow.com, bluleadz.com, and blog.hubspot.com)