Landing Page Design Principles

1. Sections
2. Visual Hierarchy
3. Call to Action (CTA) & Forms
4. Cover
5. Navigation
6. Color
7. Font
8. Images
9. Icons
10. Animation
11. Overall Style
12. Recap

We introduced the concept of sections in the second chapter when we broke down a website's structure—your offer, some info about the project, the feedback, schedule, and call-to-action blocks—all of these are known as sections in a landing page.

Sections are useful as each one addresses a specific question—how much does something cost, where are we located, why are we the best—meaning they contain one fully-formed idea. This makes it easier for people to perceive information, as you've brought up a subject (e.g., "Who is this course for"), explained it, and moved on to the next one. Consistency and predictability are two things the human brain loves.

Landing sections differ from traditional presentation slides in that they're not restricted by screen height. A single section can take up anywhere from several screens to a small part of a single screen.

While the elements within a section may look different, the important thing is to keep them linked by a single theme.

Spaces are necessary, but aren't always enough to clearly divide the landing page into different sections.

A divider in the form of a line or a border shape is another way of marking the beginning or the end of a section.

For the landing page to look neat, we recommend that you use one border shape throughout the page. Using different styles—zigzags paired with slanted dividing lines, for example—will make the page difficult to digest.

Sections can either contain headings on their own or feature subheadings. Headings define the rhythm and structure of the page and help users identify the beginning of a new idea.

For example, if the first heading "About the Course" is 62px, the heading of the next section—"Who the Course is for"—should also be 62px. This will make the page look neat, while each new section (and each new idea) will be easy to read.

To make the page structure readable not only to humans, but to robots as well, use the H1 tag for the heading on the cover of your landing page, and add the H2 tag to each section heading. Search engines will interpret this as a well-laid-out and correctly structured page.

Section headings don't always have to be black—they can be colored too. This is a fairly rare move, as colored headings are more difficult to fit into the overall style of the page.

If highlighting an element with color is necessary, then rely on the same principle we applied to the heading size—keep the color of all section headings identical to make the page easier to read.

We've noticed that pages that feature sections with columns placed one after the other are hard to read.

It makes more visual sense for neighboring sections to have the same number of columns—three, for example. Such a page will still look unbalanced.

If you're not experienced in web design, it's better to avoid using columns altogether—they're pretty difficult to get right. You can also alternate between sections with columns and sections with text. For example, a column of text can be followed by three columns with icons, then a key phrase with a background image, followed by three more columns or a column of text, and so on.

In the beginning, we talked about a section consisting of a heading and content. This is true in most cases. However, sometimes there are sections that don't fit into that definition.

A photo gallery, a central piece of text, or a block of text and a picture with no heading are all examples of "custom" sections. However, if they still contain one idea and answer one question, they are still subject to the same principles, and need to be spaced just like all the other sections, and highlighted using a color background or border shape.

Here are some examples of custom sections:

Visual hierarchy is essential to eliminating chaos on a landing page. "What's on offer? How do I use this? Why do I need this?"—these are the questions that a person should instantly get answers to. Visual tools will help you do that.

For example, a section's main heading is larger than the heading inside a section. In this case, the visual hierarchy helps one understand that the small headings are similar in meaning, with the main heading uniting them under one umbrella.

But you should pay attention to the contrast. Large elements should be large. If a second-tier heading is 22px compared to a 24px first-tier heading, the visual highlight is too weak, meaning there is no hierarchy. A 1.5–2-fold difference in font size is easier to notice and interpret.

In the context of visual hierarchy, "brightness" refers not to a shade of color, but the contrast and amount of color on the page in relation to the main color scheme.

A green header coupled with blue text and an orange button will create visual conflict, and all three elements will eventually be lost. This is an exaggerated example, but you should really think hard every time you want to add another color.

If a contrasting color appears against the background of a more general color, the element becomes more visible, attracting attention and saying: "I'm important."

If several elements are located next to each other, that likely means they're linked by a common theme or meaning. To combine the elements into a group, you need to reduce the distance between the elements inside the group and increase them from the outside.

Let's look at some examples:

Multiple groups of elements can form a single composition within any given section. For example, a heading and a subheading can form one group, while a block of text with an image in two columns can form another.

Each group can also have subgroups. Elements within a subgroup are brought together in line with the same principle: the elements that are related in meaning are placed closer to each other than to all the other elements and subgroups.

You can highlight an element just as effectively using white space as by manipulating its size or color.

Densely arranged elements are like your grandpa's shed—you know that the wrench is around here somewhere, but it's impossible to find, so you get angry and waste time looking for it.

You can use a bright background or a contrasting button to highlight the block among other sections on the landing page.

To encourage someone to fill out a form, you can specify what'll happen after they click the corresponding button.

"We'll call back within an hour to coordinate the delivery," "We'll send a reminder 2 hours before the webinar," "We'll send the e-book to your email," "We'll only send an educational newsletter once every two weeks,"—these are the examples of simply worded messages with a human touch that encourage trust.

The landing page is sometimes an intermediate link in the sales funnel, with the form acting as a lead magnet.

A lead magnet is the exchange of contact (an email or phone number) for something valuable such as an e-book, a discount, a webinar, a checklist, or research data. This creates the following funnel:

• Get for free
• Buy for a reasonable price (purchase a course)
• Aftersale (personal consultation)

For example, someone signs up and gets the first chapter of an online course for free, which inspires them to buy the entire course and eventually order a personal consultation.

Here are some examples of how to apply text to the above photos:

Illustrations are a good alternative to cover photos, as they set the style for the landing page and make it more interesting.

You can order custom illustrations from an illustrator or find them in a photo bank.

The optimal layout on this type of landing page cover would be to place the text to the left of the illustration. A feedback form or target action button can also be added to the header.

This option isn't any worse than a cover with a photo—sometimes it can be even better. Leave the background white and emphasize the typography—work on the composition, size, and color of the fonts.

You can use a monochrome color or gradient as a background. With the help of Tilda Colors, you can copy colors and gradients or download them in PNG format with 1680px resolution suitable for full-screen images.

Another option is using abstract graphics—geometric shapes, waves, lines, or a pattern. The main thing here is keeping the header readable against the graphic background.

We covered the wording of the cover text in the second chapter.

As for the length and form of the text, we have to remember that the heading and subheading on the cover shouldn't be overbearing. Ideally, this would mean one simple sentence in the header explaining the essence of the offer and one or two sentences in the subheading that complement and open the offer up. One or two lines for the header and two or three lines for the subheading should be enough.

The menu is used on the cover if the page is long and you need to navigate between sections. The menu has a helper function here - in most cases, you can do without it.

A general rule for any menu is to avoid overload at all costs. This is even more relevant for the landing page menu, as it should help the user find information without distracting them from the target action.

A menu is overloaded when there are too many elements. That's why you can safely remove the excess (e.g. social network buttons), reduce menu items to a minimum, and shorten names to one word for each item.

The menu background can be transparent, transparent, or colored.

Transparent menu background. This menu has a lightness to it and is also the most versatile and common style. Covers without small details work best with the transparent menu. Color filters also work well here.

Semi-transparent menu. This will do the trick if you want to increase the menu's readability without overburdening the first screen.

Menu with a colored background. At 100% opacity, the color of the menu becomes a foundation for the text, making it perfectly readable. This method has two disadvantages: firstly, the menu becomes too noticeable and attracts attention, and secondly, it is a rather strong stylistic tool that won't be suitable for all landing pages.

When sorted by type of behavior, menus can either be static, fixed, or can appear when scrolling.

Static menus are located at the top of the page (above the cover or overlapping part of the cover), staying in place and disappearing from the field of view when scrolling.

Fixed menus are pinned to the top of the landing page and remain visible while scrolling. There may also be two menus: one stays at the top of the page, the other one appears on scroll. In this case, the second menu often contains a phone number or registration button to simplify the call to action.

Combined menus appear when static and fixed menus are used simultaneously. The static menu contains the logo, menu items, and contacts, while the fixed menu contains a call to action button.

You can also create a simple menu for the desktop version of your landing page, and make a hamburger menu with shortened or other information for the mobile version.

Hamburger menu. Typically used in mobile versions to make the menu more compact. Sometimes also used for the desktop version to make the page more concise.

A menu in the form of bullet points or dots fixed on the side of the page distracts little to no attention, yet helping users navigate. Indicator points tell the user which part of the page they're viewing—when they hover over the indicator, they'll see a text hint, and when they click it, they'll move to the corresponding section.

Scroll indicators are a light version of the side navigation bar at the top of the screen. As the progress bar moves from left to right, it represents how far a user has scrolled down the page.

A progress indicator is a staple of good UX. If you click a link and the page isn't loaded instantly, you'll see that the process has started, there's a reaction.

The scroll-to-top button is used on long landing pages (usually 5 screens or more). This is an auxiliary element that shouldn't be too bright or contrasting so it doesn't conflict with the target action button. The best indents of the button from the sides are 20-30px.

Clicking on the logo leads to the beginning of a page or the home page. This action has become fairly common.

When a user is done with scrolling, they shouldn't run into a dead end. Here are some navigation options for the end of the page:

• Call to action: Form or button
• Links to additional materials: Recaps of past events, links to other webinars
• A footer with website navigation if the landing is part of a multi-page website. The scale of the footer shouldn't interfere or distract from the target action.

Placing a call to action form or button at the end is one of the most common-sense things you can do when designing your landing page. In theory, the landing page exists to convert visitors to buyers or potential customers—any extra navigation can distract from this purpose.

On the other hand, if a user doesn't have enough information and has no opportunity to learn something else about your business, the page can be perceived as a dead-end, meaning there's a chance that the user will close your page and move on to a competitor's site.

The main rule here is that there shouldn't be too many colors on the landing page—just one or two. The highlight color should take up no more than 10% of the overall space, as it merely draws attention to the elements that have to be visible.

At Tilda, we call this 90:10 ratio the "boutique rule." In the expensive stores, things are never crowded on a hanger in narrow aisles. On the contrary—each item has enough space around it to be noticed.

Expensive stores don't have to prove or explain why they have high prices. They're confident in their offer, and their customers are confident in them. No fussing.

A landing page is essentially the offer of a product or service. When people part with their money, they want to make sure that they're paying for either your expertise or excellent quality. Measured use of colors will support their confidence in that.

The human brain actively uses stereotypes: It expects a beauty salon's landing page to be light, and a tattoo salon to be black. Green is associated with fresh produce, while technology is typically linked to the color blue. The rules aren't etched in stone, but they simplify communication, like any other pattern.

There are a lot of ready-made palettes on the Internet, but their disadvantage is that they offer complex combinations of 3-5 colors which will look ridiculous on a landing page.

If you need help in choosing a specific shade, it's more reliable to use the following:

Tilda Colors is a color palette collection where you can pick up a color or a two-color gradient and use it in your projects. Click on your favorite color to copy its code to the clipboard.

You can also download any color or gradient in PNG format with a 1680px resolution suitable for full-screen images.

Material UI Colors is a color palette for material design.

Color Claim is a project by designer Tobias Van Schneider, who has been collecting successful color combinations since 2012. His collection mainly consists of two-color combos, which are ideal for designing landing pages.

WebGradients is a free collection of 180 linear gradients and color combinations. Most gradients here are made up of two colors.

There are a small number of landing pages that aim to convey the atmosphere of happiness and joy, convincing people that they will have a good time. Examples include festivals, concerts, and other events. In this case, the "boutique" rule can be put to one side and the color selection can be applied according to the mood you're trying to create using your taste and intuition.

Paying attention to font weight is essential when creating a landing page.

Font weight refers to how thick or thin the characters in the text should be displayed. The most commonly known values are normal and bold. Some fonts only support those two options, but the majority have additional thickness settings: light, normal, medium, semi-bold, and bold.

The landing pages for a marathon and an expensive cosmetic product have different tonalities, which can each be expressed by various font combinations.

A basic combination that will suit any project. Normally used if you need to create a landing page with no additional highlights.

A popular combination that is both subtle and neutral yet capable of displaying drive and energy. This combo can work for landings related to movement and activity.

A font combination for landing pages related to technology or aesthetics that maintains a modern and progressive tone. Requires a lot of white space and small bright highlights.

This section covered several small, highly practical aspects of font usage. If you want to learn more, head over to "How to choose the right font for a website or article."

Images are easier to perceive and faster to read—it is better to put up a picture of the product instead of a detailed description of what it looks like.

Here are some examples of landing images:

• Book: a spread
• App: a video or interface screenshots
• Tour: Landmarks along the route
• Food delivery service: a box of food
• Webinar: a portrait of the presenter
• Conference: an image of the event venue

People are generally distrustful of unfamiliar websites, which makes complete sense, as anyone can make a website, and there are more than enough fraudsters on the Internet. Photos are one of the factors that help build trust. This only works if the images are genuine and show your product or real people.

If you can't take your photos, a photo bank can help. Finding original photos is key to making the landing page look good. Marketing has been around for a long time, and there are a lot of image cliches that people find irritating: Piggy banks, pictures of people on top of mountains, and handshakes between people in suits.

There's no need to try and convey an idea using simplistic associations. A picture of someone climbing a staircase doesn't say "I'm a successful coach"—it's probably just a bad photo.

If you're holding a workshop for the first time and you haven't yet got any pictures, you can find close-up images of similar events in a photo bank that will help you get the atmosphere and emotion across.

If you're showing pictures of your team, then it may be best to hire a photographer to make sure the images are uniform and consistent with the landing page style.

You can also apply a color filter to make your photos look more uniform. If you have a corporate color, that too will maintain the identity of the project.

The easiest way of balancing out different photos is making them black and white.

Thin linear icons will suit pages with minimalistic design and thin fonts. If the page has large headings or bold fonts, then filled icons or icons with wide outlines will work better.

All the icons on a landing page should have the same style. Mixing line icons with colored icons and interchanging thin and filled icons leads to sloppiness. Even the thickness of the lines matters—it should all be the same. Not every person will notice that the icons come from different sets, but they'll still have a hunch that something's not quite right.

If you're using Tilda to create your landing page, you can use free icons from the Tilda Icons collection embedded in the editor. Open the content block with an image, click the search icon, and go to the Tilda Icons tab.

The icons are divided into 45+ categories by business type and are searchable by keywords. Designers regularly create new sets of icons and the categories become larger. If you need to edit an icon—by changing its color, for example—you can download a set for free following this link:

This project was created by designer Dario Ferrando. 730 line icons divided into categories are available for free.

A large collection of icons with a convenient search function. Files are downloadable in PNG or SVG format. Icons can be used free of charge if you credit the author.

Exclusive icons, and 3D illustrations. Available for free in low resolution with mandatory attribution.

The average price of a custom icon drawn by a professional illustrator is $10. Ready-made icons are often sold by subscription—about $10 per month—or as part of a set.

Icons are subject to the same copyright laws as photos, so pay close attention to the licensing when you use icons on your landing page—find out if the icons are free or paid, and research under what conditions they can be used.

Animation use should be moderate in order to avoid the page-turning into a high-school PowerPoint presentation.

Here's how you can avoid excessive animation:

The animation makes the page more attractive. It has no meaning aside from being a form of entertainment and a way of making the page less monotonous. If you animate everything, the page will become monotonous again—not to mention annoying.

Website performance is an important part to consider when using animation. Be sure to test animated landing pages on weaker computers, as not all devices are able to quickly load the animation.