Как создавать продающие сайты?
Инструкция для веб-дизайнеров pro.finansy

Содержание

1. Используемые скрипты

2. Этапы создания лендинга
3. Создание прототипа и поиск смыслов
4. Создание дизайн-макета
5. Верстка лендинга
6. Настройка сайта и интеграции
7. Список обязательной литературы
На сайте используются сокращения:
РОМ — Руководитель отдела маркетинга
ВД — Веб-дизайнер

  1. Используемые скрипты

* Все скрипты можно посмотреть здесь же в режиме редактирования страницы. В опубликованной версии Руководства скрипты не видны.
⚠️ Важно! На всех лендингах обязательно должны быть использованы 2 скрипта.

1 скрипт. Передает данные в amo crm.

2 скрипт. Подтягивает utm-метки.

Дополнительные скрипты, используемые на сайтах

1 скрипт. Раскрытие блока при нажатии на кнопку. Например, используется на сайте https://capital-profinansy.info/ в блоке «Программа»
2 скрипт. Раскрытиех скрытых блоков при нажатии на кнопку со скролом до нужного блока. Например, используется на сайте https://profinansy.net/vacancy в блоке с вакансиями. 
3 скрипт. Добавляет таймер на сайт. Скрипт генерируется на сайте https://megatimer.ru/. Подробнее о таймерах можно прочитать здесь.
4 скрипт. Добавляет автоматическую смену дату на сайт. Скрипт генерируется на сайте vakas-tools.ru. О том, как это работает, можно посмотреть в подробной видеоинструкции на сайте vakas-tools. Логин и парль для входа в личный кабинет pro.finansy моджно запросить у Руководителя отдела техподдержки.

  1. Этапы создания лендинга

1
Техническое задание
РОМ направляет ВД подробное техническое задание на создание лендинга.
2
Прототипирование
ВД создает прототип будущего лендинга, где схематично изображает, какие блоки будут на сайте, как они будут расположены, и какой текст нужен.
3
Написание текста
Прототип лендинга передается в работу копирайтеру. Копирайтер пишет текст для лендинга. Передает текст РОМу. РОМ согласовывает текст и передает его ВД.
4
Дизайн-макет
ВД делает дизайн сайта в Figma. РОМ согласовывает дизайн.
5
Верстка сайта на Tilda
ВД верстает сайт на Tilda. РОМ согласовывает десктопную версию лендинга.
6
Адаптация сайта, настройка и интеграции
ВД делает адаптацию лендинга для всех устройств. Производит надлежащие настройки и интеграции.
7
Согласоваание сайта
РОМ согласовывает лендинг и передает его в работу.

2. Создание прототипа и поиск смыслов

введение

Структура лендинга

Чтобы создать прототип, необходимо прописать структуру будущей страницы. Важно понимать, что лендинг состоит из блоков (секций), и каждый блок несет в себе одну законченную мысль.
© Tilda Publishing. Подробнее можно ознакомиться здесь и здесь.
Часто ВД допускают ошибку, и повторяют одну и ту же информацию в разных частях лендинга. Старайтесь экономить пространство на сайте и экранное время пользователя. Не дублируйте одну и ту же информацию, и объединяйте вопросы, касающиеся одной темы, в рамках одного блока.
Какие блоки могут быть использованы в лендинге?
  1. Главный экран (Должен содержать оффер и призыв к действию)
  2. Кому подойдет продукт?
  3. Какую информацию и пользу получит клиент? Чему научиться?
  4. Чем продукт будет полезен клиенту? Какой результат получит? Как сможет применить полученный опыт на практике?
  5. Что входит в продукт? Что получит клиент?
  6. Чем продукт будет полезен клиенту?
  7. Программа (Желательно должна содержать темы и результат для клиента)
  8. Тарифы
  9. Отзывы
  10. Почему важно начать именно сейчас?
Данная структура лишь показывает пример того, из каких блоков может состоять лендинг. Не нужно ориентироваться на нее как на единственно возможный вариант.

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

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

Смыслы на сайте

добавить содержание

Психологические триггеры

Цель ВД — создать сайт, который будет приносить максимальное количество лидов и продаж. Чтобы повысить конверсию сайта, принято использовать психологические триггеры. Здесь можно прочитать про 15 основных триггеров, которые мы можем использовать в создании сайта.

Разберем на примерах, какие триггеры мы обычно используем.
Триггер срочности

Чтобы помочь человеку решиться на покупку, мы можем ограничить время предложения. Для этого мы используем соответствующие фразы («только 24 часа», «только 120 секунд» и тп.), а также таймер обратного отсчёта (на промежуток времени с первого посещения клиентом или до конкретной даты).п


Таймер на сайт добавляется при помощи html-кода.


Создать таймер можно на сайте https://megatimer.ru/. Рекомендуемый шриф — Play. Остальные настройки выставляем в соответствии с дизайн-макетом.

Варианты использования таймера
  • Внесите предоплату в течение 24 часов и получите в подарок видеоруководство «Как снизить кредитную нагрузку»
  • Только 2 дня, чтобы получить доступ к уроку
  • Окно в проект открыто ТОЛЬКО 12 часов!
  • Зарегистрируйся в течение 120 секунд и получи в подарок [название файла]
* Чтобы таймер ровно стоял на сайте, необходимо вручную выравнивать html-блок, публиковать и проверять, как таймер встает на опубликованной странице.

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

На сайте таймер может выглядеть так:
Триггер дефицита

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


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


❌НЕТ❌ Предложение ограничено.

✅ ДА Предложение ограниченно количеством учебников на складе.


Это же касается и количества. Когда мы пишем, что доступно 1000 мест, клиент не понимает: 1000 — это много или мало? Соответственно, наша задача объяснить ему, что 1000 — это мало, и на это есть такие-то причины.


❌НЕТ❌ Доступно только 1000 мест.
✅ ДА Каждый год у меня обучается более 100 000 человек. И только 1 день в году всего лишь 1000 мест мы готовы отдать со скидкой 74%.

Примеры использования:
Триггер эксклюзивности

Когда мы продаем что-то для учеников/ выпускников/ подписчиков/ учатников конкретного вебинара, важно указать на это. Люди хорошо реагируют, когда видят, что им открылось секретное предложение "для своих". Грех не воспользоваться шансом, который дали только избранным :)


Примеры использования:

Триггер жадности

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


❌НЕТ❌ Регистрируйтесь на вебинар в 19:00

✅ДА Регистрируйтесь на вебинар за 2500 рублей бесплатно!


Примеры использования:

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


Примеры использования:

Расписать остальные триггеры

Считаем цифры

Важно использовать на сайте цифры и измеримые показатели, которыми мы можем гордиться. Всё, что может быть измерено, должно быть измерено и указано на сайте (если это поможет раскрыть продукт с позитивной стороны).
Примеры использования
  • Более 200 тысяч студентов прошли курс.
  • Эксперт проверил более 300 инвестиционных портфелей.
  • Методическое пособие на 265 страниц + справочник ETF на 195 страниц.
  • 54 урока в записи на удобной онлайн-платформе.
  • 8 часов полезного контента от экспертов pro.finansy.
  • Инвестируя с 25 лет под 6% по 503 710 руб в год, к 65 годам вы накопите на 40 296 800 больше, чем инвестируя с 35 лет.
⚠️Важно! Ответственность за то, чтобы на сайте были представлены исчисляемые показатели, которыми мы можем гордиться, несёт ВД. Если на сайте таких цифр нет, ВД обязан запросить необходимую информацию у руководителя соответствующего отдела.

Заголовки

Часто мы недооцениваем значение заголовков в тексте. Если вы все еще думаете, что заголовки на сайте нужны только для того, чтобы помочь клиенту понять содержание текста, то скорее всего вы еще не читали Инструктивное письмо «О том, как писать заголовки». Сделайте это прямо сейчас :)

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

  1. В заголовке должен быть глагол.
❌НЕТ❌ Содержание курса
✅ДА На курсе вас ждёт

2. Приветствуется, если заголовок будет содержать вопрос.

❌НЕТ❌ Тестирование инвесторов с 1 октября
✅ДА Как пройти тестирование инвесторов с 1 октября?

3. Здорово, если заголовок будет построен на реальной пользе для клиента.

❌НЕТ❌ На курсе мы расскажем
✅ДА Как вы сможете применить опыт, полученный на курсе

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

Да, раньше мы любили писать капсом. А теперь нет :)

❌НЕТ❌ ЗАРЕГИСТРИРУЙТЕСЬ НА БЕСПЛАТНЫЙ МАСТЕР-КЛАСС
✅ДА Зарегистрируйтесь на бесплатный мастер-класс

3. Создание дизайн-макета

введение

Мудборд и референсы

Один из первых и ключевых вопросов, на который должен ответить ВД при создании макета, это — какие эмоции должен вызывать сайт, дизайн которого он делает.

Как ответить на этот вопрос? Разберём на примере лендинга «5 ошибок в деньгах и инвестициях».

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

Как мы можем отразить эту тему визуально?

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

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

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

Дизайн

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

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

⚠️ Важно! Если перед вами поставили задачу переделать сайт для нового продукта из какого-то старого лендинга, это не значит, что вам нужно сделать его точную копию с новым заголовком. Будьте креативными. Крадите, как художник.
Дизайн лендингов создается в рамках фирменного стиля pro.finansy (тут будет ссылка).

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

✅ Не более 1-2 акцентных цветов
✅ Единый стиль для иллюстраций, иконок, плашек и других визуальных элементов
✅ Одинаковые кнопки на всём лендинге

Типографика

Основные гарнитуры (в зависимости от сайта): Roboto, Raleway, Tilda Sans.

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

⚠️ Важно! Шрифты с засечками мы не используем (допускается только в случае крайней необходимости, если того требует дизайн. См. пункт выше).

Размер заголовков H1 — допускаются различные размеры в зависимости от дизайна.
Основной размер заголовков H2 — 42 кегль для десктопа, 32 кегль для мобильных устройств.
Основной размер основного текста 15-18 кегль в зависимости от гарнитуры.

*Допускается другой размер шрифта, если того требует дизайн.

⚠️ Важно! Когда ВД выбрал размер шрифта для заголовков и основного текста этот размер должен соблюдаться на всем лендинге.

⚠️ Важно! Запрещено разряжать текст со строчными буквами. Проверяйте, чтобы в тильде letter spacing был равен 0.

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

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

Отступы

© Tilda Education. Подробнее можно ознакомиться здесь.
⚠️ Важно! Внутренние расстояния на сайте должны быть меньше внешних.

Про правило внутреннего и внешнего, и как его применять на практике, можно прочитать тут. Про теорию близости — тут и тут.

⚠️ Важно! Отступы в блоках должны быть одинакового размера, как сверху, так и снизу блока.

Ориентировочный размер отступа для десктопа: 90-100 px, для мобильной адаптации: 70-80 px с каждой стороны. 

Подробнее про отступы можно прочитать здесь. Рекомендуется прочитать статью до конца, чтобы изучить и другие ошибки.

4. Вёрстка лендинга

Перенос дизайн-макета на Tilda

Чтобы быстрее перенести дизайн-макет из Figma в Tilda советую воспользоваться автоматическим переносом, который предоставляет сервис Tilda. Если вы ещё не знаете, как это сделать, вы можете найти соответствующее видеоинструкции на Youtube по запросу «как перенести дизайн с фигмы в тильду» или прочитать об этом здесь.

⚠️ Важно! При загрузке на сайт растровых изображений, не забывайте сжимать вес файлов. Вес изображений не должен превышать 200-300kb (для больших картинок) и 50-100 kb (для мелких). Сделать это можно в сервисе tinypng. Все векторные изображения должны загружаться на сайт в формате svg. Все геометрические фигуры добавляются шейпами тильды.

Сетки

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

Адаптация мобильных устройств

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

❌ Не допускается ❌, чтобы кнопка или другие влияющие на продажи элементы «уходили» на следующий экран.