The main problem of most modern landings - they all seem to have been made with a carbon copy. And where is the creative, the fire, where design frenzy?
In this compilation, I collected interesting pieces and unusual effects. Some of them were made by developers and web designers of Texterra, and some were found in Runet open spaces. Not without examples of disgusting design and outright shizy - at the end of the article you will meet with the killer hamster and Snow Maiden with a bucket.
See, be inspired, apply your favorite ideas in practice, mix them with yours and do not forget to conduct A / B testing - this is the only correct recipe for creating killer landing pages.
- Two buttons CTA
- Specific figures (results)
- Convenient answer form
- Customer reviews
- Demonstration of results
- Parallax effect
- Hover effect
- Split layouts
- 3D graphics and augmented reality
- What the customer wanted
- What we did
- Interactive selection of interior and furniture paint colors
- What the customer wanted
- What we did
- Unusual and ordinary preloaders
- What is a preloader and what tasks it solves
- How we improve landings with preloaders
- How Landing Works
- Features of the implementation
- Proper design
Usually on one-page use the standard application form with several fields. Most often, the client needs to specify the contact information - first name, last name, mail or phone. But in some difficult areas better to open the topic in more detail. This is how it was done in Texterra: in the form of a landing page at dellservers.ru, the client can select a module, parameters, server tasks. May reset values if something went wrong.
What is it for? Landing owner will get his leads anyway - even if there are only two or three fields in the form. But the client will be interested to dig deeper. Do not just order, but choose your own option.
Two buttons CTA
On the landing page of the task scheduler wunderlist.com/ru - two calls to action at once, which reinforce each other: "Create a free account" and "Download Wunderlist". Users click on both links, the conversion grows, and the landing page does its job perfectly well.
Specific figures (results)
This is not a new, but still working feature. Show your clients what you have achieved in numbers: this is clearer than the abstract phrases “we are the best,” “we have hundreds of completed projects,” and so on. Look at the landing page of smartprogress.do: you can immediately see how many people have already joined the project, how many goals they have set, how many achievements they have accomplished.
Faceless patterned landings - br-r, what could be sad! Revive your one-page, add fire, interest a potential client. For example, on the Texterra website creation page, there are photos of employees who are directly involved in this. The visitor enters and sees: aha, not abstract developers will be involved in my resource, but quite alive Svyatoslav, Polina, Artyom and others.
Convenient answer form
On many landings and sites you can ask a question only through the form. This means you need to specify the name and surname, leave the phone and email. Sometimes in general you have to enter captcha and codes - horror! It is clear that this is done in order to get leads. But there is another option - as on the landing "Cerebro Target." If you are registered in "VKontakte", you do not need to fill in anything - take it and write. And the client is comfortable, and the owner is good - the contact is left, you can continue to work.
You can ask clients to tell about their impressions and publish the received texts on the landing page. But the snag is that the visitor will not check in any way - real responses or fake ones. It is better to go ahead and convince visitors of this. On huskypark.info, which developed VelikaPlaza, the words of Instagram customers with links to their accounts are provided. All honest - go and see.
Demonstration of results
Hipstamatic is an application with which you can apply various filters to photos on your mobile phone. Landing is effective, first of all, because it depicts beautiful examples of photos processed in this application. So the user immediately sees the result and quickly makes a purchasing decision.
Parallax scrolling is a special effect due to which background images move a little slower than those in the foreground. Here's how on the site valenkivodka.com. Proscroll Landing - a bottle of vodka will follow you from top to bottom, slowly moving. Magic bubbles all over the background make you remember the generous New Year's feast. Mentally turned out!
In general, the animation functions a lot. Moving pictures and objects attract and hold the user's attention, direct their gaze to the most important elements of the landing page (button CTA, timer, widget, and so on), partially replace the text. One example is on madwell.com. Follow the link - the chains move. And not only that they move - they listen to every movement of the mouse.
Attention, the question: what function does this animation perform? You can reply in the comments to the article.
Let's not talk banal: author's illustrations are able to revive the most rotten template landing, everyone knows that. It is important that the pictures meet the theme of the landing and the expectations of its target audience. See: on the website of healthy baby food marcandfisa.com pictures are stylized as children's drawings. An accurate hit in Central Asia - moms and dads who buy products, should go.
Another example on the satellite-express.ru landing page. The illustration perfectly complements the headline: "The main thing with diabetes is to find a balance."
Landing offer changes depending on user requests. Scored "sell the cottage" - read on the site about the cottage. Scored "garage" - about the garage. We wrote more about this technology in the article about how to make multi-owning ourselves.
Here is an example of multilending for the company Oviont, which we did.
The client planned to make separate landing pages for three products: office automation tools.
On the first screen multilending there are brief descriptions of products. Each block with the description is decorated individually. The user selects the appropriate product and proceeds to the detailed description.
For each product we have made detailed sections. The total amount of content on multi-labeling is approximately 30 thousand characters. Each page has detailed sections:
- description of the functionality;
- additional modules;
- frequently asked questions about use;
The section "Tariffs" on the page of each product works differently. For example, on the Kontur.Ekstern tariff page, a user can read descriptions of three tariff plans, select one of them, and subscribe to one or two years.
The use of multilending in this case is justified, since the visitor immediately evaluates three offers and chooses the right one. If you represent each product on a separate landing page, some users will not find the one you need right away and will not place an order.
When you hover the cursor, the pictures change color, grow, zoom in and out. This makes the landing unusual and draws attention to its individual elements. If you hover the cursor on the line "Photos and chat with huskies" - a photo of a dog will appear. On the line "Family arbor-grill" - the interior of this arbor, and so on.
Split screen, or split screen - a very effective design technique. The point is to draw the user's attention to each part of the screen - so that the information is not exactly lost. Thus, you can advertise two products, two services, two important advantages and so on. Here is how it is done on the baesman.com landing page.
3D graphics and augmented reality
Landing is designed for the Qubi application. This game is for kids 3+ years old and adults. The essence of the game is simple. In the first step, the user, according to the proposed scheme, glues a real paper, cardboard or wooden cube.
Then he installs the application, opens it on the smartphone and "looks" at the cube through the device's camera.
On the screen of a smartphone or tablet cube comes to life. The user plays in the three-dimensional version of "Snake", "2048", "Labyrinth". In this case, you need to manage the game using a real cube. To control the cube with two hands, you need to use a special stand for the smartphone, which can be assembled by yourself.
Three-dimensional model of the cube can be seen in the illustration (gif).
What the customer wanted
The client asked to make a landing, which emphasizes the feature of the game: the use of three-dimensional augmented reality. In particular, he wanted to see the effect of moving faces of a three-dimensional cube, the active face of which is inscribed on the screen of the visitor's device.
What we did
For the final version of the landing, we made a more realistic version of the cube. In contrast to the working version, in the final cube rotation takes place from the outside, not from the inside. The three-dimensional feel is enhanced by the headers animation.
Landing is fully adaptive.
Interactive selection of interior and furniture paint colors
The unusual landing page "DSK.Color" is the ability to independently choose the color of furniture and interior items using an interactive palette.
The company "DSK.Color" paints any surface in different colors. You can order the coloring of furniture, household appliances, bicycles, musical instruments and other items. The client can choose any color.
The most popular service is the painting of furniture and interior items. It accounts for about 80% of the client's work.
What the customer wanted
The client asked to make a bright and memorable Landing "with a call to paint everything around." He had ideas to make images of furniture in 3D format, so that the visitor "could twist and see the colored object from different sides."
What we did
We offered the client an idea: to give the visitor the opportunity to independently choose the color of furniture and interior items.
To do this, the landing page was offered an image of the room in which the visitor can paint the main objects with a pop-up palette. Based on the selected colors and items, the user can calculate the cost of services. The first prototype looked like this.
The client really liked the idea, so we made a working prototype of the landing page. On it the main part looked like this.
We agreed with the client to leave the possibility of painting the table, chairs, doors and kitchen units. These are the main items that the company paints.
After agreeing on the prototype, the designer and layout designer joined the work. The first one sketched all the items in svg (this is a graphic format). The second has rolled and added a color palette to the svg areas. After that, a modal window was implemented. With it, the user can double-check colors and objects and send a request for the service.
Unusual and ordinary preloaders
With the help of a preloader or spinner, any landing page can be made more convenient and visually attractive. In this section we will talk about preloaders and look at the examples of these elements created by Texterra experts.
What is a preloader and what tasks it solves
A preloader or spinner is a sign that appears on the screen before the page loads. You see these elements daily when using the Internet. Below is an example of a preloader.
The preloader solves a practical task: informs the user that the page is loading, and also replaces the visually unappealing picture of the download. This needs to be clarified.
Due to the technical features of the browsers, pages of sites are loaded unevenly. During loading the layout can float. If the page loads a few seconds, not a split second, the user watches an unattractive picture for a while.
How we improve landings with preloaders
We create unique preloaders, including animated ones. Here are some of our works.
For Qubi landing, we made a preloader that repeats the navigation menu. This allows the user to understand the principle of managing the page before it is loaded.
On the Levellen Interiors website we used a preloader in the form of a company logo. This is an additional element of site branding.
On the Whalenet landing page you can see a spinner in the form of a turquoise rectangle.
The Parielle site has a classic circle shaped preloader.
On the Landing Projectto used a preloader in the shape of a rectangle.
The appearance of the preloader is usually discussed at the design stage of the landing page.
On the landing page of the Fidel business center, the opportunity to look at free offices and apply for rent is unusually implemented.
How Landing Works
Landing provides information about renting premises in a business center. The main secret of the landing page is in the "Offices" section. Here the user can see the availability of free offices on each floor of the building.
When you hover the cursor on a free office, the "Details" button pops up.
Pressing the button directs the user to the page with information about the office and its photos. From this page you can leave a request for rental of premises.
Features of the implementation
Our designer drew the forms of office space, the drawings were made in the svg format. These drawings are superimposed on the floor plans. When the site administrator in the control panel notes that the office is free, the script includes displaying a picture on the plan and the ability to go to the page with information and order form. When the administrator notes that the office is busy, the script disables the image of the picture on the plan.
In this example, there are no complicated technical chips and design effects - the whole landing takes a beautiful picture: background, colors, delicious photos of Astrakhan caviar. One-page astrahancaviar.ru - A good example of how a designer wants to purchase a product. And eat immediately!
Finally, about sore - a few examples of terrible landings. For contrast, feyspalma, impotent agony and all that. I will not describe what is wrong in them - I suggest you solve these problems yourself. Ita-a-ak ...
Write in the comments that this is not the case with these landing pages :-) Well, if landing board development is needed, fill out the form. Let's call, we will consult, we will help to decide on functionality.