Everything You Need to Know About Landing Page Design

Whoever said “You never have a second chance to make a great first impression,” makes a valid point. You only get one opportunity to have your first interaction with another person … and the last thing you want is for that first interaction to be a bad one. After all, humans are known to比积极的经历更生动地记住负面体验。

Great first impressions matter when meeting someone, going to a new place, and even visiting a website.

In a world where virtually每一个business has a website, creating a positive first impression when your target audience members click on your site via the search engine results page (SERP) is critical. That’s because your登陆页面是您网站的“目的地页面”，还是第一页that visitors land on when they open your site.

另外，要reallyput the pressure on, you only have about7 seconds在普通访问者决定是否留在其他地方或反弹之前，在您的网站上给您的网站留下了深刻的印象。

那么,如何确保第一个互动your target audience has with your website is a positive one?

The answer: Great landing page design.

Landing Page Design

着陆页设计是为您的目标受众和网站访问者创建诱人的网站页面的过程。它应该鼓励他们从潜在客户转变为订户或客户。有效的着陆页设计具有品牌，包括您的产品或服务以及公司信息，并包含相关的报价和行动（CTA）。bob全站app

Responsive Design

您可能还听说过响应式设计, or responsive web design, before.

A web page with响应式设计可以通过任何设备自动查看 - 含义，网页根据需要更改以适合任何屏幕或设备（即台式机，笔记本电脑，平板电脑或智能手机）。

Source

由于更多的人从不同的设备和位置搜索互联网，因此必须进行响应式设计，以确保访问者和客户在您的网站上获得愉快的体验。

尽管建议您的整个网站响应迅速，但至关重要的是，进行响应迅速的着陆页设计 - 同样，这是第一页每一个visitor interacts with and sees when they open your website, so outstandinguser experience (UX)is crucial.

没有响应设计的网页可以为访问者带来令人沮丧的体验 - 他们将处理不适合其屏幕的图像和文本。这可能会导致访问者完全放弃您的网站，甚至可以访问竞争对手的网站。

Note：取决于登陆页面design softwareyou choose to work with (we’ll cover some options shortly), responsive design might be an automatic feature for you. In this case, you won’t have to worry about responsive design — when you design your landing page, it’ll already be responsive.

除了具有响应迅速的设计外，还有许多其他方面创建和设计着陆页that impact your ability to convert visitors into customers and enhance UX. So, let’s review some of the most common and important steps for you to take into consideration while designing your landing page.

1.确定您的目标受众及其需求。

No matter which part of your business you’re working on, you should be thinking about who your target audience is and how you can resolve their pain points — and designing your landing page is no exception to this rule of thumb.

在计划着陆页设计的同时，请考虑您的目标受众在打开网站时的期望和需要查看。问自己以下问题，以帮助您：

• 登陆页面立即需要为您的听众回答哪些问题？
• How can you brand your landing page so your audience knows they’re in the correct place?
• What attention-grabbing headline, relevant content, and CTA can you include on your landing page to efficiently and effectively meet the needs of your audience?
• 与竞争对手相比，如何确保您的着陆页是独一无二的？
• 您如何证明您的公司，产品和服务为您的受众提供的价值？bob全站app

如果您需要考虑目标受众是谁的其他帮助，请尝试creating buyer personas for your business。

2. Ensure the landing page has a specific purpose.

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:

• 增加转换sharing relevant CTAs
• 提高品牌知名度including an email newsletter sign-up form
• Boost sales bydisplaying your top-selling product
• 通过对您的产品或服务产生更大的兴趣incorporating information about how they solve your visitors’ pain points

Without a defined landing page purpose, your visitors may feel confused about what to do once they’ve landed on the page or uncertain about whether or not they’re in the right place. This may cause them to lose interest and abandon your page entirely. So, use your design to ensure your landing page has a clear purpose.

3. Choose a landing page design software.

有数十种软件选项可以帮助您bob电竞官方下载build and design a landing page。The key is finding one that works for you. Review thefive software options we recommend belowand the various features they each offer below.

4.写诱人的领先页面标题。

The purpose of a header is to catch your visitors’ attention and/or make them want to do something — meaning, headers should be enticing, impactful, and action-oriented.

This is most likely one of the very first (if notthe首先）您的网站访问者将阅读有关您公司的内容。bob全站app因此，您的着陆页标头还应补充音调，并在您网站上的其他地方复制（以及您的网站）meta description）。

When you use enticing and value-driven vocabulary in your landing page headers, you ensure your visitors know they’re going to get something worthwhile out of converting and spending time on your site.

例如，看看HubSpot’s Buyer Persona Generator landing page。标题说：“使我的角色……来自Hubspot的买家角色发电机。”多亏了标题，访问者知道他们在哪里以及他们从访问着陆页中得到什么。

Source

Visitors are then automatically directed to the second part of the landing page which also includes enticing and value-driven language.

Source

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

5.使着陆页变得美丽andhelpful.

我们已经讨论了很多事实，您的着陆页是您网站访问者打开您的网站时首先要查看的一件事。因此，除了引人注目的标题和语言外，您还希望您的页面成为美丽而乐于助人。

使您的着陆页美丽通过：

• Incorporating consistent, on-brand colors and fonts
• Keeping your page organized
• Remembering少即是多在设计时
• 包括美学上令人愉悦的视觉效果（图像和/或视频）
• Designing obvious and exciting CTAs

Make your landing page helpful by:

• Incorporating content that pertains to your target audience’s needs and challenges
• Designing CTAs that provide visitors with value
• Including information that tells visitorswhy他们应该转换
• 确保访客知道how转换
• 确保访客可以轻松访问您的联系信息

6. Publish and test your landing page design.

Once your design set, it’s time to publish and test it among your audience members. After your landing page is published, you canA/B test different design elements(e.g. colors, CTA buttons, phrases, font, etc.) to see which options lead to the highest number of conversions.

这样，您可以确保您的着陆页满足受众的需求，同时也确保您获得最佳结果，从而影响您的业务底线。

In addition to keeping these landing page design steps in mind, consider these landing page best practices as well. You’ll notice some of these best practices are also directly tied to the specific steps we’ve just reviewed above.

当我们回顾以下最佳实践时，我们将参考以下注释的图像HubSpot's landing page:

1. Remember your audience throughout the design process.

正如我们在上面评论的那样，设计目标页面的第一部分是确定目标受众 - 请记住在整个设计过程中牢记它们。这样，您将创建设计并结合引起观众共鸣的内容。通过这样做，您将有更大的机会增加现场访问者之间的转化。

2.写一个引人入胜且有用的标题。

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

For example,HubSpot’s landing pagesays, “There’s a better way to grow.” This headline gets visitors in the mindset of HubSpot being something they需要to improve and expand their business.

此外， ”变得更好” is a saying HubSpot uses throughout all marketing materials. It’s something the company works to do every day — to help other businesses grow better. This makes the headline on-brand too (which isanother最佳练习我们将更多地谈论暂时）。

3.包括独特而引人入胜的视觉效果。

Include engaging visual content on your landing page. Whether it’s a photo, video, or animation, you want your landing page design to somehow pique the interest of your visitors.

HubSpot Landing页面的视觉内容是公司独有的 - 动画设计和颜色是品牌的。bob全站app他们也不会从页面上的书面内容中引起注意。

4. Keep it simple.

尽管您想在目标页面上包含标题，书面内容，CTA和视觉内容，但这并不意味着您希望设计太忙。实际上，您想要相反的情况。

Remember:Less is more当谈到你的着陆页的设计(and your entire website for that matter). This keeps things clean, organized, and simple to understand and navigate for your visitors.

正如您在HubSpot的着陆页上看到的那样，尽管视觉效果占据了很多页面，但标题，书面内容和CTA以一种简单而美观的方式组织。

页面顶部的导航是极简主义的，右下角的实时聊天可能会崩溃，以使登陆页面显得更加干净。

5。确保其具有响应式设计。

Remember, the chances of your website visitors, leads, and customers visiting your website via a mobile device or tablet is high. So, ensure your landing page has a responsive design that automatically changes format based on the device it’s being viewed on.

For example, here’s what HubSpot’s landing page looks like via my iPhone. As you can see, all of the content is the same and it includes the same CTA and visuals, but it’s organized and formatted in a way that fits my screen.

Source

6. Keep it on-brand.

When a visitor comes to your landing page, they should automatically know it belongs to your business. Brand your landing page in a way that complements the rest of your marketing content, logo, and colors. Your visitors should be able to immediately know your landing page belongs to your business due to the branding you incorporate.

HubSpot的着陆页做得很好 - 它遵守了HubSpot’s Brand Guidelines。HubSpot徽标生活在着陆页的顶部。

7.使用CTA优化您的着陆页。

Your landing page should include at least one relevant CTA, located above the fold (meaning, visitors don’t have to scroll to get to the form because it’s in view as soon they hit the page), so visitors can come to your landing page and convert within seconds. This CTA might be used to learn more about your product or service, purchase your product, sign up for a special offer, or subscribe to your email newsletter.

HubSpot的CTA按钮是着陆页面上最明显的功能之一。CTA按钮清楚地说明了访问者摆脱转换的原因。由于CTA按钮中有“免费”一词，因此它变得更加诱人……谁不喜欢自由？

8.添加您的联系信息。

Your visitors may come directly to your site in search of your contact information or determine they want to contact you for assistance or support after spending some time on your page.

To avoid wasting their time and causing them any unnecessary frustration while trying to locate your contact information, place these details on your landing page. This keeps the process of contacting you as simple and straightforward as possible for your visitors.

HubSpot在登录页面顶部的导航栏下列出了联系信息。如果您希望将目标页面尽可能简约保持，这是一个不错的选择。

9. Include live chat on the landing page.

If possible, include a在线聊天在您的着陆页上发挥作用。这样，从打开您的页面的那一刻起，访问者就可以得到他们想要和需要的直接帮助。

HubSpot的着陆页有一个实时聊天功能，可轻松访问即时支持。可折叠聊天框的位置使页面看起来有组织。

一旦你设计的着陆页,不要感觉locked in — this is an iterative process. For instance, feel free to test your designs among your target audience to determine which colors, CTA buttons, headlines, visuals, and written content resonate with them best (and result in the most conversions).

To do this, you may A/B test designs. After reviewing your results, you'll know which design works best for your target audience and increases conversions — stick with that design until you have a new and improved design to share, your product line changes, or your branding is updated — then, start this process again.

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

Landing Page Design Software

There are many landing page design software options to choose from, all of which can help you design your entire website (not只是您的着陆页）。以下五个选项简化了设计过程，并且不需要您以前的网络或设计经验。

1.HubSpot免费着陆页构建器

HubSpot的免费着陆页构建器可帮助您免费创建多个着陆页设计。该软件包bob电竞官方下载括一个免费的内置响应着陆页模板库，以及用于添加图像和复制的页面编辑器。

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

2.Instapage

Instapageallows you to design and publish custom点击登陆页面with a variety of template options. The page builder is easy to use and offers the ability to A/B test different designs to determine which works best for your audience. The software also helps you optimize your landing page with dynamic text replacement so you can automate the opt-in content on your page.

3.解开

解开has a landing page creator with over 100 templates to choose from so your design complements your brand and content. Templates are organized by business type and include options for SaaS companies, agencies, and ecommerce businesses. Unbounce landing pages are responsive and completely customizable.

4.mailchimp

mailchimp得益于其拖放页面构建器，您可以在几分钟内设计目标页面。您还可以设置其他网站内容以填充目标页面，从而进一步简化设计过程。添加自定义CTA，以吸引您的目标受众转换或注册。而且，如果您需要帮助个性化着陆页，请查看和引用MailChimp提供的各种教程视频。

5。Leadpages

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

当您开始考虑着陆页设计并仔细研究我们在本指南中提供的详细信息时，您可能会觉得自己需要其他设计灵感。如果是这种情况，请查看我们的博客文章great landing page design。

Download dozens of free landing page examples to inspire your business’s design.

Begin Designing Your Landing Page

Your landing page is the first thing any visitor who comes to your website sees and experiences. That’s why great landing page design is so important — it’s every visitor’s first impression of your website … and possibly their first impression of your business as a whole.

A great landing page has the power to help you generate more leads, close more deals, enhance your website’s user experience, impress visitors, and ensure your site has a professional, on-brand feel. Work through these landing page design steps and best practices above to ensure your landing page accurately represents your business and makes your leadswantto become customers.

Editor's note: This post was originally published in August, 2017 and has been updated for comprehensiveness.