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.
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.
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:
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.
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:
The F-shaped pattern
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.
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.
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.
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!)
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.
Remember that color can function as an organizational tool as well as a branding/personality tool in a design.
Good formatting encourages visitors to engage with the content throughout the page and find the most important information faster.
White space, or negative space, is a tool designers use to draw attention to the most important UI elements.
Picking a style that matches and highlights your brand will help you communicate your message more effectively. (Note the embrace of the Z-pattern!)
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.
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.
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.
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!