Итак, каково фактическое назначение целевой страницы? Что ж, излагая просто, это: (а) информировать ваших посетителей о преимуществах и возможностях, связанных с вашим продуктом или услугой, и, самое главное, (б) заставить их предпринять какое-то действие.
Действие, которое они предпринимают, может быть нажатием кнопки, предоставлением вам электронной почты, совершением покупки или просто переходом на другую страницу.
В любом случае существуют некоторые универсальные принципы, которые применяются ко всем целевым страницам, которые определяют их эффективность.
В этом уроке я покажу вам свой процесс разработки целевой страницы в 2018 году, который, предположительно, не полностью отличается от прошлых лет. ;)
Давайте начнём!
Если вы предпочитаете смотреть видео..
Сначала макет / прототип
Никогда, повторяю, никогда не начинайте прямо с процесса HTML и CSS, когда вы создаёте целевую страницу. Сначала, вам нужно использовать графическое приложение (я буду использовать Adobe Experience Design), чтобы создать макет страницы, которую вы намереваетесь создать.
Почему? Вот несколько причин..
- Это быстро и легко.
- Он даёт вам визуальное представление того, как ваша целевая страница будет выглядеть в браузере.
- Проще вносить изменения без корректировки кода.
Создание фона для вашей целевой страницы
Как и со многими другими темами, в которые мы собираемся погрузиться, здесь также есть много субъективностей. Не существует единого решения, какой именно тип фона вы должны использовать.
Однако существуют некоторые универсальные принципы. Ваш фон должен быть:
- Высокой контрастности по отношению к содержимому переднего плана.
- Никогда не храните большие графические файлы, такие как высококачественные JPG — загрузка занимает слишком много времени.
- Никогда не включайте отвлекающие элементы.
Заголовки и подзаголовки целевой страницы
Совершенно каждая целевая страница должна иметь заголовок, который как минимум будет заметным пятном в тексте, чтобы по-настоящему захватить внимание пользователей. С точки зрения визуальной иерархии, это самое главное на, что прежде всего, вы должны обратить взгляд ваших посетителей.
Вторичным заголовком является подзаголовок, который содержит дополнительную информацию о вашем продукте или услуге.
Мой заголовок и подзаголовок:
«CRYPTO + CHAT = CRYPTS«
«Slack meets real-time CryptoCurrency Charts»
Вот как это выглядит в моем макете:
Призыв к действию
CTA (Призыв к действию) — это именно то, как это звучит; вам нужно, чтобы ваши посетители выполнили какое-то действие. В нашем случае нужно кликнуть по кнопке, которая запустит модальное окно для присоединения или входа в систему.
Эту кнопку призыва к действию *необходимо* выделять из остальной части вашего содержания. Предпочтительно, она должна использовать цвет, который отличается высоким контрастом от фона и, возможно, уникальным для остальной части вашей цветовой темы.
Вы хотите привлечь внимание посетителей к ней. Надпись внутри кнопки также очень важна, “Нажми на меня” внушает ужас! Попробуйте использовать что-то релевантное в зависимости от действия, которое вам необходимо выполнить.
Вы хотите привлечь внимание посетителей к ней.
В нашем случае мы хотим, чтобы посетители присоединились или вошли в систему:
Вспомогательные медиа
Ваша целевая страница должна содержать некоторые типы медиа, будь то фотография, иллюстрация или видео. В моем случае я хочу интегрировать анимированную иллюстрацию. Мы не будем анимировать её в этом уроке (это будет во 2 части), но я буду разрабатывать её.
Adobe XD содержит очень простые инструменты для рисования векторной графики. Поскольку моя идея относительно уникальна, я хочу показать её самую упрощённую версию текущего пользовательского интерфейса чата, который будет выравниваться по правому краю во второй колонке.
В данный момент задача — создать простую векторную иллюстрацию пользовательского интерфейса, не содержащую слишком много фактических элементов.
Заключение
Эта целевая страница, очевидно, очень проста. В более реалистичном сценарии вы определенно захотите поэкспериментировать с длинной рекламной копией страницы в сравнении с обычной. Вы должны использовать A/B-тестирование, чтобы определить, какая из них наиболее успешна на основе установленной цели.
Другие элементы, которые вы могли бы включить на целевую страницу, в зависимости от того, что на ней продается:
- Отзывы
- Факторы доверия (Как посетители могут доверять вам?)
- Воздействие СМИ (Покажите логотипы тех, кто осветил бизнес/услугу)
- Печать доверия сайта (SSL сертификат)
- Сравнение конкурентов
