Web page layout: website anatomy every designer needs to learn

Have you ever wondered how to design a web page layout? Here’s a quick guide to building a conversion-boosting business website.

Tomas Laurinavicius
January 30, 2020
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 for any business website.

A 3 step process to designing a business website layout

Step 1: Think through the user journey first

Doing your research and thinking about the home 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 business 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 a much less chance of attracting a decent volume of traffic — after all, UX and SEO go hand-in-hand. 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.

using cards to design website content layout
A card sorting exercise can provide you with unique insights that will guide your decisions when designing the overall structure of your website design 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 bluetooth headphones
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 bar 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 navigation bar
ASOS does an excellent job at streamlining their users’ shopping experience with a clear navigation bar built specifically for their target audience. 

Step 2: Get the visual hierarchy right

Strong visual hierarchy makes the difference between a website layout design 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 a 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 design. 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.

heatmap showing f-shaped 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 home page
This website layout is great when you want to draw users’ attention to a specific CTA or content on the page. Source: Basecamp


Design interactions and animations without code

Build complex interactions and animations without even looking at code.

Subscribe to be a Webflow Insider
Thank you! You are now subscribed!
Oops! Something went wrong while subscribing.

Visually prioritize key elements 

Use the five essential building blocks of design to construct a visual hierarchy that’s clear at a glance: 

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 marketing platform page
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.com home page
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.

This quarterly 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 ipad page
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.

airtable home page
Airtable relies on bespoke illustrations to add personality and friendliness to their product. Source: Airtable

Apply the rule of thirds

This principle requires you to divide your design into thirds (three rows and three column layout) 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.

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 web 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 old home page
Using only ghost buttons can confuse the user as to what she should do next. Source: Visage


typeform home page
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: Typeform

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. 

net

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

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.