At Reboot we have helped a lot companies and startups to create their landing pages. A landing page is the cover letter of any product or service, it is the place where we show who we are and what we do and, most importantly, we direct users toward our main goal.
All landing pages have a goal that ranges from capturing information from our potential user (capturing leads, waitlists, etc ...), subscribing, signing up for an event, starting a free trial or purchasing a product.
When we design landing pages we must bear in mind the goal being pursued, because we must build everything else around it: copywriting, structure, images and visual design. Today we are going to review 5 key elements that a good landing page must have through known cases.
A good landing page tells a story in a simple way, with clear CTA, teases continuation while it does above the fold.
The story is the first thing we must have before designing our landing page. Without a story, how will we be able to choose the right copywriting or the right structure. Good landing pages are designed around a story and never the other way around.
When there is no other option, it is ok to use a template and adapt our story to the sections and structures that are given to us. But if we have the opportunity to work with designers and developers, we must take advantage of it so that all elements of the web work in favor of the narrative.
A good story should be simple. We don't have much time to capture the attention of our users, so our story must be able to be summarized in a short headline that invites the user to continue discovering.
Most landing pages have two goals. The common goal is to tell a story and the main goal is to get something from our user: an email, a subscription, a purchase, etc ... It is very important that we choose only one main goal per landing page, otherwise our story loses focus, it becomes confusing and the user ends up not knowing what the next step is.
Figma is a great example of how to tell a story in a few words. Figma knows that its great power lies in its multiplayer mode, being a totally cloud product that allows teams and clients to connect to design in real time. This is brilliantly summed up in the headline: "Where teams design together."
On the other hand, the main goal of the landing is to get you to try the tool and the CTA they use reinforces this by highlighting the free element.
Good landing pages should be simple. There is nothing wrong with keeping things simple. Most products and services are complex, but a landing page can't afford to be. We have a very limited window of attention when someone lands on our site and the complexity scares away any curious.
How do we create simple landing pages? Much of the work begins with the narrative. Again, tell a story. When we have managed to distill the essence of our product into a story that is easy to understand as well as persuasive, we must surround it with the rest of the elements.
One of the main elements that usually add complexity to a website are the images or the style direction. A highly detailed image generates noise in the rest of the composition. If we have no alternative, since we have a technical product and we want to show how it works, we can use abstractions or simplifications of the interface in such a way that we only highlight the important element.
Other aspects that contribute to improving the understanding of our content is limiting the use of fonts up to 2 and avoiding using sans-serifs that are very similar to each other. Plus, having a good scale of typographic sizes and weights, so that our content can be clearly scanned and prioritized.
Robinhood is a great example of simplicity. They use a 3-word headline "Investing for everyone" and perfectly summarize their value proposition just below "Commission-free investing, plus the tools you need to put your money in motion."
All this is accompanied by an illustration where they show a working app (GIF) and the Robinhood card with which you can pay. The composition is simple - by using an illustration they simplify elements and reduce the noise that may exist in a real image - and reinforce their visual identity.
CTAs are one of the most important elements of our landing because, as its name suggests, behind them is usually the goal we pursue. "Buy now". "Free 14 days trial". "Subscribe". "Let me know when it's ready." The copy of our CTA is key, so it is best to avoid generic CTAs and try to introduce persuasive elements such as "free", "no card required" or similar.
It is as important to select the copy well as to highlight our CTA. Normally our CTA will be associated with an accent color that contrasts with the rest of the elements and generates the call to action. We must be very careful with the use of accent color and reserve it only for CTAs and other relevant elements such as links, otherwise we will not establish a clear hierarchy and no element will stand out above another.
Webflow is a perfect summary of everything we have mentioned. The copy is not limited to inviting us to start using the tool, but they add "it's free" to make it more persuasive.
On the other hand, they limit the use of accent color to the main CTA of the hero section and use a less saturated version for the one in the navbar and thus establish a clear hierarchy between them.
If we focus on the above the fold section of our landing page, that is, the first visible section that we see before scrolling, it is especially important to generate a tease of continuation. And, please, to achieve this, let's stop using arrows or icons that represent the scrolling action.
Our user must understand that there is more content than is shown and, although this may seem very obvious, a bad design can generate a disconnection between the header and the rest of the sections of our landing.
The best way to create tease continuation is through the images and elements that we use in the rest of the sections. For example, if our product is a SaaS, we can show only the upper part of a dashboard and leave the rest below the visible area. This will let the user understand that there is more content waiting and that they must scroll to discover it.
Slack generates that tease continuation through real shots of its product. In this case we can see how a section of the chat is hidden below the fold and invites us to continue scrolling to discover it.
And all of this... above the fold
Everything we've discussed above - a good story, simplicity, clear CTAs, and tease continuation - should be present above the fold, the first section a user sees when they come to our page. Our header must already tell a story or, at least, the most important part of it, we cannot afford that someone has to read our entire page to do so.
The header is the most important section of our landing page, many times it will be the only one that we will have the opportunity to show the user. Therefore, it must contain all the ingredients that we have been discussing. Let's see some more pages that are an example of this.
If you need help creating a landing page that tells a story, builds trust and converts, at Reboot we would love to hear about your project.