To create a successful one-page website for selling your own product, a smart solution would be to first study working landing page examples. Is it easy to create such a page yourself? Let's consider what distinguishes beautiful and actively selling landing sites.
Landing - what is it? This is the name for a one-page website where customers are offered some kind of benefit: a discount, a promotion, unique products. Landing does not always aim to sell products. Sometimes such pages contain an application form, by filling which the client gets into the database or orders an information call from the company manager.
Most companies have already appreciated how much landing sites help in marketing. One page solves one problem. Landing pages should not be overloaded additional information. Their main goal is to motivate customers to respond to a call to action.
The advantage of a one-page website over full-fledged online stores is the specificity of the offer. A clear statement of benefits helps to successfully convey to clients the benefits of cooperation (purchases, applications).
Of course, all Internet users have seen such pages. Practice shows that this is really effective marketing tool. In conditions of general information overload, landing pages pleasantly delight customers with minimalism, style and clarity of wording, and the absence of unnecessary advertising and spam.
A beautiful landing page is an important online marketing tool
Examples of the most beautiful landing pages
What makes a landing page beautiful? At first it may seem that there is no clear answer to this question, because each user understands beauty in his own way. But in fact, a landing page is a tool for which there are quality standards. To see successful examples, visit the following sites:
- Designed to move.org;
- Evr.st;
- Grooveshark.com;
- Hipstamatic.com;
- GiftRocket.com.
The best landing pages have a similar structure and features. People like different website design options, but the success of a landing page doesn’t lie in pretty pictures. Key features of attractive one-page websites:
- minimalistic but stylish design;
- clear wording, no vague phrases, a lot of specifics;
- list of benefits (the client immediately understands what he will receive if he responds to the offer);
- convenient application form, without unnecessary information ( The best decision- only the buyer’s name and contacts);
- the presence of a call to action, an incentive to respond (“call”, “find out details”, “request a call”);
- honesty (landing page should contain only relevant and factual information);
- optimization for search engines(the presence of popular queries in the text of the site raises it in the search engine rankings).
The article presents examples of sites with good landing pages. Study them and develop your own one-page websites for products and services. We can highlight some general recommendations. The page should be harmonious and attractive to the eye. Do not use acidic or irritating shades. It is advisable to limit yourself to 2-3 primary colors and stick to pleasant contrasting tones. All images on the landing page must be of high quality.
Harmonious color combinations, clearly described benefits and convenient placement on the screen are signs of a successful landing page
Examples of actively selling landing pages
A sales landing page is the goal of most online marketers. It is important to make a one-page website not only beautiful, but also attracting customer traffic. What features will help turn an ordinary landing page into an actively selling one?
The key feature is the obvious benefit. The faster the buyer understands that he is being offered truly favorable and fair terms of cooperation, the faster he will make a purchase. Therefore, in the offer of the page you need to indicate the cost of the product or service. If possible, you need to compare it with competitors’ prices and be sure to focus on the difference (for example, “5,000 rubles cheaper than competitors”).
A good option would be to use a question-answer format. Users often search the Internet for information in the form of a question. For example, “how to choose a dress for prom.” Use popular wording in the landing page title and you are guaranteed good traffic(if, of course, the site really offers a solution to the issue).
All important information should be placed on the first screen: the faster the user grasps the essence of the offer, the faster he will respond
A selling landing page most often works without a scroll - that is, without scrolling down the page. All favorable conditions and the application form are placed on the first screen. It may sound strange, but some users really don't like scrolling and want to get the gist of a sentence at a glance. Why not give them this opportunity?
Conclusion
Creating a landing page is a complex process in which monotonous technical work combined with creativity. Of course, there are many examples of successful one-page websites and general useful recommendations. But you shouldn’t blindly imitate and use repeatedly repeated templates. The main thing in a landing page is not the appearance, but a clearly formulated proposal.
Without a strong design, an online business will not “take off” - or, at least, will not open up 100%. Appearance landing pages are dedicated to the category of our blog - . But today we will look at successful examples of product landing page design.
Pay attention to the role of the “main image” or “hero image” in each example - it lays down the selling potential of the landing page.
We hope these cases inspire you to test your own.
1.
The website of the designer clothing and accessories store Hebe Boutique is an example of harmonious, thoughtful design. The main image immediately attracts attention, and the product photographs are of high quality. The typography is also pleasing: the font thickness is larger than standard, which, together with high-quality photos, gives a good visual image.
2.
This eCommerce site has a nice design theme. The developers abandoned the traditional white background, which highlighted the resource from similar ones. Like the example above, Ticklers use great photos. Large, rotating images show how clothing fits and looks on real people in real conditions.
An interesting format for social proof - test it on yours.
3.
After the transition, it’s immediately clear that this is a women’s clothing store. The combination of high-quality women’s photos with information blocks about discounts, promotions, delivery conditions, etc. is noteworthy.
4.
The Ada Blackjack online store sells bags and backpacks. The design is simple and is based on good product photos. This layout does not distract from the main thing - the products.
5.AMBSN
AMBSN is an eCommerce site for selling clothing. Given the high competition, the owners decided to stand out with a bright design - fortunately, the style of clothing allows this.
6. RYDER
Another way to stand out is through custom design. An example is the clothing and home goods store RYDER, with a very creative layout (see menu in the screenshot). It’s worth testing how this affects landing page conversion.
7.
It is believed that benefits should be indicated on the main page ( free shipping, promotions, sales, etc.) and post photos of popular products. Or just a product display, as a last resort. But looking at Morepork's website, it seems like the company is selling itself rather than its products.
Perhaps the tactic is justified - it’s worth testing it to find out and make sure.
8.
Dick Moby sells glasses, and the brand’s landing page has a lot of strong design moves:
- abstract symbols on the title banner create a relaxed atmosphere, inviting you to explore the assortment;
- high-quality photographs of goods;
- There is no background in the photo with glasses - nothing distracts from the product.
9.
The Horse captivates with its originality. The home page design is built on square blocks. The first one contains delivery information, the rest contains an Instagram photo of the product. It's interesting because it's unusual.
10.ESQID
The brand sells false eyelashes. They are in the center of the composition, and thanks to enlarged photos of the product (and its packaging), the product attracts attention from the first seconds.
11.
The Mahabis design reflects an important aspect of the offer - high quality. The user can rate the smallest details- this inspires confidence and encourages purchase.
12.
Poketo is an example of competent placement of color accents. Although there is a lot of bright colors on the main page, in general, the design is not oversaturated with them. The site is rather light, pastel, and bright spots of color only attract attention.
13.
Jackie Smith is another “bright” eCommerce site. As in the example above, the visual balance is well maintained. Rich colors important elements are highlighted - photos of products and blocks with promotions. Everything else is black and white.
14.
Grovemade's design bridges the gap between home page and a showcase - the site sells wooden stands, stationery and accessories. Much of the screenshot below is brand products. The placement of the product in the photo is carefully thought out, and the non-standard - somewhat rounded - font complements the artistic concept.
15.
In the Muroexe online shoe store, products are well arranged and presented in a neat grid. The design has a lot of empty space, which creates a light effect and improves the user experience.
16.
The first screen of the Greyrock online store contains only photos. It shows furniture that can be assembled easily and without tools (a real USP). A girl with a book and the inscription in the title complement the composition, as if saying: “Take it easy, order furniture, quickly assemble it and relax.”
By the way, this landing page is made on a very simple layout. In the LPgenerator template gallery you can find many similar ready-made pages, and the extensive one will allow you to adjust the selected layouts without special knowledge:
17.
The simplicity and beauty of Helbak ceramics are successfully reflected on the brand’s website. The simple outlines of the products are complemented by the empty space around the images.
18.
Another online store in the “Nothing extra” style. Although the design does not have any special features, it does not leave an impression of incompleteness. Everything is in place, nothing distracts from the list of goods.
19.
Website with simple design, without numerous product photos. At the same time, the layout is built on “pure” black and white shades, creating an advantageous contrast with the photo of jewelry.
20.
Online store THING IND. offers custom products for the home. The concept is reflected in the design of the landing pages. The site uses a dark blue font instead of black (including for navigation). The designers created a relaxed atmosphere, which is not typical for the eCommerce industry.
21.
Soap Co. they present the product in such a way that it “sells itself.” There are no advertising elements - only photos and text. A great example of minimalism in design.
22. RSVP
Rich, stylish design. There are many elements, but attention does not wander. Even the corners are occupied - they contain the brand abbreviation.
23. Ratio
The design conveys the essence of the offer: high-quality coffee equipment. Each product has its own landing page, with a list of functions and benefits. The design pleases with high-quality photographs, thoughtful color scheme, competent play with typography.
24.
The Frank Body online store offers modern skin care products. Since the target audience is young people, the site design is appropriate. The effect is achieved with a monotype font and pastel colors.
By the way, from now on you no longer need to open Google service Fonts for receiving third-party fonts, because now fonts are connected directly from .
We have added all the fonts from the Google Fonts collection to a visual gallery, and all you need to do is select the appropriate font, click on the connect button and use it for new or existing texts on the landing page.
25. Rest.
Rest. sells stationery self made. The design concept conveys the solidity and orderly life of wealthy people - this is achieved with good product photos and short selling texts.
Selling sites. What it is? Every second person will say: “Of course, these are landing pages!” They are one-pagers, they are landing pages, they are selling pages.
I will not convince you otherwise, because there is a great deal of truth in these words. Therefore, in this article we will analyze which landing pages can be called the best and why.
That's why I started looking for the best selling sites. Where to see their examples, ratings and how to evaluate them in principle. After all, a one-page website was originally invented in order to increase company sales.
Lately, a lot has changed. The ones that were relevant before are gone, websites began to be made of higher quality, more beautiful, with a lot of animation, pictures and various enticing features.
Evaluation criteria are questionable
By what principle to evaluate? Which ones to take as a basis? How to rank the TOP 10 sites?
Where can I get websites for the competition? All this makes it difficult to create a real and honest ranking of the best sites.
In addition, we do not know how many sales companies make through such sites. You can’t call them and ask: “What is yours?” or “How many applications do you receive from?”
I am sure no one will answer such a question, since either no one believes or will say that this is confidential information.
Yeah, we're daydreaming! So I made it simpler. I started searching and viewing ratings and selections of the best landing pages. And guess what?
The site takes a long time to load, and this can greatly affect the bounce rate. That is, people will leave it faster than they see the offer.
2. Workshop “Dinero”
This is not a website, it’s a whole film about one “character” – a wooden wallet. If it had cost 1,000-2,000 rubles, the site would have failed.
6. Project “Big Drying”
Most women (their target audience) have heard about the “Mad Drying” project. Their launch ads are flooding the internet. And this is not surprising when millions are invested in traffic.
But without a good website, you won’t be able to get tens of millions in revenue, so their website is also included in our TOP.
Project “Big Drying” It is clear that the creation was approached thoroughly, as the texts alone are worth. But they just made one big mistake - they didn’t put a call button at the very end.
And this affects the outflow of visitors, due to the fact that they do not see the logical closure of the whole story.
7.
We ourselves use the Bitrix24 customer relationship system. But since our topic is not “,” the Megaplan system website exceeded all expectations.
Through it they conveyed all the main points of their system, after which you understand that this is the best thing for business.
CRM “MegaPlan”
Our wish for improvement is to add a video review of the system, since all direct competitors have it. And also make clearer calls, namely, replace the headings (not buttons) with “Start using for free” or something like that.
By the way! If you want to use it as your CRM system, then I advise you not to forget the promo code “Megastart”. This way you will receive a 10% discount on your first purchase and 14 days of free use.
8. Bank for entrepreneurs “Tochka”
Another landing page from the bank. He wins a prize for his originality. This page is sent to your friends as a referral link.
To enhance the effect, we would add a few more blocks that put pressure on the logic. Since now the site is more focused on emotions. In some cases this could be the right decision, but since we have a choice of bank, we can’t do it with emotions alone.
Bank for entrepreneurs “Tochka” 9. “Goodfit” gym equipment
An interesting transition of the site from black to white with blue. But in addition to an interesting design solution, this landing page uses an excellent title game.
In this design, they are not a connection to the block, but independent elements, after reading which you can already create a complete picture.
To complete the package, a video presentation on behalf of the CEO is not enough. Surely he is in excellent physical shape.
And it would also be great to add numbers to the cases. That is, how much does the hall the client received cost? But this is not critical, but desirable.
Equipment for gyms “Goodfit” 10. Shopping center “METROPOLIS”
This is by far the best shopping center landing page I've ever seen. The colors are beautifully chosen, the main meanings are conveyed, and the usability is excellent. This is all immediately visible when you go to this landing page. So click and explore.
Although I'll put in my 5 cents. I, of course, understand that people who are familiar with this center should get to this site. But it will also attract people who will be seeing it for the first time.
This means it was logical to make a small description (a few words about the company) so that the visitor would immediately know where he was and what awaits him there.
Shopping center “METROPOLIS” Only Russia!?
Yes, in my review I mainly concentrated on the best one-page sites on the RuNet, although there are many worthy, good options in the world.
Moreover, the most important thing (and also the most surprising thing) is that the landing page in the burzhunet is used not only by small businesses, but even by large businesses.
For example, one of the most famous taxi services in the world, Uber, took the following option as its main website - a multifunctional landing page or, as they also say, a multi-page landing page.
This is a site consisting of many landing pages. Almost a multi-page site. But still a landing page.
But I don’t specifically post their landing page here, because they are different. Let everyone say that we are repeating everything after the West, but in this case I think differently.
We Russians are different. We have a different type of thinking because we live in a different country.
For example, an American has almost no fears in his head that the company will take the money and dissolve. Since they have everything protected for ten rows, it costs only one PayPal.
Here, in Russia, this fear is at the forefront. That’s why they have few blocks on their website that convince people to trust the company, while we have a ton of them.
I can give dozens more arguments that we will have different and better landing pages. Therefore, I apologize, but their options will not be here.
Better enjoy our Russian solutions. Model our texts and blocks. And in foreign sites just take good ideas for design.
Briefly about the main thing
Now that you have looked at all the applicants, I do not urge you to blindly focus on them, but it is definitely worth looking at the best landing pages for example.
At a minimum, you can take an idea from someone for an interesting animation. Or, for example, one of the creators knows theirs perfectly and uses it throughout the entire landing page. In general, it’s worth studying, drawing conclusions and adopting.
And by the way, if you are looking for ideas for your first landing page, you can try to create it yourself. So you will understand what you need and that it is not as simple as it seems at first glance.
Use for this, for example, PlatformaLP , Tilda , Bloxy. And only then, we are waiting for you to visit us for joint development.
Hello, dear readers of the blog site. Today we will talk about such an important thing as landing page, which is very often called a landing page in a bourgeois manner (from the English landing page - landing page). What is it and why is it so important?
Let's dedicate the current article to answering this question, and also consider in detail those points that are very important when creating landing pages, and consider all of this on specific landing examples page and the techniques that the best usability experts use to improve the effectiveness of landing pages.
What is a landing page and why is it so important?
Very often, even with proper operation to attract the right people (target audience) to your website (, etc.), you, as a business owner, will not feel any return on this. It seems that traffic is flowing, and the audience is target, but there are practically no sales or subscriptions (depending on what conversion action you chose as the main task in). Nothing works. What can be wrong?
Most likely, you forgot to think through and prepare landing pages, which are often called landing pages. What it is?
And this is very important point, which can significantly increase conversion (the number of purchases or registrations), because landing pages are designed guide the user to perform the target action as efficiently as possible. If you direct visitors from all advertisements, for example, to home page site, you can catastrophically reduce conversion and go down the drain.
The term “leading page” itself is derived from English phrase“landing page”, translated means just the target, landing (landing) page. Landing pages are created not just anyhow, but taking into account the psychology of visitors. They should grab you and not let go them until the very moment of purchase (or registration), because it will be extremely difficult to re-attract the visitor.
It's like a hook on fishing gear - it must reliably pick up and confidently hold the fish caught on it until the moment you fix it with a bait. If the hook (laying) is unsuitable or does not exist at all, then all your efforts from baiting, setting bait and other shamanic actions will go to waste. You will not achieve your final goal.
The landing pages themselves are either separate pages of an existing site, or one-page sites specially created for this purpose. In fact, once a user gets into it, it’s quite difficult to get out and he inevitably has to slide into it until he becomes your client. But this is ideal, and we will look at how to realize this ideal using various advertising tricks in the continuation of this publication.
Examples of landing pages
Depending on the goals you pursue, you can divide landing pages (landing pages) into several types:
12 steps to create the perfect landing page
You need to understand that the landing pages to which you will attract users from social networks (or from contextual advertising), must have a number of characteristics and satisfy certain requirements. So how? create the perfect landing page?
- Each landing page should be tailored for only one target (conversion) action - either subscription or sales. There is no need to be greedy, because the user’s attention will be scattered and the likelihood of him leaving will greatly increase (without choosing anything from the proposed options). It’s better to force clients to think and choose as little as possible - the path to the landing page should be straight as an arrow (obvious to him) and without any branches.
- Must be present on the landing page call to action(with verbs in the imperative mood - call, buy, receive, come, etc.). Phrases should be short and motivating. For example, “buy now”, “get video course” or “subscribe and receive”.
- They also rule bright buttons and arrows, creating an emphasis on them. Buttons in red and yellow shades work well, because they are noticeable and contain a call to action.
Well, arrows, as a rule, are designed to place even more emphasis on the button so that the user’s behavior on the landing page is as predictable as possible.
Sometimes they work very well animated buttons(but in any case, it will be necessary to test the effectiveness of certain elements of the landing page):
- If the landing page uses(you can’t do without them on subscription landing pages, but they are also used quite often on salespeople), then make sure that they contain as few fields as possible. Ideally, the form should have only one field (for entering the Email address), but for further communication (marketing) you will need to know the username, so two fields are the most common option. More fields can significantly. In addition, adding fields for entering a phone number or address makes users wary and can lead to abandonment of the target action.
- In the article about I mentioned that Internet users do not read texts - they view them. And the most important thing in this regard is the title. If it is not there (or it is not highlighted accordingly), then this will greatly reduce the conversion rate. On landing pages Headings must be catchy so that the user is inclined to read further or immediately take a conversion action (subscription, order, call).
- Your landing page should not only have calls to action and catchy headlines, but also argumentation of necessity subscription, purchase, order or call. In the case of a subscription page, this could be, for example, a short video with a description and content of the “freebie”, or the same thing can be presented in the form of a short list (list). In the case of a salesperson, this could also be a video with a product review, a list of the services you offer (including your competitive advantages).
- Works very well on landing pages reviews from existing clients, buyers or subscribers (it is better if some contacts of those who left these reviews are indicated so that everything looks believable).
- Also works well on landing pages before and after comparisons. This is not applicable for all topics, but in the field of weight loss, cosmetology, fitness and many other niches it can be used with high efficiency. For example, this is what a company providing restaurant services does.
- The landing page can be quite long, but when viewing the first screen(this is the area of the page that is visible without scrolling) it should be completely clear to the user what exactly you wanted to tell him.
- To stimulate subscribers or buyers of certain products (for example,) you can use the option of additional bonuses that the subscriber or buyer will receive when ordering. When the user is on the verge of making a decision, it is precisely such “buns” that can tip the scales in your favor.
- And, of course, it is worth emphasizing that “only here and only for a certain amount of time” will the user have access to all this splendor (subscription, special price for a product, an additional set of services). What's the best way to do this? That's right, put it timer counting down until hour X, when the given opportunity will be missed. Nothing stimulates a hesitant user to make a decision more than seconds literally running away before our eyes.
It would be a good idea to place a subscription, order form or contact phone number next to the timer. This will not always work, so you need to conduct tests (I’m thinking of writing a series of articles about conducting A/B testing - if you don’t want to miss it, subscribe to the newsletter), and it’s possible that such a simple and obvious method will allow you to increase the conversion of this landing page and more than recoup the money spent on promotion on social networks or contextual advertising.
- Users also want to know who exactly is offering them this product, service, video course, etc., so it is necessary indicate information in the landing page about the author, store, company.
Naturally, it would be good to mention merits, achievements, and competitive advantages, but do not over-praise yourself, so as not to cross the line beyond which trust in the published information begins to decline.
Examples of errors that make landing unworkable
In addition to those things that help the landing page work more efficiently, it is worth listing common mistakes when creating landing pages, which can neutralize all the above “ear tricks”, and you will not get the desired result from advertising or promotion in social networks (or context).
- Let me remind you once again that almost no one reads on the Internet (at least again open page), namely, views the information. If it turns out to be really worthwhile and requires more detailed study, then it will come to reading (in general, the same as with newspapers). That's why Don’t let your landing page become overloaded with information- this can disorient the user and cause a reaction of rejection even before the moment when he understands what is being said.
- The text should be small, as concise as possible and filled with information, not water. A couple of paragraphs “about nothing” will make the user strongly desire to close such a landing page. Small font also doesn’t work well on a landing page. In general, its use is not necessary, because many words are not required to convey the essence.
- Don't disappoint the user's expectations. If in an advertisement or in a post in social network You talked about one thing, but when the user gets to the landing page, he sees something else, then there is a loss of trust and the conversion rate drops sharply. It is very important to monitor this compliance.
Landing page design actually very important. If it is unfinished, made unprofessionally, or has a repulsive appearance for most users, then even following all the rules described above for creating a good landing page will not save you. If you yourself do not have the necessary skills and taste, or you do not have a designer on staff, then you can use numerous designers or ready-made templates landing page, which will only need to be slightly altered to suit your needs.
Again, determine the best option Testing and analysis of statistics, for example, will help you (often not everything is as obvious as it might seem). This way, you can track the completion of the target action and understand which landing elements contribute to increasing conversion, and which are distracting and need to be changed.
Do you have some more time? Do you want to spend it usefully? Then grab some popcorn, sit back and watch a two-hour master class "Step-by-step algorithm for creating Landing Page» :
Victoria Kuchinova
The main problem with most modern landing pages is that they all seem to be carbon copies. Where is the creativity, the fire, where are the designer madness?
In this collection I have collected interesting features and unusual effects. Some of them were made by Texterra developers and web designers, some were found on the Internet. There are also examples of disgusting design and outright silliness - at the end of the article you will get acquainted with the killer hamster and the Snow Maiden with a bucket.
Watch, get inspired, put the ideas you like into practice, mix them with your own and don’t forget to conduct A/B testing - this is the only correct recipe for creating killer landing pages.
And, most importantly, remember that landing is not a self-sufficient tool. Conversions, leads, and sales require quality traffic. And it’s difficult to get it without comprehensive promotion.
Extended form
Typically, one-page websites use a standard application form with several fields. Most often, the client needs to provide contact information – first and last name, email or telephone. But in some complex areas it is better to expand on the topic in more detail. Here's how they did it in Texterra: in the form of the dellservers.ru landing page, the client can select a module, parameters, and server tasks. Can reset values if something goes wrong.
What is it for? The owner of the landing page will receive his leads in any case - even if there are only two or three fields in the form. But the client will be interested in digging deeper. Don’t just order, but choose your own option.
Two CTA buttons
On the landing page of the task planner wunderlist.com/ru there are two calls to action that reinforce each other: “Create a free account" and "Download Wunderlist." Users click on both links, conversions increase, and the landing page does its job perfectly.
Specific numbers (results)
This is not a new feature, but it still works. Show 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 smartprogress.do landing page: you can immediately see how many people have already joined the project, how many goals they have set, how many achievements they have achieved.
Personalization
Faceless template landing pages - brrr, what could be more dull! Liven up your one-page page, add fire, attract interest potential client. For example, on the Texterra website creation services page there are photos of employees who are directly involved in this. A visitor comes in and sees: yeah, my resource will be developed not by abstract developers, but by completely living Svyatoslav, Polina, Artem and others.
Convenient response form
On many landing pages and websites, you can only ask a question through a form. This means you need to indicate your first and last name, leave your phone number and email. Sometimes you even have to enter captchas and codes - horror! It is clear that this is done in order to get leads. But there is another option - as on the Cerebro Target landing page. If you are registered on VKontakte, you don’t need to fill out anything - just write. It’s both convenient for the client and good for the owner – the contact has been left, and you can continue to work.
Customer Reviews
You can ask clients to tell about their impressions and publish the received texts on the landing page. But the catch is that the visitor will not check in any way whether the reviews are real or fake. It is better to go further and convince visitors of this. The landing page huskypark.info, which was developed by Texterra, contains words from clients from Instagram with links to their accounts. Everything is fair - come in and see for yourself.
Demonstration of results
3D graphics and augmented reality
The landing page was created for the Qubi application. This is a game for children 3+ years old and adults. The essence of the game is simple. In the first step, the user glues together a real paper, cardboard or wooden cube according to the proposed scheme.
Then he installs the application, opens it on his smartphone and “looks” at the cube through the device’s camera.
The cube comes to life on the screen of a smartphone or tablet. The user plays a three-dimensional version of “Snake”, “2048”, “Labyrinth”. In this case, you need to control the game using a real cube. To control the cube with both hands, you need to use a special smartphone stand, which you can assemble yourself.
A three-dimensional model of the cube can be seen in the illustration (gif).
What the client wanted
The client asked to create a landing page that highlights a feature of the game: the use of 3D 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 have we done
We implemented three-dimensionality using CSS3 3D transformations. Transitions between cube faces are done using pure JavaScript with drag and touch event tracking. Thanks to unusual transitions between screens, the user gets a sense of the volume of the screen. This is especially pronounced on working version landing page.
For final version landing page, we made a more realistic version of the cube. Unlike the working version, in the final version the cube rotates from the outside, not from the inside. The 3D feel is enhanced by title animations.
The landing page is fully responsive.
Interactive selection of interior and furniture colors
The uniqueness of the DSK.Color landing page is the ability to independently choose the color of furniture and interior items using an interactive palette.
The DSK.Color company paints any surface in different colors. You can order furniture painting, household appliances, bicycles, musical instruments and other items. The client can choose any color.
The most popular service is painting furniture and interior items. It accounts for about 80% of the client's work.
What the client wanted
The client asked to make a bright and memorable landing page “with a call to color everything around.” He had ideas for making 3D renderings of the furniture so that a visitor “could spin and look at the painted piece from different angles.”
What have we done
We proposed an idea to the client: to give the visitor the opportunity to independently choose the color of furniture and interior items.
To do this, the landing page offered an image of a room in which the visitor could paint the main objects using a palette that opened by clicking. 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 already looked like this.
We agreed with the client to leave the option of painting the table, chairs, door and kitchen unit. These are the main items that the company paints.
After agreeing on the prototype, the designer and layout designer got involved in the work. The first one drew all the objects in svg (this is a graphics format). The second one laid out and added a color palette to the svg areas. After that we implemented modal window. With its help, the user can double-check colors and items and submit a request for the service.
Unusual and ordinary preloaders
Using a preloader or spinner, you can make any landing page more convenient and visually attractive. In this section, we’ll talk about preloaders and look at examples of these elements created by Texterra specialists.
What is a preloader and what problems does it solve?
Preloader or spinner is a sign that appears on the screen before the page loads. You see these elements every day when you use the Internet. Below is an example of a preloader.
The preloader solves a practical problem: it informs the user that the page is loading, and also replaces the visually unattractive loading picture. This needs to be explained.
Due to technical features of browsers, website pages load unevenly. While loading, the layout may “float”. If the page loads in a matter of seconds rather than a fraction of a second, the user is left with an unattractive experience for some time.
Preloaders are implemented using standard front-end development tools: HTML, CSS, JavaScript and additional libraries and frameworks, for example, jQuery, React.
How we improve landing pages using preloaders
We create unique preloaders, including animated ones. Here are some of our works.
- Qubi
For the Qubi landing page, we made a preloader that replicates the navigation menu. This allows the user to understand how the page is manipulated before it loads.
- Levellen
On the Levellen Interiors website we used a preloader in the form of the company logo. This is an additional element of site branding.
The landing page provides information about renting premises in the business center. Main secret landing page is located in the “Offices” section. Here the user can view the availability of available offices on each floor of the building.
When you hover over a vacant office, the “More details” button pops up.
Clicking the button takes the user to a page with information about the office and its photos. From this page you can submit a request to rent a room.
Implementation Features
Our designer drew the shapes of the office premises, the drawings were made in svg format. These drawings are superimposed on the floor plans. When the site administrator notes in the control panel that the office is free, the script includes displaying a picture on the plan and the ability to go to a page with information and an order form. When the administrator notes that the office is busy, the script turns off the image of the drawing on the plan.
Actually design
There are no complex ones in this example technical tricks and design effects - the entire landing page is highlighted by a beautiful picture: background, colors, delicious photographs of Astrakhan caviar. One-pager astrahancaviar.ru– good example how the designer makes you want to buy the product. And eat it immediately!
Finally, about the sore point - a few examples of terrible landing pages. For contrast, facepalm, powerless agony and all that. I won’t describe what’s wrong with them - I suggest you solve these problems yourself. It-a-ak...
Loading...
