|
|
|
|
Two weeks ago I showed you how a simple blog post look was good enough to impress your audience. But most of the examples were from big brands or individuals that already had a social media following.
In the SERP jungle, you’ll need some extra design tricks to survive. In this edition, we’re looking at general post layouts and how you can make use of different colors or boxes to distinguish sections.
Lever - using separate section colors for everything that’s doesn’t go into the article
Besides other visual elements for quotes and tips, Lever divides their Additional resources recommendations through separate sections [or containers if you want a technical term when describing what you need to your designers and devs]. The new section block isn’t just thrown between the article’s main heading. Instead, a handy visual arrow cue is added at the top of each section to indicate readers should keep scrolling.
Foundation - Highlighting headings through a distinct box, complete with a section summary
On some Foundation articles, they’ve replaced plain H2s with a brief visual section like the one above to break the article. This is also handy if you don’t have too many other images or graphics in your article but still want to create a visual user experience. Just remember to keep these as HTML text instead of text over an image.
Typeform - working with color
Typeform takes a similar approach to the Foundation example. However, in Typerform’s case, they use the same heading color throughout the rest of the post for highlighting quotes and key questions or definitions.
NN Group - Section details under a separate section
In this sample, each tip is written as usual with all the extra details and tips placed under a distinct box. This makes the reader’s job to scan the article even easier as the box itself is also well-organized.
Talmundo - visual cues on all headings
All of Talmundo’s headings come with an abstract cue to carry the reader’s eye directly onto the heading:
They go beyond pre-established design elements and also tailor each one of their posts. In the next example, a graphic is deconstructed into its smaller elements which are attributed to new headings for easier recognition:
Backlinko - when visual sections are a must for long-form content
If you’re wondering if such design elements are mandatory at any time, the answer is “yes”. Huge guides that people could find way too long will definitely use a handy breakdown of the sections. At least when you’re planning on keeping everything on one page.
|
|
|
If you enjoyed this edition, don't forget to send it to a friend. Next time, we’re getting into the most fun newsletter edition: interactive blog elements.
Until next time,
Alexandra Cote
Here's some further resources to have a look at in the meantime:
|
|
|
|
|
|
|
|
