Как создать лендинг самому — создание Landing Page за 30 минут

Содержание
  1. Как сделать лендинг самому: подготовка контента
  2. Конструктор сайтов
  3. Этап 1: Заполняем бриф
  4. Этап 2: Анализируем конкурентов
  5. Этап 3: Анализируем целевую аудиторию
  6. Этап 4: Подбираем референсы
  7. Этап 5: Создание прототипа
  8. #6 – Загружаем лендинг на хостинг
  9. Nethouse
  10. Реально бесплатные конструкторы лендинг пейдж
  11. TOBIZ
  12. №2. Создание лендинг пейдж с помощью готовых HTML шаблонов
  13. 8. Цена, решения, тарифы
  14. #3 – Редактируем текст на главном экране
  15. Переходите на новый уровень
  16. Ukit.com
  17. Преимущества конструктора Ukit
  18. Тарифы
  19. Не забывайте улучшать навыки
  20. Wix.com
  21. Возможности конструктора Wix
  22. Создание собственного логотипа бесплатно
  23. Бесплатный домен и хостинг
  24. Тарифы Wix
  25. Начните с понимания задачи
  26. Аналитика
  27. Этап 4. Делаем дизайн
  28. Шрифт
  29. Где брать шрифты?
  30. Цвет
  31. Как правильно подобрать цветовую гамму для сайта?
  32. Примеры, какое настроение вызывает каждый цвет:
  33. Графика (фото, иконки, картинки)
  34. 4. Кейсы, ассортимент, результаты
  35. Этап 2. Пишем текст для лендинга
  36. Хаос в голове перенесите на бумагу
  37. Составляем блоки лендинга
  38. Вот основной список блоков, который можно встретить на 90% лендингов:
  39. Какие еще могут быть блоки на сайте:
  40. Советы по составлению текста
  41. Где искать копирайтера
  42. lpgenerator.ru
  43. Возможности конструктора лендингов lpgenerator
  44. Тарифы
  45. Этап 7. Верстаем лендинг

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

Прежде чем переходить к созданию лендинга, важно задать себе вопрос: «А зачем мне лендинг?». Ответом на него должна быть четко сформулированная цель. Например, она может выглядеть так:

  • Презентация компании и услуг для привлечения новых клиентов.
  • Получение заявок из интернета или продажа товаров.
  • Реклама курсов, тренинга, вебинара.
  • Тестирование гипотез, погружение в сферу веб-разработки.

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

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

Чтобы создать нечто подобное, важно проработать каждый этап, который включен в разработку сайта. Если сразу перейти к дизайну без каких-либо исследований и подготовок, то выйдет «ничего», а вы в итоге будете думать, что разработка сайтов – это не мое.

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

Конструктор сайтов

Создайте сайт своей мечты всего за час!

Создать сайт бесплатно

Этап 1: Заполняем бриф

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

Вот стандартный бриф, заполненный одним из заказчиков:

Взять пустой бриф вы можете на Google Диске – ссылка приведет вас в нужное место. Если по каким-либо причинам доступ будет закрыт, то сообщите об этом в комментариях.

Постарайтесь заполнить каждый пункт подробно. Это неоспоримо поможет в разработке лендинга.

Этап 2: Анализируем конкурентов

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

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

Найти конкурентов вы можете через Google или Яндекс. Если вы давно работает в офлайн-бизнесе, то должны знать своих конкурентов – найдите их сайты и посмотрите, что они собой представляют.

Другой способ – найти конкурентов через ключевые слова. Их можно посмотреть на Яндекс.Wordstat либо через Планировщик ключевых слов от Google. Рассмотрим для примера сервис от Яндекса:

  1. Переходим по ссылке и вводим необходимый запрос. Например, представим, что у нас компания, занимающаяся продажей ПВХ-окон в Москве – вводим релевантный запрос и жмем «Подобрать».
  2. В результате получаем список ключевых слов. Не сказать, что он как-то расширил наши возможности, но этим можно пользоваться. 

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

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

Этап 3: Анализируем целевую аудиторию

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

  • ЦА – это группа людей, которая с наибольшей вероятностью приобретет товар или услугу конкретной компании.
  • Анализ ЦА – это ответ на вопрос «Кому мы продаем?». Если продавать все и всем сразу, то такие продажи не смогут приносить достойные плоды.

При разработке сайта важны такие показатели ЦА, как пол, возраст, семейное положение, место проживания, уровень дохода, интересы и желания, боли и страхи, а также критерии, на основании которых клиент выбирает ту или иную услугу.

Как может выглядеть анализ:

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

Где же это все взять? Самый простой вариант – походить по различным форумам и маркетплейсам, где пользователи оставляют отзывы. Узнать уровень дохода вы также можете там. Например, если компьютерный стол был куплен за 20 000 рублей, то это говорит о том, что отзыв оставил покупатель как минимум со средним достатком.

И вот еще один пример:

Посмотрите на все эти столы и ответьте на вопрос: «Все эти 4 варианта будет искать одна и та же группа людей?». Очевидно, что нет – в этом и есть суть анализа целевой аудитории. Если его провести неправильно, то можно не только создать «плохой сайт», но и лишиться потенциальных клиентов.

Этап 4: Подбираем референсы

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

Референсы – это вспомогательные работы, к которым обращается веб-дизайнер. Они помогают определиться с цветовой темой, стилем и другими аспектами.

Вот сервисы, где можно посмотреть различные проекты:

  • Behance
  • Pinterest
  • Awwwards
  • Dribbble

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

Этап 5: Создание прототипа

Многие на этом этапе предпочитают просто расписывать текстовый контент, но я считаю, что это не совсем правильный метод. Проще создать прототип и спланировать весь контент.

Прототип, как правило, не включает в себя изображения, а содержит лишь правильное расположение блоков и текстовый контент:

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

Вот некоторые рекомендации, которые помогут вам со структурой:

  • Шапка лендинга – в ней, как правило, размещается логотип и основное меню сайта, добавляется номер телефона и прикрепляется кнопка действия, например, «Заказать звонок».
  • Офферная конструкция – то, что располагается на первом экране. С ее помощью необходимо описать всю суть бизнеса, допустим, «Разработка сайтов за 7 дней». В нее также входит дополнительное описание подобного типа – «Помогу вашему бизнесу увеличить продажи», «Оставьте заявку и получите скидку». Все это прописывается ниже основного слогана, с меньшим размером шрифта. Ниже помещается кнопка действия, которая чаще всего вытекает из описания – если вы предлагаете оставить заявку, то и кнопку желательно назвать так же.
  • Далее идут различные блоки, и тут уже все зависит от сферы деятельности и целевой аудитории. Обычно после главного экрана описывается, кому предоставляется услуга.
  • Следом идут особенности – почему клиенту стоит выбрать ваш продукт.
  • О компании – расскажите, как вы появились и почему стали востребованы.
  • Как это работает – отлично подойдет для предоставляемых услуг. Можно описать, как выполняется установка окон.
  • Сколько стоит – здесь прописывается ценовая политика компании.
  • Отзывы – блок может поднять экспертность.
  • Контакты – укажите контактные данные, чтобы клиенты смогли с вами связаться.
  • Футер – часто просто дублируется меню из первого экрана, а также прописывается ссылка на политику конфиденциальности и прочие данные.

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

Для разработки прототипа вы можете воспользоваться следующими программными средствами: Axure, Figma, Mockplus.

Важно полностью проработать прототип – вам же будет потом проще разработать весь сайт.

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

#6 – Загружаем лендинг на хостинг

Когда шаблон лендинга отредактирован, вам нужно выложить его в интернет. Для этого вы приобретаете домен и хостинг у любого провайдера (например у Reg.ru), и закачиваете вашу страницу на хостинг. Только переименуйте сначала папку “blue” во что-нибудь более подходящее. Например “services”. Тогда адрес вашего лендинга будет выглядеть так: yourdomain.ru/services/index.html

После загрузки вы можете сменить расширение html на php. Тогда ваш новый лендинг будет открываться просто по адресу: yourdomain/services/.

Nethouse

Конструктор лендинг-пейдж Nethouse был основан в 2011 году и на текущий момент входит в топ-10 крупнейших платформ для публикации сайтов. За последние 7 лет с его помощью было создано более 1 млн. веб-проектов (по данным за май 2018).

Кратко об особенностях Nethouse ниже.

Количество шаблонов 127
Индивидуальный заказ дизайна Отсутствует
Пробный период 10 дней
Минимальный тариф От 299 руб. в месяц
Привязка собственного домена Есть
Адаптивность дизайна Отсутствует
Интеграция Яндекс.Касса, CallBackHunter, Jivosite, UniSender, социальные сети, доставка, системы учета
Аналитика Google Analytics, Яндекс.Метрика, LiveInternet
Регистрация доменов Есть в российских и международных зонах — от 149 до 5700 руб. в год

Nethouse — недорогой и удобный сервис, который хорошо подойдет новичкам. Назвать его лучшим, к сожалению, нельзя, поскольку здесь слабый инструментарий для аналитики, нет возможности интеграции с популярными CRM. Кроме того, в редакторе отсутствуют режимы адаптивности, что явно уступает большинству аналогичных платформ.

Перейти на nethouse.ru

Реально бесплатные конструкторы лендинг пейдж

Бесплатные конструкторы landing page действительно существуют, но имеют ряд значимых недостатков:

  • рекламные объявления и ссылки — как правило, у free-версии их много, и они отвлекают от просмотра контента;
  • невозможность привязки домена — открывается только на платных тарифах;
  • ограничения в количестве сайтов — бесплатные платформы обычно позволяют сделать лишь один лендинг.

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

Вот перечень из нескольких конструкторов, где можно без пробного периода делать лендинги:

  • LPMotor (без публикации в сети);
  • Wix;
  • Nethouse (1 руб. в месяц);
  • Mobirise (только на ПК, для публикации понадобится хостинг и домен);
  • GUM (в пиратской версии, не подойдет новичкам).

Можно пробовать делать сайты без денежных вложений и на других платформах, но с ограничением по времени тестового периода — от 7 до 14 дней. Кроме того, создать проект бесплатно можно и на шаблонах в более популярных CMS, например, на WordPress (если ограничиться виртуальным сервером с доменом на компьютере без публикации в сеть ).

Интересный факт: чтобы узнать на каком конструкторе сделан лендинг, достаточно ввести адрес сайта в специальном сервисе (Webdatastats, iTrack, WhatCMS, 2ip и т. д.). Более продвинутые пользователи могут это сделать вручную, посмотрев код страницы через браузер.

TOBIZ

Конструктор лендинга TOBIZ был создан в 2013 году и на сегодняшний день успел накопить огромное число шаблонов (более 3 000). Платформа довольно проста в использовании, присутствует подробный курс обучения для новичков.

Ключевые особенности TOBIZ в таблице ниже.

Количество шаблонов Более 3 477 (есть платные)
Индивидуальный заказ дизайна Отсутствует
Пробный период 14 дней
Минимальный тариф От 450 руб. в месяц
Привязка собственного домена Есть
Адаптивность дизайна Под 2 экрана (без возможности редактирования)
Интеграция CRM, Яндекс.Касса, Robokassa, Jivosite, UniSender, SendPulse, LPtracker, обратные звонки
Аналитика Отчет в реальном времени, Google Analytics, Яндекс.Метрика
Регистрация доменов Отсутствует

Платформа TOBIZ имеет очень много шаблонов и все необходимое в плане интеграции со сторонними сервисами (CRM, онлайн-оплата, рассылки). Однако в ней нет расширенных инструментов аналитики, например, для А/Б тестирования. На минимальном тарифе внизу страницы сохраняется реклама, а в редакторе нельзя просматривать мобильную версию сайта.

Перейти на tobiz.net

№2. Создание лендинг пейдж с помощью готовых HTML шаблонов

Второй, достаточно простой способ сделать свой landing page бесплатно – это найти на просторах интернета уже готовые HTML шаблоны. Тут естественно уже потребуются некоторые знания HTML и CSS, чтобы быстро разобраться что к чему и иметь возможность делать нужную модификацию готовых шаблонов.

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

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

Пошаговое руководствоПошаговая руководство от А до Я, как создать и продвинуть современный интернет-магазин с нуля и вывести его на прибыль. В книге собрано более 14 лет реального опыта в электронной коммерции и большое количество чек-листов, которые помогут все учесть и ничего не забыть. А постоянные обновления дают гарантию, что в книге собрана только самая свежая и актуальная информация!Купить за 199 руб.Консалтинг и аудитОтвечу на вопросы по созданию, продвижению и масштабированию вашего бизнеса. Помогу найти правильные решения, оптимизировать и автоматизировать бизнес-процессы внутри компании, разработать правильные мотивационные схемы для сотрудников. Проведу оценку и аудит вашего интернет-магазина. Помогу вывести продажи и прибыль на совершенно новый уровень!от 2990 руб.Бизнес сопровождениеБизнес-обучение и сопровождение вашего интернет-магазина. Вы не останетесь один на один с вашим бизнесом, я лично его буду курировать! Поделюсь опытом, как быстро запустить магазин, вывести на совершенно новый уровень, как выиграть конкурентную борьбу, как оптимизировать и автоматизизовать бизнес-процессы и снизить издержки. Отличный результат не заставит себя долго ждать!от 14900 руб.SEO для руководителейSEO-тренинг для руководителей интернет-магазинов и их сотрудников, занимающихся продвижением. Научитесь с минимальными бюджетами эффективно продвигать магазин. Отличать хорошего сео-специалиста от плохого. Попутно разберем ваш магазин по косточкам, расскажу и покажу что положительно и отрицательно влияет на SEO-продвижение в вашем конкретном случае!Записаться за 29800 руб.PreviousNext

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

Читайте также:  Как сделать сайт интернет-магазина самому дешево и быстро?!

8. Цена, решения, тарифы

Пример сайта «Яндекс.Практикум»

Опишите решения задач, о которых указывали в начале лендинга, или подробно и понятно распишите тарифы.

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

#3 – Редактируем текст на главном экране

Кликайте правой кнопкой мыши по файлу “index.html” и выбирайте “Открыть с помощью – Notepad++”.

Открываем шаблон программой Notepad++

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

Редактирование текста лендинга

И давайте сразу отредактируем главный экран нашего лендинга. Он самый важный, и конверсия в заказы будет на 80% зависеть именно от него.

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

:

Замена заголовка на главном экране

После этого сохраняем документ, и обновляем лендинг в браузере. Получаем следующее:

Главный экран с новым заголовком

Получилось не очень симпатично, потому что заголовок большой, и растянулся на весь экран. Попробуйте после слова “налоговой” вставить тег
. Он сработает как разрыв в предложении, и часть текста перенесется на новую строку. Мне кажется, что так получится лучше.

Разрыв строки в шаблоне

Далее меняем подзаголовок. Чтобы посетитель сразу получил тот минимум информации, который необходим для заказа – прописываем наши конкретные предложения. Например: “Подготовка и сдача отчетности за 4 рабочих дня. Отчет УСН – от 5400р. ЕНВД без сотрудников – от 2100р.” Вставляем этот текст вот сюда:

Меняем подзаголовок на главном экране

Теперь меняем текст кнопок таким же образом. Пишем на белой “Заказать”, на прозрачной – “Подробнее”.

Замена кнопок на главном экране

В итоге у нас получается вот такой главный экран лендинга:

Готовый главный экран

Переходите на новый уровень

Да, обычно лендинг — это быстро и недорого. Но в любом правиле есть исключения. Например, компания S7 Airlines сделала необычную презентацию нового самолета — это интерактивная картинка гаража с Airbus A320neo. Дизайнер создал 3D-анимацию снятия покрывала с самолета, взлета и возможность прогулки по салону.

Посмотрите проект сайта на Behance.

Если позволяют ресурсы, попробуйте сделать подобное. Несмотря на распространение техники параллакса, такие эффекты все еще привлекают пользователей.

Старайтесь удивлять пользователя. Не обязательно использовать технологии, которые стоят тысячи долларов. Съемка 3D-фотографии, пусть без динамики, сейчас стоит не очень дорого (можно найти варианты от 600–700 рублей), но этот эффект заставит пользователей запомнить ваш лендинг.

Ukit.com

Если вы были внимательны, то наверняка заметили, что о ukit речь уже шла в обзоре платформы Ucoz.ru. Тем не менее, Юкит, как конструктор сайтов для бизнеса, вынесен отдельно, и также заслуживает внимания.

Само понятие “для бизнеса” предполагает, что это идеальная площадка для создания лендинг пейдж с помощью конструктора. Но одностраничниками функционал не ограничивается. Здесь можно размещать многостраничные сайты и интернет-магазины.

Преимущества конструктора Ukit

  • интуитивно понятный функционал конструктора;
  • работа с элементами в визуальном редакторе за счет обычного перетаскивания;
  • 38 тематик и более 350 готовых шаблонов;
  • адаптивность под мобильные устройства;
  • красивые шрифты и палитры;
  • единая сетка для работы с блоками;
  • нет ограничений на объем страниц, фото и видео.

Юкит позволяет создавать интернет-магазины с современным дизайном. Настройка формы заказа, способы доставки и приема платежей — все это возможно на базе конструктора Ukit.

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

Из дополнительного функционала сервиса — чаты, форма обратных звонков, рассылки, система аналитики.

Тарифы

Протестировать конструктор сайтов можно бесплатно в течение 14 дней.

Тарифные планы делятся по периоду оплаты: месяц, год, два года. Чем больше период оплаты, тем выше размер скидки.

Стоимость тарифа зависит от количества опций, которые доступны на том или ином тарифе.

Не забывайте улучшать навыки

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

Учитесь собирать лендинги для тестирования гипотез и продаж и создавать дизайн-решения для крупных проектов на курсе от Skillbox. Во время обучения потренируетесь на практических задачах и сделаете из них убедительное портфолио.

ПоделитьсяVkontakteTwitterTelegramСкопировать ссылку

Глубоко, бесплатно:
вебинары по программированию, маркетингу и дизайну.

Расписание

Профессия Графический дизайнер

Wix.com

Wix — пожалуй, один из самых разрекламированных конструкторов сайтов. По крайней мере мне очень часто попадается реклама этого сервиса на Ютуб. По аналогии с Ucoz этот конструктор сайтов поддерживает русский язык.
Как заявляют разработчики платформы, благодаря удобному конструктору, с созданием полноценного сайта справится как новичок, который начинает работу с нуля, так и опытный эксперт.

Wix предлагает 3 варианта взаимодействия с платформой:

  1. Самостоятельная работа в Редакторе, который позволяет собрать сайт своими руками буквально с чистого листа. По вашему желанию можно воспользоваться дизайнерскими шаблонами (более 500 вариантов), чтобы ускорить и облегчить процесс создания сайта.
  2. Помощь искусственного интеллекта Wix ADI. Уникальность этого способа в том, что вам достаточно ответить на несколько простых вопросов о вашей сфере деятельности, и конструктор самостоятельно соберет для вас профессиональный сайт из текстовых блоков и картинок. Все блоки редактируются, поэтому внести какие-то правки возможно всегда.
  3. Простое программирование. Этот модуль предназначен для тех, кто умеет работать с кодом. У вас есть возможность создавать собственные базы данных, добавлять свои коды и т.д.

Возможности конструктора Wix

  1. Создание современного блога (сайта).
  2. Подключение медиагалереи.
  3. Оптимизация под мобильные устройства.
  4. Создание интернет-магазинов.
  5. Персональное доменное имя.
  6. Возможность SEO-оптимизации.
  7. Создание одностраничников с нуля через редактирование специальных шаблонов.
  8. Бесплатный и надежный хостинг.
  9. Неограниченное количество страниц на сайте.
  10. Возможность загрузки видео и аудиофайлов.
  11. Возможность встраивания внешних HTML-кодов.
  12. Выставление счетов.
  13. Статистика сайтов.
  14. Почта на вашем домене.
  15. Круглосуточная служба поддержки.
  16. Обучающие материалы.

Создание собственного логотипа бесплатно

Одной из дополнительных функций Wix, которые есть в его распоряжение, — конструктор по созданию собственных логотипов.

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

Готовый вариант всегда можно отредактировать (цвет, размер, текст) и настроить логотип под ваш бренд.

При необходимости логотип можно скачать и использовать вне платформы Wix. По желанию — даже распечатать.

Бесплатный домен и хостинг

Я знаю, что часто пользователи ищут конструктор сайтов с бесплатным доменом и хостингом. В этом случае Wix — идеальный для вас вариант.

По умолчанию в пользование предоставляется бесплатный хостинг и домен на 1 год при оплате одного из тарифов конструктора. При этом доменное имя можно зарегистрировать через платформу Wix.

Если же у вас уже есть зарегистрированный домен, и вы хотите подключить его к сайту на Wix, это можно реализовать буквально в два клика.

На собственном домене создается электронная почта.

Тарифы Wix

Тарифы на Wix делятся на 2 категории: для сайтов и для бизнеса, и электронной коммерции (интернет-магазинов).

На мой взгляд, тарифы для сайтов имеют очень доступные цены. Например, Базовый тариф стоит всего 150 руб. в месяц.

Для Бизнеса и интернет-магазинов цены, конечно, подороже:

Обратите внимание, что каждый тариф предоставляет скидку на рекламу в Яндекс.Директ (3000 руб.) и Google Ads (2000 руб.).

Начните с понимания задачи

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

Подготовьте бриф. Вам нужны ответы на три главных вопроса:

Что нужно сделать

Это сайт, на котором люди будут сразу покупать? Или цель лендинга — побудить человека поверить в экспертность клиента и подписаться на рассылку? Может быть, важна запись на вебинар? Обязательно обсудите этот момент с заказчиком.

Для кого

Вам нужно досконально изучить целевую аудиторию. Дизайн для презентации сериала для подростков и стиль для b2b-направления отличаются кардинально.

Как вы это реализуете

Здесь нужно уточнить, чего в результате ждет заказчик. Придумайте, какие блоки будете рисовать, с помощью каких инструментов.

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

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

Пример лендинга «Звездных войн» — необычный яркий пример с почти незаметным боковым меню.

Аналитика

Это не последняя версия вашего лендинга.

Обязательно подключите яндекс метрику и гугл аналитику, настроите цели и события. Так вы сможете улучшать взаимодеиствие пользователеи с саитом, увеличивать конверсию и оценивать эффективность рекламы.

Изучаите сеансы пользователеи в вебвизоре, анализируите карту скроллинга и кликов, оцениваите качество трафика с помощью ютм меток и промежуточных конверсии.

Обращаите внимание на процент отказов. Он показывает, какое количество посетителеи пробыли на саите менее 15 секунд. Это поможет оптимизировать рекламу и оценить ее релевантность аудитории.

Это общие советы, детальные инструкции посмотрите в интернете.

Этап 4. Делаем дизайн

Все элементы дизайна лендинга можно разбить на три части, это подбор:

  1. Шрифта
  2. Цвета
  3. Графики (фото, иконки, картинки)

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

Как пример: На сайте по оказанию ритуальных услуг навряд ли будут уместны яркие цвета и девушка с лучезарной улыбкой с надписью крупными буквами АКЦИЯ!. Или же сайт про организацию праздников в серых, блеклых тонах, с черными кнопками и шрифтом с брусковыми засечками, после просмотра которого хочется впасть в депрессию, а не заказать праздник для ребенка. Примеры конечно утрированные, навряд ли вы их встретите в жизни (хотя не исключено), но суть я думаю вы уловили.

Давайте обсудим каждый элемент подробнее.

Шрифт

Текст это основа любого сайта, поэтому шрифт не менее важен чем цвет или графика. Шрифт тоже может задавать настроение, он может быть легким или брутальным, вызывать чувство дороговизны или простоты и тд.

Отталкивайтесь от своей тематики и от того какую эмоцию вы хотите вызвать у посетителей.

Если не хотите заморачиваться и придумывать сочетания, возьмите готовые нейтральные варианты, которые я для вас подготовил. Они подойдут к любой тематике. Это:

  • Roboto
  • Open sans
  • Pt sans

Выберите один или два из них и смиксуйте.

Например:

Заголовок — Roboto (Bold)
Текст — Roboto (Light)

Заголовок — Open sans (Bold)
Текст — Roboto (Light)

Заголовок — Pt sans (Regular)
Текст — Open sans (Light)

Где брать шрифты?

Есть бесплатные и платные шрифты. На первых этапах я вам советую использовать бесплатные шрифты от Google Fonts. Там есть хорошие варианты и те, что я описал выше, тоже есть.

Почему я советую именно Гугл шрифты?

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

Если вы делаете сайт для себя, подставите себя, если делаете для заказчика, подставите заказчика.

Цвет

Как правильно подобрать цветовую гамму для сайта?

Белый, серый и черные цвета уже включены в набор, они используются всегда, например шрифт используется белый, серый или черный, фон сайта белый, серый или черный. Как не крути, эти цвета уже будут использоваться на лендинге. Они называются ахроматические (не содержат цветовых оттенков). Остается подобрать хроматические цвета (цветовые оттенки).

Пример цвета
Пример цвета

Как правило на сайте используется один, два или три хроматических цвета. Я вам советую выбрать один или максимум два, иначе есть вероятность что не получится гармонично их сочетать и сайт будет смотреться некрасиво, негармонично.

Посмотрите интересное видео на эту тему

Вам их нужно подобрать также исходя из вашей тематики.

Примеры, какое настроение вызывает каждый цвет:

Материал про цвета взят отсюда.

Графика (фото, иконки, картинки)

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

Если честно я тоже грешил этим раньше, но сейчас прошу (молююю) заказчиков присылать максимум своих «живых» фото товаров, персонала, помещений и пр.

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

Есть конечно тематики, где особо нечего показать, тогда уже можно прибегать к фото со стоков. Я все же советую покупать фото там, чем искать бесплатные в поиске, потому что их чаще используют на других сайтах.

Кто-то скажет «Илья, фото на стоках стоят как самолет!» — есть такое :) Для вас есть способ как скачивать картинки по доллару, про сервис написал тут. Ну а если вы делаете проект для крупной коммерческой компании, то лучше заложите эту сумму в бюджет и купите картинки на официальном фотостоке, опять же обезопасите себя.

  • Сервис ShopDiz.pro — скачивание картинок со стоков по 0,5-1 доллару.
  • Сервис ShutterStock — самый популярный сток с большим количеством фото, вектора, видео.

Статья по теме — 30 бесплатных фотобанков

При выборе картинок также ориентируйтесь на свою тематику и какие эмоции вы хотите вызвать у клиентов. Доверие, радость, надежность, счастье и пр.

Как придумывать идеи дизайна для блоков? Здесь какого-то универсального правила нет. Главное убирайте все что вам кажется лишним, сокращайте текст, используйте графику в меру, не перегружайте. Смотрите примеры хороших лендингов, делайте себе пометки, делайте скриншоты блоков, которые вам нравятся, чтобы потом делать что-то похожее на своих проектах.

Статья по теме — Тренды веб-дизайна 2021 года (+115 примеров)

Как создать лендинг в 2022. Пошаговая инструкция из 9 этапов разработки

4. Кейсы, ассортимент, результаты

Пример сайта «IKRA»

Распишите кеисы, покажите ассортимент или расскажите о результатах, опираясь на ваши преимущества, УТП и потребность потребителя.

Помните про целостныи образ. К примеру, в результатах вы пишите, что сделали 10 вариантов логотипа, а в преимуществах пишите, что срок разработки занимает до 2 недель. Логичнее указать в первую очередь срок разработки, а потом упомянуть о количестве вариантов.

Этап 2. Пишем текст для лендинга

Для многих (в том числе и для меня), составление текста является самым сложным этапом разработки, поэтому лично я стараюсь этот этап всегда делегировать копирайтеру.

Хаос в голове перенесите на бумагу

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

Составляем блоки лендинга

Лендинг состоит из определенных блоков, нельзя просто написать сплошной текст как статью и просто опубликовать. Это будет ужасно неудобно читать.

Вот основной список блоков, который можно встретить на 90% лендингов:

  1. Первый экран с УТП (уникальным торговым предложением)
  2. Раскрытие продукта (Описание услуги или товара)
  3. Информация об авторе / компании
  4. Отзывы
  5. Кейсы (Истории успеха)
  6. Форма / призыв к действию
  7. FAQ (Ответы на частые вопросы)
  8. Контакты / подвал сайта

Какие еще могут быть блоки на сайте:

  • Факты в цифрах
  • Выгоды (преимущества)
  • Видео
  • Портфолио
  • Для кого
  • Этапы сотрудничества (или Как сделать заказ, Как оставить заявку)
  • Тарифы и цены
  • Платёжная кнопка
  • Партнеры
  • Галерея
  • Расписание
  • Команда
  • Сертификаты, дипломы, благодарственные письма
  • Документы
  • Таймер

Когда готов каркас лендинга, начинаем писать текст. Вы можете это сделать сами или отдать на аутсорс копирайтеру.

Смотрите также: Как создать онлайн-школу с нуля в 2021 году — подробный гайд (+ мой пример).

Советы по составлению текста

  1. Главное ставим в начале. Не нужно в начале сайта писать о себе, покажите сначала свой продукт.
  2. Замените общие слова на факты. Не нужно убеждать посетителей в чем-либо, оставьте это право за ними. (Пример: не пишите, что вы лидеры на рынке которым можно доверять, покажите отзывы компаний, которым вы предоставляли услуги и они остались довольны, в дополнение приложите оригинал отзыва, чтобы не быть голословным).
  3. Проработайте особенно хорошо первый экран и УТП. После захода посетителя на лендинг у вас есть три секунды чтобы захватить его внимание. Если не успели, то человек закроет страницу и будет серфить дальше. Первый экран должен быть максимально релевантным запросу, через который посетитель попал на сайт. (Пример: если человек ищет «Бухгалтерия для ИП», не нужно показывать лендинг с заголовком «Ведение бухгалтерии для ООО»).
  4. УТП (Уникальное торговое предложение). Проще говоря главный заголовок и описание, которое должно емко рассказать о чем данный лендинг. УТП вы можете составить по технологии 4U.
  5. Чем короче тем лучше. Старайтесь писать блоки с текстом как можно короче. Длинные портянки текста никто не читает, сегодня у людей всегда нехватка времени и это нужно учитывать. Если все же нужно предоставить много информации, то разбивайте ее на абзацы, блоки.
  6. Больше заголовков. Абзацы текста не должны быть написаны просто так, без заголовка. Большинство посетителей заходя на сайт, сначала проматывают сайт пытаясь оценить туда они попали или нет. И здесь как раз заголовки играют важную роль, потому что пробегать глазами и оценивать сайт он будет именно по ним.

Не хотите составлять текст самостоятельно? Найдите копирайтера, который сделает это за вас.

Где искать копирайтера

  1. Биржа копирайтинга ContentMonster.ru
  2. Биржа копирайтинга Etxt.biz
  3. Частные компании или специалисты. Их вы можете поискать через поиск или в соцсетях (Вк, Фейсбук, Инстаграм).

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

Как создать лендинг в 2022. Пошаговая инструкция из 9 этапов разработки

lpgenerator.ru

lpgenerator также на слуху у тех, кто интересуется конструкторами сайтов. Но сразу оговорюсь, что данный сервис не рассчитан на многостраничные блоги. LP — это конструктор лендингов и одностраничных сайтов.

В зависимости от типа вашего бизнеса конструктор лендингов LPgenerator предлагает несколько вариантов создания сайта.

Например для стартапов есть вариант создания лендинга всего в пару кликов без помощи программиста и дизайнера. Достаточно выбрать 1 из 250 шаблонов посадочных страниц.

Возможности конструктора лендингов lpgenerator

  1. Наличие тематических шаблонов с уникальным дизайном. Возможность заказать индивидуальный шаблон для одностраничника.
  2. Мобильные целевые страницы (лид-форма, click to call).
  3. Возможность изменять готовые шаблоны или генерировать посадочные страницы с нуля.
  4. Бесплатный хостинг, покупка домена из интерфейса LP, подключение собственного доменного имени.
  5. Наличие сплит-тестирования через создание нескольких вариантов целевых страниц.
  6. Глубокая аналитика и статистика.
  7. Интеграции с известными сервисами (GetResponse.ru, Bitrix24.ru, Robokassa.ru, JustClick.ru, amoCRM.ru, и т.д.).
  8. Систематизация поступления заявок (CRM управления лидами).

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

В Магазине готовых шаблонов есть возможность приобрести готовый лендинг.

Тарифы

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

Для дальнейшего сотрудничества необходимо купить тариф.

На платформе представлено 4 тарифа. Самый маленький тариф — Базовый: 559 руб. в месяц при оплате за год. Обратите внимание, что на годовую оплату предоставляется скидка в 30%.

Этап 7. Верстаем лендинг

Когда дизайн готов и вы определились с методом верстки. Следующий шаг, все это дело заверстать.

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

  1. Курс «Лендинг на WordPress» — это мой курс, который я записывал на шаблоне The7 и конструкторе WPBakery;
  2. Tilda.Education — уроки и вебинары по конструктору Tilda;
  3. Канал WPlovers — парень записывает уроки по Elementor;
  4. База знаний LPGenerator — ответы на частые вопросы по платформе LPGenerator.

Как создать лендинг в 2022. Пошаговая инструкция из 9 этапов разработки

Источники

  • https://timeweb.com/ru/community/articles/kak-sdelat-lending
  • https://novoseloff.tv/kak-sdelat-lending-samomu-poshagovaya-instruktsiya/
  • https://Delen.ru/servisy-i-uslugi/konstruktory-sajtov/rejting-konstruktorov-lendingov.html
  • https://sa1nikov.ru/3-sposoba-sdelat-lending-pejdzh-svoimi-rukami-bystro-i-besplatno/
  • https://vc.ru/marketing/186976-kak-sozdat-horoshiy-lending-samomu-shablon-instrukciya
  • https://skillbox.ru/media/design/kak_sozdat_lending_instruktsiya/
  • https://denezhnye-ruchejki.ru/top-12-konstruktorov-dlya-sozdaniya-saytov-lendingov-odnostranichnikov/
  • https://ichigarev.ru/sozdanie-saita/kak-sozdat-lending.html

Понравилась статья? Поделиться с друзьями:
Weebl.ru