11 Examples of Lovely Weblog Publish Design (Infographic)

The design of your weblog web page units the tone for the entire assets you publish. A format that’s cluttered, scattered or visually ineffective doesn’t paint the best image.

The mix of graphics, pictures, textual content, web optimization, UX and UI isn’t straightforward to drag off utilizing solely a free WordPress theme or web page builder, both.

So we scoured the net to seek out a few of our favourite weblog publish design examples in an effort to supply some sensible takeaways. Have a look.

1. Vox

Vox, an unbiased media firm, leverages its main model coloration tactically all through its weblog web page, starting with its emblem within the high left nook to the yellow CTAs and header highlighting.

Using a yellow border brings form to the general design as effectively, creating separation between content material and white house.

Vox can be capable of weave in varied content material sorts, alternating between articles, podcasts, show adverts, movies, publication CTAs and sponsored content material. Even the two-and three-column formatting, together with various thumbnail picture sizes, helps so as to add hierarchy and emphasis.

The corporate clearly tries to stick to title size and meta description finest practices. It additionally makes intensive use of question-based headlines and its well-known “explainers.” In complete, these options result in a well-structured, click-worthy and optimized web page for each readers and serps.

2. MailChimp

E-mail automation supplier MailChimp totally leans into its model picture and illustrative design model on its weblog web page.

Utilizing a muted palette of pinks, yellows, blues and greens, MailChimp pairs every weblog publish with a customized illustration, usually in an summary model. Its clear and accessible typeface additionally works effectively towards outstanding unfavourable house.

One key web page format function is the subdivision of content material themes by way of H2 headers. On this case, MailChimp has categorized its particular person weblog posts underneath matters reminiscent of:

• The right way to make automations be just right for you.
• The right way to create on-brand designs.
• The right way to flip buyer insights into actions.

With only a fast scroll, readers can perceive what material is featured on the corporate weblog and select a vacation spot web page that most accurately fits their pursuits.

3. QuickBooks

The QuickBooks useful resource heart guarantees “assets to assist begin, handle and develop your small business.” And, true to its phrase, there are many guides, listicles and tutorials to assist budding enterprise homeowners perceive the core ideas of entrepreneurship.

The accounting software program agency covers quite a lot of floor on a variety of matters, all carefully associated to each part of enterprise a reader may have to know. These embrace taxes, planning, bills, payroll, know-how and far more.

With content material specified by rows, and the usage of a constant set of 4 picture tiles, the QuickBooks weblog is straightforward and complete on the identical time. The corporate additionally makes use of a star score system to highlight widespread articles, engaging new readers to dive into trending, sensible content material backed by social proof.

4. Canva

After all the world’s favourite graphic design device units a excessive bar for weblog design. Canva’s thumbnail and banner photos converse loudest, with a fantastic two-, three- or four-tile show divided by material.

The photographs are additionally hovered animations, including extra depth, motion and interactivity to every publish. Favoring hi-res pictures and clear illustrations, Canva offers a sturdy weblog with useful design, advertising and marketing and branding assets for people and companies alike.

5. Figma

Collaborative interfacing device Figma delivers detailed, colourful imagery towards a easy weblog column format and white house. What Figma will get proper is how a lot every illustration can talk about its model and its content material.

For instance, Figma’s use of directional cues like arrows, cursors and geometric shapes attracts the reader’s eye to key messages inside its photos. These messages join carefully to the title of every weblog publish, making a cohesive theme throughout the whole web page.

The corporate publishes quite a lot of weblog content material sorts, too, together with product bulletins, Q&As and academic posts, guaranteeing the weblog isn’t one-note.

6. Assume With Google

Few organizations have entry to the kind of advertising and marketing analysis and shopper insights Google does. That’s why Think With Google is such a treasure trove of latest information, enlightening concepts and burgeoning tendencies shaping in the present day’s financial system.

Loaded with glossy, flat animations and thinly weighted line drawings, the weblog web page of Assume With Google might at first look seem restrained or plain. However every weblog publish is stuffed with extra information visualizations that assist inform a dynamic, analytical story.

And Google doesn’t cease at standard articles. It additionally posts distinctive, horizontal options referred to as “visual stories.” These belongings comprise graphic design, animation, video interviews, audio and much more information — all packaged in a clickable, paginated format that makes SlideShare look archaic.

Wish to witness the newest in weblog publish design know-how? Look no additional than Assume With Google.

7. Adobe

Adobe, the inventive software program powerhouse, is not any stranger to hi-fi digital advertising and marketing.

It continues to push the boundaries of content material creation, social media and graphic design — in its personal model and vis-a-vis the businesses that use its companies. Adobe’s weblog format seems to be extra life-style than it does B2B SaaS.

With a give attention to multifaceted imagery — like enjoyable, digital illustrations, fashion-forward pictures and, at instances, esoteric designs — Adobe permits visuals to dominate its running a blog technique.

The corporate additionally contains embedded movies of its merchandise, touting the newest developments in its know-how choices, like augmented actuality. That is along with its many partnerships with high establishments just like the Smithsonian, Google and the London Marathon, lending collective energy to its weblog subdomain by means of model affiliation.

8. Axios

Do you’ve two minutes?

That’s all you want — if that — to get the gist of an Axios publish.

Information outlet Axios could be very clear in its mission, editorial tips and strategy to content material — outlined in its Axios Invoice of Rights. Exemplified by its Good Brevity® tagline, the corporate is the grasp of no-frills, urgently terse running a blog.

It famously sections its weblog publish template into bullets, with headers that progressively dive deeper into the subject. If you happen to simply want fast highlights, you may glean what you want in seconds. If you wish to perceive extra a few present occasion, learn just some extra bullets. If you wish to be totally conscious of the world’s happenings, learn until the top of the publish.

This structural selection deliberately permits readers to tune out at their very own tempo. We’re all time-crunched and attention-fractured, and Axios understands this higher than most.

The best weblog on this checklist will get the job executed.

9. TikTok

TikTok is greater than only a video platform. Its weblog is a good way to remain within the loop with the service’s newest information, product updates and attention-grabbing tales in regards to the TikTok neighborhood. The design is straightforward and user-friendly, and readers can filter content material by nation and language for a customized expertise.

Plus, the corporate makes use of an infinite scroll weblog design, permitting customers to scroll by means of the whole weblog archive with out having to navigate to new pages. This function is aligned with the latest Google updates for mobile: Search engine outcomes on cell screens will not have “see extra” buttons on the backside of pages. As an alternative, Google will mechanically populate extra outcomes with every scroll.

10. Grammarly

Grammarly’s strategy to running a blog is to be as clear and complete as doable — whereas utilizing extremely concise language. Then, throw in custom-made illustrations, step-by-step guides and plenty of examples for good measure.

Customers will more than likely by no means run out of issues to learn on Grammarly’s weblog. The person posts are sometimes extremely long-form, authoritative and optimized for search. From exploring widespread grammar errors to sharing how one can categorical love when writing, the weblog has one thing for everybody.

However one way or the other, even with a various vary of matters all geared towards completely different audiences, Grammarly has mastered the artwork of creating all of it look cohesive — and it’s all due to its constant use of design components. The illustrations are so intelligent that even with out studying the title, customers can inform what the publish is about.  

11. Moz

Moz, an web optimization software program supplier, makes use of its weblog web page to not solely publish nice content material however to advertise particular person authors as effectively.

Placing their staff — and exterior specialists — entrance and heart, Moz primarily makes use of a micro-influencer technique. Previous and current Moz employees like Rand Fishkin and Dr. Pete wield appreciable affect within the web optimization house, and their posts usually get hundreds of feedback from a big, lively advertising and marketing viewers.

Moreover, Moz makes nice use of recurring sequence, like Whiteboard Friday and Daily SEO Fix, to drive new and returning site visitors to its website.

A ultimate observe: A two-column weblog template with customized illustrations makes the weblog web page straightforward to scan and scroll. There are few bells and whistles — simply nice research, updates and opinions on web optimization.

Designing Your Weblog Posts

Weblog themes are available many styles and sizes. WordPress, HubSpot, Squarespace and Wix are among the hottest running a blog platforms and content material administration methods, offering the inspiration for the highest themes on the net.

Newer applied sciences like Webflow, Foleon and Contentful provide next-generation web page builders that seamlessly combine interactive content material and customized templates, remodeling any article right into a extra complicated, partaking advertising and marketing asset.

Relying in your viewers and your objectives, you can even embed extra options into your weblog template, reminiscent of:

• Pop-up adverts.
• Publication signups.
• Share buttons.
• RSS subscriptions.
• Creator bios.
• Really useful studying carousels.
• Numerous different CTAs and banners.

In some instances, these components will seem on the left or proper sidebar, on the backside of the web page or interspersed all through the weblog publish. To stick to Google’s Core Web Vitals, don’t add, plug in or embed an excessive amount of imagery or coding that slows down general web page velocity.

When doubtful, maintain it easy.

What are a few of your favourite examples of weblog design?

Editor’s Word: Up to date March 2023.