Web page layout 101: website anatomy every designer needs to learn

Here’s a quick guide to building a conversion-boosting web page layout.

Tomas Laurinavicius
August 23, 2018
Web design

Designing a web page that pulls off the near-magical feat of combining aesthetic beauty and the punch of your message takes a good mix of art and science. The secret lies in giving yourself a little creative freedom — while sticking to a proven structure.

Sound impossible?

Don’t worry, here’s a quick guide to building a conversion-boosting web page layout.

Step 1: Think through the user journey first

Doing your research and thinking about the web page structure before you even start sketching ideas is of paramount importance. As you do your research, make sure you’re focusing relentlessly on your potential customers’ expectations. After all, designing a website that provides an excellent user experience is next to impossible without knowing the target users’ expectations.

And a website that fails to provide great user experience has much less chance of attracting a decent volume of traffic. There are outliers with careless UX still attracting tons of users — see: Craigslist. But companies with better UX like Uber, Airbnb, and Slack stand a much better chance of reinventing their industries.

There are many ways to research user needs and expectations, but interviews and card sorting are probably the most popular methods. Once you gain a deeper insight into what your target audience expects from a page, you can start working on the information architecture.

Card sorting exercise to define content and information architecture
‍A card sorting exercise can provide you with unique insights that will guide your decisions when designing the overall structure of your website and its navigation. (Source)

Information architecture (IA) is all about organizing information on the website in a way that’s clear, intuitive, and sensible. Think about your own experience browsing the web: landing on a web page that is poorly planned and doesn’t prove its relevance in a matter of seconds is frustrating and likely makes you hit the close or back button immediately.

Good IA will create a hierarchy that emphasizes the most important elements and keeps visitors engaged. Without a solid “skeleton” to build on, you’ll be setting yourself up for failure.

Navigation is one of the key aspects of IA that you should consider early. It doesn’t matter how gorgeous your website is if users can’t find their way around it.

Good navigation has three main characteristics:

  1. Simplicity
  2. Clarity
  3. Consistency
Decibullz website uses breadcrumb links to tell visitors where they are
‍Here’s an example of breadcrumbs in action (above the main product photo) on Decibullz shop.

Your goal should be to guide users to the information they’re seeking in the fewest clicks possible. You achieve that with clear, concise, and useful language in your navigation and a consistent design throughout your site. Adding a backup feature like breadcrumbs can also greatly boost the usability of your site, helping the visitor understand their location on the site at all times.

Asos website meganav with clearly categorized links
ASOS does an excellent job at streamlining their users’ shopping experience with a clear navigation built specifically for their target audience.

Step 2: Get the visual hierarchy right

Strong visual hierarchy makes the difference between a site that guides users to the action you want them to take and a site that just looks nice. Humans are incredibly visual beings and when it comes to consuming content online, we often scan the page to quickly discern whether we’ll find what we need before diving in.

As a designer, you can make sure the most important information is seen and draws users in. Without clear visual hierarchy, all the content on the page seems equally important, making it overwhelming. Various design principles help create a strong visual hierarchy.

Use a grid

Grids provide a powerful way to create connections between different elements on the page and give a sense of order to your layout. The grid shows how all the elements interact with each other on the page and ensures you use a clear structure to accentuate the right information.

Design for natural scanning patterns

There are two main eye-scanning patterns that people use to quickly scan blocks of content:

  1. The F-shaped pattern
  2. The Z-shaped pattern

As a designer, you have a lot of control over where users will look when they’re scanning your page, so it’s crucial to set up the right paths for them to follow. We often come across the F-shaped pattern on text-heavy websites like blogs and news sites.

It’s important to note that the Nielsen-Norman group — the people who discovered this reading pattern in 2006 — have recently revisited their research and clarified some of the misconceptions surrounding it: the F-shaped pattern is actually bad for users and businesses and should be avoided.

If users are scanning your website in an F-pattern, it means they’re showing a strong preference to the left side of the page and are missing important content on the right. To prevent F-scanning, you must format the content on your site in a way that directs them to the information you consider most important.

Here are a few ways to guide visitors to reading your most important content:

  • Include the most important information in the first two paragraphs
  • Use headings and subheadings
  • Bold important words or phrases
  • Group small amounts of related information visually
  • Use bulleted and numbered lists frequently

Strive to do the hard work for your users to minimize distractions and discourage them from taking shortcuts.

Heatmaps illustrating the F-shaped reading pattern
‍Examples of F-shaped reading patterns. Source: NNgroup.

Designing to discourage F-shaped scanning lends itself well to text-heavy websites like blogs and news sites. The Z-shaped pattern is better suited for sites that have minimal copy and a few key elements designed to grab the user’s attention. Landing pages often make use of the Z-shaped pattern to guide users down the conversion path.

Basecamp website with Z-pattern layout illustrated
‍This website layout is great when you want to draw users’ attention to a specific CTA or content on the page. Source: Basecamp.

Visually prioritize key elements

Use the five essential building blocks of design to construct a visual hierarchy that’s clear at a glance. (But keep in mind that for visitors with vision disabilities, order of content trumps all of these!)

1. Size

It’s important to correlate size with importance in any design — the most important information should be the biggest on the page and demand the most attention.

MailChimp homepage uses large type to highlight key features
‍For example, MailChimp uses neutral illustrations and large, bolded heading to advertise their most important feature. Source: MailChimp.

2. Color

Remember that color can function as an organizational tool as well as a branding/personality tool in a design.

Made uses color to highlight their flash sale
‍Made uses color to grab users’ attention and promote their flash sale. Source: Made.

3. Layout

Good formatting encourages visitors to engage with the content throughout the page and find the most important information faster.

Think with Google uses a card-based layout
‍This publication by Google uses card-based design to organize the content on the page and encourage their main goal: subscriptions. Source: Think with Google.

4. Spacing

White space, or negative space, is a tool designers use to draw attention to the most important UI elements.

Apple's iPhone X landing page uses ample whitespace
‍Apple is well-known for its use of white space. Source: Apple.

5. Style

Picking a style that matches and highlights your brand will help you communicate your message more effectively. (Note the embrace of the Z-pattern!)

Shopify has made illustration a strong part of its brand
‍Shopify relies on bespoke illustrations to add personality and friendliness to their product. Source: Shopify.

Apply the rule of thirds

This principle requires you to divide your design into thirds (three rows and three columns) to see where the lines intersect and figure out where the design’s focal points are. It’s an effective technique to kick off your website’s composition and choose the positioning and framing of elements. Using a grid is the easiest way to apply this technique to any design.

Concept for National Geographic site using rule of thirds
‍National Geographic site redesign concept by Gajan Vamatheva.

Step 3: Focus on your call-to-action buttons

No website is complete without call-to-action buttons (CTAs). In fact, marketers would say they’re the most important element on the page and all efforts should be focused on getting people to click through. Strategic use of well-designed CTAs can greatly improve the flow of the page and guide the user toward conversion, so it’s critical to get this right.

Here’s what you need to keep in mind when designing your buttons.

Ensure your buttons look clickable

This may sound obvious, but you’d be surprised how often designers ditch clarity in favor of creativity or some whacky new trend (yes, I’m talking about you, ghost button). To make sure users understand an element is a button, use the standard visual cues to help them determine clickability, such as shape, shadows, and highlights.

Visage landing page with ghost buttons
Using only ghost buttons can confuse the visitor as to what they should do next. Source: Visage.
HubSpot landing page with ghost and standard buttons
Here’s an example of applying visual hierarchy to call-to-action buttons. Note how the ghost button is reserved for the secondary action. Source: HubSpot.

Clearly label all buttons

Buttons are there to tell users what they should do next. If the copy is vague, people with think rather than act. Be clear with users about what will happen if they click through. Here’s a clever example from Netflix.

Netflix call to action: Join free for a month

Visually highlight the most important CTAs

There are three important aspects to designing a distinct CTA: color, contrast and location. Use eye-catching color with enough contrast to help primary buttons stand out — and place them in prominent locations where users can’t miss them.

What else would you like to know about layout?

We’re eager to dig deeper than a 101 on this vital topic — so let us know what else you’d like to learn!

Tomas Laurinavicius

I’m a lifestyle entrepreneur and blogger from Lithuania helping aspiring entrepreneurs build businesses and live better. Follow me @tomaslau.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free

Designer

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.