Как сделать лендинг самому

Лендинг (landing page) – это одностраничный сайт, кратко и четко заявляющий об услугах или товарах. Вся информация размещается в блоках на главной и единственной странице. Его создание обходится максимально дешево, а сделать проект можно самостоятельно всего за 1-2 дня. Я прошла этот путь с нуля и сегодня расскажу пошагово, как вы сможете сделать то же самое, чтобы продавать товары или рекламировать услуги.

Главная особенность лендинга – краткая подача информации и легкость ее обнаружения. Посетитель сразу видит суть услуги или предлагаемый товар, условия, цену. Не нужно серфить по вкладкам, чтобы найти контакты, график работы, более детальную информацию – все расположено на единственной посадочной странице. Если подробностей по товару или услуге много (нужно раскрыть многочисленные характеристики, расписать условия сотрудничества), можно сделать меню в верхней части. Нажимая на его пункты, страница будет автоматически прокручиваться до нужного места.

Создавая лендинг, на первом этапе нужно определить, какова его цель – т.е. какое действие ожидается от посетителя после просмотра страницы. Вот примеры:

В зависимости от цели лендинги различаются на продающие и подписные. Соответственно блоки на сайте должны работать на этот результат. Эту общую цель держите в голове, работая над остальными шагами.

У вас будут конкуренты, перетягивающие часть трафика. Найти их можно, введя поисковый запрос по вашим услугам или товарам для конкретного региона в Google или Яндекс. Советую детально изучить тех, кто находится в выдаче в первой десятке. Это поможет наметить структуру и содержание своей посадочной страницы так, чтобы она выгодно отличалась на фоне аналогичных. На что нужно обращать внимание:

После этого сделайте выводы, переняв сильные стороны таких страниц, и не повторяя их ошибки. Важно изучить не только наполнение, но и цветовую гамму. Если вы выберете для оформления те же расцветки, что есть на сайте, предлагающем такие же услуги, посетители могут запутаться. Создастся впечатление, что это два одинаковых сайта. Поэтому используйте в оформлении те цвета, шрифты и графику, которых нет у конкурентов.

Следующий этап самостоятельного создания лендинга – разработка прототипа. Прототип – это каркас или основные визуальные элементы, которые будут размещены на странице. Начинается лендинг с уникального торгового предложения (УТП). Оно должно быть кратким, емким, цеплять интересы клиента и показывать решение проблемы. Необходима запоминающая фотография – не просто фоном, а по теме.

Затем идут блоки с описанием товара/услуги, информация о компании, отзывы, помогающие принять решение, ответы на распространенные вопросы. В конце нужно побуждение к действию и контакты для связи. Кнопку заказа можно разместить в нескольких местах, в зависимости от того, насколько «горячим» будет лид.

С учетом вашего рода деятельности советую добавить некоторые из дополнительных элементов каркаса:

Прототип можно составить на бумаге или в таких сервисах как: Photoshop, Moqups, Figma. Я делала в онлайн-приложении Canva. Там есть отдельная вкладка «Сайты», в которой можно выбрать стиль «деловой», «для торговли», «информирующий о событии» и другие. В прототипе рекомендую указать места расположения блоков (пока можно с однотипным текстом, который потом заменится на настоящий), окна для фото, картинок, кнопки, задний фон (цвет), надписи, заголовки. Выбирайте не больше трех цветов, поскольку «разукрашка» смотрится наляписто и безвкусно.

Совет: оставляйте больше свободного пространства. Надписи не должны располагаться близко друг ко другу, подпираться кнопками. В нагроможденном окне трудно сразу все охватить, можно пропустить детали. Соблюдайте визуальную иерархию, чтобы важные элементы выделялись на фоне остальных, а не сливались.

Поэкспериментируйте с деталями каркаса и выберите подходящий вариант. Полезно показать несколько шаблонов существующим клиентам, чтобы узнать их мнение – ведь это делается, чтобы нравилось посетителям, а не разработчику.

Имея готовый прототип создание лендинга происходит гораздо быстрее, поскольку есть четкое понимание результата. Воспроизвести все элементы каркаса можно в одном из бесплатных конструкторов сайтов. Я использую Tilda, и рекомендую другим. Все интуитивно понятно, но на всякий случай авторы системы сделали очень исчерпывающую справку. По заданному прототипу выбираете оттенки фона, рамок, шрифт, располагаете кнопки заказа, контакты. В конструкторе удобно перемещать элементы, увеличивать или уменьшать их размер.

Фотографии советую сделать уникальными. Если это товар, сфотографируйте его с разных сторон, прогоните через фоторедактор снимки, насытив цвета, повысив четкость. Если вы оказываете услуги, не берите первое попавшее фото из интернета – сделайте его самостоятельно, сфотографировав мастера при выполнении работы. Это займет время, зато в кадре будут реальные люди из вашей команды, а поисковые роботы не занизят рейтинг вашего сайта из-за неуникальных фотографий.

Если не хочется или нет времени разбираться с конструктором, верстку можно заказать отдельному специалисту на бирже фриланса. Предоставьте ему прототип, обговорите детали, не стесняйтесь вносить правки.

Когда страница оформлена, приступайте к наполнению текстом. Заказать материал можно на одной из бирж копирайтинга (ETXT.biz, TEXT.ru), а можно написать самому.

Верхняя часть длинной страницы лендинга (то, что помещается на один экран) – это первое, что увидит посетитель. Поэтому на ней должно быть главное – торговое предложение услуги/товара. Содержимое этой части должно максимально цеплять, взывая к «боли» клиента. Например, я даже позвонила нескольким постоянным заказчикам и спросила, чтобы они хотели видеть в самом начале сайта. И разместила именно это.

Начальный текст должен соответствовать поисковым запросам, вводимым пользователями. Не бойтесь потратить на продумывание короткого текста много часов, поскольку от его качества зависит, останется посетитель или уйдет смотреть другие сайты.

При написании этого и остальных блоков рекомендую придерживаться следующего:

Следующий этап – подключение полезных инструментов. Они уже есть в конструкторе. Нужно выбрать место, размер, оформление и установить их. Это могут быть:

Готовый сайт можно активировать, сделав видимым для поисковых систем и посетителей. Но бесплатная версия от конструктора имеет длинную приставку и рекламу сервиса. Чтобы убрать это и сделать короткое доменное имя, соответствующее деятельности сайта, потребуется перенести его на хостинг. Хостинг для лендинга предоставляет провайдер. Делается это по такой схеме:

Затем переносите лендинг на этот домен и хостинг. Чтобы не углубляться в технические детали, как это сделать, попросите помочь техподдержку провайдера. Я воспользовалась услугами Cloud4box, у них есть тариф с хостингом для лендинга всего за 90 рублей в месяц.

На заключительном этапе все тексты повторно вычитываются на предмет ошибок. Проверяются кнопки, чтобы при их нажатии открывалась нужная часть экрана или совершался переход по ссылке. Оформляется тестовая заявка, чтобы увидеть, приходит ли письмо на почту. Сайт тестируется для просмотра в браузерах Chrome, Mozilla, Opera, Yandex, как на компьютерах, так и мобильных устройствах.

Поздравляю, ваш одностраничник готов! Надеюсь, мой небольшой гайд поможет создать вам свой маленький сайт для разных задач. В процессе у вас могут появляться различные трудности, каждую из них я описать не смогу, но уверена, что в интернете вы сможете найти ответ на любой свой вопрос. Удачи!