How to plan your landing page design according to content


Companies end up having to fight and strive frequently to evolve so that they are always able to clearly convey their idea and obtain the best results.

And this is the main objective of Landing Pages optimization techniques.

What is a Landing Page?

The term Landing Page used to be used to define the page through which an Internet user passed to access the site.

In this case, the page where he “falls first” after clicking on a link, hence the name, which in English would be translated as “landing page”.

It is not by chance that when you check Google Analytics in English, you will see that Landing Pages is presented as one of the dimensions of behavior.

In Portuguese, however, the name Google uses to define them is something else, a little different from the English term: “Páginas de Destino”.

This concept ends up being a little vague, as it can basically be used for any page on a website where you land after clicking on a link on another blog or in a search engine, for example.

However, the term eventually fell out of use for this purpose, nowadays being used for something different.

In Digital Marketing, when we create a page whose only objective is conversion, this page is what we call a Landing Page . 

The Landing Page design is done thinking about communicating your offer to the page’s visitors.

This communication process is for you to influence people to perceive what you want them to perceive.

Using a blank area to organize the page with a Call-to-Action button, in contrast, is one way to do this.

In the end, however, visual appeal is just one facet of page design.

We must pay attention to the way Landing Page elements interact and how they flow together to determine whether the page will be successful in engaging visitors.

Visual Hierarchy

Its role in user interface (UI) design is to allow users to understand the information easily.

This is done by assigning different visual characteristics to sections of information, such as larger fonts in a header, for example.

By employing the visual hierarchy, a designer can influence what users will perceive as being higher up the hierarchy.

Influencing user perception

The visual characteristics that a designer can use to influence users’ perception of information are:

  • Color:  People are drawn to bold, contrasting colors.
  • Contrast: color changes draw attention
  • Alignment: Get attention by aligning or breaking alignment
  • Repetition: Repeating styles can give the impression that the content is related
  • Proximity: nearby elements will also appear related
  • White Space: More space around elements will draw the eye to them
  • Texture and Style: Richer textures attract more attention than flat ones

All of the above design elements are important, but obviously, like everything else, success depends on the good use of knowledge.

Combining this knowledge with eye tracking studies, we can create powerful designs that will always guide visitors’ eyes where we want them to be.

Reading Styles

Following eye-tracking studies, much has been discovered about how eyes move in certain contexts.

In the case of reading, two more dominant patterns were found.

The F pattern

The Nielsen Norman Group has compiled several reports and they still continue to be cited when it comes to eye tracking.

The truth is that it was their studies that brought a series of discoveries that turned out to be useful in several fields.

One of the group’s most important discoveries was the so-called “F-Pattern” or “F-Pattern”.

Users usually start reading in a horizontal movement that usually originates in the upper part of the content area, which would be the movement that gives rise to the initial bar of the “F” that will be drawn by the movement of the eyes.

Then, users move the page down a bit and read in a second horizontal movement that usually covers a smaller area than the previous movement.

This second reading of lesser extent is what would form the lower bar of the “F”.

Finally, users scan the left side of the content in a vertical motion, thus making the last element of the “F”, its trunk.

This image refers to the research mentioned above and demonstrates the movement of the eyes on a page of a website.

The colors demonstrate the following:

  • Red:  Most visualized area, where the eye stayed longer.
  • Yellow:  Visualized area, but with less fixation.
  • Blue:  Area poorly visualized and with little fixation.
  • Gray:  Area poorly visualized and with no fixation.

Let’s start from the premise that eye movement, in general, starts at the top left corner and from there it slides across the page.

By placing the elements that you consider most important on a page in the F pattern, you end up ensuring that such elements are seen.

The Z Pattern

Pages that are less text-heavy or loosely organized tend to cause less eye movement.

This movement, also looser and more direct, is what we call the “Z Pattern”, or Z Pattern.

This pattern occurs when simplicity is a notable feature on the page, which often has Call-to-Action as its main focus.

This focus on simplicity makes the Z pattern especially well-suited to landing page design, where you want a singular focus to draw people in and encourage them to take action.

Pattern Z can be equally leveraged, as long as you put your call to action along the Z path to ensure the visitor sees it; thus leading you to achieve more conversions.

Like Pattern F, the shape of Pattern Z does not have to be an exact Z.

But paying attention to the image above, we can see, from the numbers, where the eyes of visitors will go on a more simplified page.

This means that you can distribute the information along this Z, considering the order of the points where the eyes are fixed.

That is, longer text, such as a title, can be along circle 1, reaching where circle 2 is located. An illustrative image can be on 3 and the CTA button along the Arrow to the area of ​​circle 4.

In general, follow the following line:

  • The top horizontal row includes the main components you want visitors to focus on first.
  • The diagonal line should present whatever information leads to your CTA button, so it will serve as a converter for the information in the previous line that turns the idea into action.
  • The bottom horizontal line should highlight the CTA at any point along this line, with the visitor already informed or worked on in the previous lines

Leave A Reply

Your email address will not be published.