11 Examples of Lovely Weblog Put up Design (Infographic)

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

The mix of graphics, pictures, textual content, search engine marketing, UX and UI isn’t simple to tug 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 offer some sensible takeaways. Have a look.

1. Vox

Vox, an unbiased media firm, leverages its major model colour tactically all through its weblog web page, starting with its brand within the prime 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 in a position to weave in numerous content material varieties, 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 greatest practices. It additionally makes in depth use of question-based headlines and its well-known “explainers.” In whole, these options result in a well-structured, click-worthy and optimized web page for each readers and search engines like google.

2. MailChimp

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

Utilizing a muted palette of pinks, yellows, blues and greens, MailChimp pairs every weblog publish with a customized illustration, typically in an summary fashion. Its clear and accessible typeface additionally works effectively in opposition to distinguished destructive house.

One key web page structure characteristic is the subdivision of content material themes by way of H2 headers. On this case, MailChimp has categorized its particular person weblog posts beneath subjects equivalent to:

• Learn how to make automations give you the results you want.
• Learn how to create on-brand designs.
• Learn how to flip buyer insights into actions.

With only a fast scroll, readers can perceive what subject 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 enterprise.” 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 subjects, all intently associated to each part of enterprise a reader would possibly have to know. These embody 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 common articles, attractive new readers to dive into trending, sensible content material backed by social proof.

4. Canva

In fact the world’s favourite graphic design software units a excessive bar for weblog design. Canva’s thumbnail and banner photographs converse loudest, with an attractive two-, three- or four-tile show divided by subject material.

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

5. Figma

Collaborative interfacing software Figma delivers detailed, colourful imagery in opposition to 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 photographs. These messages join intently 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 varieties, too, together with product bulletins, Q&As and academic posts, making certain the weblog isn’t one-note.

6. Suppose With Google

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

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

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

Wish to witness the most recent in weblog publish design know-how? Look no additional than Suppose With Google.

7. Adobe

Adobe, the artistic 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 structure appears extra life-style than it does B2B SaaS.

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

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

8. Axios

Do you’ve got 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 method 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. In case you simply want fast highlights, you possibly can glean what you want in seconds. If you wish to perceive extra a couple of present occasion, learn only a few extra bullets. If you wish to be absolutely conscious of the world’s happenings, learn until the top of the publish.

This structural alternative 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 only weblog on this listing 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 fascinating 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 personalised expertise.

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

10. Grammarly

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

Customers will most definitely 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 the right way to specific love when writing, the weblog has one thing for everybody.

However by some means, even with a various vary of subjects all geared towards totally 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 search engine marketing 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 workers — and exterior specialists — entrance and heart, Moz primarily makes use of a micro-influencer technique. Previous and current Moz workers like Rand Fishkin and Dr. Pete wield appreciable affect within the search engine marketing house, and their posts typically get 1000’s of feedback from a big, lively advertising and marketing viewers.

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

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

Designing Your Weblog Posts

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

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

Relying in your viewers and your objectives, you can too embed extra options into your weblog template, equivalent to:

• Pop-up adverts.
• E-newsletter signups.
• Share buttons.
• RSS subscriptions.
• Creator bios.
• Really helpful studying carousels.
• Varied 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 total 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.