11 Examples of Lovely Weblog Submit Design (Infographic)

The design of your weblog web page units the tone for the entire sources 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 optimization, 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 submit design examples in an effort to offer some sensible takeaways. Have a look.

1. Vox

Vox, an impartial media firm, leverages its major model colour tactically all through its weblog web page, starting with its brand within the high left nook to the yellow CTAs and header highlighting.

The usage of 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 sorts, alternating between articles, podcasts, show adverts, movies, e-newsletter 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 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 search engines like google.

2. MailChimp

Electronic mail automation supplier MailChimp absolutely leans into its model picture and illustrative design type on its weblog web page.

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

One key web page structure function is the subdivision of content material themes through H2 headers. On this case, MailChimp has categorized its particular person weblog posts underneath subjects resembling:

• The way to make automations be just right for you.
• The way to create on-brand designs.
• The 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 closely fits their pursuits.

3. QuickBooks

The QuickBooks useful resource middle guarantees “sources 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 house owners perceive the core ideas of entrepreneurship.

The accounting software program agency covers quite a lot of floor on a variety of subjects, all carefully associated to each part of enterprise a reader would possibly must know. These embody taxes, planning, bills, payroll, know-how and way more.

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

4. Canva

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

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

5. Figma

Collaborative interfacing instrument 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 pictures. These messages join carefully to the title of every weblog submit, making a cohesive theme throughout the whole web page.

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

6. Suppose With Google

Few organizations have entry to the kind of advertising analysis and shopper insights Google does. That’s why Suppose With Google is such a treasure trove of latest knowledge, enlightening concepts and burgeoning tendencies shaping right this moment’s economic system.

Loaded with glossy, 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 submit is crammed with further knowledge visualizations that assist inform a dynamic, analytical story.

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

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

7. Adobe

Adobe, the inventive software program powerhouse, isn’t any stranger to hi-fi digital advertising.

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 to be like extra way of life 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 contains 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 high 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 might have two minutes?

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

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

It famously sections its weblog submit template into bullets, with headers that progressively dive deeper into the subject. When you simply want fast highlights, you possibly can 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 absolutely conscious of the world’s happenings, learn until the top of the submit.

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 record will get the job achieved.

9. TikTok

TikTok is greater than only a video platform. Its weblog is an effective way to remain within the loop with the service’s newest information, product updates and fascinating tales concerning the TikTok neighborhood. The design is easy 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 way of the whole weblog archive with out having to navigate to new pages. This function is aligned with the newest Google updates for cellular: Search engine outcomes on cellular screens will now not have “see extra” buttons on the backside of pages. As a substitute, Google will robotically populate extra outcomes with every scroll.

10. Grammarly

Grammarly’s method to running a blog is to be as clear and complete as potential — 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 tips on how to categorical love when writing, the weblog has one thing for everybody.

However by some means, even with a various vary of subjects all geared towards completely different audiences, Grammarly has mastered the artwork of constructing all of it look cohesive — and it’s all due to its constant use of design parts. The illustrations are so intelligent that even with out studying the title, customers can inform what the submit is about.  

11. Moz

Moz, an search engine 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 consultants — entrance and middle, 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 search engine optimization house, and their posts typically get 1000’s of feedback from a big, lively advertising viewers.

Moreover, Moz makes nice use of recurring sequence, like Whiteboard Friday and Day by day search engine optimization Repair, to drive new and returning site visitors to its web site.

A ultimate be aware: 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 optimization.

Designing Your Weblog Posts

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

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 asset.

Relying in your viewers and your objectives, you too can embed further options into your weblog template, resembling:

• Pop-up adverts.
• E-newsletter signups.
• Share buttons.
• RSS subscriptions.
• Writer bios.
• Advisable studying carousels.
• Varied different CTAs and banners.

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

When doubtful, preserve it easy.

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

Editor’s Notice: Up to date March 2023.