free consultation
Explore ideas and solutions to help you increase your landing page conversions. See how the greatest have executed their landingpages.
From this article you will learn:
A landingpage is a page used to collect leads. It should contain only the most important information about the promoted offer. The structure and design of this type of sub-page should be simple and clear without overloading with unnecessary navigation elements and graphics that cause distraction from the main task for which the landingpage was designed. See also how to create and what is a landingpage.
By focusing the user's attention on the substance, they are less likely to focus on other elements and areas of the site.
The technical landing page should be prepared as a dedicated subpage for a specific offer, promoted service in the style of the page.
Opt for simple design and readability
A user visiting the site should easily find the basic information and message of the landing page. It is important for him to be able to find the tasks he has to perform on it, for example: where to click to order a demo or try a product online.
Landing page navigation
As shown by A/B testing studies done by HubSpot prez, better conversions are achieved by landing pages that do not have navigation to the site's subpages in the main menu.
Catchy and condensed content
The landing page should not be overloaded with too much information. Its task is to convince the viewer to the presented product/service and perform the appropriate action. The text should be valuable and condensed to a few sections.
It is worth remembering that the arrangement of the text on the project, i.e. the graphic form is of great importance, because if we take care of its interesting presentation we will gain interest in the text section itself as a visual asset.
Header section
Large headlines containing the target slogan and slogan are the basic element of a landing page. It is worth taking care not only of the visual aspect but, above all, of the contrast to the background and readability.
Form and Call to Action
An enticing CTA significantly different from the typical learn more will work better. However, we need to make sure that the content of the action button is in line with its purpose.
The old principle of less is more says that the less the better. It works well in this case as well. Don't force the user to fill out a stack of fields if they just want to see if there's anything to go on at all. Simplify login and registration.
Login and registration
If possible give the user the option to register through social networks. The era of confirmation emails is over, and often no one wants to do the extra work of activating an account for a yet untested demo system.
Social proof
One of the most important sections confirming the reliability of the service / product /. Usually in the short form of a leader with reviews or logos of trusted companies.
Active contact numbers
A common mistake on pages as well as landing pages is inactive contact numbers.
Google Analytics tracking codes
A very important like to escape element. Without it, we have no way to track the effects of our landingpage and conversions.
Mobile version
A perfected mobile version is the key to success. Related to this issue is not only the correctness of the display, although even with this, unfortunately, sometimes varies, but mainly it is about the loading time. The best possible loading time and performance of the landing page should be maximized.
If you already have a landing page check it : gtmetrix.com and developers.google.com/speed/pagespeed/insights/
A/B testing
Using Google Analytics and, for example, hotjar.com heatmaps, we can easily test and see how specific changes affect users visiting it. In the examples below, we will observe how popular and well-known companies are introducing different versions of their landing pages and what they are testing.
Does the form entry work
A common practice is not to check from the user's side whether it is possible to sign up for the form.
Also, it is a good idea to equip the sub-page as well as the entire site with anti-spam protection, e.g.: camtacha
Below are examples of major companies creating their landing pages. We will analyze the advantages and disadvantages and show why they convert.
The view of the landing page is a clear layout and a clear concept of section construction. The landing page is a modern layout and minimalism, the application of which resulted in a clear and space-filled design.
The use of a video banner in the first section of hosts inviting people to their homes inspires confidence and warms the portal's image.
Registration / login subpage
Instead of a classic subpage, we get a lightbox with a form that appears on the page.
Lacks panache and a typical sub-page to possibly measure traffic from Google Analytics.
Advantages:
A very interesting idea is to make a mobile version. The CTA button remains 'glued' to the underside of the browser and is always accessible.
Dropbox needs no introduction. In its characteristic style made landingpage in which large fonts and vector graphics dominate.
The section above the fold / before the scroll / contains:
Importantly, it is worth noting the lack of a main menu, and the focus on the CTA button : Try Free.
Benefits section
Divided into 3 columns and presenting the most important advantages of using Drobox
Social proof section
Horizontal slider containing logos of companies that have used the service.
Offer section
In which the most important packages are presented with a basic description and a dedicated CTA button - try it free for 30 days.
Footer
Including a full menu.
Registration subpage
The color and spirit of the landing page is definitely missing. Very simple and minimalistic.
Advantages:
The popular Netflix service is a rather simple visual landingpage. Visually, the treatment consists of a centrally placed CTA to sign up against a collage of movie screens blending into a dark background. Stylistically and graphically rather from the previous design era.
Sections available below the main ie: after scrolling is a presentation of the advantages of the portal.
Visual assessment
Visually, the whole thing looks very average. The sections are devoid of CTA buttons.
The entire landingpage which is also the homepage ends with a FAQ section, not sure why, with the font used possible to read on the screen of the colleague next to you. Before the footer a repetition of the CTA.
Login/registration subpage
Maintained in the tone of the whole page. We will not be surprised by anything special here. Stylistically slightly unfortunately previous design era. Plus for logging in via FB.
The Spotify service is a well-known portal to every music converseer. It uses quite interesting usability solutions. Visually also very well everything into a coherent whole.
Banner section
A short section containing the most important information, i.e.: main message, explanation and guarantee.
The whole thing is finished off with two CTA buttons.
Reason to Believe section
This section presents the most important advantages of the portal in the premium version.
Package selection section
This section clearly describes the packages for the user to choose from. The only worry is the lack of a suggested package
Registration login page
A fairly simple subpage with nothing distinctive in terms of graphics. From our side correct but nothing more. No flair, and as subsequent examples show, you can more creatively use the potential of this subpage.
Monday.com is a platform for companies and organizations to work in the form of task shuffles. It facilitates work planning and intra-team communication, helps manage resources and time.
Visually
Very modern layout and UI layer. Original idea for the login / registration subpage.
Banner section
In place of the typical slider, the main slogan and its explanation (confirmation) of the basic mission of monday.com was used. The graphical element is made up of tabs - a reference to the functionality of the system / the possibility of marking tasks /.
A section of reasons to believe
In general, nothing new appears in the structure of the landing page as in any presented here. However, in the case of monday.com, this section is impressive.
Benefit sections
Below the banner section, analogous to Netflix, are placed the benefits and main advantages of the portal, but in this case visually it looks much better. It's interesting, interesting, and it's a pleasure to read through the short paragraphs accompanied by screenshots of the system (also designed very well).
CTA and footer again
Concluding the work, the UX and UI designers offered a renewed desire to use the portal in an option that we do not see before in the banner section . This is where they offer 14 days of access for free without a credit card which doesn't happen often. Not only that the appetite increased after learning about the advantages of the system, but we also received very good terms for the demo version ;)
Register or Login
The masterpiece here is the way the system's login subpage is made.
Advantages:
Another modern landingpage we included in our list is the codecademy website.
Advantages:
Above all, the design attracts attention. The vivid colors and light style give a sense of freshness and creativity of the UI designer. The layout of the landing page is very clear and contains all the necessary sections.
Banner section
A two-column layout with the main keyword and benefits already visible upon entering the page on the right side. The whole thing closes with a CTA button.
We encountered two versions of the landingpage - a version with philly buttons accessible from organic search results, a version with black ones accessible from adwords.
The why section
It's a tile with the students' visenuk and a card reveal for the PRO version.
Here, too, the CTA was repeated.
Sekcja powodów, by wierzyć
This section is preceded by a bar with logos. The target layout used here is a 4-column layout in an interesting graphic form with a truncated border / a continuation of the style from the section with tiles earlier /.
Reference section
Quite a high reference section, too high for us. We have the impression that codecademy has put on a warming image by using a large slider with students and their feedback in the next section.
Package selection section
A rather low-access section, which we have the impression is lost among other sections containing more light and space. On the plus side, the package recommended
Registration / login subpage
Clear, maintained in the graphic style of the entire subpage. Large space of the right side balanced by the left side with a description of the benefits.
Advantages:
Digital Agency Hauerpower
Copyrights 2010-2022
