SEARCH
  Web Design Basics Design Principles How to Create a Landing Page: Step-by-Step Instructions

How to Create a Landing Page: Step-by-Step Instructions

Not every visitor of your website will perform a targeted action. Maybe because your site isn’t attractive enough or there are not enough arguments. A great landing page can be a push for user actions. Let us tell you what kind of a landing page will work for you for sure. Here is to-do list for creating a successful landing page.

Landing page peculiarities

A landing page is a web page that is created in order to convince the client to sign up for a newsletter, buy a product or request a service for example. A regular site is often overloaded with information. Landing pages work with a specific goal and guides the visitor until the moment he performs the target action. Landing pages also get advertising traffic.

A good conversion rate for a regular site is considered to be 2-3% of all visitors. For a landing page this is 14-15%. CTA often helps to achieve such a result.

Principles of a successful landing page

There are several techniques that help to attract and keep the attention of the visitor.

The principle of the first screen or "Above The Fold".

Newspapers are sold folded in half, so the title page is divided into a visible and not visible for the buyer parts. If the headline or photo on the visible part attracts attention, the client will want to buy a newspaper and read it through.

The same situation holds true for the landing page: the reader should be interested from the first sight. He also should understand whether he needs to scroll further. Therefore, you must pay special attention to the first screen. It should not be overloaded with information, but at the same time it should contain the very essence. The most important button for the target action is usually placed on the first screen and again towards the end of the landing page.

Scannability and structure.

People want to get information quickly, so the landing page should be clearly structured and understandable. To do this, you should divide information must into semantic blocks and use subtitles, as well as lists, illustrations and quotes.

Website Heatmap.

Important semantic blocks should be placed logically in the view, so that the user finds the right elements in the usual place. There are several patterns you can use for this, the most relevant of which are the Z-Pattern and the Guttenberg Pattern.

Facebook is an example of a Z-Pattern. Users subconsciously know that the action button is in the lower right corner.

The Gutenberg pattern divides the screen into four parts. The reader searches for the most important information in the top left and looks at this first. In the right bottom readers make a decision, here you should put an order button or a call-to-action.

Available navigation.

A landing page is often a long page. To make it convenient for the user to navigate and find the right information, links to important blocks should be placed in the header.

Call-to-action elements.

The call-to-action is the logical conclusion of a long path that takes the reader to a new stage of the sales funnel. On the landing page there are subscription or purchase buttons, product links and email forms. The decision is influenced by the shape and colour of the button, a limited offer ("Three cars left only") and its placement.

Contacts in a prominent place.

Some users do not want to read, but want to ask you direct questions. So contact information, like a feedback form, email address and phone number should always be at hand.

A/B testing principle.

Sometimes it turns out that if you change the text on the page or move the order button two centimetres higher, users are more willing to perform the target action. Therefore, on landing pages they use different designs and test these on separate groups of visitors. There is no universal recipe, you need to try and change the structure depending on the results.

How to create a landing page? Kwork superb freelance service

It's good if the company already has a copywriter, designer and layout designer who understand the objectives of the landing page and can develop the perfect one. If there are no such specialists, the most effective solution would be to order a landing page at a freelance service. It is most convenient to do this at the Kwork freelance marketplace.

Kwork is built on the principle of a store, where ordering a landing page is as simple as buying a book. Services of sellers are decorated in the form of cards of goods. You can see what kind of work, in what volume, for what price and in what time it will be done. Sellers' offers (kworks) are sorted by rating, which is based on real feedback, responsibility, quality and other internal algorithms of the system. Ratings, reviews and portfolios greatly simplify the choice of the specialist.

In the filter, you can mark additional services, like installation on hosting, adaptive design or installation of a contact form, so you can order them all from one seller.

It's enough for the buyer to select the desired service and, if necessary, correct the task to the seller. After payment you will get a quality result in time.

To-do list for performers

Creating a landing page is divided into the following steps:

  • Making the structure of a landing page - create an approximate plan that will become the basis of the page for the designer and copywriter; Check the pages of similar businesses. Compare yourself with competitors and international leaders in your niche. Write out your competitive advantages, as well as the "chips" that you can borrow from competitors. Answer the question "What should the user do after visiting the landing page?". This will be the purpose of the landing page. This goal must be indicated to the remote worker.
  • Writing the content - the text that will "sell" the product. The main working scheme of writing a text for a landing page would be "Client problems" ->"Solution" -> "Deal offer"
  • Design - create a complete layout. We listed below more details about the design;
  • Layout - design the layout of the site in accordance with its functionality and the layout of the designer;
  • Programming - implementation the necessary site functionalities;
  • Advertising settings - launch contextual advertising to generate traffic to your landing page.

All these services can be ordered at Kwork through the service shop or Exchange. At the exchange, you create a request for a service - describe what you need to do and what your budget is, and competent executors respond to your request themselves. You choose the most suitable seller for you and work with him through a secure transaction on Kwork.

Take in account the following points if you are going to work with a designer and layout designer:

  • Layout and prototype of the page - match the main blocks, structure and path of the reader from element to element.
  • Logo - if the company does not have a logo yet, it's time to add it on the landing page to make the brand recognizable.
  • Site header - the header should contain product information, brand logo and navigation.
  • Illustrations - a good designer will not fill the page with photos from a photo stock. He will draw the illustrations himself or ask you for high-quality images of a process or a product.
  • Call-to-action buttons - the designer will help determine which CTA elements are needed on the page and where to place them.
  • Feedback form - this can be a phone number, a "Call me back" button or an online chat icon in the corner of the page.
  • Icons - they help the reader to navigate by separating the blocks and visually highlighting the important parts.
  • Customer reviews - these are an important element of a landing page, which increases visitor confidence. Reviews can be static or periodically updated.
  • The background for the blocks and elements of the site - people are afraid of empty places and white spots, so you need to think about the background and fill in the voids with illustrations.
  • Animation effects - links should change color if the reader clicked on them, and the order button moves. These little things help the reader to perceive information.

In the assignment for the copywriter, the following items are needed:

  • The purpose of the text: what the user should do after reading.
  • Who is the reader: the more accurately you can indicate the target audience, the easier it is for the author to get into the right tone.
  • Plan and semantic blocks: the editor can develop the structure of the text independently, but to make it meet your expectations, it is better to discuss the plan in advance.
  • Basic theses: if there are points that need to be mentioned in the text, tell the author about it.
  • Forbidden elements: words and phrases that should not be placed in the text.
  • If you have prepared keywords for SEO promotion of the landing page, pass them on to the copywriter so that it will include them on the page.

Brief for a programmer. According to research in 2018, more than 60% of visitors access websites from their smartphones, so you need a mobile version of the site.

If you need a data collection form, find out where the data will be stored and how you can get access there.

Learn how to reduce website load times. Pages that open quickly are better indexed by search engines.

This is how a task for a programmer might look:

  • Add a landing page to an existing site, create a new subdomain.
  • Make a mobile version or responsive page.
  • Add a form for data collection such as phone number, mail or a link to the social network. Do not make a lot of fields, people are too lazy to fill them in.
  • Make access to the admin page for employees and separate roles.
  • Reduce page load time.

Results

Recent studies show that 75% of users judge your organization on its website, with the first impression in 94% of the cases based on the design. Last but not least, 88% of the users will not return to a site when their first impression was negative.

Creating a landing page is a whole science, but it's not difficult to cope with this task if you have good team.

It's convenient to find specialists at Kwork. It contains thousands of services, has fast ordering and full refund guarantee. It's everything you need to grow your business.

Sign up for Kwork and use the promo code Kwork141478 for a $5 discount on your first purchase. You can spend bonus funds within 3 days after the activation of the promo code.

subscribe to newsletter