How to make a perfect landing page – developing a landing page design on the example of successful sites

There is nothing more exciting to work on a website than when all the experts join forces to create the perfect new landing page or home page for a web project. Designers, illustrators, marketers, programmers, and even the strategic management department – all work as a team. During development, some SEO details are added, the customer acquisition strategy is optimized, icons are designed, etc.

Today we want to share tips for creating a landing page, which will certainly come in handy in solving this problem. The current article is a translation of this note. Yes, and in general, there are quite a lot of useful resources on the topic on the Internet: in the blog we have already written about OnePageLove and Land Book services, where you can find the best examples of designs in a niche, there is also a publication about landing page optimization and many others.

However, here we will tell and show you the best way to find suitable sites for inspiration when developing a landing page, and then apply all the best in your projects.

Content:

• How to find sites that have a lot to learn from.
• Analysis on the example of three options.
• We use the learned information.

Find companies with similar tasks

A great trick for finding inspiration is to find companies that are solving problems similar to yours.

Think about what serious task you are trying to accomplish? – and this should be about branding, not about product development and improvement. Think big!

That is, instead of a straightforward approach:

“Pug owners using retractable leashes find them too long for a cafe.”

Try something like:

“Makes you feel comfortable in new places.”

With such a radical change in mindset, you will stop scouring the websites of Pet Supplies and move your gaze to AirBnb, an online home search and rental marketplace.

Example # 2. Let s say your company is trying to solve the problem of a lack of common communication tool between developers, designers, and the business. If we consider this area, then the leading projects with similar aspirations and goals will be: Airtable, Intercom and Slack.

All of these companies have a wealth of experience working with a wide audience to find new ways to showcase existing offerings. They try to grab the attention of users with effective visuals and vibrant color palette, just like the creators of this site.

New trends in landing page design

Coming back from the futuristic 2018 a year or two ago, the popular design trends of that time with full-screen images and auto-play videos are immediately reminded.

Slack, a corporate messenger that developed the messaging application, chose a photo of a Mars rover as the main image for the landing page design.

Or, for example, a solution from Airtable: can you find something more attractive than an interactive database? – yes, these are children using an interactive database.

Now let s look at the future:

Airtable – February 2018

Intercom – launched on February 5th, 2018

Slack – August 2017

Training on the example of successful sites

What makes a landing page perfect? Unfortunately, there is no simple formula or simple answer. However, based on the three options above, we can say with confidence – these companies have a team of talented designers who are constantly improving the look of projects, as well as specialists in attracting clients who optimize the site s work.

Let s take a look at the four main elements that appear at the top (visible) part of the page and form the main impression for the user.

1. Block header

For landing pages, the site header design may differ from classic corporate and other web projects.

Basic observations on the header:

• It is very attractive and voluminous.
• Remains at the very top of the screen (except for Intercom – there is a fixed menu when scrolling).
• 5-6 links.
• There is an element for a call to action (CTA). The best option from Intercom is the CTA button combined with a request to enter an email address.

2. Title and subtitle

What immediately catches your eye:

• Short title: 3-5 words.
• The text should be clear, dark in color and in bold.
• The subheading contains the following information: who we are, what we can do, what are our advantages.

3. Main illustration

Gone are the days when images of motorcycles rushing through a tunnel were used to demonstrate fast content management. Now is the era of funny graphics that make it easy to browse the site and work with its content.

Airtable

• Football-like movements and containerized plants are really cool.
• An artist in a cap and a girl with a laptop are a new generation team.
• Squares, triangles and circles are some kind of abstract components of a technical product.

Intercom

• The style is not for everybody, but it demonstrates well links to messages and open letters.

Slack

• Simple and straightforward.
• Shows the human side of abstract ideas such as file sharing.
• Allows you to get information through interaction without using an open-plan office stock photo.

4. CTA optimization through registration request

This is a good approach. It shows how easy it is to create an account and speeds up the user experience. Intercom has an especially interesting implementation – additional useful options are indicated in the space under the Email input. If you have more fields, be sure to read our tips on how to improve your online registration form.

Some design features at the bottom of the page

Earlier we focused on the top area of ​​the screen, which is initially visible to all visitors. However, it is worth mentioning the design features of the rest of the page, which is no less important when developing the landing page / main page.

Main details:

• All information is presented rather briefly.
• Client logos are designed in calm gray tones.
• Repetition of similar call-to-action (i.e. signup request) fields.
• Sufficiently voluminous footers.

Summarizing all the useful tips received

As a result, we got the following design (developed for Reqfire.com):

Here s what I learned as inspiration for the landing page design from the projects discussed above:

• The header can be made similar, but with more free space.
• For the heading, choose an effective and solid font, for example, Libre Baskerville.
• Main Image: After reviewing the Slack version, it would be a good idea to try and create an illustration that demonstrates the functionality of your application / service, but without using a screenshot.
• Bonus: you can also add videos or simple animations.

Flattering reviews, copy attempts and improved conversion rates – this information will be good proof that the launch of the new version of the site design was a success. If visitors linger longer on the page to view illustrations and videos, you have achieved your goal.

Who has something to add about the development of the landing page design (thoughts, advice, tips), write in the comments.