Everything you need to know about landing page design

Whoever said, “You never have a second chance to make a good first impression” is making a valid point. You only have one opportunity to have your first interaction with another person … and the last thing you want is that that first interaction be a bad one. After all, it is known that people remember negative experiences more vividly than positive ones.

Good first impressions are important when you meet someone, go to a new place, and even visit a website.

In a world where virtually every business has a website, it’s important to make a positive first impression when your audience members click on your website through the Search Engine Results Page (SERP). This is because your landing page is your website’s “landing page”, or the first page that visitors land on when they open your website.

To really apply pressure, you only have around 7 seconds to make a great first impression on your website before the average visitor decides whether to stay or jump somewhere else.

How do you ensure that your target audience’s first interaction with your website is positive?

The answer: great landing page design.

Landing page design

Landing page design creates an enticing website page for your target audience and website visitors. It should encourage them to convert from leads to subscribers or customers. Effective landing page design is brand-related, contains your product or service and company information and contains relevant offers and calls for action (call-to-action, CTAs).

Responsive design

You may have heard of responsive design or responsive web design before.

A website with an attractive design can be automatically displayed on any device. That said, web pages change as needed to fit any screen or device (i.e. desktop, laptop, tablet, or smartphone).

adaptable web design

source

With so many people browsing the internet from different devices and locations, a responsive design is required to ensure that visitors and customers have a pleasant experience on your website.

While it is recommended that your entire website be responsive, responsive landing page design is vital. Again, this is the first page that every visitor interacts with and sees when they open your website. Hence, having a great user experience (UX) is critical.

Web pages that are not nicely designed can be a frustrating experience for visitors – they will deal with images and text that don’t fit on their screen. This could potentially result in visitors leaving your website entirely or visiting a competitor’s website instead.

Note: Depending on the landing page design software you are working with (we’ll cover some options shortly), Responsive Design may be an automatic feature for you. In this case, you don’t have to worry about the responsive design. By the time you design your landing page, it is already responding.

Aside from a responsive design, there are many other aspects of creating and designing a landing page that will affect your ability to convert visitors into customers and improve UX. So let’s take a look at some of the most common and important steps you need to consider when designing your landing page.

How to design a landing page

  1. Identify your target audience and their needs.
  2. Make sure the landing page has a specific purpose.
  3. Choose a landing page design software.
  4. Write enticing landing page headers.
  5. Make the landing page nice and helpful.
  6. Publish and test the landing page design.

1. Identify your target audience and their needs.

Regardless of what part of your company you’re working on, it is important to think about who your target audience is and how you can address their vulnerabilities. Designing your landing page is no exception to this rule of thumb.

When planning your landing page design, think about what your target audience will expect and see when they open your website. To help you do this, ask yourself the following questions:

  • What questions does the landing page need to answer for your audience right away?
  • How can you brand your landing page so your target audience knows they are in the right place?
  • What attention grabbing headline, relevant content, and CTA can you include on your landing page to efficiently and effectively meet your audience’s needs?
  • How can you make sure your landing page is unique compared to your competitors?
  • How can you demonstrate the value your business, products, and services bring to your audience?

If you need additional help deciding who your target audience is, create buyer personalities for your business.

2. Make sure the landing page has a specific purpose.

In order for your landing page design to be successful, it needs a clear purpose. When visitors come to your landing page, they should immediately know why the page exists.

For example, you can use landing page design to clearly define the purpose of your page in the following ways:

  • Increase conversions by sharing of relevant CTAs
  • Increase brand awareness including a registration form for an email newsletter
  • Increase sales Display of your best-selling product
  • Develop a greater interest in your product or service Information on how to solve your visitors’ weaknesses

Without a defined landing page purpose, your visitors may feel confused about what to do when they land on the page or not sure whether they are in the right place or not. This can cause them to lose interest and leave your page completely. So use your design to make sure your landing page has a clear purpose.

3. Select a landing page design software.

There are dozen of software options you can use to create and design a landing page. The key is to find one that works for you. Check out the five recommended software options below and the different features they each offer below.

4. Write enticing headers.

The purpose of a header is to grab your visitors’ attention and / or get them to do something. That said, headers should be compelling, impactful, and action-oriented.

This is most likely one of the very first (if not the First, things your website visitors have read about your business. For this reason, your landing page headers should also complement the tone and copy across your site (and in your meta description).

Using enticing and value-driven vocabulary in your landing page headers will ensure that your visitors know that by converting and dwell on your website, they are getting something of value.

For example, take a look at the landing page of HubSpot’s Buyer Persona Generator. The headline reads, “Make My Persona … a Buyer Persona Builder from HubSpot.” Thanks to the header, visitors know where they are and what they will benefit from visiting the landing page.

Landing page header

source

The visitors are then automatically directed to the second part of the landing page, which also contains enticing and value-oriented language.

Landing page ctas

source

The design includes two CTAs that visitors can click on based on their needs and interests. The headings on this landing page are useful, relevant, eye-catching, and branded

5. Make the landing page nice and helpful.

We’ve talked a lot about your landing page being the first thing your website visitors see when they open your website. So you don’t just want to convince headlines and language, but also your page nice and helpful.

Make your landing page beautiful through:

  • Integration of uniform brand colors and fonts
  • Keep your page organized
  • Noticing less when designing is more
  • Including aesthetically pleasing graphics (images and / or videos)
  • Design obvious and exciting CTAs

Make your landing page helpful by:

  • Inclusion of content that meets the needs and challenges of your target group
  • Designing CTAs that add value to visitors
  • Including information telling visitors why to convert
  • Make sure visitors know how to convert
  • Make sure visitors have easy access to your contact information

6. Publish and test your landing page design.

Once your design is established, it’s time to get it public and test it out among your viewers. After your landing page is published, you can A / B test various design elements (e.g. colors, CTA buttons, phrases, fonts, etc.) to see which options are producing the highest number of conversions.

This is a great way to ensure that your landing page meets the needs of your audience while also ensuring that you are getting the best results that will affect business bottom line.

In addition to these landing page design steps, consider these landing page best practices as well. You will find that some of these best practices are also directly linked to the specific steps outlined above.

Landing page design best practices

  1. Identify your target audience and their needs.
  2. Write a compelling and helpful headline.
  3. Add unique and engaging graphics.
  4. Keep it simple
  5. Make sure it has a nice design.
  6. Keep it on the mark.
  7. Optimize it with CTAs.
  8. Add your contact information.
  9. Add live chat to the landing page.
  10. Use A / B testing to determine which design works best.

As we review the following best practices, please refer to the following annotated image of the HubSpot landing page:

Example of best practices for landing page design

1. Remind your audience throughout the design process.

As discussed above, the first part of designing your landing page is identifying your target audience. Remember to keep these in mind throughout the design process. This way you create a design and incorporate content that will appeal to your audience. That way, you have a greater chance of increasing conversions among website visitors.

2. Write a compelling and helpful headline.

Add a compelling headline to your landing page to grab your visitors’ attention immediately. A good landing page headline should be eye-catching and helpful.

For example, the HubSpot landing page says, “There’s a better way to grow.” This headline gets the visitors thinking that HubSpot is something they need to improve and grow their business.

Additionally, “grow better” is a saying that HubSpot uses in all of its marketing collateral. It’s something the company works on every day – to help other companies grow better. This also makes the headline the brand (another best practice we’ll talk about more in a moment).

3. Add unique and engaging graphics.

Include engaging visual content on your landing page. Whether it’s a photo, video, or animation, you want your landing page design to grab your visitors’ attention.

The visual content of the HubSpot landing page is unique across the company – the animated design and colors are brand-specific. They also don’t divert attention from the written content on the page.

4. Keep it simple.

While you might want to add a heading, written content, CTA, and visual content to your landing page, it doesn’t mean you want your design to be too busy. In fact, you want the opposite.

Notice: Less is more when it comes to the design of your landing page (and your entire website). This keeps things neat, organized, and easy for your visitors to understand and navigate.

As you can see on the HubSpot landing page, the headline, written content, and CTA are organized in a simplified and aesthetically pleasing way, although the image takes up a large chunk of the page.

The navigation at the top of the page is minimal and the live chat at the bottom right can collapse, making the landing page appear even cleaner to visitors.

5. Make sure the design is appealing.

Remember that your website visitors, leads, and customers are likely to visit your website from a mobile device or tablet. So make sure your landing page has a nice design that will automatically change the format depending on which device it is being viewed on.

For example, this is what the HubSpot landing page looks like from my iPhone. As you can see, all of the content is the same and includes the same CTA and visual elements. However, it is organized and formatted to fit my screen.

Responsive landing page design

source

6. Keep it on the mark.

When a visitor comes to your landing page, they should automatically know that it belongs to your business. Tag your landing page to complement the rest of your marketing content, logo, and colors. Your visitors should immediately be able to tell that your landing page belongs to your company because of the branding you built in.

HubSpot’s landing page does this well – it meets the requirements in HubSpot’s branding guidelines. The HubSpot logo is at the top of the landing page.

7. Optimize your landing page with CTAs.

Your landing page should have at least one relevant CTA that sits above the fold (i.e. visitors don’t have to scroll to get to the form as it will appear once they get on the page) for visitors to get to your landing page and within convert seconds. This CTA allows you to learn more about your product or service, buy your product, sign up for a special offer, or subscribe to your email newsletter.

HubSpot’s CTA button is one of the most obvious features on the landing page. The CTA button clearly states what visitors are getting out of the conversion. Since the CTA button has the word “free” in it, it becomes even more enticing. Who doesn’t love to be free? After all, it’s over the gusset so that everyone can see it as soon as it’s opened.

8. Add your contact information.

Your visitors may come straight to your website looking for your contact information, or they may find they want to contact you for assistance or assistance after spending some time on your side.

Place these details on your landing page to avoid wasting time and causing unnecessary frustrations trying to find your contact information. In this way, contact with you remains as simple and straightforward as possible for your visitors.

HubSpot has contact information listed in the navigation bar at the top of the landing page. This is a great option if you want to keep your landing page as minimalistic as possible.

9. Add live chat to the landing page.

If possible, add a live chat feature to your landing page. This way, from the moment visitors open your page, they get the instant support they want and need.

HubSpot’s landing page has a live chat feature for easy access to instant support. The position of the collapsible chat box helps keep the site organized.

Once you’ve created your landing page, don’t feel trapped – this is an iterative process. For example, test your designs on your target audience to see which colors, CTA buttons, headings, graphics, and written content will suit them best (and get the most conversions).

You can do this by creating A / B test designs. After reviewing your results, you’ll know which design works best for your target audience and will increase conversions. Stick with this design until you have a new and improved design to share, change your product line, or update your branding. Then start this process again.

Next, let’s take a look at the software options you’ll need to get your landing page up and running so you can convert more visitors into customers.

Landing page design software

There are numerous landing page design software options to choose from that will allow you to design your entire website (not just your landing page). The following five options simplify the design process and require no prior web or design knowledge.

1. HubSpot Free Landing Page Builder

HubSpot’s free landing page generator lets you create multiple landing page designs for free. The software includes a free built-in library of responsive landing page templates and an on-page editor for adding images and copying.

When you upgrade to a paid plan, you can also create personalized CTAs, content, and forms for visitors to drive conversions. HubSpot also gives you the ability to test and analyze the performance of your landing page design to make improvements.

2. Instapage

Instapage lets you design and publish custom, click-the-click landing pages with a variety of template options. The page builder is easy to use and offers the ability to A / B test different designs to see which one is best for your audience. The software also helps you optimize your landing page by dynamically replacing text so that you can automate the opt-in content on your page.

3. Unbounce

Unbounce has a landing page builder with over 100 templates to choose from to make your design compliment your brand and content. Templates are organized by business type and include options for SaaS companies, agencies, and e-commerce companies. Unbounce landing pages are responsive and fully customizable.

4. Mailchimp

Mailchimp allows you to create your landing page in minutes thanks to the drag and drop page builder. You can also set up your other website’s content to populate your landing page, which further simplifies the design process. Add custom CTAs to entice your audience into converting or registering. If you need help personalizing your landing page, check out and reference the various tutorial videos Mailchimp makes available to users.

5. Leadpages

Leadpages is landing page design software with a drag-and-drop builder that makes it easy to customize your landing page to match your brand. You can test your designs with the software A / B to efficiently determine which option converts the most visitors.

As you think about your landing page design and work through the details in this guide, you may feel that you need additional design inspiration. If so, check out our blog post on great landing page design.

Download dozen of free landing page samples to inspire your business design.

Start designing your landing page

Your landing page is the first thing every visitor who comes to your website sees and experiences. This is why great landing page design is so important – it’s each visitor’s first impression of your website … and possibly the first impression of your company as a whole.

A great landing page gives you the opportunity to generate more leads, close more deals, improve your website’s user experience, impress visitors, and make sure your website has a professional brand feel. Follow these landing page design steps and best practices outlined above to make sure your landing page accurately represents your business and your leads want to become customers.

Editor’s note: This post was originally published in August 2017 and has been updated for completeness.

Examples of brilliant homepage, blog and landing page design

Leave a Reply

Your email address will not be published. Required fields are marked *