Good design of a Landing Page (LP) is not just about the emotions you experience when looking at it – it’s actually a much wider concept and the main goal of it is to solve business tasks. Unfortunately, many novice marketers and businessmen make a common mistake and set wrong priorities when designing an LP.
We hope that this article will save you from wrong beliefs. Please check the simple steps you should follow to create a profitable LP.
Preliminary Preparations
Before you start designing an LP, be sure that you are prepared. The result will depend on how accurate you were at the very first stage. There are several basic steps:
- The design of semantic blocks.
- The design of an LP prototype.
- Preparing all the materials and examples that are necessary for LP design.
If you are interested in sales, please study these items in details on your own.
The Design of Semantic Blocks
Each LP is a presentation. If you take presentation slides, combine them and upload to a server, you will get an LP of the same design. Each slide of the presentation is a separate semantic part (talking about an LP, we consider blocks instead of slides).
You might have noticed that the design of most LPs has blocks. If you prepared the content for the LP already, your task is to structure it through such blocks. Each unit has to have its own catchy title: try to motivate visitors to make the desired action.
NOTE: Do not proceed with the design of an LP until the copywriting is done. As a result of the copywriting, you get a light thesis structure broken down into the separate blocks. Then you can start creating an LP prototype.
The Design of an LP Prototype
An LP prototype is a detailed picture of what you have already done. The designer is guided by it during the webpage creation.
If you are interested in selling more than the designer (or you’re a designer), please check whether the LP prototype meets all the requirements since the design layout will be the same. Here are some guidelines for creating an LP prototype:
- Support the most “selling” facts with the images: this way they’ll have more influence on the visitors. The text itself is not enough to convince them: at least, use the screenshots or documents with necessary information.
- Add CTA block to every third block.
- Don’t dive in creativity too much. Usability and simplicity are of higher priority than creativity since they generate sales.
- Mark the location of all parts (headers, texts, icons, lists, infographics, buttons, and so on) in the LP prototype.
- Leave enough free space on the LP prototype. Too much information will look like spam and is more difficult to perceive.
You can use special software to develop a prototype. But we recommend you to make it by your own hands – it is easier and faster. When you have the prototype prepared, you can move to the preparation of all the necessary materials for a designer.
Preparation of the materials
If you miss this step, it’s possible that the LP design will miss some reviews, images, and documents. If it happens, the coder will not ask questions about why the information is lost: he’ll just do the LP without it. Therefore, you risk getting an unfinished LP. Make sure that the designer has all the necessary texts and materials for the LP design.
The LP Design
We won’t talk about beauty and style. As a rule, the main task is to sell. So let’s focus on the conversion and usability. There are a few time-tested rules for an LP design: all of them are proved good by the best specialists.
Please, stick to the following rules when designing typography, infographics, graphics, choosing color, fonts and making animation:
- The main rule is to get rid of everything that does not lead to the target action fulfillment. The simpler the design, the easier and more efficient it is. The ultimate goal of the design is to give the visitor an opportunity to quickly capture the essence of your proposal and to force him to make a target action.
2. Typography. The text design has to allow the visitor to read the text easily and with a great desire. To make the text easy readable (both from monitors and mobile devices), please stick to the following rules:
- Use large fonts for headlines.
- The text size should be in the interval of 14-16px.
- The line spacing should be at least 1.5 times greater than the font size.
- The background color and the text color should be in contrast.
- Avoid dark background if the text is long.
- Avoid paragraphs longer than 5 lines.
- Use more bulleted or numbered lists.
- Avoid TOO MUCH CAPITALIZATION.
3. Infographics. People have become very fond of infographics in recent years. If it includes the interactive, involving the visitor, it leads to an especially good result.
4. Graphics. One picture is worth a thousand words. And it doesn’t matter whether it’s a picture showing some facts or an icon on an order button. There is also a set of rules you should stick to:
- Don’t use stock photos if you do not want customers to lose their confidence in your brand.
- Do not overlay text on images: it harms the perception of the text.
- Do not use an images with faceless men.
- If you are promoting a product, be sure to provide good-quality photos to the audience.
5. Composition and Color. Pay attention to the following points:
- CTA should be placed on the first block of Landing Page. At the same time, the block’s height should be within the limits set for popular devices.
- Buttons color is not important, but be sure that the color of the buttons and the background color are contrasting.
- Avoid flat buttons since it is not always clear whether it’s a button or not.
- Buttons and links should respond to the mouse pointer.
- Avoid standard icons: photos are much better.
- Use arrows in CTA blocks (with numbering, if the target action includes 2 or more actions from the user).
- Visually separate blocks between each other.
6. Animation. It’s definitely in trend, but please, do not overdo it. Human have a direct and peripheral vision. The last can only notice the great items or those that attract attention, namely the ones of high contrast or moving ones. That is why, the animation does not help if it is used everywhere.
It’s almost impossible to make an ideal LP from the first try. As a rule, this work continues even after the LP gets live. You can see how the market reacts on your LP with the help of web analytics and to make the appropriate adjustments if they are necessary.
BONUS: a Few Beautiful and Profitable Landing Page Designs
Wistia
Wistia is an example of a selling LP, which causes a feeling of confidence: a simple image on a blue background and a pleasant contrast between bright white fields is pretentious and pleasing to the eye.
ClassPass
Clear headlines, short form, and a meaningful description of an LP – these are the features that call to action powerfully. CTA button in this LP looks especially good.
SuperTasker
Sometimes all you have to do is to admire the beauty of the LP. Super Tasker is an example of how the high resolution photo can completely transform your LP. The service uses this invigorating image as a background. The headline is easy to understand and there’s only one entry field – is in any wonder that SuperTasker sells?
Nest
Nest positions itself in advertising campaigns as a new generation thermostat that can reduce the expenses on heating, can self-educate and communicate with the house owner via a smartphone or a tablet.
This LP tells you a story about how you can keep track of temperature control, depending on the time of the day. When you scroll the page, you do something like time-travelling, viewing the original presentation. You’ll be shown a short video presenting the features of a smart thermostat during certain parts of your journey. The LP has plenty of space, tastefully selected gamut, flawless composition, and the ability to alterate text blocks with images.
Marshall
The LP for the guitar amp from legendary Marshall shows the massive image of the product to all visitor. A series of photographs arranged in a slider can cause a strong emotional connection. We think that many musicians would want to connect their guitar to the Marshall after they see these photos. This LP demonstrates the importance of the emotional connection to us.
Himstamatic
Hipstamatic is an application that allows you to apply various photo filters with the help of your mobile phone. This LP is effective primarily because it shows some interesting examples of images that were created with the help of this app. Thus, the user can immediately see the result and quickly decide whether he wants to purchase the app or not.
Bear CSS
This is the rare example of the LP that does not directly offer to buy or download something. Its task is to be useful; it is laconic and explains how it should be used.
Crowdspottr
I’m sure you have noticed that many people use their home pages to promote mobile applications. The advantage of CrowdSpottr is that the web page asks itself questions and immediately answers them with a phased solution scheme.
DesignedToMove
Sometimes it is worth to maintain some mystery. In this case, the meaning is not revealed at once. For example, you are invited to watch a video or to download more information. The main point is to make people more interested in what’s going on on the LP.
Fixed Group
A great example of an LP that is highly responsive to the mouse movements. Transitions are made pretty well – it seems like the blocks are cut into two halves.
The post How to Design a Profitable Landing Page appeared first on DesignM.ag.
