How to Create a Landing Page in 7 Steps And Generate Conversions + Tips and Examples
The goal of having an online business is to make a profit from selling products or services. For this, businesses need an effective marketing strategy to attract potential customers and encourage them to make transactions. That’s where a landing page comes into play.
Businesses use landing pages for various online marketing campaigns, such as pay-per-click (PPC), social media, and email marketing. Knowing how to create a good landing page is crucial to ensure the success of these marketing campaigns.
This article will cover the six steps to build a high-converting landing page. We will also share tips to optimize the web page for conversions and provide several useful landing page examples for inspiration.
What Is a Landing Page?
A landing page is a web page that focuses on converting visitors into leads or paying customers. It typically features personalized copy and a clear call-to-action (CTA) to encourage users to take the desired action, such as filling out a contact form, downloading content, or making a purchase.
Why Create a Landing Page
Let’s say you are a business consultant who offers marketing strategy and financial planning services. You want to launch an email marketing campaign to promote these offerings, attract your clients, and build an email list.
Creating landing pages for each of these services gives you various advantages. First, you can highlight the product benefits, provide customer testimonials, and include personalized CTAs.
Second, since most landing pages have a simple design, it will help you to deliver a seamless user experience. This will encourage your landing page visitors to focus on crucial elements, like the headline, copy, and CTA, to follow the intended consumer journey.
Furthermore, you can track the landing page’s performance metrics, such as bounce rates and click-through rates, to measure the marketing campaign’s effectiveness. The data is also beneficial for making improvements to your landing pages.
How to Create a Landing Page
Creating a good landing page requires careful planning and a well-executed strategy. In this section, we will go over the steps to help you make your first landing page.
1. Define Your Audience and Set Specific Goals
Defining the audience involves identifying specific groups of people who are likely interested in your product or service. That way, you can design targeted landing pages that convert.
To do that, incorporate the following practices:
- Describe your product or service. It is essential to clearly understand your product or service and its benefits to your customers.
- Analyze user demographics. Gather your audience demographics, such as age, income level, occupation, and location.
- Conduct market research. Perform thorough market research to better understand your audience’s pain points through surveys, focus groups, and social listening.
- Create a buyer persona. Use the gathered information to make a detailed profile of your ideal customer.
After defining the target audience, set specific landing page goals based on your findings and business objectives. Decide if you want the landing page to increase conversion rates, generate leads, drive traffic, or build brand recognition.
We also recommend outlining the desired outcome, such as the rate of conversions you expect to achieve within the quarter. Doing so will help you set actionable goals and accurately measure if the landing page performs well.
2. Create the Landing Page
Once you have determined the target audience and have defined clear goals, you may start building the new landing page.
There are a few ways to create landing pages, from using a landing page builder to hiring a web designer or developer.
With Hostinger, you can utilize our AI-driven website builder or use a content management system (CMS) to build and publish a landing page.
Create a Landing Page Using Hostinger Website Builder
Using Hostinger’s webpage builder is the easiest and most intuitive way to create any type of website, including landing pages.
Suggested Reading
It offers many benefits, such as:
- SEO ready. You can optimize your landing page for search engines using built-in SEO tools as well as third-party applications like Google Analytics and Hotjar.
- AI-powered solutions. Hostinger Website Builder offers AI tools like the AI Logo Design tool, AI Writer, and AI Heatmap to speed up the landing page creation process.
- Advanced security features. Hostinger provides free unlimited SSL certificates, automatic backups, and Cloudflare-protected nameservers.
- An easy-to-use editor. The builder has an intuitive drag-and-drop editor to help you design a landing page quickly without coding.
- Value for money. Access Hostinger Website Builder from just $2.99/month with web hosting, 24/7 support, and eCommerce features included.
Due to the above factors, this tool is by far the best landing page builder for users wanting a powerful solution to create landing pages quickly.
To start using Hostinger Website Builder, follow the steps below:
- Log in to your web hosting account.
- Go to the navigation menu and click Websites.
- Click the Create or migrate a website option to access the setup wizard.
- Choose the type of website you want to build. Options include Business, Online Store, or Other.
- Select Create a New Website and pick Hostinger Builder with AI.
- Choose the custom domain name you want to connect and click Select. Then, wait for the process to finish.
The tool will now redirect you to the website builder. Here, you can choose to generate a landing page with Hostinger’s AI Website Builder or design one using a pre-made template.
If you want to opt for one of the landing page templates, click on that option and follow the steps below:
- Choose a landing page template that suits your needs. You can see how it will look on different devices by clicking Preview.
- Once you find one you like, hit Start Building. It will redirect you to the editing interface.
- Follow the Site setup checklist to get your landing page ready. This includes editing the heading, updating images, and adding paragraph text.
Alternatively, you can use the AI Website Builder option to quickly generate a fully-customized landing page:
- On the top-left of the editing interface, hover your cursor over the arrow and click Try AI Website Builder. Then, hit Start Creating.
- There will be a message warning that any previous changes will be deleted. Click Change Template to continue.
- In the pop-up window, enter your brand name, select the website type, and describe your business in a few sentences.
- Click the Create a website button to let the AI Website Builder start generating your custom site.
- Once ready, you can personalize the landing page to your liking, just like you would with a pre-made template.
Create a Landing Page Using WordPress
Another method to build a well-crafted landing page is using this popular CMS. WordPress offers a block editor, professional-looking themes, and powerful plugins to help you design a website without touching a single line of code.
In this section, we will explain how to build a good landing page using WordPress’ Site Editor:
- Log in to your WordPress dashboard.
- Navigate to Appearance → Themes → Add New.
- Look for a landing page template or theme by typing the keyword landing page into the search bar.
- Install and activate your preferred theme. For example, we used the Chuo theme.
- Go to Appearance → Editor.
- Customize the page template by adding relevant blocks, such as the site title, images, headings, paragraphs, and buttons.
3. Craft an Engaging Headline
A great landing page headline is a vital element to hook visitors’ attention and encourage them to read the content.
Knowing how to create an effective one is important, so we highly recommend adopting the right strategy by ensuring the headline is:
- Clear. Your headline should be concise and to the point to immediately draw the target customers’ attention.
- Relevant. The headline must be relevant to the business offerings and consumers’ pain points.
- Reliable. A successful headline must be reassuring, so customers are convinced that your product or service can solve their problem.
To craft a compelling headline, implement the following tips:
- Focus on value. Highlight your product or service’s main benefit that helps answer or solve the audience’s problem.
- Keep it short. The best headlines are often brief, so try aiming for 10 words or less.
- Use attention-grabbing language. Your headline should be eye-catching, so write engaging descriptors to attract readers’ attention. Use action words and punchy adjectives to draw people in.
- Include keywords. Adding relevant keywords to the headline helps improve your landing page’s visibility in search results. That way, you have a better chance to drive traffic and conversions.
In the following section, we will discuss several types of landing page headlines to give you a better understanding of how they should look.
1. Value Proposition Headline
A value proposition headline focuses on the product or service’s selling point or main benefit.
Hostinger uses this type of headline on the Website Templates page, with the copy Website Templates Built for Success. The headline clearly states that Hostinger offers professionally-designed templates to help people create high-performing websites.
2. How-to Headline
The how-to headline type conveys how a product or service can solve the audience’s problem.
The Hostinger Website Builder page shows a headline that says Create a Website With Ease. This communicates that Hostinger offers a powerful tool for creating websites without hassle, successfully attracting audiences like beginners and busy business owners.
3. Action Headline
An action headline contains phrases that motivate visitors to take the desired steps toward conversion.
Hostinger’s VPS Hosting page implements an action headline that says Be in Full Control With VPS Hosting. Coupled with an actionable CTA like Start Now, the headline clearly invites readers to use VPS if they want ultimate freedom to manage their hosting resources.
4. Write Compelling Copy
The copy of landing pages is the written content that helps drive users to take a specific action.
Creating eye-catching and clear copy requires some creativity and strategic thinking. Here are several tips to help you get started:
- Prioritize your audience. It is important to craft landing page copy that resonates well with prospective customers and addresses their needs.
- Focus on benefits. Effective copy should present a clear and relevant connection between the product or service and the value it brings customers.
- Use persuasive language. Incorporate active verbs and descriptive language to make the copy more engaging and persuasive.
For instance, check out Hostinger’s Cloud Hosting landing page copy:
The text is concise and easy to understand. It also highlights the hosting service’s main benefits with copy like Superior Performance and Powerful Control Panel while briefly elaborating on the points using persuasive language.
5. Add Social Proof
Social proof is a powerful digital marketing strategy that helps build customer trust and differentiate a company from its competitors. It also acts as evidence that the product or service does what it claims.
There are several types of social proof, such as:
- Customer testimonials. They contain authentic reviews of your product from consumers. It is important to include positive testimonials on your landing page to show potential clients that your service is reliable.
- Trust badges. You can add trust badges from third-party organizations or companies that vouch for your business. Adding them can boost your brand’s credibility and help build trust with prospective clients.
- Case studies. They contain real-life examples of how your product or service has helped customers solve a problem or achieve a goal. Adding this social proof to your landing page helps demonstrate the data-driven results of your product.
At Hostinger, we showcase clients’ journeys with our hosting services via Client Stories. These customer success stories are examples of case studies you can implement on your own landing page.
We also incorporate customer testimonials and trust badges from other companies, such as Google, HostAdvice, and WPBeginner. That way, potential customers can see that Hostinger is a trustworthy and recommended web hosting company.
6. Publish and Test the Landing Page
Once you have finished designing your site and adding the landing page content, it’s time to hit publish.
After that, we recommend conducting testing in production to gather the landing page’s performance metrics. Doing so will help you make strategies for future improvements to boost the site’s performance over time.
There are many production testing methods you can try, such as A/B testing, feedback tracking, and spike testing.
For example, we recommend the A/B testing method to experiment with your landing page CTA button. If you use WordPress, the easiest way to perform A/B testing is to install a plugin like Google Optimize, OptinMonster, or Nelio A/B Testing.
Best Practices for Creating a Successful Landing Page
Landing pages can perform well and generate great results if website owners implement the right optimization strategies, which we will explore in more detail below.
Maintain a Simple Landing Page Design
Keep your landing page design simple to avoid a cluttered look. This will also help visitors focus on the main aspects, like the product benefits and CTA button.
When looking for landing page templates, choose one with a minimalist design and ample white space. These types of landing page templates can help achieve a more seamless user experience, better responsiveness, and improved time on page.
Here are some elements to consider incorporating when designing a landing page:
- Hero image. It’s a great alternative to a text-based headline that can make your web page stand out from competitors.
- Business logo. This is an essential element that will help establish your company’s branding.
- Custom illustrations. As opposed to stock photos, custom visuals are a great way to convey the uniqueness of your product or service.
Create Mobile-Friendly Landing Pages
Making your landing page mobile-friendly is important, as many people visit websites using mobile devices.
Before picking a template, preview whether it looks good on mobile devices. Ensure the template elements, such as images, text, and buttons, can fit and adapt to different screen sizes.
When customizing the landing page typography, choose a combination of two to three easy-to-read fonts. This will help improve readability on smaller screen sizes.
Furthermore, ensure that all images, including the hero image, render seamlessly on mobile devices. We recommend using an image compression tool like TinyPNG, Compress Now, or Optimizilla to help speed up loading time.
If you use WordPress, lazy loading is enabled by default to help reduce the page loading time. So, WordPress site owners don’t always need to compress images.
Use Landing Page URL Categories
If you want to promote multiple services or products on a landing page, you can use URL categories to create separate sections for each offering.
Ensure each URL category has a clear and descriptive name. For example, if you are an entrepreneur selling design and copywriting services, create separate web pages like yourlandingpage.com/design-services and yourlandingpage.com/copywriting-services.
Also, add a navigation menu to make the URL categories accessible from any web page. This will improve navigability and help visitors quickly find the information they are looking for.
Make the Call-to-Action Button Stand Out
Optimizing your landing page CTA button is vital, as it can significantly improve lead generation and conversion rates.
Incorporate contrasting colors for the CTA button to direct focus toward it. For example, if your landing page design mainly uses soft blue and white shades, use stark yellow or red for the CTA button.
You can also utilize white space around the CTA and make the button large enough to draw visitors’ attention. That way, users can easily spot the button even when scrolling quickly through the page.
Finally, it is important to place the CTA button strategically, such as under a pricing table or below the headline, to improve click rates.
Effective Landing Page Examples
For beginners, finding ideas to craft high-converting landing pages may seem challenging. Therefore, consider using the following five examples as inspiration.
1. Netflix
Netflix’s landing page features a clean design with a simple CTA that invites people to create or restart a membership.
This landing page example places a faded background image showing movies and shows available on the platform. It also has a FAQ section that addresses customers’ common questions.
The enticing headline has great potential to capture visitors’ attention quickly. Also, the CTA only uses a single form field, making it easier for users to create a new account and subscribe to a premium plan.
2. Google Workspace
Google Workspace’s landing page has a sleek and minimalist design emphasizing the headline, CTA, and visuals.
It has ample white space and an appealing headline that features a preview of user collaboration with Google Docs. The page also provides a short video showcasing Google’s productivity and collaboration tools.
Furthermore, the CTA button is effective and attention-grabbing, immediately letting visitors know they can try Google Workspace for free.
3. Spotify
Spotify Premium’s landing page has a minimalist design using black and purple hues alongside appealing color gradients.
The page features a table that compares Spotify’s Free and Premium plans to help encourage visitors to convert. It also showcases all four of Spotify’s paid plans and each of their benefits.
Most notably, the landing page has an eye-catching headline and CTA button that say $0 for 3 months of Premium, providing an enticing offer for users who are still unsure of the platform’s services.
4. Canva
Canva has a visually appealing landing page with moving images that demonstrate how the editor works.
The landing page example features social proof to show that Canva is a trusted platform by many well-known companies. It also highlights the tool’s benefits with animated and attractive visuals.
Canva’s premium pricing plans are placed right after the main visual so visitors can access it with a single scroll. If users want more information, they can click to expand the drop-down element and read about the included features.
5. Codecademy
Codecademy’s landing page uses a sign-up form as the CTA. It has a simple design to let visitors focus on the main elements.
The page then highlights its popular programming language courses. It also has an interactive text editor to show potential customers what they can expect from the very first lesson.
Finally, the customer testimonials section showcases different customers’ journeys after successfully completing courses from Codecademy.
Conclusion
Landing pages are crucial for a successful online marketing strategy. It helps you establish trust with visitors to generate more leads and conversions. Building and managing a landing page can also be cost-effective and straightforward with the right tools.
The following is a recap of the six steps on how to build a landing page:
- Define your target audience and set specific goals.
- Create the landing page.
- Craft an engaging headline.
- Write compelling copy.
- Add social proof.
- Publish and test the landing page.
Remember to also follow some landing page best practices, such as maintaining a simple design, making it mobile-friendly, optimizing the URL, and creating an engaging CTA button.
If you still have questions about landing pages, check the FAQ section or leave a comment below.
How to Create a Landing Page FAQ
This section will answer the most common questions regarding landing pages.
Is the Landing Page the Same as the Website’s Homepage?
No, building a landing page is not the same as creating a homepage. With a landing page, business owners can focus on a particular goal, such as encouraging site visitors to sign up for a newsletter or purchase a product.
Meanwhile, a homepage is the main page of a website and usually serves multiple purposes, such as providing an overview of a business and directing visitors to explore the content.
Is It Possible to Create a Landing Page Without a Website?
Yes, you can build a landing page without creating the rest of the website. Landing page builders, such as Hostinger Website Builder, help you make simple landing pages without coding.
Several email marketing platforms, like Mailchimp, AWeber, and Constant Contact, also offer landing page builder tools as part of their features.
Should My Landing Page Include Navigation Links?
You may include navigation links on a landing page for several reasons.
For instance – if you offer multiple services but want to promote them on a single landing page, or if you want to make the landing page part of an existing website. Another reason is if you want to create separate pricing, features, and support sections.
How Can I Track and Analyze the Performance of My Landing Page?
You can monitor and analyze your landing page performance using web analytic tools like Google Analytics, Hotjar, Crazy Egg, and Optimizely.
These analytic tools can track traffic sources, monitor bounce rates, and analyze user behavior. From these insights, you can optimize your landing page for better conversions.
Ratna is a web hosting expert. With her experience with all things tech and SEO, she is ever-ready to share. In her spare time, Ratna likes to read a good book or resume her cross-stitch project.
Как создать лендинг для своего проекта
Люди приходят на сайт с разными задачами: кому-то просто нужен номер телефона, а кто-то хочет заказать товар. Чтобы каждый нашел то, что ищет, на сайте есть много страниц — каталог, портфолио, контакты, блог. А когда нужно рассказать об одном конкретном предложении, подойдет лендинг. В этой статье рассказываем, как создать лендинг для своего проекта и увеличить количество клиентов.
Что такое лендинг
Лендинг — это сайт, который состоит из одной страницы и призывает пользователя что-то сделать. Например, подписаться на рассылку, купить билет на конференцию или отправить резюме. Для этого созданы все условия: вся информация на одной странице, каждый блок подводит к целевому действию и есть кнопка. Человеку не нужно переходить на другие страницы и что-то искать.
С чего начать создание лендинга
Хороший лендинг — это простая и понятная история о вашем продукте. Подумайте, кому вы ее рассказываете: кто ваши клиенты и что для них важно. Это даст возможность структурировать страницу вокруг важного для читателя, а не вокруг всего подряд. Вы сможете вести клиентов за ручку: последовательно отвечать на вопросы и прорабатывать страхи. Чем точнее выделена целевая аудитория, тем проще ей что-то предложить.
Пример: лендинг вебинара по мобильной обработке фотографий.
Аудитория — девушки, которые хотят развивать Инстаграм. Нужно показать, что вы научите быстро обрабатывать фотографии для блога и создавать с помощью обработки единый стиль ленты. Потребуются иллюстрации «до/после».
Аудитория — фотографы. Нужно показать, что на смартфоне можно быстро обработать фотографии и получить такой же результат, как на компьютере. Полезно показать конкретный сценарий: например, после вебинара участники смогут сохранить кадры с камеры на телефон, подготовить анонс съемки прямо на свадьбе и вывести на проектор во время банкета.
Рассказывать историю можно не только с помощью текста. Люди часто принимают решения на основе эмоций, а не фактов и логики. Создать нужное настроение помогут правильные иллюстрации.
Попробуйте показать на фотографиях не только сам продукт, а еще и то, как изменится жизнь клиента после его использования. Приглашаете на конференцию — покажите видео счастливых людей в зале, продаете дизайнерские часы — сделайте фотографии стильных девушек, в образ которых идеально вписывается этот аксессуар. Подумайте, на кого хотят быть похожими ваши клиенты. Тексты неубедительны, поэтому начинайте делать лендинг с подбора фотографий и видео.
Как собрать лендинг
Вы изучили целевую аудиторию и подготовили иллюстрации. Осталось продумать структуру и создать страницу. На Vigbo это просто: у нас есть шаблоны для одностраничников и большая библиотека готовых блоков. Это заготовки, в которых нужно только заменить текст и фото — все остальное продумали дизайнеры. Можно выбирать любые блоки и комбинировать их друг с другом. Начнем?
1. Обложка
Обложка — это первое впечатление. Чтобы за несколько секунд убедить человека остаться на странице, первый экран лендинга должен быть максимально цепляющим и интересным. В этом поможет набор инструментов: большая имиджевая картинка, заголовок, подзаголовок и кнопка.
Начнем с картинки. Она привлечет внимание раньше текста, поэтому постарайтесь сразу создать нужное настроение. Поставьте на обложку хорошую фотографию или атмосферное видео. Для оформления этой части страницы отлично подойдет слайдер или обложка из «Базовых блоков». Если приглашаете на работу, удачной фотографией для обложки будет ваша дружная команда. Продвигаете кафе — покажите аппетитные блюда. И вам не нужно будет об этом писать — фотография скажет сама.
Перейдем к тексту. В основе будут ответы на вопросы «Что вы предлагаете?» и «Для кого?» В заголовке сформулируйте пользу, которую получит клиент, а в подзаголовке напишите детали, которые дополнят ваше предложение.
Обратите внимание на сочетание фона и текста. Не используйте пестрые фотографии с мелкими деталями — на них текст трудно читается. Видео лучше брать плавные и с увеличенным фокусом, чтобы все объекты были немного крупноваты.
2. Рассказ о проекте
Приступаем к самому главному — рассказу о своем проекте. Для этого можно использовать любые блоки: просто текст, текст и картинку, плитку или список с иконками — все, что поможет понятно ответить на вопрос «Что вы предлагаете?»
Постарайтесь говорить не о свойствах продукта, а о выгодах, которые клиент получит. Например, покажите, как изменится жизнь пользователя, если он купит ваш товар или закажет вашу услугу. Можно использовать простую формулу: «Подзаголовок блока с выгодами клиента → текст с объяснением → иллюстрация-доказательство».
Также можно рассказать, кому нужен ваш продукт и в каких ситуациях его используют. Например, вы продаете водонепроницаемые часы — покажите, что с ними можно плавать в бассейне и гулять в тропический ливень. Если ваш потенциальный клиент узнает себя или поймет, что часто сталкивается с такой ситуацией, это дополнительно стимулирует его к покупке.
3. Дополнительная информация
После того, как посетитель узнал о вашем предложении, у него могут возникнуть какие-то вопросы. Например, про условия доставки и гарантии. Подумайте, какой информации может не хватать вашим посетителям и как ее лучше представить. Форма может быть любой: просто текст с заголовком, колонки с иконками, картинка с текстом.
Хороший ход — попытаться понять сомнения клиента, переформулировать их в вопрос и развернуто ответить. Для этого мы выбрали готовый блок из раздела «Вопрос-Ответ / FAQ».
4. Блоки доверия
Часто пользователь уже почти готов купить, но немного сомневается в выборе. Помогите ему принять решение: например, покажите отзывы от других клиентов или познакомьте со своей командой. Добавьте фотографии, имена людей и ссылки на их страницы в социальных сетях. Это поможет показать, что ваш проект реальный и ему можно доверять.
5. Целевое действие
Завершите лендинг формой регистрации или подписки. Этот блок должен быть простым и призывать к одному конкретному действию. Не стоит делать здесь несколько кнопок: если хотите собрать контакты, ставьте только форму подписки — еще и форма обратного звонка будет неуместной.
Все уже привыкли, что форма на лендингах располагается внизу. Если посетителю нравится ваш продукт и он уже принял решение, он скроллит вниз. Поэтому хорошим решением будет выделить этот блок визуально, чтобы он отличался от остальной страницы. Например, сделать заливку фона другим цветом — так он станет заметнее.
Советуем здесь еще раз конкретно описать детали: если что-то продаете — условия сделки, если приглашаете на вебинар — что произойдет после подписки. Тогда посетитель будет понимать, что произойдет дальше, а значит, ему будет проще решиться сделать финальный шаг.
Ну вот и все, наш лендинг готов 🙂 По этому принципу вы можете создать страницу для своего проекта — получится не хуже, чем это сделал бы профессиональный веб-дизайнер.
Запомнить
На Vigbo можно создавать лендинги для своих проектов. Мы подготовили для вас подробное руководство. Это легко и интересно, попробуйте!
Лендинг подойдет, если нужно рассказать об одном конкретном предложении. Например, пригласить на вебинар или продать билет на конференцию.
Хороший лендинг — это простая и понятная история о вашем продукте. Начните с понимания того, кому вы ее рассказываете: кто ваши клиенты и что для них важно.
Рассказывать о продукте можно не только с помощью текста. Создать нужное настроение помогут правильные иллюстрации.
Делайте акцент не на самом продукте, а на том, как изменится жизнь клиента, если он его купит.
Как создать лендинг для любого проекта — пошаговая инструкция
Подробная пошаговая инструкция для дизайнера — как создать лендинг, понять задачу, выбрать инструменты и подобрать варианты для вдохновения.
Иллюстрация: Катя Тагирова для Skillbox Media
Мода на лендинги или, как их еще называют, промостраницы, пришла вместе с кризисом. Предпринимателям нужно было тестировать новые продукты, для этого отлично подходили одностраничные сайты: не нужны система управления контентом, оптимизация под поисковые системы. Главное правило лендинга: «Один сайт — один продукт».
1ч. 37 мин.
8 мин.
1ч. 29 мин.
Разберитесь со структурой
В любой промостранице есть обязательные блоки. Все построено на психологии потенциального клиента:
- Шапка — меню сайта. В лендингах обычно ставят «якоря» на блоки, указанные ниже. Кликнув по ним, пользователь переносится вниз по странице.
- Главный блок — суть вашего предложения для будущего покупателя.
- Преимущества/описание товара или услуги — подробности о продукте. Почему человек должен купить именно ваш продукт?
- Рекомендации/отзывы — элемент социального доказательства. Если о продукте хорошие отзывы, доверие к компании повышается.
- Формы захвата — блок, в котором вы собираете персональные данные. Имя пользователя, его телефон или email.
- Подвал — краткая информация о компании, возможно, еще одна кнопка «купить» или повторение меню.
Это общий скелет промостраницы. Для каждого продукта структура модифицируется, можно добавить другие блоки.
Прежде чем разбираться, как сделать лендинг конкретно для вашего продукта, найдите в интернете несколько сайтов на схожую тематику и посмотрите, как в них реализован каждый из блоков. Представьте, что вы заинтересованный клиент. Подумайте, на чем останавливается взгляд, что нравится, а что отталкивает. Такая «насмотренность» поможет вам:
- почерпнуть интересный подход и трансформировать его для вашего продукта;
- понять, как делать точно не нужно.
Лендинг — это конструктор, гибкий инструмент. Если нет четкого видения, какой стиль лучше воспринимает целевая аудитория, попробуйте сделать несколько вариантов дизайна. Затем проведите тестирование и выясните, что работает эффективнее.
Познакомьтесь с разными подходами
Найдите на Behance дизайнеров, которые создают лендинги. Подпишитесь на коллекции, в которых пользователи выкладывают понравившиеся им прототипы. Например, арт–директор Wildberries Дмитрий Матвеев собирает промостраницы с необычным стилем — подборка постоянно обновляется.
Сделайте свою коллекцию. Просматривайте подборки перед каждым заказом, черпайте идеи и думайте, как сделать сайт эффективнее.
Начните с понимания задачи
Лендинг — это не просто рисование. Никто не заказывает промостраницу без причин. Уточните, какую цель преследует клиент. Поймите, каких результатов он ждет. Подумайте, какие блоки для этого использовать.
Подготовьте бриф. Вам нужны ответы на три главных вопроса:
Что нужно сделать
Это сайт, на котором люди будут сразу покупать? Или цель лендинга — побудить человека поверить в экспертность клиента и подписаться на рассылку? Может быть, важна запись на вебинар? Обязательно обсудите этот момент с заказчиком.
Для кого
Вам нужно досконально изучить целевую аудиторию. Дизайн для презентации сериала для подростков и стиль для b2b-направления отличаются кардинально.
Как вы это реализуете
Здесь нужно уточнить, чего в результате ждет заказчик. Придумайте, какие блоки будете рисовать, с помощью каких инструментов.
Если вы будете заниматься только рисованием, эффективности не будет. Мало красиво нарисовать, нужно понимать, зачем на лендинге размещается тот или иной блок, зачем используется конкретный стиль.
Контент на каждом экране должен масштабироваться, помещаться на любом устройстве. Не должно быть горизонтальной прокрутки. Учитывайте это при разработке.
Уделите больше внимания блоку описания продукта
Обязательно учитывайте, что о вашем продукте потенциальный клиент может и не знать. Главный вопрос, на который вы должны ответить в блоке описания: зачем нужно это покупать?
Подключайте воображение. Например, вы делаете косметические маски. Подготовьте на странице блок под галерею фотографий и видео с людьми, которые пользуются ими. Возможно, блок «до/после»? Так вы объясните пользователю, что это за маски и зачем они нужны.
Разрабатывая лендинг, помните: это задача не для реализации ваших суперспособностей и демонстрации всех навыков. Дизайн может быть максимально простым, но эффективным. Нормально, когда прототип лендинга после опроса заказчика делается за один-два дня.
Переходите на новый уровень
Да, обычно лендинг — это быстро и недорого. Но в любом правиле есть исключения. Например, компания S7 Airlines сделала необычную презентацию нового самолета — это интерактивная картинка гаража с Airbus A320neo. Дизайнер создал 3D-анимацию снятия покрывала с самолета, взлета и возможность прогулки по салону.
Если позволяют ресурсы, попробуйте сделать подобное. Несмотря на распространение техники параллакса, такие эффекты все еще привлекают пользователей.
Старайтесь удивлять пользователя. Не обязательно использовать технологии, которые стоят тысячи долларов. Съемка 3D-фотографии, пусть без динамики, сейчас стоит не очень дорого (можно найти варианты от 600–700 рублей), но этот эффект заставит пользователей запомнить ваш лендинг.
Помните про UX
Красивый дизайн, возможность удивить пользователей — это признак хорошего лендинга. Но главное — эффективность, комфортное путешествие пользователя по сайту. Если навигация будет неудобной или будущий клиент не поймет, что за продукт ему предлагают, то промостраница так и остается красивой картинкой.
Подумайте, получает ли человек нужную информацию, есть ли за что зацепиться взгляду. Не отталкивайте его массой возможностей на лендинге, аккуратно «ведите» по контенту.
Не забывайте улучшать навыки
Хороший лендинг — это сочетание продуманного стиля, типографики, анимации. Это огромное количество возможностей, которые дизайнер должен уметь не просто бездумно использовать, а влиять с их помощью на настроение пользователя.
Учитесь собирать лендинги для тестирования гипотез и продаж и создавать дизайн-решения для крупных проектов на курсе от Skillbox. Во время обучения потренируетесь на практических задачах и сделаете из них убедительное портфолио.
Как сделать лендинг своими руками за 30 минут
Разработка лендинга – это важный этап для тех, кто собирается продвигать услуги или товары в интернете. С его помощью можно создать портфолио, запустить продажи или просто собрать заявки. Создать его может каждый – в этом нам помогают специальные конструкторы, в которых веб-дизайн сводится к простому перемещению блоков.
О том, из чего состоит разработка продающего лендинга и как его сделать своими руками за 30 минут, поговорим в сегодняшней статье.
Как сделать лендинг самому: подготовка контента
Прежде чем переходить к созданию лендинга, важно задать себе вопрос: «А зачем мне лендинг?». Ответом на него должна быть четко сформулированная цель. Например, она может выглядеть так:
- Презентация компании и услуг для привлечения новых клиентов.
- Получение заявок из интернета или продажа товаров.
- Реклама курсов, тренинга, вебинара.
- Тестирование гипотез, погружение в сферу веб-разработки.
Имея цель, мы сможем лучше представить задачи будущего сайта, изучить его конкурентов и провести анализ целевой аудитории.
Для глубокого понимания можете посмотреть один хороший лендинг – изучите его и проанализируйте, какие цели стояли перед разработчиком и как он их реализовал.
Чтобы создать нечто подобное, важно проработать каждый этап, который включен в разработку сайта. Если сразу перейти к дизайну без каких-либо исследований и подготовок, то выйдет «ничего», а вы в итоге будете думать, что разработка сайтов – это не мое.
Давайте проработаем каждый этап и посмотрим, что в итоге у нас получится.
Конструктор сайтов
Создайте сайт своей мечты всего за час!
Этап 1: Заполняем бриф
Бриф – это документ, в котором заказчик отвечает на основные вопросы о компании, товаре или услуге, клиентах и так далее. Как правило, разработка любого сайта всегда начинается с заполнения брифа. Заполнение подобного документа позволит нам скомпоновать всю информацию в одном файле и лучше понять, на что делать упор в будущем сайте.
Вот стандартный бриф, заполненный одним из заказчиков:
Взять пустой бриф вы можете на Google Диске – ссылка приведет вас в нужное место. Если по каким-либо причинам доступ будет закрыт, то сообщите об этом в комментариях.
Постарайтесь заполнить каждый пункт подробно. Это неоспоримо поможет в разработке лендинга.
Этап 2: Анализируем конкурентов
Один из главных этапов, который позволит выявить сильные и слабые стороны конкурентов. На основе этого можно будет:
- Продумать, какие блоки можно добавить на сайт.
- Если нет фирменного цвета, то его можно выбрать, изучив конкурентов.
- Увидеть, чем «цепляют» клиентов другие компании.
Найти конкурентов вы можете через Google или Яндекс. Если вы давно работает в офлайн-бизнесе, то должны знать своих конкурентов – найдите их сайты и посмотрите, что они собой представляют.
Другой способ – найти конкурентов через ключевые слова. Их можно посмотреть на Яндекс.Wordstat либо через Планировщик ключевых слов от Google. Рассмотрим для примера сервис от Яндекса:
- Переходим по ссылке и вводим необходимый запрос. Например, представим, что у нас компания, занимающаяся продажей ПВХ-окон в Москве – вводим релевантный запрос и жмем «Подобрать».
- В результате получаем список ключевых слов. Не сказать, что он как-то расширил наши возможности, но этим можно пользоваться.
Таким образом, мы можем пройтись по ключевым запросам и просмотреть всех конкурентов из своей ниши. В ходе исследования лучше всего составить таблицу по конкурентам:
Также даю ссылку на пустую форму, в которой есть таблицы для анализа бизнеса и целевой аудитории. Скачать ее можно по этой ссылке.
Этап 3: Анализируем целевую аудиторию
Если вы работаете не первый год и многое знаете о своей целевой аудитории, то можете смело пропускать этот этап, а мы же остановимся на нем подробнее. Первым делом разберем некоторые понятия:
- ЦА – это группа людей, которая с наибольшей вероятностью приобретет товар или услугу конкретной компании.
- Анализ ЦА – это ответ на вопрос «Кому мы продаем?». Если продавать все и всем сразу, то такие продажи не смогут приносить достойные плоды.
При разработке сайта важны такие показатели ЦА, как пол, возраст, семейное положение, место проживания, уровень дохода, интересы и желания, боли и страхи, а также критерии, на основании которых клиент выбирает ту или иную услугу.
Как может выглядеть анализ:
Важно не просто узнать возраст, пол и географическое положение потенциального клиента, но и понять его боли и страхи.
Где же это все взять? Самый простой вариант – походить по различным форумам и маркетплейсам, где пользователи оставляют отзывы. Узнать уровень дохода вы также можете там. Например, если компьютерный стол был куплен за 20 000 рублей, то это говорит о том, что отзыв оставил покупатель как минимум со средним достатком.
И вот еще один пример:
Посмотрите на все эти столы и ответьте на вопрос: «Все эти 4 варианта будет искать одна и та же группа людей?». Очевидно, что нет – в этом и есть суть анализа целевой аудитории. Если его провести неправильно, то можно не только создать «плохой сайт», но и лишиться потенциальных клиентов.
Этап 4: Подбираем референсы
Когда проведен анализ конкурентов и целевой аудитории, можно переходить к разработке сайта, но для начала нужно сделать две вещи – это посмотреть референсы и спроектировать прототип.
Референсы – это вспомогательные работы, к которым обращается веб-дизайнер. Они помогают определиться с цветовой темой, стилем и другими аспектами.
Вот сервисы, где можно посмотреть различные проекты:
- Behance
- Awwwards
- Dribbble
Необязательно искать работы по своей тематике, вы можете посмотреть и другие проекты. Главное – найти интересные фишки и использовать их в своем проекте (но без плагиата).
Этап 5: Создание прототипа
Многие на этом этапе предпочитают просто расписывать текстовый контент, но я считаю, что это не совсем правильный метод. Проще создать прототип и спланировать весь контент.
Прототип, как правило, не включает в себя изображения, а содержит лишь правильное расположение блоков и текстовый контент:
В помощь вам пойдут собранные референсы. Составление текста основывается на заполненной информации о целевой аудитории, конкурентах и ваших услугах. Все то, что мы делали ранее, кратко излагаем в прототипе.
Вот некоторые рекомендации, которые помогут вам со структурой:
- Шапка лендинга – в ней, как правило, размещается логотип и основное меню сайта, добавляется номер телефона и прикрепляется кнопка действия, например, «Заказать звонок».
- Офферная конструкция – то, что располагается на первом экране. С ее помощью необходимо описать всю суть бизнеса, допустим, «Разработка сайтов за 7 дней». В нее также входит дополнительное описание подобного типа – «Помогу вашему бизнесу увеличить продажи», «Оставьте заявку и получите скидку». Все это прописывается ниже основного слогана, с меньшим размером шрифта. Ниже помещается кнопка действия, которая чаще всего вытекает из описания – если вы предлагаете оставить заявку, то и кнопку желательно назвать так же.
- Далее идут различные блоки, и тут уже все зависит от сферы деятельности и целевой аудитории. Обычно после главного экрана описывается, кому предоставляется услуга.
- Следом идут особенности – почему клиенту стоит выбрать ваш продукт.
- О компании – расскажите, как вы появились и почему стали востребованы.
- Как это работает – отлично подойдет для предоставляемых услуг. Можно описать, как выполняется установка окон.
- Сколько стоит – здесь прописывается ценовая политика компании.
- Отзывы – блок может поднять экспертность.
- Контакты – укажите контактные данные, чтобы клиенты смогли с вами связаться.
- Футер – часто просто дублируется меню из первого экрана, а также прописывается ссылка на политику конфиденциальности и прочие данные.
Это основные блоки, которые чаще всего встречаются на лендингах. В вашем случае все может быть совсем иначе, но главное, чтобы оффер был на первом экране – это чуть ли не самое главное в лендинге.
Для разработки прототипа вы можете воспользоваться следующими программными средствами: Axure, Figma, Mockplus.
Важно полностью проработать прототип – вам же будет потом проще разработать весь сайт.
Собираем лендинг на конструкторе
Итак, мы заполнили бриф, провели анализ конкурентов и целевой аудитории, разработали прототип. Теперь можно переходить к созданию первого лендинга. Для этого рекомендуем использовать следующие конструкторы:
- Craftum
- Lpgenerator
- uKit
В качестве примера возьмем Craftum – недорогой и очень функциональный конструктор. Работа в нем может выполняться как с помощью готовых шаблонов, так и через дизайн-блок, в который можно добавлять свои элементы и располагать их в свободном порядке. Огромное множество шаблонов позволит вам пропустить шаг с созданием прототипа и перейти непосредственно к наполнению сайта.
Конструктор Craftum в Telegram и VK
- Получайте полезные материалы и подборки по созданию сайтов от экспертов
- Обсуждайте тренды дизайна и актуальные вопросы
- Узнавайте первыми об акциях и скидках на конструктор
Подписаться в Telegram:
Подписаться в VK:
Сервис платный, но новым клиентам предоставляется бесплатный 10-дневный доступ ко всем функциям.
Первым делом зарегистрируемся:
- Переходим на главную страницу сервиса и жмем на «Создать сайт бесплатно».
- Вводим свои данные и жмем «Создать сайт».
- В результате мы попадаем на главную страницу конструктора:
С главной страницы все и начинается – здесь мы можем выбрать подходящий шаблон либо воспользоваться пустой страницей. Если выбрать последнюю, то сайт будет разрабатываться с нуля. Собрать лендинг мы можем и на основе шаблона, но так будет крайне сложно подобрать правильное решение под созданный ранее прототип.
С другой стороны, Craftum предлагает сотни продающих шаблонов – если порыться в каталоге, то вы наверняка найдете идеальный вариант для вашего прототипа. Можно найти похожий шаблон и отредактировать его под свои нужды, благо функционал позволяет кастомизировать любые готовые блоки.
Переходим к созданию сайта:
- Создаем пустую страницу – для это кликаем по кнопке «Выбрать шаблон», расположенной под первым блоком.
- Мы попадаем в окно конструирования сайта. Пока что здесь пусто, так как мы ничего не добавили. Исправим это и создадим первый блок – для этого жмем «Выбрать блок».
- Теперь мы попадаем в список блоков, с помощью которых можно предоставить ту или иную информацию. Так как у нас обучающая инструкция, давайте полностью углубимся в процесс создания сайта и воспользуемся функцией «Дизайн блок». Ее основная цель – избавиться от шаблонности. Использовав ее, мы сможем сконструировать блок своими руками. Все элементы будут размещены так, как мы захотим.
- И вот мы попали в редактирование дизайн-блока. В нем мы создадим первый экран, включающий в себя офферную конструкцию, логотип, номер телефона и изображение. Для начала полностью очистим его – для этого выделяем все элементы и жмем на клавишу «DELETE». Также открываем меню слева и в разделе «Изображение» жмем на крестик.
- Мы подготовили для себя пустой холст:
- Начнем с офферной конструкции. Возьмем в качестве примера «Установка ПВХ окон в Москве и МО». Чтобы добавить надпись, нажимаем в верхнем левом углу на крестик и жмем «Текст». Перед нами слева выпадет меню, в котором можно отредактировать текст. Установим ему размер шрифта 50px с межстрочным интервалом 55. В качестве шрифта укажем «Rubik» и сделаем его жирным.
- Аналогичным образом вставляем небольшое описание, а также добавляем кнопку. Она тоже может быть вызвана через плюсик. Дадим название кнопке – «Заказать установку». Эту кнопку можно направить и на другой сайт – для этого необходимо прописать URL в меню слева, через строку «Ссылка».
- Также добавим в верхнюю часть блока номер телефона и логотип. После вставим картинку – для этого нажмем на плюсик и выберем «Изображение». Затем в соответствующем разделе добавим нужную фотографию.
- Убрать сетку можно с помощью специальной кнопки, расположенной в верхнем правом углу. Сделав это, получаем следующий экран:
- Теперь посмотрим, как наш сайт выглядит на мобильных устройствах – для этого в центре верхней части кликаем по последней иконке.
- Если вас не устраивает расположение каких-то элементов в мобильной версии, то вы можете отредактировать их прямо в этом окне. Удобство редактора Craftum состоит в том, что вы можете отдельно настроить отображение элементов на десктопе и в мобильной версии. После редактирования закроем окно и нажмем на плюсик для добавления нового раздела.
- Больше не будем затрагивать функцию «Дизайн блок», доработаем сайт на шаблонных вариантах. Например, нам нужно рассказать о каких-то качествах, отличающих компанию от конкурентов. Добавим для этого блок «Преимущества». Как видим, вариантов на выбор очень много!
- В результате появится новый блок. Отредактировать его под себя не составит никакого труда – достаточно кликнуть по тексту и ввести новый. Изменить характеристики объектов можно через левое меню, которое вызывается кнопкой «Настроить».
- Добавим разделы «Контакты» и «Футер» с помощью шаблонов.
- Все шаблонные блоки уже адаптированы, поэтому настраивать контент для других устройств нам не потребуется. После того как разработка будет завершена, нажмем «Опубликовать» и дадим название проекту.
- Готово! Сайт создан, теперь мы можем его открыть.
Поздравляю! Вы создали свой первый лендинг. Вышел он довольно простым, но это была лишь базовая инструкция для того, чтобы вы поняли, как на конструкторе собирается веб-сайт. Мы поработали как с дизайн-блоком, так и с шаблонами, коих в Craftum хватает с лихвой.
Если вы работаете только с дизайн-блоками, то важно не забыть проверить адаптивную верстку всех разделов лендинга, так как многие клиенты будут посещать ваш сайт именно со смартфонов. Откройте сайт на всех устройствах и посмотрите, правильно ли отображаются адаптивные элементы.