Документ представляет описание landing page, ее функций и значимости в веб-дизайне. Основное внимание уделяется методам повышения эффективности страницы для конверсии пользователей, включая использование привлекающих заголовков, call-to-action кнопок и мультимедиа контента. Также рассматриваются рекомендации по созданию адаптивного дизайна и важности тестирования для оптимизации страницы.

1. Басыров Амир
amir.basyrov@gmail.com
Веб-дизайнер в DaSuppa

2. Что такое Landing Page?
Landing Page - это специальная целевая
страница, задачей которой является
эффективная реализация одной из
целей:
 сбор контактов (лидов) (если
мобильное ПО еще не запущено);
 продажа продукта (если мобильный
программный продукт уже был
запущен).

3. Функции страницы
1. Принять пользователя после поискового
запроса, клика по баннеру, перехода по ссылке
или из любого другого источника.
2. В первые 5 секунд дать понять пользователю:
Что вы предлагаете?
Почему это выгодно для него?
Что необходимо сделать?
3. Мотивировать пользователя выполнить действие:
Скачать мобильный продукт
Оставить свои данные или подписаться

4. Примеры Landing Page
http://gemz-game.com/

5. Примеры Landing Page
http://total-defense-3d.com

6. Примеры Landing Page
http://sky-jockeys.com

7. Landing page – это НЕ веб-сайт!
Это промо-страница.
Поэтому:
 Постарайтесь сделать сложной точку выхода.
 Удалите все внешние ссылки, которые могут увести
Вашего потенциального покупателя с Landing page
(стоит оставить только ссылки на поддержку и
официальный сайт компании).
 Скажите посетителю что ему делать дальше!

8. Скажите посетителю что ему
делать дальше!
 Сразу после привлекательного интересного ролика
дайте пользователю совершить необдуманное,
необходимое Вам действие:
Скачать игру Оставить свои данные

9. На Landing page должны быть
 Броский, понятный и интригующий
заголовок по теме.
 Call-to-Action кнопки.
 Небольшой вводный текст.
 Контакты с Вами.
 Мультимедиа контент: видео, аудио,
презентация и так далее.
 Социальные кнопки.

10. Повышайте доверие к бренду
 Расскажите о себе и продукте.
 Приведите цитаты известных и влиятельных
людей в Вашей сфере, их мнения о Вашем
продукте. Очень эффективно так же добавить
фотографии этих людей.
 Не забудьте указать каналы связи с Вами:
E-mail, Skype, номер телефона, адрес офиса

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

12. Возьмите на вооружение
 Используйте минимум Call-to-Action элементов
(все используемые должны реализовывать главную цель страницы!)
 Значимые элементы делайте темными (контрастными).
 Оптимальное количество колонок страницы - 2.
 Сведите чтение к минимуму.
 Используйте различные мультимедиа - слайдшоу,
презентации, видео, аудио.
 Любая форма ввода информации о пользователе -
препятствие на пути к цели.
 Не используйте автостарт ролика или аудиозаписи.
 Используйте гармонирующие цвета.

13. Возьмите на вооружение
 Не в коем случае не забывайте про Open Graph
теги. Они сделают share на стену фанатов
максимально простым. С правильно
настроенными тегами фанату нужно будет ввести
только комментарий. Более того, Open Graph теги
позволяют задать разработчику сайта именно те
данные, которые будут расшариваться!
Лучшая документация по Open Graph

15. Используйте правильные цвета

16. Отзывчивый дизайн!
Отзывчивый (адаптивный) дизайн
обязателен, ведь вы делаете и
продаете мобильное приложение.
www.sky-jockeys.com – оптимизирован
для любого разрешения экрана.

17. Отзывчивый дизайн!
 Используйте один домен для настольной и
мобильной версии. Откажитесь от домена второго
уровня m.site.com и аналогов (mobile, lite).
 Проверяйте работу адаптивной верстки на
максимальном количестве браузеров и их версий.
 Используйте разные по качеству и весу
изображения для разных разрешений экрана
 Максимально используйте возможности CSS –
отрисовывайте графические элементы
посредствам CSS, если это возможно.

18. Тестируйте-тестируйте-тестируйте!
 Используйте AB тестирование.
 Тестируйте графические компоненты.
 Тестируйте заголовки, тексты, вводные абзацы.
 Тестируйте CTA-кнопки:

19. Анализируйте эффективность
Для анализа поведения пользователей и
эффективности Landing Page используйте
Google Analytics
 Устанавливайте цели.
 Отлавливайте события.
 Анализируйте точки
входа и выхода.
 Оптимизируйте SEO.

20. Спасибо за внимание.
Басыров Амир
Проектирование, разработка, верстка,
внедрение и сопровождение
веб-сайтов и Landing Page.
Skype: night_amir
Email: amir.basyrov@gmail.com