1. Web Design
  2. HTML/CSS
  3. Landing Pages

5 Characteristics of a Great Landing Page

Scroll to top

A landing page provides your site’s visitors with a crucial first impression. That impression could be the difference between making a connection or creating a disconnect. Therefore, every detail matters in the quest to keep a user’s interest.

Here are five things to look for in a great landing page, along with examples that get it right. All of the examples we’ll show you are from Envato Elements, a service that provides members with unlimited access to a vast library of templates, fonts, add-ons and design assets–all for a single monthly fee.

1. A Clear Call-To-Action (CTA)

The singular mission of every landing page should be to convince the user to take action. Whether that action takes the form of contacting you, downloading a file or making a purchase–a simple, clearly defined Call-To-Action (CTA) can help you convert.

Hype is a HTML/CSS landing page that provides an attractive and easy-to-read CTA. The call is right at the top and consists of a headline, striking buttons and a beautiful image. As a user, you don’t need to think twice about what the point of the page is–it’s all right there.

Hype - App Landing PageHype - App Landing PageHype - App Landing Page
Hype - App Landing Page

2. Separation of Content Sections

Each section of a landing page should have its own room to breathe. Along with white space, backgrounds and images can also be used to provide visual separation. This helps to ensure that users won’t be overwhelmed or distracted during their stay. Single-page sites use this to great effect with the help of anchor navigation, providing each new section a clear separation from the last.

The PURE template is a great example in that it uses a combination of white space, backgrounds and photos to make each section stand out. Another nice touch is the use of navigational bullets that let users scroll down one full section at a time. This really helps you maintain focus on just one piece of content.

PURE - Sublime Coming Soon TemplatePURE - Sublime Coming Soon TemplatePURE - Sublime Coming Soon Template
PURE - Sublime Coming Soon Template

3. Clean and Concise Text

The easier it is for users to read and digest your landing page’s content, the better your chances for success. Use fonts that are readable with a healthy dose of letter spacing and line height. And, it’s also advisable to avoid lengthy blocks of text content. Content that gets right to the point is more efficient and just looks better.

Advent is a landing page template that provides a solid blueprint for this philosophy. It features nicely executed typography (although, a bit more contrast in some sections would be nice–this can be easily tweaked via CSS) and concise content throughout. Following the lead of its demo pages will get you started off in the right direction.

Advent Multipurpose Landing Page TemplateAdvent Multipurpose Landing Page TemplateAdvent Multipurpose Landing Page Template

4. Use of Visual Information

Along with text that is both short and sweet, the use of images can be a big part of defining your overall message. This can come in the form of a captioned photo, diagram, chart or infographic. Visual elements like this often get the point across much better than text alone.

Ex Watch is an excellent example of a landing page that uses various elements to visually inform users. There are diagrammed product photos, icons that call attention to specific features and a slick use of animation. It’s visually appealing and tells a story, as opposed to just plainly displaying information.

Ex Watch - Single Product eCommerce HTMLEx Watch - Single Product eCommerce HTMLEx Watch - Single Product eCommerce HTML
Ex Watch - Single Product eCommerce HTML

As a bonus, it’s worth noting that there are tons of great visual assets like this available to members of Envato Elements. Browse their collection of Infographics, Icons and other Vector Images to get a sense of what’s available. They can be very helpful in crafting the exact look and message you’re after.

5. Appealing Color Schemes

The use of color is certainly a subjective matter of personal taste. But it’s worth pointing out that a landing page that uses color in a user-friendly way can make it easier to use and understand. Color coding navigation elements and using high-contrast ratios are simple ways to boost UX.

Taking a look at Landify, its use of color is outstanding. It’s pleasant to look at while calls to action are incredibly easy to point out. In some ways, the look is very simple, but that’s what makes this template so effective.

LandifyLandifyLandify
Landify

Your Message Has Landed!

While you might use a landing page for a wide variety of subjects, certain elements should be common throughout. You’ll want to make sure that it’s easy on the eyes and easy to use. It should also tell the user a story in the most efficient way and lead them to action. With the help of the templates above from Envato Elements, you’ll be on the path to accomplish just that.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.