A guide to effective page layout design
Explore how to design content structure and navigation that make your content easy to understand
-(1)-1.png)
-1-1.png)
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
We’re all about designing an exceptional reading experience at Setka, so that your blogs, posts, and pages can communicate effectively, be a powerful champion of your brand, and improve business KPIs. Our framework for great content design is based on 750+ pages of research and insights from the best in the industry and features step-by-step instructions for creating well-designed, written work. In this step, we dig deep into designing layouts that make your content easy for a reader to skim and quickly comprehend. Check out the full framework for insights that help make your content easier to read, more engaging, and a better representation of your brand.
Why great layouts
matter
When a reader lands on your page, you have mere seconds to convince them that your page will be valuable to them. If they don’t think you’re providing what they’re looking for, they’ll quickly move on to another resource.
To help stop that, you want to do everything you can to quickly catch their eye with interesting and relevant information and show off exactly what they’re going to get out of reading your page.
And this doesn’t mean just writing a catchy headline or using a splashy header photo. 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 get them to convert).
38%
of users switch or stop engaging entirely if content is unattractive in its layout or imagery.
75%
admit to judging a company’s credibility based on its website design.
66%
would prefer to view something beautifully designed versus simple and plain (with only 15 minutes to consume content)
That means you’ll also want to give careful consideration to your content layout – including its structure and navigation options. Doing so can seriously improve your reader’s comprehension, and help them do a quick appraisal and understand the incredible value you’re about to provide. It can also keep them engaged longer by guiding 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.
A considered, well-designed layout motivates audiences to read further, scroll deeper, and make more sense of what they’re engaging with.
Ultimately, improving content comprehension through smart layout design can increase scroll depth, time on page, and conversion rate, while decreasing bounce rate and customer service inquiries (since people are more likely to actually find the information they’re looking for). Let’s take a look at how to do it best.
The basics of
effective layouts
To win readers, leads, and deliver on 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, and language level – when designing a piece of content for an audience.
That said, there are some patterns in the ways people consume text on the web that you can use to make smart design decisions. And keep your readers engaged. The Nielsen Norman Group (NN/g) – world leaders in research-based user experience design – observed more than 300 people using hundreds of different websites, and found that most people scanned content and made quick appraisals before reading – or moving to the next best thing.
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
While knowing that most users scan can seem discouraging, you can tailor your design to ensure the most compelling information gets to them fast. That then convinces them that it’s worth staying on your page to read more. Through further studies, NN/g observed four common patterns that users 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 move 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.
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 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:
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, they 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 a successful layout that divides a piece of content – long-form or otherwise – into easily digestible chunks. Those chunks must follow a predictable pattern within your digital publication and give readers exactly what they’re looking for, so they don’t quickly click away.
Optimizing layouts with
ease using templates
Unfortunately, you can’t just make one layout and be done. Smart content teams know they should always be testing new things, tweaking their designs to customize them for specific content, and running experiments to further optimize their pages.
That said, you can’t redesign your whole site for every article. Templates can be a powerful way to strike the right balance between speed and flexibility.They keep your team trying new things, while also making sure you’re publishing your articles on time. These reusable layout designs encourage consistently quick and easy content organization, as well as 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 – like tweaking and testing things like a new CTA placement, an animation instead of a picture.. 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 that it’s easy to include in other future articles.
TOOLBOX
When saving a Post Template in Setka, 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 you’re done.
TOOLBOX 2
Setka makes flexible but templatized design even easier with the use of Components. 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. These help you to customize layouts, while still keeping a streamlined production process.
Best practices for user-friendly layout design
4.1. Make your content the optimal width
for scannability
PRO TIP
The optimal column width for effortless reading is 66-75 characters.
Before you can think about the rest of your layout, get the basics right – which means ensuring the width of your content is ideal to help people scan the content and avoid overwhelming them.
Too wide and your content takes over the screen in a daunting way and can be exhausting to a reader. The extra width forces them to move their eyes dramatically across the page and sometimes making it hard to find the start of the next line. As James Craig explains in his book Designing with Type, “Reading a long line of type causes fatigue: the reader must move his head at the end of each line and search for the beginning of the next line.” This is especially hard when you’re trying to scan quickly.
On the other hand, if your lines are too narrow, it “breaks up words or phrases that are generally read as a unit, ” says Craig. On top of that, Baymard Institute explains, “too short lines also tend to stress readers, making them begin on the next line before finishing the current one (hence skipping potentially important words).”
Get your column width right and you can create a comfortable reading experience while also optimizing for F-pattern scanners. Another suggestion is to put the perfect number of keywords at the start of your lines, so that readers can quickly understand what they’re going to get out of your content.
4.2. Use a logical structure that clearly breaks
down content
PRO 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.
Layout isn’t the time to get super creative or avant garde, especially when it comes to the basic makeup of your article pages. When reading on the web, users have certain expectations about how content is generally structured, and they scan the page based on those norms.
Promise your audience a predictable, well-spaced content structure to make reading as easy and enjoyable as possible.
Breaking your content into different sections – especially standard ones like an introduction, key points, and a conclusion – helps readers more quickly understand what your page is about and find the information they’re looking for.
Then, you can add a layer of creativity on top of that, using elements like lists, dividers, pull quotes, and sidebars that work together to improve readability and make the overall article more interesting.
4.3. Establish hierarchies for easy scanning
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.
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 throughout to meaningfully break up a story for emphasis, visual interest, and easy consumption. This caters to eye movements following the Layer Cake Pattern, where readers scan headings before deciding on which parts to read.
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 allows you to create pre-set text styles for different uses on your page, such as 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.
4.4. Make content navigation a breeze
PRO TIP
Use anchor links to hyperlink your table of contents so people can click and jump directly to the section of the page they’re interested in.
Especially when your content is long, making it scannable isn’t enough to truly help your reader out. Instead, you’ll want to look for ways to make it easy for readers to navigate around your content and find what they’re looking for.
Therefore, you’ll want to include a table of contents at the beginning of any guides or long-form content that’s over 3,000 words. Not only does it provide a built-in summary of what a user can expect, it helps them quickly navigate to the content.
Another way to improve navigation for users? Make every bit of your page searchable! A reader in search of something specific, will often turn to the good old Command-F or Control-F function to search for keywords on a page, so make sure all your text – including things like pull quotes and tables – is searchable rather than static images.
TOOLBOX
Make your table of contents even more useful with the help of Setka’s “sticky animations” feature. Using this tool, you can select an element of your content and set it to “stick” to a certain point of your page, meaning it will stay in sight as the user scrolls down the rest of the page – and the reader can easily find the table of contents anytime they need it without having to scroll back to the top of the page.
4.5. Emphasize certain content to catch the eye
PRO 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 related illustrations.
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.
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 vitally important to make written content effective.
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 our ebook on imagery, whether you employ photos, illustrations, iconography, or something else entirely, incorporating a visual or design element every couple of paragraphs is key to retaining readers and keeping them scrolling onward through a story.
4.6. Provide additional information in helpful ways
When you’re thinking about the structure and layout of your content, you want to do everything you can to accentuate the most important information – while also preventing additional information from cluttering the page so that it’s hard to scan.
Making use of your margins and other smart formatting can help achieve this. For instance, you might have an important tip in a box in your margins to make it easy for someone skimming down the page to spot it, or an especially impactful quote pulled out of the paragraph and set in a larger font. On the flipside, you may decide to use sidebars or footnotes to pull additional information out of the flow of your main content so it doesn’t distract scanners – but allows readers to dig deeper if they want.
TOOLBOX
Setka’s footnote feature allows you to create in-line footnotes that look great but stay out of the way unless the reader wants them. Your footnote will look like a hyperlink on a bit of text in your article, and show up as a small popup box where you can include multimedia information. You get full control over the user experience, too, choosing whether your notes pop up when the user hovers or clicks on the linked word or phrase.
4.7. Create compelling links to encourage exploration
At the end of the day, good design means a better shot of directing and converting your users via a call-to-action – but getting them to just explore your site more, can also be a win. 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.
Besides encouraging engagement, these links can help users who are scanning, to better understand your content. “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.”
Make sure everything works on mobile
We’re sure you already do this, but before you publish anything on your site, always make sure to check what it looks like on mobile. Adobe shares that 73% of users say it’s important to their reading experience that the content displays well on the device they’re using, and according to WARC, almost three quarters of internet users are expected to access the web (and your content) solely by their smartphones by 2025.
You want it to be just as easy for readers to quickly find the relevant and interesting information they’re scanning for, even on a smaller screen, so take the time to check your layout on all devices and streamline it if something’s off.
TOOLBOX
Setka makes it easy to ensure your page is optimized for mobile thanks to automated mobile layouts that scale your site down perfectly, the ability to set custom styling for mobile audiences, and an easy way to view mobile previews.
Examples of successful layouts
Etsy Journal
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.They focus on the reader’s experience and in-product marketing in the hope 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.
-1.png)
-1.png)
-1.png)
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. Each format starts out the same, with a large headline at the 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.
Furthermore by Equinox
With Furthermore, luxury fitness company Equinox has created a beautifully branded editorial content destination that carries a 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.
-1.png)
-1.png)
-1.png)
“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 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.
-1.png)
Elizabeth Miersch
VP & Managing Director at Equinox
Miro Blog
Miro – a visual collaboration platform that powers 2 million users worldwide – relies on Setka to power its design-driven company blog. With pre-designed templates and components to easily brand, style and lay out everything that gets published, each article that goes up on the Miro blog has a special look to it – one that 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
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 help the reader easily and quickly understand the story.
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 bits of content in a way that boosts their potential impact.
Next steps
Ready to take your layout to the next level? Use our checklist below to evaluate how you’re doing in terms of designing for optimal comprehension, and identify areas for improvement – or let us do the work for you!
Reach out for a FREE 3-Step Content Makeover that includes a content design review, scorecard of your content and action steps for optimizing every part of your content – to more deeply engage your readers (and get better ROI).
Get a FREE 3-Step Content MakeoverLayout Scoring Checklist
CONTENT IS THE OPTIMAL COLUMN WIDTH FOR EASY READING – For main text columns, aim for a width between 66-75 characters.
CONTENT IS BROKEN UP INTO A LOGICAL STRUCTURE – Aim for clear and recognizable content blocks, like an introduction, key points, and a conclusion.
TEXT HAS A CLEAR HIERARCHY – Headers, subheaders, and body text should be distinct to make it easy for the reader to scan and find key points.
CONTENT INCLUDES A TABLE OF CONTENTS WHEN HELPFUL – Any long-form content over 3,000 words or guide-style pieces should include this—other than that, use your judgement.
CRITICAL INFORMATION IS ACCENTUATED – Use highlights, bold text, or other formatting options to emphasize the most important or interesting information within paragraphs, drawing the eye and helping scanners out.
YOU’RE MAKING USE OF YOUR MARGINS – Include sidebars to accentuate important tips, side notes, or other kinds of additional information.
YOU’VE GOT PLENTY OF LINKS TO RELATED RADING – Use “Read More” and “Learn More” links in margins and at the bottom of the article to encourage further exploration.
About Setka
Setka is a no-code design tool that makes it easy for anyone to build engaging, interactive and fast-loading content that converts and delivers results. Thousands of brands, publishers and media players from around the world have worked with Setka to enrich their reader’s experience and improve the ROI of their content. It’s also been recognized as one of 14 global WordPress VIP Technology Partners, by delivering innovative management and editing tools that easily integrate into any CMS.
Who is Setka?
Setka is part of the world’s most trusted content authoring and designing toolbox. All our Tiny tools solve big content problems – many of them are trusted and embedded in applications you use every day, from LinkedIn to Visa – and our TinyMCE authoring tool is downloaded one million times a month.
We’ve helped SaaS companies, large enterprises and content creation publishers build and scale their own business, as well as their users. Right now, there’s tens of thousands of market-leading applications powered by Tiny, globally.
Related Articles
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.