Designing

Effective

Layouts

Layout design guides the eye and engages audiences with an enhanced reading experience. Explore how to use it best with Setka Editor

Anyone with a computer and a design program can create a page layout. But unless you’re trained in design, it won’t look very good and it won’t communicate very well.

John Maeda

Global Head of Computational Design and Inclusion at Automattic

Designing Effective Layouts

Your blog post or page layout is the visual arrangement of your written and visual content – the foundation of any design. It works to guide the eye where you want it to go, shining a spotlight on the most important parts of your story and making sure the reader can grasp the meaning – and click on CTAs – as effortlessly as possible. Great layouts help dictate the flow of a story, and the order in which information is consumed.


38%

of users switch stop engaging entirely if content is unattractive in its layout or imagery. (Adobe)



75%

admit to judging a company’s credibility based on its website design. (Stanford Persuasive Technology Lab)



66%

would prefer to view something beautifully designed versus simple and plain with only 15 minutes to consume content. (Adobe)


According to data from Chartbeat, “the portion of the page below the fold is viewed for nearly three times as long as the top of the page… [and] readers who do scroll down past the fold engage much more towards the bottom of the page than they do at the top.” That means, while you may be spending a lot of time paying attention to the “above the fold” area of your site in order to grab your audience’s attention, you should put just as much thought into the content and design below the fold in order to keep that attention (and maybe even get them to convert).

Optimized font size and content hierarchies indicate levels of significance and informational structure while intentional margins and other elements like lists, tables, and dividers enhance data visualizations and direct attention to key points within your messaging.

A considered, well-designed layout motivates audiences to read further, scroll deeper, and make more sense of what they’re engaging with.

With an intentional format for each type of content you produce – based on your brand and visual identity – typography, text, and images can easily come together to enhance readability, encourage creativity, and streamline any publishing process. And while there’s no precise formula for an ideal layout, its based on a balanced and calculated combination of text, images, white space, and every bullet point in between.

The impact of an effective piece of content, and editorial experience design in general, depends on how all these elements work as one. Let’s take a look at how to do it best.

Attract, Engage & Convert with Effective Layouts

To win readers, leads, and deliver on all-around audience and customer satisfaction, content marketers must strive to make their editorial user experience as effortless and enjoyable as possible. This is easier said than done, especially since every reader interacts with the web in different ways, making it impossible to cater to every taste, reader aim, language level, and otherwise when designing a piece of content written for an audience of hundreds, thousands, or millions.

That said, there are some patterns in the ways people consume text on the web that you can use to make smart design decisions that keep all kinds of readers engaged.

In sometimes less than a second, a user can complete an initial appraisal of a page, estimating the nature, quality, importance, and potential value to them

Nielsen Norman Group

The Nielsen Norman Group (NN/g) — world leaders in research- based user experience design — observed more than 300 people use hundreds of different websites, and found that most people scan content and make quick appraisals before reading — or moving to the next best thing. Specifically, “In sometimes less than a second, a user can complete an initial appraisal of a page, estimating the nature, quality, importance, and potential value to them.”

 TIP

When using quotations that go on for more than 40 words or four lines of text — according to APA and MLA style guides, respectively — it’s standard practice to place the copy into a free- standing block with narrowed margins and no need for quotation marks.

While knowing that most users scan that quickly can seem discouraging, by tailoring your design to make sure the most compelling information gets to them fast, you can convince them that it’s worth staying on your page to read more. Through their studies, NN/g observed four common patterns that users would follow to scan a page:


F pattern

Users scan in the shape of
a letter F, reading earlier sentences more fully and then only scanning the beginning of lines as they go further down the page.


Layer cake pattern

Users scan by reading the headings of a page first to determine which sections (if any) they want to read further.


Spotted pattern

Users scan the page more sporadically, paying attention to text that particularly stands out, such as bolded fonts, text in a different color, or sidebars.



Commitment pattern

Users scan to find the areas of the article they are especially interested in, which they will then read more fully.


Users may unconsciously prefer a specific scanning style, use a different style in different contexts, or even mix styles as they work their way through a web page. According to NN/g reports:

 TIP

Using a style guide is a best practice for every publication, as they allow you to keep things like grammar, word usage, and formatting consistent across everything you write. APA and MLA are two of the most commonly- used ones across the web, but you can also adapt them to your preferences or create your own.

The users’ mindset and tasks dictate the way they scan a webpage. After examining the gazes of people doing many different types of tasks, including very open-ended, exploratory tasks, we found that people scan in different ways depending on:

  • the strength of their need for the information on the page
  • whether they are looking for anything in particular
  • exactly what it is that they are looking for
  • whether the page is arranged well

By understanding that scanning is not a random act but one motivated by the desire to quickly find specific information (or just to find something that catches your eye), you can design your pages in a way that delivers the most compelling information in ways that allow different types of scanners to find it quickly.

A powerful, unique, and creative layout can guide the eye, structure your story, and engage the reader.

Now we’ll dig into how to design aIn other words? A successful layout that divides a piece of content – long-form or otherwise – into easily digestible chunks that follow a predictable pattern within your digital publication to give readers exactly what they’re looking for and keep them from quickly clicking away.

Design Tips

 Avoid walls of text

 TIP

Use sub-headers throughout your articles, break paragraphs into smaller chunks, incorporate images throughout your post, weave in design elements to bring attention to key points, and use a strong call-to- action at the end of your post.

Regardless of size, avoid walls of text at all costs. These are defined as “pages of prose with few or no text sections, headings, inline links, or bold words,” reports NN/g, citing the blocks as “a major repellant that instantly makes users think twice about engaging with a web page.”

Instead, breaking up text with images, infographics, and CTAs makes the content more easily digestible and also commands reader attention for more time spent reading. The reader should be able to get an idea of what your article is about by skimming through it, so remember the importance of hierarchies.

 Write your copy for optimal readability

 TOOLBOX

With Setka Editor, it’s easy to set paragraph styles for immediate updates to any post or page element.

When writing for the web, content creators need to keep mindful of simple word choice, paragraph lengths, and visual interludes to keep the eye moving and make sure a reader stays engaged. These may include elements like lists, dividers, pull quotes, and sidebars that work together to improve readability and make the overall article more attractive.

Promise your audience a predictable, well-spaced content structure to make reading as easy and enjoyable as possible.

While headlines are the largest textual elements generally found on-page on in-post, remember that another option is to accentuate your lede or introduction as well. Whatever your visual language may consist of, promise your audience a predictable and properly-spaced content structure to make reading as easy and enjoyable as possible.

 Use grids to break up the page

 TOOLBOX

Working with a simple grid (and no need to code) opens up a world
of possibilities. Setka Editor users can set custom spacing and create layouts of 2 to 16 columns to create a signature look and feel for their publications.

 TIP

The optimal width for main text columns is between 66 to 75 symbols.

Behind any great layout, however ornate or minimal, there exists a grid. This simple system can be used to create a recognizable and unified style for any publication by keeping content effectively organized with column grids – the basics of graphic design. They aide in developing optimized visuals for desktop as well as mobile screens by providing necessary limitations that enable efficient and coherent content layouts of imagery and text.

Consider the look you can create by layering images, GIFs, icons, or other visual elements on top of each other, and the effect it might produce for your readership. Careful overlapping of color, shapes, and type with photos or illustrations can make for a visual storytelling experience your audience won’t soon forget.

 Establish hierarchies

As we’ve mentioned, scale and font sizing are important tools when conveying the significance of a certain block of content. That’s why headlines are generally designed to ignite curiosities as the largest piece of text on a page, followed by an optional subhead or accented introductory text.

When finalizing layout, keep in mind how readers typically read and scroll through pages. By setting up your articles to suit these behaviors, you’ll see much more engagement with your content.

Chartbeat

 TOOLBOX

Setka Editor allows you to create pre-set text styles for different uses on your page, such as for headers, subheaders, or pull quotes. This allows you to more easily add these hierarchies as you’re designing your post, and also keeps them consistent throughout for a sleeker design.

Body copy, on the other hand, appears as the smallest – though at a size of no less than 16 points – with bolder headers and subheaders styled and spaced accordingly throughout to meaningfully break up a story for emphasis, visual interest, and easy consumption. This caters to eye movements following the Layer Cake Pattern, for instance, in which readers scan headings before deciding on which parts to read.

 Include images to catch the eye

 TOOLBOX

Setka Editor paid plans include an integration with Unsplash, allowing you to browse over 850,000 free- to-use, high-quality, and authentic- looking modern stock photos right from the editor. Paired with built-in image editing and automatic mobile optimization, you’ll be able to find the right image and make it look perfect for your page, all from one place.

 TIP

Aiming to add images or other visual accents every 75-100 words
is a good guideline for increasing engagement and sharability, but only if the images are relevant and high-quality. Think of what you could add that would improve the reader’s experience or make the piece more enjoyable to look at, rather than just stuffing a bunch of random stock images in to hit this quota.

THESE DAYS, even the most basic blog post sports at least one image. But to make an impact on a reader, one’s not enough. Researchers at BuzzSumo found that articles with visuals every 75-100 words received twice as many social shares as those with fewer.

Using the grid as a backdrop, it’s easy to embed images and scale them to any size, from an author headshot thumbnail in a side column to a full-width or tiled shot that doubles as a background.

 Think how your text looks visually

 TIP

Think about how you can combine smart organization of your text with images for an extra pop. For instance, take a bulleted list to the next level by replacing the bullets with small graphics or illustrations related to the point. Highlight especially relevant data by pulling it out of the paragraph and turning it into a visual element on the side. Get creative with how you combine eye-catching visuals with your content to better convey your message and drive attention.

 TOOLBOX

From an integration with The Noun Project which allows you to browse over 2 million simple icons, to the ability to easily place them exactly where you want using the grid system, Setka Editor makes it easy to design micro-visuals to keep readers engaged.

When content marketers succeed with their visual strategy, they glue the reader’s eye to the page, motivating them to keep exploring and consuming brand stories. Maximum engagement happens in the body of a page or post. That’s why an aesthetically-driven visual flow is so vital to effective written content.

So, when you’re thinking about the visual strategy of your page, don’t just think about the pictures. Also pay attention to how your text is formatted and where you can add small visual elements to catch the eye.

According to NN/g, things that can pop out within a block of text include:

  • Bolded or underlined words
  • Text in a different color from the main body
  • Numbers written out as numerals
  • Text in quotation marks
  • Bulleted lists

Design elements like pull quotes, sidebars, or explanation boxes in different colors or styling can also be a way to add visual interest throughout the page.

As we’ll explore much more in-depth in the Imagery chapter, whether you employ photos, illustrations, iconography, or something else entirely, incorporating a visual or design element every couple of paragraphs ist key to retaining readers and keeping them scrolling onward through a story.

 Create compelling links + CTAs

 TIP

Most people just put CTAs at the bottom of their content, but smart content designers know that most readers don’t make it to the bottom, so you should look for opportunities to scatter CTAs throughout Don’t just stuff them in there — make sure it feels relevant to the content and like you’re offering to help the user even more. For instance, at the end of a section about a topic, you might provide a CTA to enter your email a free download to learn more about that topic.

AT THE END OF THE DAY, good design means a better shot of directing and converting your users via a call-to-action — a must for most all content marketing and digital publishing efforts. While the rest of your layout should work to drive the eye to the prize (whether in-line or at the end of a page), the CTA itself should be a button that’s bright, easy to read, and impossible to miss.

But CTAs in blog posts don’t have to be limited to buttons in the traditional sense. Other clickable elements can also be used throughout articles to help increase time spent on-page, like
a carousel of related stories at the bottom of a post or visually consistent and standout hyperlinks throughout.

“In lieu of headings, [people] use links to get a sense of what a section of text is about,” says NN/g, so make sure at least some
of the link copy highlights a relevant point to the paragraph as
a whole. The company goes on to advise using “the information- bearing word, phrase, or heading as the link rather than adding an additional word or button,” like the standard “Read More,” “Click Here,” and so on, as this “prevents gratuitous page clutter as well as needless fixations, and is better for accessibility.”

 Add room to breathe

 TIP

It’s best to add more spacing before a header or subheader than after, so you’re clearly denoting the start of a new section but then making it easy for the reader to dive into that section. Too much white space could leave your reader bored and searching for something to catch their eye.

IMAGINE TRYING TO READ an article without proper spacing, all its words, characters, and paragraphs crammed together in an indecipherable mess. Not a pretty image, right? Negative space (also known as white space) allows for the eyes to rest when needed, and to discover intriguing contrasts and potential silhouettes. Whether viewing on mobile or desktop, a little negative space goes a long way, even though it’s blank — and it matters as much as any other visual element.

Remember that a healthy amount of white space between headers, characters, blocks of text, and visuals is necessary for smooth content consumption, allowing the brain to easily scan and break down information.

NewsCred

Enjoying this read?

Save this story as a PDF

Mobile-First

MULTI-COLUMN DESIGN is popular on desktop websites, as it allows designers to include more information in a visually appealing way. Unfortunately, this generally doesn’t translate well with limited screen space. But there are still a few ways you can get around this when optimizing a blog site for mobile. One to consider is using a title layout grid where the column and row heights are the same, creating a square effect.

 IN ACTION 

This mock-up
for National Geographic’s Nature Watch shows how a grid can be effectively applied to blog navigation on mobile.

Bao via Dribbble

Make images large enough to be recognizable, yet small enough to allow more content to be seen at a time.

Nick Babich

It’s possible to effectively apply a grid to blog navigation on mobile. However, UI developer Nick Babich gives a word of advice to designers creating this kind of multi-column layout on mobile: “Make images large enough to be recognizable, yet small enough to allow more content to be seen at a time.” And when it comes to CTAs on mobile, size matters. You should make buttons as large and eye-catching as possible, without coming off as intrusive on the page. That’s likely to prompt readers to take action, and also makes it easier to click through on smaller screens.

Agile Process

 TOOLBOX

When saving a Post Template in Setka Editor, our tool encodes its layout, structure, content, and all its other style elements. Users can make new ones or choose from saved templates when creating a post, so all they have to do is copy in a new story, make a few edits — and done.

 TIP

Every time you publish an article using a template, think of a small tweak you can make to test something: a new CTA placement, an animation instead of a picture, etc. Watch the data carefully to see how these things affect the metrics that matter to you, and then add something to your template if it’s working well so it’s easy to include on all articles moving forward.

 TOOLBOX

The Setka editor makes flexible but templatized design even easier with the use of Snippets. These micro-templates allow you to save layouts and styling for specific content blocks (like pull quotes, lists, etc.), which can then be easily inserted into any content piece to allow you to customize layouts while still keeping a streamlined production process.

UNFORTUNATELY, you can’t just make one layout and be done forever. Smart content teams know that they should always be testing new things, tweaking their designs to customize them for the content at hand, and running experiments to optimize their pages even further.

That said, you can’t be redesigning your whole site for every article.Templates can be a powerful way to strike the right balance between speed and flexibility — to keep your team trying new things while also making sure you’re able to publish your articles on time.These reusable layout designs allow for consistently quick and easy content organization and a unified look and feel across a digital publication.

By developing a few base templates for certain article types, the bulk of the work is already done when it comes to designing your piece. You and your team can then spend your precious time thinking of ways to make the page even better.

Best in Show

 Etsy

ECOMMERCE GIANT ETSY’S BLOG — known to readers as the Journal — is a great example of layouts that work to support wider business and content goals.The focus of which is customer experience and in-product marketing in hopes of facilitating scalable interactions and attracting new users. «We need outstanding marketing capabilities to amplify the voice and relevance of our sellers and get buyers coming back more often,” explained CEO Josh Silverman, and the Journal is just the place to do so.

Posts cover everything from DIY Inspiration and featured shops and creators to shopping guides, gift ideas, and decorating tips with varying layouts based on the content within. Each format starts out the same, with a large headline up top sandwiched between smaller text indicating author name, date, and category tags. Product-centered stories feature easily shoppable, collage-like galleries interspersed with larger imagery while creative how-to’s incorporate clear headers, lists, and illustrative photos to make the content as easy as possible to read and understand.

 Equinox

WITH FURTHERMORE, luxury fitness company Equinox has created a beautifully branded editorial content destination that sports standout layout design throughout the site’s varied stories as well as its homepage. With articles that range from features like “How Fitness Encourages Sobriety” to Q&As and coverage about workout routines and trends in athletics, Furthermore reaches a wide spectrum of readers — all drawn in by a simple yet striking aesthetic.

“When we surveyed the editorial landscape,we saw a wide-open space where true fitness science unites with an elevated, premium aesthetic,” explains Elizabeth Miersch, the company’s VP and Managing Director. “The Equinox brand has every right to own that,” and own it it does with carefully curated photography, a sleek black and white palette, and minimal but considered layouts.

Most articles begin with a split first screen view — headline to the left, hero image to the right, accompanied by publication info. Below the visual, the reader encounters a line of introductory text, slightly smaller than the headline, working to guide the eye toward the main content. Stories continue — right-aligned for
a unique look and feel that allows for ample white space (and
an area to place ads and CTAs) — periodically broken up by eye- catching elements like quality images, full-screen pull quotes, and contrasting text boxes for increased engagement and more time spent on-page.

Content will continue to be a huge piece of how we market the Equinox brand. It’s a major differentiator for us… There’s no way we could have grown the way we’ve grown without the incredible editorial team we’ve built here. Everyone on staff has a traditional magazine background; there’s just no better training ground than that.

Elizabeth Miersch

VP & Managing Director at Equinox

 Miro

MIRO — A VISUAL COLLABORATION PLATFORM that powers 2 million users worldwide — relies on Setka Editor to power its design-driven company blog. With pre-designed templates and snippets to easily brand, style and layout everything that gets published, each article that goes up on the Miro blog has a special look to it — one the distinguishes it from any other brand.

Their choice of typography and color palette runs through all the posts they publish, creating a consistent and memorable identity that enhances every read — especially since the company’s rebranding. Every element, from pull quote to illustration, speaks to their aesthetic and unique identity; even Miro’s new logo works as an effective design element in and of itself, prominently visible at the top of each page and cleverly used in various colors and sizes in cover art and in-line CTAs.

Key Takeaways

 Know Your Story

WHATEVER THEMES your digital publication may cover,the designer or editor creating the layout for a post needs to carefully read the story at hand in order to know what needs to be highlighted, accented, or scaled in order to create meaningful visual emphasis.Think of ways to visualize certain facts or data points in a way that makes them shine, or how to position your brand’s imagery in a way that boosts its potential impact.

 Break it up

USE HEADINGS WISELY, keep paragraphs short,and be sure to break up blocks of text in a visual way. Readers will ignore walls of text, so when structuring your content, put yourself in their shoes. Make it as easy as possible for your audience to consume and engage with your content by employing a predictable, clear, and attractive structure.

 Guide the eye

A SUCCESSFUL LAYOUT leads the eye across a page or post,making sure to entice readers and sustain their attention at pivotal points in the piece — or places where they might potentially lose interest.And remember: it’s not about mere decoration. Every visual element — from icons and stock photos to headers and accent copy — needs to work together to fulfill the story’s overall goal.

Download your own copy of “Designing Effective Layouts” as a handy guide and reference

What are you excited to see in the world of editorial, blog, and content marketing design this year?

Let us know @SetkaEditor on Twitter + Instagram and learn more about the tool that made this post possible at setka.io.

Try for free

14 days free trial. No credit card required

Get started