Landing Page Design Tips & Tricks: How to Create LP with High CR?


How do you get the user to pay attention to the website? What design tricks do I use to create a landing page with a good CR? Hereby, we’ll share some tips for practicing webmasters!  

Scientists argue that 85% of all people on the Planet tend to be visual learners. This fact alone implies the significance of design especially when it comes to online sales. Below, we will look into a few keynotes that will allow you to increase the CR of your website or ad.  

Use “Power Points”

In photography, there’s a “rule of thirds” which is successfully applied in web design as well. According to it, the frame, or the web page in our case, is visually trichotomized. Hence, there are nine identical squares.

The points in the middle of the four-line intersections are called “power points”. The human eye first spots elements located within these limits. When creating a landing page or ad, place the key elements at the intersections.

We recommend checking the landing page 1 for the Parasi Cleaner — KE Offer (anti-parasite capsules) and landing page 1 for Havita — TH Offer (hair growth product) that comply with the above mentioned “rule of thirds”.

Parasi Cleaner Landing Page.

Be Mindful of the Hick’s Law

Here’s another crucial principle that will allow you to increase the conversion of a website or ad. It gets its name from William Edmund Hick, a British psychologist who argued that the time a person needs to make a decision is positively related to the number of possible choices. The more options to choose from — the more time it takes to make a decision.

This theory is confirmed by a study conducted by psychologists Mark Lepper and Sheena Iyengar. During a social experiment, they discovered that a table with 24 kinds of jam is less attractive than a table with six items. When a person sees too much information, the chance that he/she would purchase something decreases by ten times.

By stinting users in choice, you increase the CR — keep it in mind when creating a landing page. In the ideal case, you might want to reason out all possible user decisions on the website in advance and minimize it. The more you narrow down the options, the easier it will be for people to use your website while the CR will grow.

Don’t Forget about the Spaces

There are two relative concepts in web design called positive and negative space. All website elements come under the former one. The latter one includes the empty spaces between them. Putting negative space to good use will allow you to make the website content clearer and more visible and bring a good CR to your landing page. Here’s how the Flat.io Portal retains user attention on the CTA with empty spaces: log in via Facebook* or Google.

Here’re some tips suggesting how to put negative space to use:

  • The smaller the font size, the larger the kerning should be;
  • The leading should take approximately 150% of the font size;
  • Break larger pieces of text into smaller blocks;
  • Add more negative space between the larger website elements (menu, title, and content).  

Use the F-model

Many researchers suggest that human eyes subconsciously move according to a certain pattern when reading. First, we look from left to right, then we move down. We pay the least attention to the lower right.

To increase CR, do your best to place the key elements along the F-space while everything else is placed outside it. Contacts like social media, phone numbers, etc. should be located in a visible area. The product photos and videos should also be clear and visible. Remember: the more information you provide, the higher the customer’s confidence will be.

The landing page 3 for the Livepros — MX Offer (prostatitis treatment) and landing page 1 for Lumos — GR Offer (anti-pigmentation face cream, contact the manager to enable the offer) were made according to the F-model.

Lumos Landing Page.

Use Icons of the Same Style

Designers often draw them by hand, but in case it’s not an option for you, it’s ok. There are many free icons on the Flaticon Website.

On our landing pages, there are icons of a unified style. We recommend taking a look at landing page 1 for the Fortikux — MX Offer (dietary supplement for weight loss) and landing pages 1 and 2 for LongUpGel — PH (enlargement gel).

Fortikux Landing Page.

Make Your Ads More Visible with Contrasting Effect

The contrasting effect makes calls to action more visible and therefore increases conversion. Buttons and text should stand in correct contrast with each other. Black text and white background are considered classics of web design.

According to the Theory of Color, any color there is affecting the human psyche. For example, the red color causes an urge to action, so it can be used for CTA buttons. 

The blue color calms down and is associated with stability. You can use it for medical websites. 

Green is perceived as a natural color. It is good for organic cosmetics or natural product ads, etc. 

For target buttons, you can use the orange color which is receptive to people.

Women love purple and pink colors which work well in online clothing stores like Wildberries.

The website background should make a strong contrast to the text, titles, and other key elements. Adobe Color or ColorSheme services will help you choose the best color schemes.

You can create the color palette in Adobe Color. To do this, go to the “Create” section and select the “Color Wheel”. In the middle column, select the main website color, then the complementary or opposite colors will be determined automatically. On the left, you can choose the type of wheel: monochrome, consistent, etc.

The color theory does work. Take a look at the landing page 1 for the Hollywood Smile — PH Offer (jaw veneers) and the landing page 1 for Slimmax — ID Offer (slimming capsules).

Hollywood Smile Landing Page.

Remember the “Eight-Seconds Rule”

Essentially, you have only eight seconds to catch the user’s attention. That’s how much time a person can concentrate on something. The following tips will help you create a landing page with a good CR and retain the website visitors’ attention:

  • Make a catchy headline. It should communicate the benefits of the product briefly and clearly;
  • Complement the message with eye-catching images that convey the main purpose of the product natively;
  • The call-to-action button should be visible and clear.

There are good cases in point in our AP: the landing page 2 for the Lavite — ID Offer (facelift serum) and the landing page 3 for HairPerfecta — SK Offer (anti-alopecia spray).

HairPerfecta Landing Page.

Follow the Similarity Principle

A person perceives the whole picture otherwise than its elements. We like to have similar objects adjoined in separate groups. You might want to follow this principle. Suppose that your product has an excellent reference. For it to affect the conversion positively, place an order or subscription form next to the review. The bottom line is that even if the review does not refer to this form, the user will associate it with the review anyway.

Here’s a case study: landing pages 1 and 2 for the Viakore — TH Offer (enlargement cream) and landing pages 1 and 2 for Hairlab — ID Offer (hair growth agent).

Viakore Landing Page.

Seek High-Quality Visual Content

Research conducted by Bright Local showed that 60% of people give preference to dropouts with images. Skyword‘s research has proven that due to interesting images ads receive an average of 94% more views. Therefore, when working with a landing page or an ad, avoid boring and cliche images. Not only paid stocks can provide high-quality images. Here are some free services that will help you create a landing page with a good CR:

  • Death to Stock
  • Pexels
  • Unsplash
  • StockSnap
  • Negative Space
  • Superfamous Studios
  • Little Visuals
  • Gratisography
  • Kaboompics
  • Picjumbo

Here’s a case study: landing pages 1 and 2 for the LongUpGel — PH Offer (enlargement cream) and landing page 2 for KetoExpert — RO Offer (weight loss capsules).

LongUpGel Landing Page.

Use Catch-Up “Hooks” & Social Proof

The “hooks” may include various widgets and forms: pop-up callback, newsletter subscription, online consultant, countdown timer, etc. All of these improve the performance of the website dramatically.

Social proof includes various certificates, diplomas, and reviews. The latter is of particular importance. For example, research by Data Insight and AliExpress proved that nine out of ten purchases are made considering user reviews. You can also add the Yandex.Market feedback widget or Google Reviews to the website.

There are fine examples of that: the landing page 1 for the Calentras — CO Offer (joints-warming cream) and the landing page 1 for VisageMax Cream — MY Offer (night anti-aging cream).

Calentras Landing Page.

Summary

Hereby, we have reviewed the highlights that tend to be a boon to the website CR. Hopefully, the information was useful for you and you can now create a landing page with a good CR. May you have high indicators!  


Like it? Share with your friends!

0 Comments

X