The website homepage design of the mid-’90s was a total nightmare by today’s design standards, but during the web’s infancy, it was all we knew. Bright turquoise hyperlinks floating in outer space seemed like a good idea at the time.
Two decades later, things have changed. Today’s homepages are focused more on drawing visitors into the marketing funnel than on dazzling them with otherworldly graphics and colors that span the visible spectrum. Building high-converting experiences in minutes is now possible because of landing page builders.
In that respect, homepages are becoming a lot like post-click landing pages. But there are still some major differences between them. Keep these design differences in mind to build highly effective pages.
Website homepage design vs. post-click landing page design: What you need to know
1. post-click landing pages and website homepages should be built for different users
Okay, so the chances you come across a homepage that looks like Microsoft’s mess from 1995 are slim. But why?
Kara Jensen, Creative Principle at BOP Design, explains:
"It can be easy to get caught up in the concept of a website and forget about the end-user. A successful website isn't just a lovely visual piece; it's a portal for attracting your target audience and giving them the information they need to decide if they want to become a new client."
In creative professions like web design, it’s not uncommon for designers (and even clients) to become so attached to the end product that they forget about who they’re making it for: the visitor.
Twenty years ago, that spacescape littered with hyperlinks may have looked cool to Microsoft’s designer, but was it something the user cared about? Probably not.
How about that sideways “FAQ” button on the second homepage? Was that something designed with the user in mind? No.
Before designing any page, it’s essential to ask yourself, “What is the goal of this page?” — or, even better, “What’s the goal of a user that reaches this page?”
What's the goal of the page
On your homepage, that goal is impossible to predict for every visitor. New prospects or returning leads might want to know the story behind your business, while others will head straight for plans and pricing information. That's why homepages include navigation bars and multiple outbound links that offer visitors easy access to any content they might want.
Take the Zoho CRM product homepage for example, on which navigation allows customers, developers, and prospects to learn every little detail about the tool:
Post-click landing pages, though, have only one goal: to convert a visitor on an offer. When users navigate to your post-click landing page from a promotional link, it's because they're considering claiming the offer you advertised. That's why, on your post-click landing page, it's your job to include only the information your visitor will need to determine whether that offer is worth claiming.
Here’s a post-click landing page built by the same company:
Major design differences can be seen above the fold, even at a glance. The lack of navigation on this page keeps visitors focused on the offer they clicked through to evaluate. The headline on the post-click landing page is far more benefit-oriented than the one on the homepage.
Below the fold, the homepage features screenshots from the app filled with links to other pages, while the post-click landing page features specific numbers to prove the effectiveness of the tool.
Homepage:
post-click landing page:
Scroll even lower and you’ll see the Zoho homepage uses small paragraphs of text that drive visitors to feature pages of the website, while the post-click landing page substitutes that for social proof:
Homepage:
post-click landing page:
On the homepage, we counted more than 80 links to other pages that weren't CTAs. On the post-click landing page, there were two. Still, two is too many. The ratio of links to CTA buttons (aka your “conversion ratio”) on your post-click landing page, should always be 1:1.
Let’s take a look at another example, this time from FreshBooks. First, their homepage, above the fold:
Now, one of the company’s post-click landing pages, above the fold:
They look nearly identical, right? Almost, but notice on the post-click landing page that the headline and CTA have been changed. Most notably, the navigation menu has been removed to keep visitors focused on evaluating the offer.
Several portions of the homepage below the fold are the same. Both feature social proof, the same benefit-oriented paragraphs of text, and a lot of the same graphics. But look closely, and you'll notice that, on the post-click landing page, all secondary CTAs have been replaced by the "Try It Free" button.
Here’s a screenshot from the homepage:
And here’s one from the post-click landing page:
Don't let the paradox of choice kick in
Remember the paradox of choice: The more options you have, the harder it becomes to make a decision. That’s why it always takes longer to order in restaurants with more extensive menus.
In the restaurant that is your post-click landing page, CTAs are your menu items. Only offer your visitors one to choose from. FreshBooks does that with the "Try It Free" call-to-action throughout the page.
On their homepage, FreshBooks offers visitors multiple CTAs, which is okay. These "secondary CTAs" like "Learn more" help prospects find the answers to their questions, and if they're designed right, they won't even divert too much attention from the primary CTA.
Can you spot the primary call-to-action and the secondary call-to-action on this page?
See how "Try It Free" pops more than the colorless "Learn More" buttons below? The designer of this page wants to draw the visitor to the "Try It Free" button, but they're still giving prospects the opportunity to learn if they're not ready to try. And that's the most significant difference between a website homepage and a post-click landing page.
The homepage focuses more on informing and empowering the visitor, while the post-click landing page focuses on persuading the visitor.
The goal of every homepage visitor we can't know for sure. The goal of the post-click landing page visitor, though? It's to make a decision. Build an anatomically correct post-click landing page to help them do it.
2. Homepages are following the minimalistic lead of post-click landing pages
While their specific goals might be different, in one basic way, post-click landing page visitors and homepage visitors want the same thing. Sergie Magdalin, Chief Web Design Officer at Webflow, explains:
"Designers worldwide have realized that people visit websites for their content — whether it's raging tweetstorms, thoughtful long-reads, or the latest "user-generated" meme — and that design's ultimate role is to present content in an intuitive, efficient, and "delightful" way.
That's one reason for the shift away from skeuomorphic design toward "flatter," more minimalist design approaches…"
Back in 1995, design best practices and standardized web heuristics had yet to be developed. Website creators had little research to base their designs on. That's how the internet ended up with hyperlinks floating in outer space.
Page design started to change
As more businesses and consumers turned to the web, the focus became on smoothing the transition from the real world to cyberspace. Skeuomorphic designs, like the trash can icon, for example, made recognizing elements and their function on the web easy.
There was one big problem with them, though. They tended to clutter web pages. And that was interfering with what visitors to them wanted: content. Today, “flatter,” minimalist design elements — shadows, basic type, and bright colors, for example — present it to visitors in a simple and straightforward way.
Those elements are also a staple of one particular kind of page: the post-click landing page. As a business's elevator pitch on the web, a post-click landing page contains everything a visitor needs to evaluate an offer quickly, and nothing more.
That’s what makes them so effective at converting. They emphasize content with a simple layout. And now homepages are starting to do the same. Take a look at this Autopilot post-click landing page:
Pretty similar, right? Click through and scroll down to see that their designs are similar even below the fold.
If you need another example, look back up to the FreshBooks homepage and post-click landing page above. Today, no matter the web page, its focus is on delivering content instead of distracting from it.
3. Both post-click landing pages and website homepages must guide visitors with a visual hierarchy
Even since before the internet, people have been viewing pages the same way. Early eye-tracking studies showed that readers first enter a page through an image or headline on a written page, then glance down the left side to look for bulleted or italicized text. Body copy was read last.
On the web, this has become known as the F-shape pattern:
To get readers to view your most important content, you’ll need to create what’s called a “visual hierarchy” based on the way people like to read. It should look something like this:
- Use attention-grabbing images and a big headline to grab your readers.
- Divide your page’s content with subheadings.
- Use bullet points to draw attention to elements in a list, like features and benefits.
- Use body copy within those subheadings and bullets to elaborate briefly.
The hierarchy should also be based on familiar web design principles. For example, logos are always in the upper left of a web page. Links are either underlined, or a different color from the rest of the text. Don’t try to reinvent the way people read on the web. An MIT study once showed that people prefer page layouts that are familiar to ones that attempt to stray from longstanding best practices.
Example
Here’s an example of a good visual hierarchy:
The image and headline catch the reader’s eye. They move down to the subheadline, “More than 40,000 Organizations and Subsidiaries Worldwide...and Still Growing.” Below that, bullet points convey important information about the software. To the right, a form collects prospect information, and a brightly colored button completes the conversion.
Example of bad visual hierarchy
Here’s an example of a bad visual hierarchy:
The page has a headline, subheadline, bullet points, and even an infographic — so what's wrong?
Well, people read left to right, and because the form breaks the left margin, the text begins at the form. That means as far as readers are concerned, this page starts at the right edge of that form. And that means the most critical part of this page — the form and call-to-action — gets completely lost.
Visitors will read the subheadline, the bullet points, and glance over to the infographic on the right because it's in their line of sight. However, even with the help of that visual aid, it's unnatural for readers to look left at the form when the rest of the content is to the right.
Here’s a homepage that creates a good visual hierarchy (click here to see the full homepage):
An image and a headline draw reader attention, then several subheadings with bulleted content briefly describe the benefits of the service. Then, a video testimonial speaks to the power of Upwork. And below that, a call-to-action invites the visitor to join the platform.
Here’s an example of a bad homepage visual hierarchy (click here to see the full homepage):
At first glance, this homepage looks like it follows the rules of a good hierarchy. An image with a headline overlaid grabs visitor attention; then, a subheading introduces some bulleted icons. Below that, the company showcases awards and prominent customers. But then, below that?
Nothing. The user has to scroll back up or hunt through the website footer to take the next step. Every element on your page should guide your visitor to the entrance to your marketing funnel. There should be a CTA at the end of this page.
Website homepages and landing pages have more in common than you think
All this talk about website homepages vs. post-click landing pages might have you thinking they're two completely different animals. In some ways, they certainly are. But at the core, they're the same.
Creating post-click landing pages has never been this easy — until now. So, sign up for an Instapage Enterprise demo today.
