Верстка лендинга уроки: Адаптивная вёрстка лендинга. Джедай вёрстки #5. Часть 1. Подготовка к вёрстке макета из PSD

Содержание

Обучающий курс по верстке лендингов от LPgenerator

Хотите научиться верстать лендинги как PRO? Не проблема. Мы запускаем бесплатные обучающие курсы по верстке для всех желающих! Изучив всего 7 видеоуроков, вы станете профессиональным верстальщиком посадочных страниц на платформе LPgenerator.

Вы научитесь:

основам верстки страниц из psd-макетов;
правилам использования CSS, JavaScript и jQuery;
техникам создания слайдеров, таймеров, pop up-элементов;

После видеокурса вы сможете эффективно работать с редактором LPgenerator и верстать высококонверсионные страницы на нашей платформе. Также вы освоите технику создания сложных элементов с использованием CSS, JavaScript и jQuery. В целом, уровень верстки ваших лендингов станет гораздо выше.

Если у вас уже есть базовый навык работы с HTML, CSS, Photoshop, то эти знания пригодятся в процессе. Но если вы не владеете данными инструментами — не страшно, материал разработан предельно доступно, с учетом разного уровня подготовки слушателей.

Программа курса верстки

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

1. Вводное занятие. Знакомство с функционалом визуального редактора и правилами создания макета лендинга.

2. PSD-макет: создание структуры. Здесь вы изучите основы создания правильной структуры целевой страницы.

3. PSD-макет: размещение контента. Вы научитесь правильно работать с секциями и изображениями фона в контексте PSD.

4. PSD-макет: функциональные элементы. Вы увидите, как наш специалист верстает различные секции целевой страницы, слайдеры отзывов, добавляет карту, скрипт политики конфиденциальности и т. д.

Вторая часть, или «продвинутый курс», содержит три урока.

1. Основы работы с CSS. Вы научитесь правильно применять стили, изменять виджет таймера — для этого пригодятся самые базовые навыки CSS.

2. Работа с jQuery. Вы изучите возможности нашей платформы в плане применения скриптов jQuery и управления элементами с их помощью.

3. Слайдер.

Вы узнаете, как сверстать слайдер и установить его на лендинг за 15 минут вместо 3 часов.

Пройдите бесплатный видеокурс и станьте профессиональным верстальщиком лендингов за 7 дней >>>

Высоких вам конверсий!

Команда LPgenerator

09-09-2015

Как сделать Создать веб-сайт лендинг

Узнайте, как создать отзывчивый веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.

Создание веб-сайта с нуля

«проект макета»

Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:

Navigation bar

Side Content

Some text some text..

Main Content

Some text some text..

Some text some text. .

Footer

Первый шаг-базовая HTML страница

HTML — это стандартный язык разметки для создания веб-сайтов, а CSS — это язык, описывающий стиль HTML-документа. Мы будем сочетать HTML и CSS для создания базовой веб-страницы.

Примечание: Если вы не знаете, HTML и CSS, мы предлагаем вам прочитать HTML учебник.

Пример

Page Title

body {
font-family: Arial, Helvetica, sans-serif;
}

<h2>My Website</h2>
<p>A website created by me.</p>

</body>

</html>

Пример как работает

<!DOCTYPE html> Декларация определяет этот документ как HTML5
<html> элемент является корневым элементом HTML-страницы
<head> элемент содержит мета-информацию о документе
<title> элемент задает заголовок документа
<meta> элемент должен определить кодировку UTF-8
<meta> элемент с именем = «видовой экран» делает веб-сайт хорошо выглядеть на всех устройствах и разрешение экрана
<style> элемент содержит стили для веб-сайта (макет/дизайн)
<body> элемент содержит видимое содержимое страницы

<h2> элемент определяет большой заголовок
<p> элемент определяет абзац

Создание содержимого страницы

Внутри <body> элемента нашего сайта, мы будем использовать наш «макет проекта» и создать:

A header
A navigation bar
Main content
Side content
A footer

Semantic Elements

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

Вот некоторые из наиболее распространенных семантических HTML-элементов:

Элемент <Section> можно использовать для определения части веб-сайта с соответствующим содержимым.

Элемент <статья> можно использовать для определения отдельного фрагмента содержимого.

Элемент <Header> можно использовать для определения заголовка (в документе, разделе или статье).

Элемент <Footer> можно использовать для определения нижнего колонтитула (в документе, разделе или статье).

Элемент <Nav> можно использовать для определения контейнера навигационных ссылок.

В этом уроке мы будем использовать семантические элементы.

Тем не менее, это до вас, если вы хотите использовать <div> элементы вместо.

Заголовка

Заголовок обычно находится в верхней части веб-сайта (или прямо под верхним навигационным меню). Он часто содержит логотип или название сайта:

<div>
<h2>My Website</h2>
<p>A website created by me.</p>
</div>

Затем мы используем CSS для стиля заголовка:

.header {
    padding: 80px; /* some padding */
    text-align: center; /* center the text */
    background: #1abc9c; /* green background */
    color: white; /* white text color */
}

/* Increase the font size of the <h2> element */
.header h2 {
font-size: 40px;
}

Панель навигации

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

Use CSS to style the navigation bar:

/* Style the top navigation bar */
.

navbar {
overflow: hidden; /* Hide overflow */
background-color: #333; /* Dark background color */
}

/* Style the navigation bar links */
.navbar a {
    float: left; /* Make sure that the links stay side-by-side */
    display: block; /* Change the display to block, for responsive reasons (see below) */
    color: white; /* White text color */
    text-align: center; /* Center the text */
    padding: 14px 20px; /* Add some padding */
    text-decoration: none; /* Remove underline */
}

/* Right-aligned link */
.navbar a.right {
float: right; /* Float a link to the right */
}

/* Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd; /* Grey background color */

color: black; /* Black text color */
}

Содержимого

Создайте макет из 2 столбцов, разделенный на «боковое содержимое» и «основное содержимое».

We use CSS Flexbox to handle the layout:

/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
flex: 30%; /* Set the width of the sidebar */
background-color: #f1f1f1; /* Grey background color */

padding: 20px; /* Some padding */
}

/* Main column */
.main {
    flex: 70%; /* Set the width of the main content */
    background-color: white; /* White background color */
    padding: 20px; /* Some padding */
}

Затем добавьте мультимедийные запросы, чтобы сделать макет отзывчивым. Это позволит убедиться, что ваш сайт хорошо смотрится на всех устройствах (настольных компьютерах, ноутбуках, планшетах и телефонах). Измените размер окна обозревателя, чтобы увидеть результат.

/* Responsive layout — when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.

row {
flex-direction: column;
}
}

/* Responsive layout — when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
    .navbar a {
        float: none;
        width: 100%;
    }
}

Нижний колонтитул

Наконец, мы добавим нижний колонтитул.

<div>
<h3>Footer</h3>
</div>

And style it:

.footer {
    padding: 20px; /* Some padding */
    text-align: center; /* Center text*/
    background: #ddd; /* Grey background */
}

Поздравляю! Вы создали сайт с нуля.

Адаптивная верстка с нуля: бесплатный видеокурс 8 уроков

Будь вкурсе свежих уроков!

В категории: Курсы Frontend — HTML, CSS и JavaScript

Будь вкурсе самого свежего материала. Где мы отправляем статьи, видео и много чего интересного.

https://youtube.com/watch?v=Yh3XYrbz-S0

3 727 просмотров

В данном курсе будет показан более продвинутый процесс вёрстки сайтов с использованием Sass (метаязык на основе CSS). К тому же автор будет использовать GIT (система управления версиями). Вёрстка сайта и написание кода автор будет делать в редакторе VS Code а работа с макетом PSD будет производится в программе Avocode.

Первые 2 урока будут посвящены настройке VS Code и Avocode. С 3 по 9 урок практические занятия, автор на практике будет показывать, как сверстать адаптивный лендинг на примере реального заказа. Цель курса показать упрощённый метод вёрстки адаптивных и современных сайтов.

Что такое адаптивная вёрстка

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

Когда популярность мобильных устройств возросла, увеличился мобильный трафик, что привело к тому что сайты требовали к себе отзывчивое отображение. Более того, вскоре как мобильный трафик превысил процент заходов с ПК, поисковые системы Google и Яндекс поставили привилегии для сайтов с адаптивной вёрсткой и быстрой загрузкой. Со временем адаптивный дизайн стал важным требованием при разработке сайтов.

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

Адаптивная вёрстка с технической точки зрения

Сама вёрстка начинается с максимального расширения экрана – 1920х1080px. Когда сайт полностью свёрстан, начинается подгонка под различные расширения экрана, в этом вам может помочь браузер Google Chrome. В данном браузере существует консоль, которая помогает отследить как визуально выглядит сайт на различных размерах экрана. Достаточно нажать клавишу на клавиатуре F12, либо нажать правой кнопкой мыши на нужный элемент и выбрать «Просмотреть код» и браузер выведет HTML-разметку и CSS-свойства элементов.

Во многих современных браузерах есть консоль для просмотра кода, где вы в режиме реального времени можете изменить любые стили CSS или HTML-разметку. Браузер Chrome и Яндекс.Браузер предлагает широкий набор для разработчиков, к примеру, можно найти ошибки в JS-коде или найти нужный фрагмент HTML-разметки.

Метатег viewport для адаптивной вёрстки

Пример метатега, который адаптирует сайт под мобильную вёрстку:

<meta name="viewport" content="width=device-width, initial-scale=1">

Данный тег ставиться внутри тега <head></head> где содержаться заголовки HTML страницы. Основные настройки хранятся внутри атрибута content, где width определяет до какой ширины будет сужаться сайт, например width=768px означает что весь контент сайта будет сжиматься до 768px, но в случае если один из элементов будет шириной к примеру 1200px, то при ширине окна 768px мы увидим горизонтальную полосу прокрутки. width=device-width – означает что сайт будет автоматический подстраивается под ширину окна браузера.

Медиа-запросы

Пример стандартных медиа-запросов:

@media(max-width:1600px){
body{font-size:16px;}
}
@media(max-width:1200px){
body{font-size:14px;}
}

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

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

Оставьте свой отзыв, для улучшения качества. Сейчас: 0 отзывов

Курс «Создание лендингов на Getcourse. Прототип. Дизайн. Вёрстка.» от Getproff

Практический курс по созданию красивых и функциональных лендингов на Getcourse. 3 модуля содержат 22 урока с обратной связью от кураторов. Общая длительность уроков – 730 часов.

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

Кому подойдет

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

Отличия курса от других программ

Программа разделена на 3 модуля: разработка прототипа лендинга, сборка лендинга на конструкторе Getcourse, дизайн и вёрстка. В зависимости от запроса студента, можно купить только уроки по созданию прототипов, пакет записей по теме «Прототип+сборка» или все модули сразу.

Для учащихся, которые прошли обучение на тарифе «Прототип + Дизайн + Верстка» открывается доступ в Академию верстки на Getcourse. Это закрытое сообщество, в которое вступают специалисты, уже создающие лендинги на заказ и желающие постоянно повышать свое мастерство.

Результат обучения

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

Выпускники Getproof умеют:

работать с сервисом Draw.io
разрабатывать прототипы лендингов
собирать их на конструкторе
создавать эффектное оформление
решать базовые задачи с помощью инструментов html, CSS, JavaScript

Как строится процесс обучения

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

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

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

Зачем натягивать лендинг на WordPress?

Можно на поставленный в названии статьи вопрос, ответить одним словом – из-за админки. Вам конечно, скажет любой программист, не делайте этого! Это неправильно, на какой-то там одностраничник вешать такую тяжелую CMS.

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

Зачем заказчику админка для лендинга?

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

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

Да, что там менять, на лендинге?

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

Все лендинги в обязательном порядке имеют форму заказа, которая вероятнее всего будет работать на плагине, например Contact Form 7. Заказчик с легкостью сможет сам управлять этой формой: сменить контакты, добавить или убрать поля. И не надо за каждой мелочью обращаться к специалистам.

На фриланс биржах, я постоянно вижу заказы на интеграцию лендинга с WordPress.

Почему заказчики так любят WordPress?

На то, есть как минимум две причины. CMS WordPress бесплатная, а это значит, что конечный продукт обойдется ему дешевле, чем сайт с индивидуальной, собственной разработки или купленной админкой, исполнителем заказа. Веб-разработчик возьмет деньги только за верстку и за натяжку её на WordPress, а это бюджетно.

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

Чего хочет заказчик?

Заказчики не любят, когда много исполнителей. Это отнимает время заказчика на поиск нужных специалистов, создает лишние риски (вдруг кто-нибудь кинет), увеличивает время исполнения заказа (кто-то нарушает сроки под разными предлогами или морозиться ). Совсем другое дело, написал одно техническое задание и сиди, жди конечный продукт.

Верстка или сайт под ключ?

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

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

Что делать, если вы верстальщик?

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

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

А как быть с дизайн макетом? Глупо давать советы типа, вы откройте Photoshot, посмотрите пару видео на Youtube от веб-мастеров и вперед с песней, ну что там сложного? Дизайнер и верстальщик это разные профессии, недостаточно просто изучить программу Photoshop, надо что-то ещё.

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

В любом случае верстальщику необходимо развитие, если не в сторону дизайна, то в направлении front-end разработки. А натягивать лендинг на WordPress нужно все равно уметь, несмотря на то, что это уже back-end.

Базовый принцип натяжки лендинга

Тема лендинга разрабатывается с нуля, без дефолтных WP шаблонов, используя готовый HTML шаблон. Для одностраничного лендинга нужны, как минимум три файла style.css index.php и functions.php. На главной и единственной странице сайта должна выводиться статическая страница, которая создана через админку. В настройках WP ставим галочку напротив вывода статической страницы, а не последнего поста.

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

Создано 21.09.2018 10:00:13
Михаил Русаков

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Верстка сайта из figma недорого

Цена договорная

Дизайн коридора

Сделать дизайн прихожей

Анастасия С.

Цена договорная

Разработать корпоративную презентацию

Рзаработать корпоративную презентацию. Формат PowerPoint. Лого и фирменный стиль есть. Цель — показать какие масштабные и крутые проекты делает наша компания. 1. Нужно — дизайн и копирайтинг. 2. Необходимо…

Алексей

Цена договорная

Ищу дизайнеров для сотрудничества, высокая маржа и…

Нужны дизайнеры для партнёрства в направлении освещения, любых помещений ( люстры, светильники и и.д. В общем от лампочки до королевской люстры + сопутствующие товары) всего около 100 000 наименований…

Алексей Р.

Цена договорная

Доработать принты

Доработать принты с шаттерстока Требуются макеты под печать. Есть ТТ, есть референсы, есть паттерны с шаттерстока Как я вижу исполнение задачи: — я высылаю вам принты с шаттерстока и референсы с пояснениями…

Яна

Цена договорная

Разработка упаковки для шоколада

Разработать макет упаковки для шоколада. Примерный вид, как на картинке. Животные будут другими.)

Дарья

с нуля, онлайн и бесплатные

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

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

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

Содержание:

Кому стоит изучить онлайн-редактор Tilda
В чем сила Tilda
Принцип подбора первого курса
Чек-лист перед стартом первого курса
Breezzly: практический курс по созданию сайтов на Tilda в Zero Block c анимацией
Бесплатный онлайн-курс по созданию сайтов на Tilda
Обучение продвинутым техникам в Tilda
Типографика для веб-дизайнеров
Видеоуроки по созданию прототипов сайтов (UX/UI) и шоурилов на Breezzly
Курс по веб-дизайну с Tilda в Москве от MDA
Коллажи и бренд-дизайн от брендингового агентства Шишки в Controforma
А что изучать дальше
Вывод и рекомендация

Какие же курсы вошли в подборку ТОП-7 лучших онлайн-курсов на tilda

В ТОП-7 лучших онлайн-курсов на Tilda для старта с нуля я включила те, что помогут научиться создавать сайты в этом редакторе уверенно и легко, а главное — вся траектория построена так, чтобы прокачать ваши навыки на полную, с наглядной отдачей на каждом этапе 👨🏻‍🎓 Я считаю, что образовательные программы из этой статьи хороши именно в комплексе.

Почему стоит пройти каждый курс

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

Почему порядок курсов именно такой

Очень важно на старте увлечься интересным делом, а для этого нужно вдумчиво по шагам создать свой первый сайт с учетом всех современных требований: интересные композиции, брендинг, анимации и адаптивность. Далее советую вынырнуть из digital в офлайн-курс, поработать вживую руками над проектами в команде и зарядиться. А затем с новыми силами нырнуть в комплексный диджитал-брендинг.

Кому стоит изучить онлайн-редактор Tilda

Ребятам, чьи глаза горят от клевого промо в вебе, функциональных и стильных веб-проектов, создания продуманных коммерческих систем:

Графическим дизайнерам и веб-дизайнерам: курсы помогут начать создавать сайты от и до без разработчиков и решать задачи бизнеса, поднимать блоги, лендинги, промо, интернет-магазины;
Интернет-маркетологам:ускорьтесь в запуске проектов по лидогенерации и увеличении конверсии. Например, вы сможете развивать лендинги и увеличивать поток клиентов;
Копирайтерам:освоите популярный формат — лонгрид — и сможете делать подачу контента сильнее, увеличите вовлеченность читателей, а значит, поднимете метрики контент-маркетинга;
Предпринимателям:несмотря на то, что курсы в подборке больше дизайнерские, я считаю, что как минимум первые 3 будет полезны даже современным предпринимателям и ускорят запуск их веб-проектов.

В чем сила Tilda: какие проекты можно создавать в этом онлайн-редакторе

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

Среди клиентов Tilda известные российские и международные бренды (банки, школы, заводы, доставка, агентства) : Adidas, BBDO, Альфа-Банк, Лайфхакер, 1 первый канал, Комсомольская правда и многие другие известные бренды.

Принцип подбора первого курса

На мой взгляд, есть всего два критерия, которые важны на старте. Если кратко: ищите курс с легким стартом и нестандартным проектом в Zero Block (это функция Тильды, которая помогает создавать сайты с уникальным дизайном, не ограничиваясь стандартными блоками):

Ключевой принцип подбора первого курса — ищем курс с современным проектом в Zero Block (нестандартный стильный сайт, анимация, адаптив). Напомню, что Тильда многогранна (сайты, блоги, интернет-магазины, лендинги, лонгриды). Но все они создаются с помощью одинакового подхода. Поэтому подберите курс с проектом, который вы сделаете с удовольствием по шагам. А затем уже повышайте экспертизу по дополнительным функциям и видам сайтов.

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

Чек-лист перед стартом первого курса

Перед тем как начинать курс по Tilda, еще раз проверьте себя по трем параметрам:

Какой комплексный проект будем делать на курсе (нестандартный стильный сайт, анимация, адаптив), а не какие кнопки нажмем за X уроков;
Сколько стоит получить первый опыт в новом проекте:поделите стоимость курса на количество уникальных проектов;
Свежесть дизайн-задачи в ТЗ. Вы наверняка видели, куда движется глобальный рынок, видели эти топовые и прокачанные по дизайнерской части проекты с мягкими анимациями, характером и выразительными композициями, примеру, cruuunchify.com. Поэтому выбирайте трепетно: если чуете, что дизайн вам не заходит, то просто возьмите на заметку, что идете не топ курс по Тильде изучать, а просто за статусом в резюме.

1. Breezzly: практический курс по созданию сайтов на Tilda в Zero Block c анимацией

Объем курса: 4 часа, 3 проекта, 17 видеоуроков

Стоимость: 4 000 ₽

Фишка: Здесь вы осваиваете Zero Block на полную: верстаете, анимируете и адаптируете под мобильные. От запуска до сбора заявок!

Изучить курс: https://breezzly.ru/catalog/tilda-design

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

На курсе осваиваете создание стильных и функциональных веб-проектов в Тильде. Упор сделан на ТОП-возможности Тильды — Tilda Zero Block. Tilda Zero Block — это онлайн-редактор внутри Тильды, он помогает реализовать любую творческую идею во всех деталях и с анимацией. Здесь вы осваиваете Zero Block на полную: верстаете, анимируете и адаптируете под мобильные. От запуска сайта до сбора заявок!

На курсе сначала освоитесь в Tilda, а затем возьметесь воплощать макеты из Figma и настраивать продвинутые анимации. Вас ждет практика по верстке нестандартных композиций, работа с пошаговой анимацией и адаптация дизайна под мобильные. За время курса вы выполните проект с асимметричными композициями и анимациями по боевому брифу , освоите систему создания сайтов на Tilda Zero Block, станете смелее в экспериментах и воплощении собственных идей!

Для кого: курс зайдет, если вы хотите познакомиться с популярным конструктором сайтов Тильда, выполнить свой первый стильный проект в Tilda Zero Block, научиться делать сайты самостоятельно, попробовать себя в новой профессии и стать частью комьюнити дизайнеров.

Чему научитесь

Верстать дизайны из Figma со свободной композицией в Tilda Zero Block
Выстраивать рабочий процесс и организовывать работу по созданию сайтов в Tilda
Работать с сеткой и делать отзывчивый дизайн с помощью Grid и Window Container
Анимировать элементы сайта с помощью базовой и продвинутой пошаговой анимации
Добавлять изображениям анимацию с эффектом параллакс
астраивать продвинутую триггерную анимацию при взаимодействии с объектами на экране
Добавлять и настраивать формы на сайт для сбора заказов
Адаптировать дизайн под смартфоны и планшеты

Автор курса: Анастасия Свеженцева, продуктовый дизайнер и бренд-дизайнер. 5 лет опыта работы в двух международных компаниях iSpring Solutions и Omega-R. Сейчас помогает стартапам и продуктовым командам по всему миру: проектирует интерфейсы мобильных и веб-приложений, создает сайты, помогает улучшить дизайн. Любит прорабатывать логотипы, фирменный стиль и уникальную графику с характером. Активно изучает коммерческую иллюстрацию, поведенческую психологию и брендинг. Преподает дизайн с 2015 года. Пришла в дизайн из программирования.

2. Бесплатный онлайн-курс по созданию сайтов на Tilda

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

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

Автор курса: Никита Обухов, дизайнер, основатель сервиса Tilda Publishing. Tilda Publishing — конструктор, который позволяет создавать портфолио, лендинги, лонгриды, спецпроекты, интерактивные истории и блоги без программирования. Среди клиентов Тильды издательские дома: РИА Новости, Теории и практики, Комсомольская правда, Лайфхакер, Эксмо, Clever, телеканалы: ТНТ, СТС, Первый канал, RU.TV, крупные компании: Русал, Альфа-банк, Adidas, BBDO.

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

Объем курса: 5 лонгридов

Стоимость: Бесплатно

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

Изучить курс: https://tilda.education/landing-page-course

3. Обучение продвинутым техникам в Tilda

Продвинутый курс по созданию сайтов для дизайнеров, которые знают Тильду. На курсе вы познакомитесь с тем, как используют весь потенциал Тильды профессиональные дизайнеры. Курс поможет досконально изучить все возможности Тильды (при определенном старании с вашей стороны), плюс расширит ассортимент проектов в вашем портфолио.

Автор курса: Максим Ширко, UI/UX-дизайнер и арт-директор. Куратор Школы Тильды. Основатель the23.design Создатель комьюнити Тильдошная. Создает сайты на Тильде с момента ее появления.

Для кого: искателям нюансов и большей практики в работе с онлайн-редактором Тильда

Объем курса: 6 недель занятий

Стоимость: 17 000 ₽

Фишка: Научитесь создавать уникальные проекты уровня digital-студий

Изучить курс: https://tilda.school/pro

4. Типографика для веб-дизайнеров

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

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

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

Автор курса: Филипп Нуруллин. Веб-дизайнер, шрифтовой дизайнер. Основной профиль работ — сайты с крепкой типографикой и внимательная работа с контентом. Уверен, что хорошая типографика — 80% любого проекта. Основатель студии patat.me.

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

Объем курса: 4 модуля и 16 видеоуроков

Стоимость: 3 500 ₽

Фишка: Культура работы со шрифтами от профессионального шрифтового дизайнера

Изучить курс: https://controforma.school/webself

5. Видеоуроки по созданию прототипов сайтов (UX/UI) и шоурилов на Breezzly

Объем курса: 4 часа, 4 проекта, 16 видеоуроков

Стоимость: 4 000 ₽

Фишка: Здесь вы сразу нырнете в создание сайтов и продуктовых сценариев: создадите дизайн со всеми деталями, заанимируете и оживите его с помощью продвинутых техник и эффектов InVision Studio.

Изучить курс: https://breezzly.ru/catalog/interactive-design-invision-studio

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

Здесь вы осваиваете InVision Studio — новый мощный инструмент для продуктового дизайна (UX/UI) на Windows/Mac OS. InVision идеальна, когда требуется проработать уникальную концепцию приложения или сайта с учетом всех нюансов поведения: задизайнить экраны, воплотить мягонькие эффекты и анимации, сформировать дизайн-систему, выточить user experience с учетом обратной связи от всех участников и начать разработку!

Здесь вы сразу нырнете в создание сайтов и продуктовых сценариев: создадите дизайн со всеми деталями, заанимируете и оживите его с помощью продвинутых техник и эффектов InVision Studio. Курс помогает освоить все тонкости работы с редактором для превращения скетчей в интерактивные дизайн-системы. За время курса вы выполните серию проектов по UI-дизайну и UI-анимации, освоите систему создания дизайн-концептов, научитесь не бояться экспериментировать и воплощать любые идеи на практике!

Для кого: курс зайдет, если вы хотите прокачать навыки создания анимации в проектах и получить полное представление на практике. Здесь вас встретят дизайн-проекты в популярных инструментах (Figma, InVision Studio) и на всем арсенале востребованных у клиентов проектов.

Чему научитесь

Уверенно работать в InVision Studio и создавать интерактивный дизайн сайтов и приложений
Анимировать макеты из Figma/Sketch
Собирать и тестировать дизайн для устройств с разным разрешением
Добавлять эффекты для плавного перехода (Motion Transition) между экранами/состояниями в интерфейсе
Работать с масками (Masks) для эффектного появления графики и текста
Применять в работе интерактивные компоненты, среди которых фильтры, ввод текста и поисковые строки
Настраивать анимацию с помощью Timeline Editor
Презентовать шоурилы клиентам, создавать шоты для портфолио и передавать дизайны в разработку

6. Курс по веб-дизайну с Tilda в Москве от Moscow Digital Academy (есть онлайн-формат) – получить опыт работы плечом к плечу в команде

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

Автор курса: Влад Федорин, творческий директор «Moscow Digital Academy»; Евгений Черемных, Senior UX-designer Futurice; Юлия Ешкина, Независимый арт-директор.

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

Объем курса: 48 академических часов + 85 практических на полном курсе

Стоимость: 69 900 ₽

Фишка: почувствуете вживую драйв от дизайна руками и создадите портфолио, возможностью трудоустройства и стажировок.

Изучить курс: https://m-d-a.ru/design_program/

7. Коллажи и бренд-дизайн от брендингового агентства Шишки

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

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

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

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

Автор курса: Михаил Шишкин — дизайнер, основатель и креативный директор брендингового агентства SHISHKI, куратор направления «Дизайн» в школе интерактивных коммуникаций» ИКРА

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

Объем курса: 6 модулей, 6 практических заданий и итоговый проект

Стоимость: от 4 000 ₽

Фишка: осваиваете полный процесс создания бренд-дизайна: от исследования до бренд-концепции под руководством наставника из международного брендингового агентства.

Изучить курс: https://controforma.school/brandingself

Бонусный курс: Пиши, сокращай. Как создавать сильный текст для сайтов

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

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

Пресс-релиз: донести суть, избавиться от лишнего, сделать интересно

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

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

Общение с клиентом и коллегами: решать конфликты без истерик, согласовывать замечания

Автор курса: Максим Ильяхов и Люда Сарычева, редактор блога «Код» и «Модульбанка», первые авторы рассылки «Мегаплана», соавторы главного редакторского бестселлера 2017 года «Пиши, сокращай» и книги «Новые правила деловой переписки» 2018 года.

Для кого: курс о сильном тексте для редакторов, менеджеров и дизайнеров.

Объем курса: 45 писем каждый день или все сразу.

Стоимость: 1 500 ₽

Фишка: алгоритмы создания хороших текстов для всех популярных веб-форматов

Изучить курс: https://course.glvrd.ru/

А что изучать дальше: мой личный список источников вдохновения (motion, 3d, ux, illustration)

Пробегитесь еще раз по курсам, которые мы обсудили. Там самый смак, свежачок, практика и годнота. А теперь несколько источников вдохновения по каналам, которые могут пригодится тем, кто ищет бесконечность. В подборке два курса на английском и YouTube-каналы.

YouTube-каналы по UI/UX-дизайну

InVision — клад зарубежной культуры, а Яндекс хорошо осветили российскую культуру дизайна интерфейсов.

Подпишитесь на канал InVision. На канале публикуют интервью c международными экспертами: подходы к решению задач, лайфхаки, советы и инсайты о профессии продуктовый дизайнер (ux/ui): https://www.youtube.com/watch?v=1Eq8sZRPYxc

А также рекомендую подписаться на канал Школа мобильного дизайна от Яндекса — канал хорош, чтобы узнать, как подходят к развитию цифровых продуктов ребята из Яндекcа, снять магию и страхи и прокачать смелость:

ТОП-7 курсов по коммерческой иллюстрации: с нуля, онлайн и бесплатные

Настя Никсен, иллюстратор и бренд-дизайнер, сравнила и прошла и сравнила 7 лучших курсов. Собрала траекторию обучения от новичка до ТОП-уровня. Поглядите: https://ux-journal.ru/top-kursov-po-kommercheskoy-illyustracii.html

Основы UI Animation от Motion Design School (английская версия)

Курс по базовым возможностям After Effects для UI-дизайна от украинской школы дизайна. Обучение у ребят прошли уже 120 000 учащихся. Здесь вы сможете познакомиться с популярными возможностями After Effects в моушн-дизайне для сайтов и микровзаимодействий: https://motiondesign.school/products/ui-animation-essentials

Основы Cinema 4D

Мини-курс для тех, кому нужно быстро освоить Cinema 4D. Изучите все ключевые инструменты и этапы работы над 3D-сценой от моделирования до анимации и финального рендеринга всего за несколько часов: https://motiondesign.school/products/basics-on-cinema-4d

Вывод и рекомендация

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

5 уроков по дизайну посадочных страниц, которые мы извлекли из анализа тонны данных

Сегодняшний гостевой пост написал Ник Стивс, директор по продуктам Wishpond. Наслаждаться!

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

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

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

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

1. Сделайте призыв к действию очевидным

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

Добавьте заголовок формы и кнопку CTA, которая сообщает посетителям, что они получат.

Хороший CTA сделает очевидным, что люди собираются получить. Если на вашей целевой странице есть форма для записи на прием, например, кнопка может читать «Заказать встречу», а не что-то более общее (например, «Отправить»).

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

Консультант по оптимизации конверсии Майкл Агард использовал это правило, чтобы увеличить коэффициент конверсии целевой страницы Betting Expert на 31,54%.

Держите его в верхней части страницы

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

Это касается и мобильных устройств. Если вы используете адаптивную для мобильных устройств целевую страницу (а я надеюсь, что это так!), Убедитесь, что ваш призыв к действию отображается в верхней части страницы и на мобильных устройствах.

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

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

Используйте тонну белого пространства

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

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

«Легкий выигрыш», чтобы выделить кнопку с призывом к действию, — это придать ей уникальный цвет, который контрастирует с фоном страницы.Это сразу привлечет к нему внимание.

Например, в Wishpond мы используем оранжевые кнопки на синем фоне. Обратите внимание на то, где ваши глаза обращены, когда вы смотрите на нашу целевую страницу:

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

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

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

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

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

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

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

Люди быстро оценивают сайт только по визуальному дизайну. Любительские сайты убивают доверие.

3. Используйте отзывы конкретных клиентов.

Отзывы клиентов позволяют посетителям получить второе мнение о вашем продукте прямо на странице.

И они помогают посетителям представить, как ваш продукт может решить их проблему.

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

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

Какими способами вы можете его использовать?
Чем он лучше конкурентов?
Какие результаты получили другие люди?

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

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

Их гипотеза оказалась верной: показ отзывов от мелких, средних и крупных управляющих недвижимостью (и количества объектов, которыми они управляют) привело к увеличению их коэффициента конверсии на 22%.

4. Упростите просмотр

Люди не читают в Интернете, они просматривают информацию, которую ищут.

Якоб Нильсон обнаружил, что «наиболее распространенное поведение [посетителей веб-сайта] — это поиск информации и безжалостное игнорирование деталей. Но как только жертва поймана, пользователи иногда ныряют глубже.Таким образом, веб-контент должен поддерживать оба аспекта доступа к информации: добычу и потребление. Текст должен быть просканированным, но он также должен давать ответы, которые ищут пользователи ».

[clickToTweet tweet = «Текст должен быть просканированным, но он также должен давать ответы, которые ищут пользователи. — @nngroup» quote = «Текст должен быть сканируемым, но он также должен давать ответы, которые ищут пользователи. — @ nngroup «]

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

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

Большой заголовок, выделенный жирным шрифтом, который описывает преимущество или функцию
Меньший подтекст под ним, подробно объясняющий его

Вот пример того, как это выглядит на практике :

Помните: вам не нужно продавать свое предложение как комплексное

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

Чем дольше вы это объясняете, тем больше вероятность того, что посетители покинут вашу страницу до того, как вы их убедите.

5. Не позволяйте требованиям к продажам преобладать над коэффициентом конверсии.

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

Если ваши формы будут слишком длинными, это будет удерживать людей от конверсии на вашей целевой странице.

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

Не запрашивайте все сразу

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

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

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

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

Последнее слово

Вы уже тестировали какой-либо из этих методов? Если да, то насколько хорошо они конвертировали? Сообщите нам об этом в Twitter, Facebook или Linkedin!

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

5 замечательных уроков по целевым страницам из реальных примеров

В предыдущем сообщении блога о маркетинговых тестах комментатор попросил привести несколько примеров отличных целевых страниц. Мы получали этот запрос несколько раз и решили, что пора его доставить! Итак, я решил найти одни из лучших целевых страниц и, чтобы начать, пошел в некоторые из моих любимых компаний. Я подумал, что они могут быть отличным местом для начала, потому что как маркетолог мои любимые компании должны не только иметь отличный продукт или услугу; они должны быть отличными входящими маркетологами.Независимо от того, являетесь ли вы B2B, B2C, продуктом или бизнесом в сфере услуг, эти пять компаний создали отличные целевые страницы, из которых мы можем извлечь некоторые серьезные уроки.

Чтобы помочь усвоить эти уроки, я также включил предложения о том, как можно еще больше улучшить эти целевые страницы. Эти предложения основаны на передовых методах работы с целевыми страницами и не принимают во внимание то, что иногда вы можете уклониться от передовых методов, основанных на результатах A / B и многовариантных тестов. Я не знаю, проводили ли эти компании тесты для достижения этих проектов (многие, вероятно, сделали!), Но урок для всех маркетологов состоит в том, чтобы создать что-то в соответствии с передовыми практиками, а затем тестировать, тестировать, тестировать, пока вы не получите лучшую версию.

ModCloth

ModCloth — это ретейлер женской ретро-одежды. Эта целевая страница предлагает посетителям подписаться на ее мобильную связь и предложения.

Что они делают правильно: Целевая страница ModCloth потрясает по двум причинам. Во-первых, обратите внимание на согласованность между заголовком страницы, заголовком формы и кнопкой; все они упоминают о присоединении к ModMobile (рад видеть, что вы участвуете в мобильном движении, ребята!), поэтому очень ясно, что вы делаете на этой странице.Важно, чтобы все заголовки были единообразными, чтобы посетитель не запутался в том, какое действие он может выполнить на этой странице.

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

Как они могут улучшить: Два элемента страницы, которые маркетолог ModCloth может рассмотреть на этой целевой странице, — это цвет маркированного текста и надпись «Присоединяйтесь к ModMobile!» кнопка.Маркированный текст ужасно светлый, что затрудняет его чтение, а кнопка может больше выделяться на остальной части страницы, поскольку синий цвет сливается с оформлением сайта. Или, может быть, они в середине A / B или многовариантных тестов!

Salesforce

Salesforce — компания, занимающаяся разработкой программного обеспечения для CRM и облачных вычислений (с которой вы, возможно, хорошо знакомы, если это ваша CRM-система!). На этой целевой странице предлагается бесплатно скачать отчет Gartner об исследовании производительности и автоматизации продаж.

Что они делают правильно: Во-первых, взгляните на верхнюю часть целевой страницы. Заметили, что нет навигации? Это разумный шаг, поскольку он не дает посетителю отвлечься и отказаться от целевой страницы для перехода в другую часть сайта. Salesforce также использует релевантные изображения на целевой странице, в том числе снимок экрана с отчетом об исследовании, который посетитель получит, если завершит загрузку. Они подкрепляют это соответствующей цитатой из отчета, которая продолжает привлекать посетителей и побуждать их скачать отчет.

Как они могут улучшить: Salesforce должна следовать примеру ModCloth и включать название или тему отчета, который загрузит посетитель. Это должно быть в заголовке формы и в копии кнопки. Например, заголовок можно изменить на «Получите бесплатный отчет Gartner» или «Получите бесплатный отчет по автоматизации Salesforce»; кнопку можно изменить, чтобы просто сказать «Загрузить отчет сейчас». Эти изменения помогут укрепить цель страницы, что приведет к увеличению количества конверсий.

YouSendIt

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

Что они делают правильно: Как и ModCloth, YouSendIt отлично справляется с использованием единообразных формулировок от заголовка страницы до заголовка формы и кнопки. Но также обратите внимание, что они выбрали зеленую кнопку для своей формы.Использование зеленого цвета помогает ему выделиться среди остальной части их сайта, которая в основном состоит из синих и белых оттенков. Помимо очень короткой формы для активации бесплатной пробной версии, есть еще один элемент страницы, который, вероятно, помогает их конверсиям: знак одобрения TRUSTe. Включение проверочных знаков от третьих лиц, таких как TRUSTe, BBB или VeriSign, помогает внушить посетителю уверенность в том, что он может безопасно ввести свою информацию, чтобы воспользоваться предложением.

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

Jetsetter

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

Что они делают правильно: Между заголовком и изображениями, используемыми в верхней части этой целевой страницы, ясно как день, что вы должны здесь делать. Купите кому-нибудь подарочный сертификат на поездку. Они также четко излагают этапы процесса, подчеркивая, что вы находитесь на первом этапе в настоящее время, и выделяя серым цветом следующие два, но все же включая копию, которая объясняет, что происходит на этих этапах. Для сайта электронной коммерции простота и понятность корзины покупок имеет решающее значение для того, чтобы ваши посетители прошли все этапы, необходимые для совершения покупки.

Как они могут улучшить: Форма Jetsetter находится ниже сгиба веб-страницы, что может повлиять на коэффициент конверсии для некоторых сайтов. Если у вас была страница с макетом, аналогичным Jetsetter, можно сократить пространство размером с изображение вверху. С другой стороны, расположение в две колонки может помочь сжать пространство и уместить все, что находится выше сгиба. Чтобы быть действительно придирчивым, копия на кнопке «Перейти к покупке» также довольно маленькая и легкая. Если сделать его больше, ярче и ярче, это может повысить конверсию.

SEOmoz

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

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

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

Какие передовые методы, по вашему мнению, больше всего способствуют повышению коэффициента конверсии при создании целевых страниц?

Изображение предоставлено: Бет Кантер

Целевая страница курса

: уроки из запуска 6-значных фигур

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

Сегодня я не рассматриваю ни одного… не на двух … а на ТРЕХ ПОЛНЫХ, сверхдлинных страницах продаж.

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

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

Все три — примерно на одном и том же рынке «зарабатывать деньги в Интернете», и я подумал, что было бы интересно погрузиться в тактику, которую они используют для продажи продукты, которые на действительно дорогие (план Ramit Zero To Launch «Platinum» составляет около $ 11,000 ), но все же делают это большими партиями.

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

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

1. Продать в горячий список

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

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

В любом случае, продолжаем.

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

Неудивительно, что один из этих курсов называется « Получите 10 000 подписчиков. »

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

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

PRO-TIP: если вы хотите изучить последовательности автоответчика, используйте ярлыки Gmail, чтобы вы могли сказать, какая последовательность соответствует какой форме подписки.Зарегистрируйтесь как your-email + productname @ gmail.com , а затем создайте ярлык для этого адреса.

2. Начните с хорошего заголовка

Ага.

Вы знали, что это будет, верно? Заголовки.

Тематика около 80% статей в блогах, публикуемых по копирайтингу.

Да, они такие важные.

Давайте разберем два заголовка, которые использовали Брайан и Рамит здесь:

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

Вот почему это работает:

Наконец . Людям нравятся НОВЫЕ вещи. Положите это на врожденное человеческое любопытство. Слово «наконец» подразумевает, что ничего подобного раньше не было, оно вызывает любопытство и вызывает желание читать дальше.
а ДОКАЗАНО. Proof — отличное решение, когда вы продаете дорогие товары через Интернет.Кредитные карты людей не просто вылетят из их кошельков, пока они не узнают, что покупают. И они хотят знать, что то, что они покупают, работает . Здесь продукт говорит сам за себя, что он «проверенный», что сразу же вызывает доверие к нему.
Пошаговая система . Классическая проблема информационных продуктов заключается в том, что покупка книги или кучи PDF-файлов мало что вам даст, если вы не сможете применить то, что в них есть. Вот почему их часто называют системами .Это не просто информация, это рецепт , которому вы можете следовать, даже если вы глупы. Просто следуйте инструкциям! Это убеждает людей в том, что это легко и легко повторить, и поэтому они будут работать на них.
Создайте список адресов электронной почты с нуля . Продукт хорош, даже если вы начинаете с нуля, уже устраняя потенциальное возражение.
Превратите это в надежный доход . В этом главное преимущество продукта: зарабатывать деньги. Сделать его надежным означает, что это серьезный бизнес, а не схема быстрого обогащения (мы вернемся к этому).
(Это дает больше свободы) . Это больше похоже на «амбициозное» дополнение, которое затрагивает надежды и мечты людей о свободе.

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

Давайте теперь посмотрим на заголовок и колоду Рамита:

По сравнению с заголовком Брайана, этот заголовок намного более эмоциональный и вдохновляющий. Вот как он это делает:

« Разбейте кандалы своей работы, календаря и своего дохода с 9 до 5. В отличие от заголовка Брайана, Рамит начинает с боли . Или, точнее, боли . Помещение трех болезненных проблем подряд рисует картину проблемы, с которой сталкивается читатель, как серьезную проблему, с которой Рамит будет работать над решением для читателя.
«Что, если бы вы могли построить онлайн-бизнес, который ПЛАТИТ ВАМ, чтобы жить той жизнью, о которой вы всегда мечтали?» Вот классический вариант использования вопросов «а что, если». Они побуждают читателя to представьте , какой была бы его жизнь после покупки товара . Заставляя читателя задуматься о продаже, он оказывается в положении, когда он уже мысленно убежден, что у него есть товар, и, следовательно, с большей вероятностью купит его.
«Гибкость, позволяющая контролировать свое рабочее время. Уверенность в том, чтобы поделиться своим уходом с миром. И свобода выбора, как вы хотите прожить свою жизнь — сейчас и завтра». Обратите внимание на параллелизм здесь между заголовком ( 3 изображения, ) и этим подзаголовком с 3 преимуществами . Гибкость, уверенность, свобода vs.оковы работы, календарь, доход с 9 до 5.

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

3 …. Или с видео

Еще один способ начать коммерческое письмо — поместить туда короткое вступительное видео.

Это чем-то напоминает суперпродажные «VSL» (рекламные видео-письма), которые вы видите на страницах продаж более дрянных информационных продуктов, но это может сработать, и именно это Дерек решил использовать на своей целевой странице.

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

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

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

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

4. Дайте им быструю презентацию …

Рамит и Дерек сделали быструю презентацию всего продукта.

Это помогает подготовить почву для предстоящих подробностей.

Здесь нет ничего особенного, просто описание продукта в одно предложение, обычно называемое системой , или формулой , чтобы подчеркнуть неизбежность результатов, и добавление элементов proof («проверено в течение последних 10 лет» , «проверено более 10 лет в 50 отраслях, более 30 000 платежеспособных клиентов»).

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

5 …. и немедленно начинайте встречать возражения

Продажа продуктов в нише «зарабатывать деньги в Интернете» — это непросто.

Почему? Поскольку люди всегда будут думать, что вы пытаетесь их обмануть.

Фактически, это одна вещь, которую все три курса должны решать явно, как здесь:

(обратите внимание на тонкий рефрейминг от «Я не продаю схему быстрого обогащения» на «Меня не интересует продажа людям, ищущим схемы быстрого обогащения» ).

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

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

Вы знаете, что такое. Это не для меня. Это даже не сработает. У меня нет времени. Я никогда раньше не делал ничего подобного. А ты вообще кто такой?

Как мы увидим, ответам на эти возражения посвящено много контента.

Заметили здесь какой-нибудь узор?

Использование фразы «, даже если ». «Даже если» — это самая простая формула для того, чтобы начать устранять возражения. Вы можете получить пользу от курса , даже если … [вставьте несколько возражений].

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

Вот почему вам необходимо …

6. Докажите, что вы способны ответить на возражения

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

Как я сказал выше, все претензии должны подтверждаться доказательствами, а отзывы являются одной из форм доказательства.

Чтобы дать вам представление о том, насколько важны отзывы, попробуйте угадать, сколько отзывов есть на странице продаж Рамита Сетхи для его бизнес-курса.

Сколько вы угадали?

По моим подсчетам, правильный ответ — 55 . ПЯТЬДЕСЯТ ПЯТЬ отзывов. Включая множество видео-отзывов. У Дерека ТОЛЬКО 32 . Пшш! Что за новичок, правда?

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

Отзывы Дерека отформатированы по-разному и выделяют результаты, помещая их в заголовок.

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

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

7. Не продавайте сразу, начните с поддразнивания.

Перед тем, как подробно рассказать о продукте и попросить людей купить, во всех трех рекламных письмах есть довольно длинный раздел «тизер».

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

Есть много способов сделать это, и 3 коммерческих письма здесь довольно сильно различаются по своему подходу, но довольно распространенным является метод «PAS» или метод Problem-Agitate-Solve .

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

Рамит и Брайан используют эту технику на своей целевой странице, и она работает очень хорошо.

Посмотрите на взгляд Рамита на , агитируя проблему здесь:

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

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

Тебе хватит драмы?

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

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

Обратите внимание и на изображение скучного календаря. «Иди в офис: /»

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

Цель всегда одна: сделать проблему большой и посочувствовать читателю, прежде чем вы покажете ему решение его проблемы.

8. Продать мечту

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

Рамит особенно хорошо это делает на своей странице:

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

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

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

Дерек просто начинает с описания своего продукта.

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

9. Представьтесь и покажите, почему они должны вас слушать

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

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

И в зависимости от того, насколько вы известны, вы можете добавить немного шика, чтобы сделать его более убедительным. Если вы являетесь бестселлером New York Time, вы, вероятно, захотите упомянуть об этом.

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

10. Представляем …ваше волшебное решение

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

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

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

Подумайте о выпуске продуктов Apple или тизерах «Игры престолов».Тот же принцип.

Обратите внимание, как они используют одну и ту же копию? Интересно, кто кого копирует, не так ли?

11. Дайте физическое представление вашего продукта

Одной из трудностей при продаже товаров в Интернете является отсутствие физической непосредственности.

Люди не могут прикасаться к продуктам, они не могут смотреть на них так, как им бы хотелось.

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

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

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

Вы можете увидеть, как Дерек пошутил по этому поводу здесь:

12. Разбейте продукт на большие разделы и модули

Что ж, пора поговорить о том, что это за продукт, верно?

Большинство курсов разбито на модули, и вот что мы видим здесь:

Итак, что именно представляет собой модуль?

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

А уловка для написания хороших пуль — подразнить . Вам нужно намекнуть на то, что они получат от курса, но не раскрывать секретный соус. Вот почему их часто называют «слепыми пулями».

Вам нужно вызвать любопытства и показать, что вы собираетесь научить чему-то невероятно ценному.

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

13. Добавляйте бонусы сверху

После самого курса идет традиционная серия бонусов.

Что означает … еще пунктов.

Бонусы в курсе часто включают вещи, которые выходят за рамки учебного материала. Подотчетность. Служба поддержки. Шаблоны. Доступ к сообществу.

Вам нужно найти что-то, что поможет использовать то, что они узнали в модулях.

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

Если вы уже проходили тот же курс раньше, а теперь используете версию 2.0, вы можете использовать это, чтобы показать, что вы добавили в новую версию:

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

14. Сделайте бонусы ограниченными по времени

Создание срочности — необходимость на хорошей целевой странице.

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

Не добавляйте его в закладки, нажмите на кнопку «Купить»!

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

Вот как это выглядит:

15. Установите ограничение по времени для создания срочности

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

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

И это подход, который и Рамит, и Дерек используют для своего продукта:

Тикающие часы работают и на символическом уровне, как выразился Нил Патель:

Нил Патель
В современном индустриальном мире часы являются символом времени.В частности, это символ уходящего времени .
Если вы напоминаете пользователям, что время идет — что часы тикают — это повышает уровень срочности и побуждает к действию.
16. Предвидеть и решать каждый. возможный. возражение.
Каждая значимая страница продаж полной формы должна предвидеть и противостоять возражениям.
По мере того, как люди начинают интересоваться чем-то, они начинают искать ответы на свои вопросы по этому поводу.
Самый классический способ сделать это — использовать FAQ.
Вопреки тому, во что думают менее разбирающиеся в маркетинге люди, цель FAQ не состоит в том, чтобы ответить на скучные вопросы по устранению неполадок, такие как «Я УТЕРЯЛ ПАРОЛЬ, ЧТО ДЕЛАТЬ?»
Часто задаваемые вопросы предназначены для ответов на возражений по поводу продажи .
И когда люди читают страницу продаж дорогого продукта, они найдут их очень много.
Что делать, если я понятия не имею? Что делать, если у меня слишком много идей ? Что делать, если курс мне не подходит? Что делать, если я уже прошел другие курсы? И т.п.И т.д.
Для меня лучший в своем классе FAQ — это Рамит, потому что он делает что-то особенно блестящее, взгляните:
Видите, что там происходит?
Он начинает отвечать на классическое возражение людей, которые хотят начать бизнес: у них нет бизнес-идеи.
Неудивительно, что вам не нужен ни один, чтобы следовать курсом Рамита. Но что особенно эффективно, так это то, что он добавляет отрывок из курса в качестве бесплатного образца , чтобы ответить на этот вопрос.
Он повторяет это на протяжении всего FAQ. Он не только отвечает на возражение , он показывает, как продукт отвечает на это возражение.
Но как составить хороший список возражений?
Вы всегда можете начать с обычных колебаний, которые есть у людей по всем вопросам. Сколько времени это займет. Насколько это будет дорого. И т. Д.
Но лучше всего просто передать свою идею кому-нибудь вживую, и выслушать его возражения .Запишите их, а затем добавьте их в свой FAQ с соответствующим ответом
Не сомневайтесь, углубитесь с вопросами. Рамит отвечает на такие вопросы, как «Как мне убедить мужа / жену позволить мне купить этот продукт?»
Ваши читатели должны быть максимально уверены в том, что ваш продукт им подойдет идеально
17. Засыпьте читателя отзывами
Я уже упоминал о невероятном количестве отзывов, которые вы можете найти на этих целевых страницах.
Классическая техника здесь — водопад отзывов. Выглядит это так:
Девять видео-отзывов подряд. Мне пришлось уменьшить масштаб, чтобы правильно сделать снимок экрана. Это несколько страниц, которые нужно прокрутить прямо здесь

Можете ли вы представить себе психологический эффект этой бесконечной серии положительных отзывов на доверие читателя?

Очевидно, что не всегда возможно разместить девять красивых, профессионально снятых видео-отзывов на всех ваших страницах продаж.

Можно только пожелать.

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

Например, вы можете использовать мини-тематических исследований так:

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

18. Уничтожьте все другие альтернативы

Как только вы заставите кого-то прочитать вашу страницу, по существу, могут произойти три сценария:

Они покупают что-то у вас
Они продолжают делать покупки и покупают что-то у кого-то
Они не покупают Ничего не покупаю

Поскольку вы не уверены, что люди вернутся, цель длинной страницы продаж — закрыть продажу сейчас . Большая часть страницы посвящена тому, чтобы избежать сценария 3 (люди не покупают) за счет увеличения воспринимаемой ценности продукта и уменьшения воспринимаемых затрат и рисков.

Все, что осталось сделать, это удалить сценарий 2 (покупка у кого-то другого).

Есть более короткий и простой способ сделать это, как это делает здесь Брайан:

Или более длинный путь, который полностью уничтожает альтернативы:

Итак, как можно уничтожить альтернативы?

Покажите, что они на дороже (ваш курс по сравнению с MBA за 150 000 долларов или бизнес-тренером). Обратите внимание на использование графика, чтобы сделать разницу еще более впечатляющей, и чтобы курс выглядел как выгодная сделка.

Покажите, что они на более рискованны и с меньшей вероятностью преуспеют (ваш курс по сравнению с попытками сделать самодельную работу и ужасным провалом).

Покажите, что они грустны и разочаровывают (ничего не делают).

19. Сделайте продукт как можно более наглядным

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

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

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

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

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

20.Дайте гарантию

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

Считается, что чем дольше гарантия, тем больше вероятность, что люди купят.

Наиболее распространенной гарантией является 30-дневная гарантия возврата денег, подобная той, которую вы найдете на странице Дерека:

Ramit предлагает 60-дневную гарантию , что довольно редко. Он идет немного дальше, объясняя , почему он предлагает такую гарантию.

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

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

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

Есть ли способ озвучить более уверенно, о ценности продукта?

21.Дайте им альтернативу … вроде

Прежде чем описывать содержание планов, Дерек и Рамит используют классическую технику «Не спрашивайте, если, спрашивайте, какой».

Я показывал это раньше на другой странице, и идея проста: не заставляйте их думать о , хотят они вашего продукта или нет , заставляйте их думать о какие ваших продуктов они хотят .

Для этого у вас должны быть разные планы или уровни для вашего продукта.

Названия планов здесь не очень оригинальные (Starter, Standard, Pro, Master, Platinum), и я предпочитаю те, которые Ной Каган использовал на странице, которую я анализировал ранее, потому что в них встроен психологический трюк, который привлекает людей к более дорогим планам

Вот короткий отрывок от Элмера «Продавец №1 в Америке» Уиллера, которому пришла в голову идея (или, по крайней мере, с названием):

22. Подробно опишите свои планы
В этом разделе вы просто перечисляете содержание каждого из планов .
Это означает, что вам нужно суммировать всего в продукте, который вы продаете.
Возьмем, к примеру, страницу Рамита:
Как вы заметите, большая часть пространства не используется самими модулями курса. Но благодаря бесчисленным бонусам, которые даются с курсом.
«Full Zero To Launch Course» (фактические видеоролики курса) — это всего лишь 1 из 16 пунктов в этом предложении. Другие составляющие предложения:
Старые продукты , созданные Ramit и переупакованные в качестве бонусов, например, консультационный курс с шестью цифрами или интервью Ramit Brain Trust
Интервью — довольно распространенный бонус.Будь то успешные студенты или другие эксперты.
Шаблоны и скрипты . Люди любят готовую продукцию.
Подотчетность. Это большой. Курс не просто должен давать информацию, он должен заставлять людей что-то делать. Дайте им домашних заданий .
Мультимедиа. Если у вас есть видеокурс, дайте стенограммы. Дайте аудио версию.
Поддержка. Создайте форум или сообщество, к которому люди могут обратиться, если у них возникнут вопросы в ходе курса.
Как упоминалось ранее, здесь важно то, что вам нужно думать не только об учебных материалах. Очевидно, что весь этот контент не растет на деревьях, и требуется пропорциональный объем работы, чтобы предложить его.
23. Сделаем дорогие планы более привлекательными
Посмотрим правде в глаза.
Люди, продающие вещи в Интернете, не являются благотворителями.Они пытаются зарабатывать деньги.
Если они смогут продавать план на 899 долларов в месяц чаще, чем на 299 долларов в месяц, они сделают это.
И один из способов сделать это — подчеркнуть, насколько более ценным является дорогой план (или насколько менее интересен более дешевый план).
Все три буквы «» подчеркивают то, чего не хватает в более дешевых тарифах.
Например, если вы посмотрите на самый дешевый план Ramit, первое, что вы увидите, это то, что не получает .Вычеркнуто серым цветом.
Дерек идет немного дальше, добавляя «ТОЛЬКО ДЛЯ РАСШИРЕННЫХ УСЛОВИЙ»:
Брайан делает то же самое, но более визуально, например:
«Эй, посмотри на все, что я получаю с моим курсом!»
«Что? Кому нужен этот убогий дешевый план для начинающих? Дай мне все остальное!»
Небольшая разница между этими тремя здесь заключается в том, что Ramit сначала вводит более дешевый план , а , в то время как два других сначала идут с самым дорогим планом .
Сейчас о стратегиях ценообразования написано много, но в любом случае не существует убедительных доказательств. Так что, думаю, вам решать, как расположить планы.
24. попросите их вытащить свою кредитную карту
Пора на самом деле попросить о продаже.
Посмотрите на поразительное сходство на трех страницах.
Тот же призыв к действию : ПОЛУЧИТЕ МГНОВЕННЫЙ ДОСТУП. Это менее жестоко, чем «КУПИТЬ СЕЙЧАС», и напоминает покупателю, что он сразу же извлекает из этого выгоду.
Облегчите проглотить таблетку на с разбивкой по цене на день . Также известна как «упрощенная» цена. Эта тактика работает, пока дневная цена не слишком высока. Например, Рамит не использует его в своем более дорогом тарифном плане, потому что это повысит цену примерно до 30 долларов в день. Это не мелочь.
Используйте логотипы кредитных карт . Они создают имидж надежности.
Предложите скидку тем, кто сразу платит полностью.Небольшая придирка: копия на странице Брайана гласит: «Заплати полностью — сэкономь 400 долларов», а два других меняют порядок «Сэкономь X — заплати полностью». Вероятно, лучше начать с идеи сбережений, чем с идеи оплаты.
Сделайте максимально простым и безопасным. Вот почему Рамит и Дерек предлагают людям задать больше вопросов по электронной почте, если им нужно, или даже позвонить им по телефону.
Вот Рамит:
25. Играйте на их страхе пропустить
Итак, вы попросили читателей купить ваш продукт.Но ты же не собираешься их так легко отпускать, не так ли?
После того, как Рамит представил свое предложение, у Рамита есть два раздела, которые полностью посвящены разжиганию страха читателя пропустить .
Что это?
Страх того, что произойдет, если вы НЕ купите продукт.
Раньше мы потратили много времени, пытаясь продать мечту. Продать хороший результат от покупки товара. Но как насчет обратной стороны медали?
Что было бы, если бы вы не купили?
Конечно, много ужасов.Сожалеть. Раскаяние. Скука. Мы возвращаемся к проблеме волнения, которую мы видели ранее.
Но, вы можете сказать, разве не супер-нелепо охотиться на людских страхах?
Зависит.
Меня больше всего интересует, эффективен ли здесь как метод убеждения.
Этичность зависит от того, что вы пытаетесь заставить людей делать.
Если вы искренне убеждены, что убеждаете их сделать что-то хорошее для них , это, вероятно, нормально.
Если вы используете страх, чтобы заставить их сделать что-то плохое для них … вы, вероятно, придурок
26. Обобщите и повторите свое предложение
Настойчивость — это качество среди продавцов.
Вот почему не стоит довольствоваться одним запросом о продаже.
Вы хотите повторить свое предложение .
Но на этот раз вам не нужно сообщать все детали, которые были указаны ранее.
Простое резюме, в котором перечислены основные преимущества, перечисленные в виде маркированного списка.
Та же техника удаления патронов, которые не входят в более дешевые планы, используется и в этой версии предложения.
Копия почти такая же, как то, что мы видели ранее, в более короткой версии.
27. Используйте свой последний шанс убедить их
БОЛЬШЕ ОТЗЫВОВ?
Почему да. Я же говорил, что их много.
На данный момент читатель знает все, что он может знать о продукте и его преимуществах.
Они уже видели, сколько это стоит, они видели все отзывы, все.
Но все три страницы продаж добавляют несколько последних элементов доказательства перед тем, как вызвать его закрытие.
На странице Дерека Халперна используется особенно интересный тип отзывов:
Отличие заключается в том, что это отзывов, направленных непосредственно на читателя .
Не только ваши регулярные отзывы о личном опыте студента или о том, что они думают о продукте, но и о том, что они рассказали бы людям, рассматривающим курс.
«Я бы просто взял …» Конечно.
У Рамита есть видео, которое играет ту же роль, под названием « Что бы вы сказали людям на заборе?»
Также можно разместить здесь свой FAQ , что и делают Брайан и Дерек.
Как мы видели ранее на примере Ramit’s, это отличное средство для подавления возражений, и оно особенно подходит в этот момент разговора.
Брайан также повторяет здесь свою гарантию .Как видите, возможности смешивать и сочетать все разные элементы безграничны, но строительные блоки те же самые.
Важно то, что цель этого раздела состоит в том, чтобы накапливать элементы заверения, прежде чем просить о продаже в последний раз.
28. Завершите, повторив свое предложение в последний раз
Уф! Мы наконец (почти) закончили.
Все три буквы заканчиваются повторением их итогового предложения во второй раз.
Вот Дерек, так что вы можете увидеть сходство с другими.
То же представление. Та же копия кнопки. Такая же скидка при полной оплате.
Просто дать им последний шанс купить.
Уроки дизайна целевой страницы: как проложить путь к большему количеству кликов и конверсий
Целевая страница — это страница веб-сайта, предназначенная только для одной цели: заставить посетителей выполнить действие . Будь то подписка на информационный бюллетень, загрузка электронной книги, покупка продукта или подписка на блог, конверсия — это цель, и чем проще вы ее сделаете, тем лучше.
Итак, как вы можете дать своим читателям простейший путь к взаимовыгодному результату? Воспользуйтесь этими советами по дизайну, чтобы создать удобные для клиентов целевые страницы, которые продаются.
Будьте внимательны к имиджу.
Добавьте изображение вместе с предложением для визуальной привлекательности. Пользовательские изображения превосходят стандартные изображения, если они созданы с учетом стратегического маркетингового видения. С практической точки зрения, стоковые изображения часто необходимо использовать для снижения затрат, но, немного потрудившись, ими можно управлять, чтобы выделяться и соответствовать дизайну вашей страницы, как будто они созданы на заказ.
Используйте блоки для копирования мелкого размера.
Если абзац или страница выглядят слишком плотными, читатели с большей вероятностью потускнеют и продолжат. Вырезайте текст там, где можете, и разбивайте большие абзацы, чтобы было ощущение, что читать меньше.
Избавьтесь от отвлекающих факторов.
Уменьшите или исключите навигацию, чтобы посетители не отвлекались от цели и не отвлекались. Слишком много ссылок в заголовках мешают сообщению. Определите цель своей страницы и придерживайтесь ее, используя как можно меньше ссылок и всплывающих страниц.
Сделайте призыв к действию сильным.
Создайте убедительный призыв к действию, связанный с вашим предложением и усиливающий желание щелкнуть и без промедления совершить конверсию. Например, текст, рекламирующий покупку нового кондиционера, может быть таким: «Купи сейчас и получи классные скидки в размере 1200 долларов».
Поднимитесь выше сгиба.
Пространство, которое посетитель видит без прокрутки — сравнимое с верхней половиной сложенной газеты — это то место, где должно быть ключевое содержание целевой страницы.Разместите кнопку или форму с призывом к действию над «сгибом», чтобы за ней не приходилось выслеживать.
Практикуйте хорошие формы .
Сократите свою лидогенерацию или форму заказа до самого необходимого, чтобы посетители продолжали отслеживать. Автоматическое переключение курсора ввода с поля на поле, использование табуляции или использование только флажков — все это эффективная тактика для оптимизации формы целевой страницы.
Собирайте информацию деликатно.
Чтобы свести к минимуму уход посетителей, запрашивайте только необходимую информацию.Если вы хотите собрать дополнительные данные, попробуйте переместить эти поля в форму на второй странице. Исследования показывают, что к тому времени, когда потенциальные клиенты переходят на вторую страницу, они уже набирают обороты в процессе конверсии и с меньшей вероятностью уйдут с корабля.
Потратив время на разработку эффективных целевых страниц, можно построить мост, который уводит посетителей от привлекающего их маркетингового сообщения к функциям, позволяющим им выполнить.
Используйте эти передовые методы проектирования для оптимизации макета, потока и процесса преобразования, и ваши целевые страницы привлекут потенциальных клиентов и быстро приведут их к успешной транзакции.Бонус: благодаря вашему усердию, вы с большей вероятностью пойдете на прогулку и в следующий раз.
Как добиться успеха с помощью дизайна целевой страницы
Чтобы описать то, как я занимаюсь маркетингом, мне понадобятся всего два слова: «Тестирование — победа».
Одним из самых больших и недавних результатов тестирования является рост коэффициента конверсии с 0% до 6% до 15%, когда мы неоднократно меняли дизайн нашей страницы благодарности на Lesson.ly.
Для справки, наша страница с благодарностью отображается, когда кто-то загружает бесплатный ресурс с нашего сайта (многие из них можно увидеть здесь).Коэффициент конверсии, который мы улучшили в этом наборе тестов, — это количество людей, которые загрузили что-то с нашего сайта, а затем подписались на бесплатную пробную версию нашего обучающего программного обеспечения.
Оригинальный дизайн
CR: ~ 0%
Взглянув на оригинальный дизайн страницы с благодарностью, вы заметите, что это простая страница. Одно он сделал очень хорошо: он завершил транзакцию.
Но он сделал только это.
Так как это было так, у нас была пара триалеров, фильтрующих то тут, то там после того, как они загрузили ресурс, но их было немного и они были далеко друг от друга.
Мы думали, что можем добиться большего, поэтому попробовали Alley-oop Design 1.
«Вся жизнь — это эксперимент. Чем больше экспериментов вы проведете, тем лучше ».
— Ральф Уолдо Эмерсон
Alley-oop Design 1
CR: 6%
Добавив четкий призыв к действию, чтобы подписаться на бесплатную пробную версию, а также большую визуальную очередь (большой зеленый arrow), , мы заметили существенное и немедленное улучшение коэффициента конверсии.
Это заняло страницу с благодарностью от завершения одной транзакции загрузки ресурса до открытия новой транзакции для подписки на бесплатную пробную версию.
И открыла новую транзакцию — в 6% случаев.
Даже с таким ростом мы думали, что сможем добиться большего. Войдите в Alley-oop Design 2.
Alley-oop Design 2
CR: 15%
Преобразуя большой призыв к действию в правой части страницы в настоящую форму регистрации, мы удалили «середину» -man click »и уменьшило трение при регистрации.
Затем, чтобы еще больше уменьшить это трение, мы автоматически заполняем форму той же информацией, которую человек предоставил нам при загрузке ресурса.
Все, что нужно сделать сейчас, чтобы начать пробную версию, — это выбрать пароль и нажать желтую кнопку.
Благодаря этому коэффициент конверсии постоянно увеличивался с 6% до 15%, даже после того, как через процесс прошли сотни людей.
Помимо очевидного роста коэффициента конверсии, вот несколько выводов, которые мы узнали в ходе этого процесса.
# Alley-oop + #Autofill #FTW
Во-первых, страница с благодарностью alley-oop является обязательной! Мы обнаружили, что лучшее время для повторного взаимодействия с потенциальным клиентом — сразу после того, как он завершил действие .
Это позволяет понять, кто более заинтересован в подключении, чем другие, и может привести к сокращению времени на закрытие. Спросите себя: что я могу предложить потенциальным клиентам сразу же после их конверсии, чтобы повторно совершить конверсию?
Кроме того, автозаполнение формы прошло очень успешно. Запоминая информацию, которую кто-то уже отправил, вы делаете процесс гораздо менее раздражающим для ваших потенциальных клиентов. В нашем случае это хорошо окупилось.
Спросите себя: что я могу сделать, чтобы уменьшить трение в моем процессе преобразования?
Больше пшеницы — больше мякины
С увеличением общего числа потенциальных клиентов мы наблюдаем рост как квалифицированных, так и неквалифицированных потенциальных клиентов.
Интуитивная реакция многих на это заклеймила изменение как провал. Если у вас много слабых потенциальных клиентов, как это будет успехом?
Однако если вы сделаете шаг назад и сосредоточитесь на позитиве, вам следует ожидать чистого увеличения числа квалифицированных потенциальных клиентов, что должно привести к увеличению дохода.
В целом проверка потенциальных клиентов требует больше работы, но чистая выгода того стоит . Убедитесь, что вы установили это ожидание для себя и всех участников, если решите попробовать.
Делайте правильные вещи правильно
«Река прорезает скалу не из-за своей силы, а из-за ее стойкости». — Джим Уоткинс
Постоянно тестируя наш процесс, мы обнаружили несколько успешных самородков.
Это не всегда так. С тех пор, как я начал руководить маркетингом в Lesson.ly в январе 2014 года, мы терпели неудачи, побеждали, терпели поражение, побеждали, терпели поражение и снова побеждали.
Не сдавайтесь, когда вы терпите неудачу, просто продолжайте делать правильные вещи правильно и Вы.Будет. Выиграть.
Посмотрите, как работает наш переулок в действии.
Продолжайте общение на наших страницах в Facebook или Google+.
Категории и целевые страницы — Урок цифрового маркетинга
Цифровой маркетинг — Учебные заметки:
Предоставление более конкретной аудитории
Категория или целевая страница должны соответствовать ожиданиям пользователя, когда он щелкнул элемент навигации, который привел к нему, если они пришли с веб-сайта.Эти страницы будут очень распространенными точками входа на сайт для многих пользователей из-за конкретных поисков, которые они выполняли в поисковых системах, и, как таковые, они также должны соответствовать этим ожиданиям.
Эти страницы, обычно появляющиеся на втором уровне веб-сайта, позволяют пользователям начать идентифицировать себя как имеющих особый интерес или потребность. И контент должен отражать эту потребность или интерес.
Эффективная целевая страница должна позволять пользователю контролировать контент, например, путем предоставления средств управления фильтрацией или более конкретных механизмов поиска в категории продуктов.Эти страницы должны обеспечивать эффективные подписи к контенту, доступному в этом разделе, и предлагать четкие способы доступа к нему.
Обеспечение пользователей тем, что им нужно
По мере того, как пользователи совершают определенные пользовательские пути, они проявляют себя как особый тип пользователей с более конкретными интересами. Контент должен соответствующим образом соответствовать этим интересам.
Шаблоны проектирования, которые пользователи могут ожидать найти на этих страницах, могут включать:
Перечень товаров или услуг
Простое представление опций, доступных в этом разделе
Инструменты фильтрации, если они просматривают подкатегории продукта
Вторичная навигация, позволяющая просматривать или перемещаться по этому разделу в боковом направлении
Домашняя страница для многих пользователей
Как и в случае с домашней страницей, к этим страницам также относятся бизнес-цели, поскольку они связаны с организацией, продвигающей определенные продукты или услуги.
Достижение бизнес-целей на страницах категорий может быть достигнуто с помощью следующих методов:
Группировка похожих товаров или услуг
Предлагаем подходящие инструменты для сужения доступных вариантов
Изменение тона контента для обращения к более конкретной аудитории
Кроме того, домашние страницы, категории или целевые страницы редко не подходят для ненадлежащего маркетинга или рекламы.
Пример: эффективный дизайн
Давайте посмотрим на простой пример.В данном случае, как пользователь, я попал в мужской раздел онлайн-магазина одежды. Мне сразу же предоставляется контент, имеющий отношение к моему запросу о мужских товарах. И теперь у меня есть инструменты в левом столбце, чтобы продолжать делать мой запрос все более конкретным.
Обратите внимание на использование здесь изображений, которые очень подходят для данной темы. Также обратите внимание на отсутствие других визуальных помех. Продукты находятся в центре внимания, и мои ключевые задачи облегчаются.
Back to Top
Ресурсы цифрового маркетинга:
Рик Монро
Рик Монро — UX-директор в Fathom.Он имеет обширный опыт в исследованиях пользователей, дизайне взаимодействия, ориентированном на пользователя дизайне и разработке стратегии с организациями частного и государственного секторов по всей Великобритании и Ирландии.
Правила защиты данных влияют практически на все аспекты цифрового маркетинга. Поэтому DMI подготовила краткий курс по GDPR для всех наших студентов.Если вы хотите узнать больше о GDPR, вы можете сделать это здесь:
Краткий курс DMI: GDPR
Если вам интересно узнать о принципах UX, а также об инструментах или методах, которые вы можете использовать для развития и улучшения пользовательского опыта, DMI подготовила краткий курс по этому предмету для всех наших студентов. Вы можете получить доступ к этому контенту здесь:
Краткий курс DMI: Основы UX
Следующие фрагменты контента из Библиотеки членства Института цифрового маркетинга были выбраны, чтобы предложить дополнительные материалы, которые могут быть вам интересны или полезны.
Вы можете найти больше информации и контента в Библиотеке членства Института цифрового маркетинга
Вы будете оценивать , а не по этому содержанию на выпускном экзамене.
5 уроков, которые мы извлекли из создания 250 целевых страниц — Digital Drum
Веб-сайты наших клиентов почти всегда сложны; с многочисленными призывами к действию и пунктами меню, которые должны обслуживать множество заинтересованных сторон и клиентов.
Целевые страницы — это способ гарантировать, что оплаченные расходы на рекламу направляют целевой трафик на страницы, предназначенные для удовлетворения конкретных потребностей потенциального клиента.
Но поскольку целевые страницы менее сложны, чем веб-сайты, их разработка — не меньшая наука.
После создания сотен целевых страниц для различных клиентов в различных секторах у нас есть несколько ключевых практических советов, которые помогут обеспечить высокое качество потенциальных клиентов и рентабельность инвестиций в оплачиваемые медиа-расходы.
Урок 1: Правило 5 секунд
Лично у вас обычно есть 7 секунд, чтобы произвести хорошее первое впечатление.В сети у вас еще меньше времени. Убедитесь, что ваши целевые страницы (и все ваши цифровые коммуникации) проходят этот простой тест.
Правило 5 секунд: может ли потенциальный клиент четко понять, кто вы и что вы предлагаете, за 5 секунд или меньше?
В частности, в верхней части страницы вам потребуется:
Четкое изложение вашего ценностного предложения: Не будьте умны с этим утверждением. Сейчас не время для каламбуров или красиво оформленных заявлений о бренде.Подумайте о Ронсиле. Как можно кратко укажите, что именно вы предлагаете.
Один призыв к действию: Сделайте это визуально убедительным. Убедитесь, что он краткий и написан с точки зрения потенциального клиента.
Социальное доказательство: Социальное доказательство может принимать форму логотипов клиентов, изображений или отзывов коллег. Социальное доказательство убеждает потенциальных клиентов в том, что другие компании, такие как их компания, работают с вами — и, следовательно, они должны так же
Помните, если через 5 секунд потенциальный клиент не почувствует уверенности, что он попал в нужное место, кнопка «Назад» быстро и легко показать им всю страницу результатов поисковой системы с альтернативными вариантами.
Урок 2. Поощряйте телефонную связь через Интернет
Да, верно, вот агентство цифрового маркетинга советует вам связаться с потенциальными клиентами по телефону.
Хотя большая часть потенциальных клиентов будет проводиться в Интернете, для большинства компаний B2B, особенно тех, которые предлагают сложные, очень ценные предложения, фактический процесс продаж должен происходить от человека к человеку.
Целевые страницы должны быть не только предназначены для сбора данных о потенциальных клиентах через формы, но, что еще более важно, они должны быть разработаны так, чтобы предлагать потенциальным клиентам возможность связаться по телефону.
Включение номера телефона сигнализирует о нескольких вещах для потенциального клиента:
Компания настоящая, а не только онлайн
Компания открыта для бизнеса
Есть настоящие живые люди, которые хотят поговорить вам
Компания серьезно относится к обслуживанию клиентов
И вот несколько важных советов, как эффективно использовать телефонные номера на целевых страницах:
Сделайте номер телефона видимым; в идеале в заголовке вашей целевой страницы
Повторите номер телефона, особенно внизу страницы, чтобы потенциальному клиенту, который прокручивал вниз, не нужно было думать о прокрутке назад, чтобы найти его снова
Включить часы работы, чтобы потенциальный клиент знал, когда вы открыты, и когда лучше заполнить форму.
На мобильном телефоне нажмите на номер телефона, чтобы позвонить
Урок 3: «Легко просматриваемый» контент
Все мы знаем, что в большинстве случаев потребители цифрового контента не читают должным образом, они бегло просматривают информацию, чтобы найти соответствующую информацию, которая либо убедит их, что они смотрят на то, что нужно, либо отправит их обратно. страницу результатов поисковой системы, чтобы найти что-нибудь еще.
Наши советы:
Убедитесь, что ваш контент написан и структурирован таким образом, чтобы его можно было легко просматривать, но при этом давая им необходимую информацию.
Используйте блоки контента, которые выделяются. Например, дизайн с использованием различных цветовых блоков дает визуальную подсказку и помогает выделить ключевую информацию
Включите социальное доказательство на всю целевую страницу, смешайте его с короткими цитатами, логотипами и изображениями
Не делайте этого бойтесь повторять контент.Пользователь, просматривающий контент, скорее всего, что-то упустил, поэтому не бойтесь повторять ключевые сообщения на всей странице.
То же самое и с вашим CTA. Не заставляйте пользователя взаимодействовать с вами, ищите кнопку, которая откроет форму. Повторяйте это повсюду: всегда в верхней части страницы и внизу страницы
Урок 4. Раздельный дизайн для мобильных устройств
Хотя статистические данные о том, сколько людей используют телефоны по сравнению с настольными компьютерами для исследования B2B, различаются, вы можете с уверенностью предположить что по крайней мере половина ваших потенциальных клиентов просматривает ваши целевые страницы на мобильном устройстве.
Целевые страницы должны быть не просто адаптивными, но и разрабатываться отдельно для настольных и мобильных устройств, чтобы обеспечить оптимизацию конверсии для обоих вариантов.
Между ними есть несколько ключевых различий:
Телефонные номера на мобильных страницах могут быть интерактивными
Заполнение форм сильно отличается; убедитесь, что вы спроектировали и протестировали свои формы как на настольном компьютере, так и на мобильном устройстве
Пользователи мобильных устройств могут быстро прокручивать вниз одним движением пальца, поэтому более длинные страницы подойдут, но убедитесь, что ключевые сообщения по-прежнему выделяются
раз загружается, целевая страница, которая медленно загружается на мобильных устройствах, будет просмотрена еще реже, чем на настольных компьютерах.Убедитесь, что изображения оптимизированы, и всегда тестируйте мобильную версию так же тщательно, как и настольную версию.
Урок 5: «Коэффициент внимания»
Коэффициент внимания — это количество вещей, которые просят сделать потенциальный клиент. или подумайте на странице.
Возвращаясь к началу, причина, по которой целевые страницы так важны для платного трафика, заключается в том, что веб-сайты слишком отвлекают.
На веб-сайте может быть дюжина или даже больше призывов к действию: подумайте не только о функциях конверсии, но и о элементах меню, социальных значках, внутристраничном контенте, контекстных ссылках и т. Д.
Для ваших целевых страниц вы должны стремиться к соотношению внимания 1. Это означает, что по возможности используйте один очень четкий призыв к действию на странице. (Два, если считать номер телефона).
Иногда есть очень веские причины для того, чтобы иметь более одного призыва к действию, но в таких случаях проясните, в чем разница, и визуально расставьте приоритеты в том, на что вы бы предпочли, чтобы потенциальный клиент обратил внимание.
No related posts.