Landing pages quickly broke into the world of Internet marketing, pushing the usual sites. If earlier only 2 types of landing pages were used - single-page and multi-page, now landing subspecies are growing like mushrooms after rain. Let's look at the TOP 15 types of one-pagers with examples in order to better understand what you can work with today.
Landing "About us"
Let's start the hit parade with "About us" landings. Agree, it’s much better: instead of a boring text from a couple of paragraphs in the corresponding section of the site, create a full-fledged landing page. It's like a passport in a beautiful cover - it will tell you about the main advantages/tasks/prices and attract attention.
Below is an example of a wiki landing page that advertises a football school. There are typical one-page blocks here - “About us”, benefits, reviews. And all this allows you to make the functionality of vk. By the way, Petr Panda was one of the first copywriters in Runet who started writing texts for Vkontakte landing pages.
Landing on the main page
This is another leader among landing pages. You need to fit a lot of data on the main page - a short description, a mini-catalog or a description of several products, benefits, maybe even prices, contacts, widgets. So that the reader does not get tired of this array of information, you need to adopt the interactivity of landing pages.
The example below is a Landing Page that even kids will love. Therefore, he inspires confidence among parents, who will pay for the show. In addition to bright colors and photos of happy children, there are several types of scenarios, video reviews, etc. The rest of the subsections (“Learn more”, which describes the types of shows, prices, etc.) can no longer be performed in the form of a landing page.
And one more example
Landing Games
Such sites will not have a catalog, descriptions of brand pluses or a contact block. They are created for indirect advertising or just for the sake of brand recognition. Cool flash games will definitely be remembered by the user. If you want to increase the credibility of the product or warm up the target audience, take note.
For example, the game "Eat the Bomb", it does not particularly burden the user and is addictive. In addition, this is an unobtrusive publicity stunt by The FWA.
Original "404 not found" pages
Not only useful information can be framed creatively. Even a 404 page can be designed as a one-pager. If a user on your site went to the wrong page, a beautiful, funny or even playful one will definitely make them continue surfing the site.
Offer the user links to other sections of the site. So he is more likely not to close the page. The examples below show not only cool graphics, but also the ability to go to the home page or other pages of the site with one click. A trifle, of course, but success also consists of trifles!
Landings - Events
If you want the target audience to know about the event, make a landing page. , event programme, etc. it looks very boring if it is made of a solid canvas, and even bulleted lists will not help to keep the reader's attention to the end.
You will be able to stir up interest from block to block without losing the reader, show the program, speakers in the form of convenient blocks, emphasizing the advantages with icons. And the “icing on the cake” will be video reviews, photos from previous events with animated transitions and other multimedia techniques. And do not forget about triggers - a discount for registering before a certain date or for referring a friend will not be superfluous.
Below is an example of a long landing page that gives a lot of concentrated information, so you don’t lose your target audience and they reach the very end of the text.
There are many more subtypes of landings, for example, one-pages without a structure or with an auto-funnel, but above are the most frequently used ones. If you can design any page of the site for a landing page or replace a web resource with a one-pager, feel free to do it, because web users can no longer be surprised by text with a convenient structure, give them a modern design, animation and attractive triggers 🙂
The adjective "selling" is now used in all marketing tools.
And the field of web development is no exception, there we also constantly see catchy phrases in the style of “selling site” or “selling landing”.
But if we soberly evaluate the ideology of creating a high-quality landing page, then we will see that the word “selling” is a set of marketing knowledge in one site.
Which of them are important, and which are dust in the eyes, I will tell in this material.
Tired of lying
Often my colleagues, after another conversation with a client on the service, tell me an indignant phrase: “Nikita, we are tired of arguing with them. Can we do what they want?”.
The thing is that for a simple layman a good landing = a lot of chips. And if there are no original solutions on the site, then the site is automatically bad and not selling.
Everything! Boiled. Let's dot all the points (I speak in a dreamy voice). Once and for all, we will define what a real selling one-page site is, and what the nonsense looks like, which has only a name from this.
It will be both interesting and boring, but definitely useful. Let's start with a brief description of this term.
Selling Landing is a visually designed prototype made on the basis of marketing, copywriting, sales and psychology, with one goal and for a specific target audience at their level of awareness.
Each word above carries an exorbitant amount of detail, and it's not the chips you love to talk about.
These are deep ideas that are usually ignored during training due to their dullness and lack of a “wow effect”.
But we, like meticulous professors, will analyze each part of the seller separately.
Preparatory part
I would like to write ready-made elements and rules for a selling landing right away, but then the article would not be complete and honest.
A high-quality selling landing page is a project that is not only created according to all the rules, but also for which you are properly preparing.
Everything is like when launching a rocket: 50% of success is the correct determination of coordinates. So, what should be the selling site.
1. One product (target)
The first thing that defines a selling landing page is the presence of one and only goal. Why not two, three or more?! Everything is pretty simple.
This is the same if you come to buy a car in the salon, and I will sell you a house on Rublyovka in addition to it.
And also a subscription to a fitness club and a premium account on a dating site (although with a new car, an expensive house and a pumped-up body, the latter may not be useful to you).
You can now object to the fact that I exaggerate and no one ever sells everything in a row on one site.
You are partially right, only you see everything with a blurry look. For you, all your services or goods are by default needed for your client, but in fact, in 9 out of 10 cases (there are exceptions), a person comes for one thing.
I will tell you our sad experience and you will immediately understand everything without ambiguous examples. When we were just starting our career, we made ourselves a landing page for work in our city.
It did not have additional pages, and all services were placed on the main page (screen below).
We were guided by the idea that if a person needs it, then he himself will choose what suits him. And that was our biggest mistake.
Mistake
The fact is that a person, seeing all these services, can order them from us only if he was recommended us or he is a complete “fool”.
Because it's like buying a pig in a poke. No additional information, benefits and answers to questions.
And a pop-up window is not a solution here, this is too little to effectively convey information and close all objections.
For a long time, we have a separate landing page for each service, where a person gets from the route page.
Therefore, when you make a website, clearly define what product you are doing it for. And also periodically change the word “Product” to “Goal”.
After all, it is one thing to immediately sell on the forehead, and another thing is to close at the first (for example, calculating the cost), and only then sell. Mixing goals is also often not worth it.
2. Target audience
According to my internal calculations, this is 200 mentions on our blog about the target audience.
But for now, we'll break it down with an example, and start with what you need to know about your customers.
Moreover, there is a very big difference between who buys from you now and whom you want to see as your customers.
Having a list of potential customers in your head (preferably on paper), you need to decide for whom exactly you will make your site.
It is quite possible to combine several audiences into one. But in order to understand for sure whether this is possible or not, you need to determine their selection criteria, needs and fears. The diagram will look something like this.
The target audience Since in this article we are not learning how to create a selling landing page, but first of all we understand what a selling landing page is, I will show you, using the selection criteria as an example, that all people are different.
To do this, imagine that you are selling a nano weight loss machine. Offhand, your potential clients are all overweight people. But I have a question for you - are they similar in their selection criteria?
I hope you answered no. All people are different, as are their selection criteria. One is ready to pay any money, just to get a guaranteed result.
Another will buy only what does not take up much free time. And the third one sees nothing but low cost. This list goes on and on.
And even in such narrow niches, like building houses from timber, everyone also has different criteria (for better assimilation, watch the video below).
https://youtu.be/tKhP5geLfmY
3. Level of awareness
This topic is already more difficult to perceive, especially by ear. Therefore, you are lucky that you are reading and not listening on the phone as our managers talk about levels of awareness.
The point is that each person, in his own way, is at a different level of perception of the problem and solution.
In marketing, this strange approach is called "". But I will not load you with clever terms, but simply show you how it works with an example.
And for this, compare three identical and at the same time different requests to the Yandex or Google search string:
- What to build a low-rise house from?
- Brick or log house in the construction of houses?
- Construction of low-rise brick houses
All of these requests relate to low-rise construction and they are all in theory potential clients for construction firms.
But! The bottom line is that the first one completely lacks an understanding of what the house is being built from, the second has a question about which solution to choose, and the third is already purposefully looking for where to order a specific house.
For you, when developing, this means that in all cases there will be different texts on it and images.
For example, for the second type of requests, you first show why building a house from brick is better than from a log house (if you are doing it on the basis of brick), and only then you sell it.
In the third type of requests, without long declarations of love, you immediately offer your solution and to a large extent focus on the benefits of your company compared to competitors.
In everyday usage, many refer to levels of awareness as the temperature of traffic. It is divided into hot, warm and cold.
Everyone's favorites are hot, that is, those people who want to buy right here and now.
But I will try to write a short summary. The selling site, in parallel with the analysis of competitors, must go through the process of briefing the client.
On which, with the help of a special series of questions, everything that has accumulated and everything that directly affects the decision-making by the client is drawn out. After that All these meanings are distributed and create the skeleton of the site.
https://youtu.be/p3DhGn_AL1w
I will also not hide it and say that all agencies, by default, hold a briefing for the client.
But, as usual, I will reveal one more secret that makes the site selling. The briefing is oral.
A piece of paper will not be able to reveal the full depth, when a person during communication can ask clarifying questions and lead in the right direction.
This briefing takes 1-2 hours. And since I show all the cards, then get ready for the fact that if your company is new or there is nothing in it, then the “meaning packer” simply won’t be able to take anything and the site will definitely NOT sell.
Of course, at the end you will blame the site or the contractor for everything, but in fact, the whole point will be in the absence of your developments, benefits and features.
Important. The marketing agency offers additional benefits and solutions, but, as a rule, all of them do not globally change the situation.
To truly develop your packaging strategy and tactics, you need to conduct a deep analysis of the competitors, and remember, this costs more money and takes a different time.
Implementation
After you have done the preparatory work (the main one is written above), then the correct structure will automatically form for you and you can safely proceed to stretching the frame.
It is based on marketing, sales, design and psychology. I will not divide these spheres in a smart way, I will show the main points so as not to complicate the material.
1. Offer
As soon as a person gets to the site, the first thing he sees is your offer. In simple terms, this is your offer with the main benefits.
The main offer can be 4 levels. A distinctive difference is immediately visible in the examples.
The first level is when you simply write “Rent a car in Moscow”.
The second level sounds more interesting - “Rent a car in Moscow. Premium car park”.
The third level is very difficult for many and is based on the result - “Premium car rental in Moscow. Single copies will attract thousands of eyes from just 5,000 rubles a day.”
Can this be called the ideal proposal? Of course not. I came up with it in 2 minutes for this article.
But you got the gist and noticed how different the title on the first screen can be. Therefore, by default, we try to reach 3, and even better 4 levels of the offer.
Although, to my surprise, I saw great results on offers of levels 1 and 2, but these are more likely exceptions or a very well-thought-out strategy.
To create your offer, you need to understand your business very well and understand your customers.
To make your life easier (that's what we're here for), I recommend reading our article on this topic.
Better not just read, but immediately create and unsubscribe about the results in the comments.
2.
Sellability of the landing page is also created by a text master (copywriter). He does this on the basis of the prototype received from the marketer, which reflects all the identified meanings at the packaging stage.
This process is time consuming and is much more important than design. I'm sure I surprised you a little.
But this is the complete truth. A scary site with good text will do the trick. And bad texts on a beautiful design will lose a client.
Good text is underestimated and this is seen in all the actions of the client, who pays more attention to design.
But if you want to get a quality landing page, you need to be very careful with headings and texts.
Most likely, it will not work to do it yourself, since this is a whole art that you need to learn, and then fill your hand.
In addition to everything, I will give you the basic rules for copywriting on sites so that you can at least approximately determine how good the work is in front of you.
They are not reinforced concrete, there are exceptions to everything, but if several points are violated at once, then you should think about quality.
- Not a banal title. If you see the heading "Why choose us?", "About us" or another hackneyed variant that is used on dozens of other sites, then run as fast as you can.
Sites with banal eyeliners speak of their unconditional loss against the background of any other site.
- You approach The more headlines and texts on the site that begin with the word “WE”, the worse the site.
It is much more important for a client to be talked about him and for him, and only then he reads about you loved ones.
- Simple language. If the consumer does not understand anything in what is written on the landing page or encounters unfamiliar words.
In this case, this means the site also needs to be improved, because you need to speak an accessible language for the client, and not for you.
- On business. A one page should not have text for the sake of text, even if it is created for SEO.
If you can remove this text from the site and nothing will change, then you need to cut and shorten it.
- Specifics. Also, hackneyed phrases from the series “Individual approach”, “Flexible system of discounts”, “High quality” are a stigma.
The only thing is that this is allowed when the revealing text is 100% specific, and this phrase is just an eyeliner or headline.
As a separate item, I want to make such a criterion as “Working out objections”. It is implemented throughout the site in all elements of the text.
Namely, all typical objections of the client at the level of his awareness should be worked out during the entire site.
Checking this is pretty easy, you collect a list of all the objections from the selected target audience and then look at all if there are answers.
Smart thought. The selling site closes all objections, evokes emotions and argues that you need to buy from us.
3. Design
A beautiful site does not always equal a selling site. This is what you need to remember forever. In your material
The design of this page is unique, fully imbued with the brand's personality and unlike any other.
The peculiarity of this design is that all the elements are visible, but at the same time very neatly arranged. A simple but beautiful slideshow also attracts attention.
Simple but cute design. The advantage is that you can enter the site through Facebook without wasting time on registration.
An excellent example of the company's product demonstration. Every month the company updates the list of products shown on the page.
Understanding what is being sold on the site is not a problem thanks to well-structured content, beautiful slides, and large price tags.
The most successful sales pages necessarily contain clear and easy-to-understand product examples.
The hallmark of this design is simplicity. A simple menu and a bright slider go well together.
The page is well-displayed different sections. For more information, just click on the image you like.
The design is not overloaded with unnecessary elements, you can immediately see all the characteristics and prices of the product.
entertainment sites
Simple and tasteful. The purpose of the page is immediately clear - to view a documentary video.
The design of the page is very well thought out, it fascinates and literally hypnotizes. Great combination of colors and shapes.
This site is top notch. Brilliantly thought-out design and an abundance of interactive elements will not leave anyone indifferent.
This page for the Harry Potter franchise features familiar colors, phrases and names for fans.
This page not only looks beautiful, it is also very functional: lots of interactive elements, integration with Google Maps, use of tabs.
Even after the redesign, Uncrate does not change its tradition of placing all sections of the site in a convenient top navigation menu.
This site showcases the power of graphic design and web development. It is better to visit it and see for yourself.
A great example of a “tile” design that allows you to stylishly arrange a large number of blocks of content.
The visual component of this site is amazing. Vivid images instantly capture the attention of users.
Jay-Z knows exactly how to have fun. On his site, articles, images, and other content are presented as interactive tiles.
This design uses natural tones that go well with the main issues raised on the site.
Portfolio Landing Pages
This page is once again dominated by images that literally come to life when you hover over the mouse.
This example has a very interesting combination of colors. Moreover, all the elements on the page use the same background structure, like a tree.
The “old school” style is very successfully used here, the design of each element is thought out to the smallest detail and is unique. Thanks to the endless scrolling on this site, you can enjoy such beauty for a long time.
A clear and thoughtful design helps the page convey the main information to visitors in the most effective way. The color scheme matches the brand and shows the style of the designer in action.
The page is an excellent presentation. Each banner is dedicated to a separate project.
An example of an unusual tile design.
This page is dominated by typography. The use of different fonts helps in conveying ideas.
The design is concise and concise. On the page we can see everything we need: both the portfolio and links to other sections.
Icons and nothing more. A good example of minimalist design.
The portfolio page displays the most important thing - examples of work.
Retail
The page contains many photos of users, which can be easily flipped through with the help of scrolling and hovering.
Large bright photos of the company's product make you want to drink a can of cold beer.
Nothing distracts the visitor from contemplating the most beautiful hours.
The highlight of this site is the slideshow at the top of the page, which showcases mouth-watering culinary delights.
The font and graphics are perfectly combined, creating a unified perception of the site. There are only three menu items, and it is impossible not to notice them.
Elegant style, high-quality images, excellent presentation. Nothing distracts from the main elements.
Toyota made a Pinterest-style site for Camry lovers. Here you can find a lot of photos, articles, statistics.
Despite the fact that this page fits the height of one screen, it has many interesting interactive elements and unusual details.
The page design fully reflects the style of the brand: colors, fonts, pictures are immediately associated with this particular company.
The design is made in soothing light colors, this color scheme is ideal for the proposed product.
This site is like a book that captures your attention with an unusual plot and illustrations.
The floating red button in the middle of the screen does its job: you really want to click on it.
A large number of sites that are in RuNet are very monotonous, and it is always necessary to create something new, unusual, attracting attention. This time I decided to write an article not just about another effect on the site, but to show how these effects can be combined within one large project. This is very important so that your site does not look like a series of animations appearing pointlessly from different sides. I want to present to your attention a selection of the 10 best interactive Landing Pages that you should pay attention to.
About where to start when studying the creation of sites, and in particular landings, I told in a small mini-course:.
So, here is a selection of 9 landing pages where you should draw inspiration:
Compilation - Best Interactive Landing Pages
1 fixed group
An excellent version of the site, where you can’t even move the mouse, as you will immediately see the distortion of the block with content in response. Behind slowly "floats" space. Transitions also cannot leave you indifferent, because they all occur with an interesting effect, and it seems that each of the blocks is "cut" into two halves.
2 Fubiz
On this site, nothing appears when you scroll, but it is very elemental here: drop-down lists, color changes, the appearance of additional elements and descriptions. No harsh effects, everything is done in the same style. I recommend paying attention to the effects, some of them can be applied to your projects.
3 Vimeo
This project should already be familiar to you - this is a professional video hosting. But this page talks about the possibility of editing video directly from a mobile device. But I want to focus on the effects that happen when the page scrolls. First, the background image in the header is reduced, and then appears in the phone. It attracts a lot of attention, doesn't it?
4 Black Negative
A distinctive feature of this site over all the others is its non-standard scrolling. As you can see, it is horizontal. Also, the movement occurs by dragging the content to the left. But what is even more impressive is the number of effects in each block: , , as well as the vertical scrolling of the blocks. The video in the background is a little confusing, but still everything is done quite original and unusual.
5 Super Top Secrets
Here I want to draw your attention not to the hover effects, but to the background. After the site is fully loaded, when you move the mouse cursor, streaks appear on the background, as if on water. Also, streaks are created on click, and this effect makes an excellent impression. You won't see this on every site.
6 WE AIN'T PLASTIC
In the process of scrolling, various icons and headings appear (drawn) on the page. Without realizing it, you begin to look at the drawing process and wait for what will appear there at the end, thereby reading the text that has been drawn. If you are interested in how this effect is created and you want to create the same effect on your website or landing page, then study these articles: and.
7 ANTON & IRENE
8 BLITZ
What attracted me to this site was the hover effects. Although the site was created in a modern minimalist style, 3D objects are very beautifully combined here: drop-down postcards, the movement of objects on a postcard. Also pay attention to
