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

Август 5, 2022

Главная
Разное
Проектирование лендинга

Содержание

2. Часть 1 Проектирование лендинга
3. Лендинг (Landing Page, посадочная страница, одностраничник) - это особый вид сайта. Лендинг отличается тем, что сконцентрирован
4. Может быть конфликт разработчика и заказчика. Заказывают лендинг, потом говорят что у вас слабая конверсия. В
5. Пример Если вы стали продавать мобильный телефон, а цена у него резко завышена, то конверсия будет
6. В настоящее время сложился некоторый типовой набор элементов, которые должен содержать лендинг: ● Первый экран– это
8. Из нового мы указываем фоновую картинку: .jumbotron-fluid { background-image: url("img/bg-start.jpg"); background-position: 0% 25%; background-size: cover; background-repeat:
9. Смотрим как это выглядит на маленьких экранах (принцип мобил фест)
10. Часть 2 Описание товара и призыв к действию
11. Какой размер лендинга оптимален? Ответ зависит от сложности товара. Чем более неизвестен и сложен товар, тем
12. Два вида CTA (призыв к действию) Существует два основных вида CTA: 1. Сбор контактов Посетитель оставляет
13. ПРИМЕР Открываем код, смотрим, что если лендинг довольно большой то лучше подписывать секции, чтобы легче было
14. Посетитель нажимает кнопку и оказывается в блоке какого то действия (форма):
15. Есть еще прием усиления CTA : чуть ниже мы делаем яркий, контрастный блок с текстом для
16. Секция иконок - для привлечения внимания Секция описания курса – посмотрите код примера, обратите внимание на
17. Вид на мобильных устройствах:
18. Часть 3 Отзывы
20. Карусель достаточно сложный компонент, в ней много вариантов, суть карусели в том, что меняются какие то
21. ПРИМЕР Показываем индикаторы и какой из них активный Секция отзывов Отзывы
22. Дальше идут слайды: Картинка, текст и подпись, затем следующий блок. Как быстрый старт, порекомендовал бы этот
23. Далее кнопки управления: Если ничего не делать то слайды будут автоматически переключаться и их можно переключать
24. Для размещения отзывов мы использовали готовый компонент - карусель.
25. Часть 4 Цены, гарантии, реквизиты
26. Для продающих лендингов обязательными являются секции цен, гарантий и реквизитов. К эти секциям особых требований не
27. https://www.amazon.com/ -сайт интернет магазина
28. В нем информации много, это нормально, посетитель хочет выбрать товар, а для того чтобы выбрать надо
29. https://www.google.ru/keep/ -сайт-реклама приложения
30. Здесь много пустого пространства, это позволяет достаточно комфортно без напряжения рассматривать этот лендинг
31. В интернет магазине - подробные описания, много характеристик, описание продуктов где много текста, техническая информация. т.е.
32. Пример –секция цены Откройте в примере секцию цен Обратите внимание, что она состоит из: Секции: Контейнера:
33. Пример – секция гарантии Состоит из набора колонок, картинка , текст
34. Пример – секция реквизиты Эту секцию сильно выпячивать не стоит, она не имеет прямого отношения к
35. Часть 5 Дополнительные элементы
36. Все обязательные элементы на наш лендинг уже включены, рекомендуется выложить сайт на хостинг и поэкспериментировать с
37. Рекомендуется смотреть и изучать современные лендинги: https://www.taskade.com/ https://www.satismeter.com/ https://www.digitalocean.com/ Есть еще интересный сервис , предназначенный для
38. На этом сервисе: Основные секции -слева Для каждой секции есть варианты Там где замочек -платные Выбираете
39. ПРИМЕР -Секция особенностей Доработан бесплатный шаблон, Далее идет заголовок и карточки, обратите внимание в файле стилей:
40. При наведении мыши появляется тень блока и крутиться иконка На разных разрешениях хорошо смотрится.
41. Часть 6 Перенос сайта на хостинг
42. Лучше сразу делать сайт на хостинге, чтобы сразу видеть как это выглядит и исправлять. Начинать любой
43. Вариант 1. Платный хостинг Для платного хостинга рекомендуется хостинг HandyHost https://handyhost.ru/, так как он уже для
44. ISPmanager - это наиболее популярная панель управления хостингом. https://www.ispsystem.ru/software/ispmanager Она довольно простая, логичная. Рекомендуется покупать хостинг
45. Шаг 1. Перейти по ссылке http://handyhost.ru/?from=13160 выбирать Хостинг сайтов и купить хостинг на 1 год. Шаг
46. Шаг 3. Написать в техподдержку о том, что хотите получить домен в подарок.
47. Вариант 2. Бесплатный хостинг Для бесплатного хостинга рекомендуется хостинг Beget. https://beget.com/ru/free-hosting Для выполнения заданий достаточно бесплатного
48. Для получения бесплатного хостинга достаточно указать имя и телефон: https://beget.com/ru/free-hosting Нажать Зарегистрировать аккаунт
49. После этого вам будет сообщение что аккаунт успешно создан После регистрации вы получите логин и пароль
50. Сохраните их в менеджере паролей : https://keepass.info/download.html Рекомендуется выбрать Portable - потому что можно сохранить на
51. У вас появиться панель управления: Надо выбрать Файловый менеджер и вы окажетесь в файловом менеджере Beget
52. Одна из папок будет иметь такой вид, только у вас будут другие цифры: Надо зайти в
53. Вам надо здесь создать папку L-15 (имя дается произвольно) , для этого нажимаете Новая папка (вверху)
54. Нажать Загрузить файлы : В появившемся окне нажмите Browse и загрузите сначала файл индекс и файл
55. После этого у вас сайт уже на хостинге и чтобы к нему добраться у вас будет
56. Часть 1 Проектирование лендинга Задание для самостоятельного выполнения: Создайте первый экран лендинга курса "Веб- разработчик". Оформление
57. Часть 2 Описание товара и призыв к действию Задание для самостоятельного выполнения: Добавьте описание товара и
58. Часть 3 Отзывы Задание для самостоятельного выполнения: Добавьте еще два отзыва на лендинг курса "Веб-разработчик". Оформление
59. Часть 4 Цены, гарантии, реквизиты Задание для самостоятельного выполнения: Найдите и добавьте другой шаблон цен на
60. Часть 5 Дополнительные элементы Задание для самостоятельного выполнения: Найдите и добавьте другой шаблон особенностей курса на
62. Скачать презентацию

Слайд 2

Часть 1 Проектирование лендинга

Слайд 3

Лендинг (Landing Page, посадочная страница, одностраничник) - это
особый вид сайта.
Лендинг отличается

тем, что сконцентрирован на достижение одной
цели (подписка, регистрация, продажа и т.д.).
Получил свое название из-за процесса прихода посетителей. Как
правило на лэндинг попадают те, кто кликнул по рекламе.

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

Слайд 4

Может быть конфликт разработчика и заказчика. Заказывают лендинг, потом говорят что

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

Основной показатель лендинга - это конверсия.
Конверсия - это процент тех посетителей, которые выполнили
требуемое действие. Например, если зашли 100 человек и 10 из них оставили заявку, то конверсия - 10%.

Слайд 5

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

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

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

Слайд 6

В настоящее время сложился некоторый типовой набор элементов, которые должен содержать

лендинг:
● Первый экран– это то что человек видит без сколлинга. Задача на первом экране привлечь внимание. (Обязательные элементы: Заголовок, картинка, краткое описание)
● Логотип, название, контакты
● Подробное описание товара или услуги
● Кнопка призыва к действию
● Отзывы
● Цены
● Гарантии
● Реквизиты

Слайд 7

Слайд 8

Из нового мы указываем фоновую картинку:
.jumbotron-fluid
{
background-image: url("img/bg-start.jpg");
background-position: 0% 25%;
background-size: cover;
background-repeat:

no-repeat;
color: white;
text-shadow: black 0.1em 0.1em 0.1em;
margin: 0;
}

Слайд 9

Смотрим как это выглядит на маленьких экранах (принцип мобил фест)

Слайд 10

Часть 2 Описание товара и призыв к действию

Слайд 11

Какой размер лендинга оптимален?
Ответ зависит от сложности товара. Чем более неизвестен

и сложен
товар, тем подробнее его нужно описывать.
Нужно продумать заранее все сомнения посетителя и снять эти
сомнения. Это задача маркетолога, а задача верстальщика - визуально выделить разные аспекты товара.
Ключевой элемент лендинга - это CTA (call to action) призыв к действию.
Правило лендинга: “Нет повода - нет действия”.
CTA чаще всего состоит из:
1. Кнопки для перехода к секции действия
2. Секция действия - форма или кнопка “Заказать”.

Слайд 12

Два вида CTA (призыв к действию)
Существует два основных вида CTA:
1. Сбор

контактов
Посетитель оставляет Email в обмен на какое-либо предложение, например, электронную книгу.
2. Продажа товара
Посетитель изучает коммерческое предложение и оплачивает товар.

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

Слайд 13

ПРИМЕР
Открываем код, смотрим, что если лендинг довольно большой то лучше подписывать

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

Слайд 14

Посетитель нажимает кнопку и оказывается в блоке какого то действия (форма):

Слайд 15

Есть еще прием усиления CTA :
чуть ниже мы делаем яркий, контрастный

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

Сначала видим текст (сверху) , его читать лень, начинается прокрутка, ту появляется яркий вопрос, привлекающий внимание и кнопка Готов которая ведет на туже форму.
Откройте код примера и посмотрите как это реалзовано.

Слайд 16

Секция иконок - для привлечения внимания
Секция описания курса – посмотрите код

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

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

Обратить внимание в файле стилей на:
section
{ padding: 60px 0;}
Задаем поля (рекомендуется) , есть некоторое правило, если есть поля побольше (от начала контейнера до текста) и в других контейнерах от начала контейнера до информации - информация лучше воспринимается.
Если их убрать , все сожмется, будет впечатление что все нагромождено и будет казаться что информации много.

Слайд 17

Вид на мобильных устройствах:

Слайд 18

Часть 3 Отзывы

Слайд 19

Слайд 20

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

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

Слайд 21

ПРИМЕР
Показываем индикаторы и какой из них активный
Секция отзывов
Отзывы

slide" data-ride="carousel">

Слайд 22

Дальше идут слайды:
Картинка, текст и подпись, затем следующий блок.

class="carousel-inner">

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

Иван Петров, инженер

Слайд 23

Далее кнопки управления:
Если ничего не делать то слайды будут автоматически переключаться

и их можно переключать с помощью индикаторов, либо с помощью стрелок.

Слайд 24

Для размещения отзывов мы использовали готовый компонент - карусель.

Слайд 25

Часть 4 Цены, гарантии, реквизиты

Слайд 26

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

секциям особых требований не предъявляется, существуют тенденции верстки лендингов:
Пустое пространство
Простой язык
Привлекательные заголовки
Ясные СТА
Контрастные цвета

Слайд 27

https://www.amazon.com/ -сайт интернет магазина

Слайд 28

В нем информации много, это нормально, посетитель хочет выбрать товар, а

для того чтобы выбрать надо сравнить.

Слайд 29

https://www.google.ru/keep/ -сайт-реклама приложения

Слайд 30

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

этот лендинг

Слайд 31

В интернет магазине - подробные описания, много характеристик, описание продуктов где

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

Слайд 32

Пример –секция цены
Откройте в примере секцию цен
Обратите внимание, что она

состоит из:
Секции:

Контейнера:

с вариантами выбора
Кнопки Заказать, в каждом варианте, которая ведет на форму заказа.

Слайд 33

Пример – секция гарантии
Состоит из набора колонок, картинка , текст

Слайд 34

Пример – секция реквизиты
Эту секцию сильно выпячивать не стоит, она не

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

Посмотрите как лендинг выглядит на различных устройствах

Слайд 35

Часть 5 Дополнительные элементы

Слайд 36

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

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

Слайд 37

Рекомендуется смотреть и изучать современные лендинги:
https://www.taskade.com/
https://www.satismeter.com/
https://www.digitalocean.com/
Есть еще интересный сервис , предназначенный

для быстрого получения прототипа лендинга. Здесь часть бесплатных элементов часть платных.
https://designmodo.com/startup/app/

Слайд 38

На этом сервисе:
Основные секции -слева
Для каждой секции есть варианты
Там где замочек

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

Слайд 39

ПРИМЕР -Секция особенностей
Доработан бесплатный шаблон,

Далее идет

заголовок и карточки, обратите внимание в файле стилей: используются иконки и поворот:
#what-we-do .wcard .block-1:before
{ content: "\f0e7";}
#what-we-do .wcard .block-2:before
{ content: "\f017";}
#what-we-do .wcard .block-3:before
{ content: "\f00c";}
#what-we-do .wcard .block-4:before
{ content: "\f05a";}
#what-we-do .wcard .block-5:before
{ content: "\f059";}
#what-we-do .wcard .block-6:before
{ content: "\f133";}
#what-we-do .wcard:hover .wcard-block:before
{ -webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: .5s all ease;
-moz-transition: .5s all ease;
transition: .5s all ease;}

Слайд 40

При наведении мыши появляется тень блока и крутиться иконка
На разных разрешениях

хорошо смотрится.

Слайд 41

Часть 6 Перенос сайта на хостинг

Слайд 42

Лучше сразу делать сайт на хостинге, чтобы сразу видеть как это

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

Слайд 43

Вариант 1. Платный хостинг
Для платного хостинга рекомендуется хостинг HandyHost https://handyhost.ru/, так

как он уже для самых дешевых тарифов предоставляет панель управления ISPmanager.

Слайд 44

ISPmanager - это наиболее популярная панель управления хостингом. https://www.ispsystem.ru/software/ispmanager
Она довольно простая,

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

Слайд 45

Шаг 1. Перейти по ссылке http://handyhost.ru/?from=13160 выбирать Хостинг сайтов и купить хостинг на

1 год.

Шаг 2. Выбрать домен и проверить на https://www.nic.ru/ свободен он или нет.

Слайд 46

Шаг 3. Написать в техподдержку о том, что хотите получить домен в

подарок.

Слайд 47

Вариант 2. Бесплатный хостинг
Для бесплатного хостинга рекомендуется хостинг Beget.
https://beget.com/ru/free-hosting
Для выполнения заданий

достаточно бесплатного хостинга.

Слайд 48

Для получения бесплатного хостинга достаточно указать имя и телефон: https://beget.com/ru/free-hosting
Нажать Зарегистрировать

аккаунт

Слайд 49

После этого вам будет сообщение что аккаунт успешно создан
После регистрации вы

получите логин и пароль к личному кабинету.

Слайд 50

Сохраните их в менеджере паролей : https://keepass.info/download.html
Рекомендуется выбрать Portable - потому

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

Слайд 51

У вас появиться панель управления:
Надо выбрать Файловый менеджер и вы окажетесь

в файловом менеджере Beget :

Слайд 52

Одна из папок будет иметь такой вид, только у вас будут

другие цифры:

Надо зайти в эту папку, затем в папку public_html и там уже начинается ваш сайт.

Слайд 53

Вам надо здесь создать папку L-15 (имя дается произвольно) , для

этого нажимаете Новая папка (вверху)

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

Слайд 54

Нажать Загрузить файлы :
В появившемся окне нажмите Browse и загрузите сначала

файл индекс и файл стилей, затем создайте папку img - и загрузите туда все картинки.

Слайд 55

После этого у вас сайт уже на хостинге и чтобы к

нему добраться у вас будет ссылка состоящая из /L-15/

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

Слайд 56

Часть 1 Проектирование лендинга
Задание для самостоятельного выполнения:

Создайте первый экран лендинга

курса "Веб- разработчик".
Оформление должно отличаться от примера.
Задание для продвинутых:
Выберите свой товар или услугу.
Создайте первый экран лендинга.

Слайд 57

Часть 2 Описание товара и призыв к действию
Задание для самостоятельного выполнения:
Добавьте

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

Слайд 58

Часть 3 Отзывы
Задание для самостоятельного выполнения:
Добавьте еще два отзыва на лендинг

курса "Веб-разработчик".
Оформление должно отличаться от примера.
Задание для продвинутых:
Выполните это задание для лендинга выбранного товара

Слайд 59

Часть 4 Цены, гарантии, реквизиты
Задание для самостоятельного выполнения:
Найдите и добавьте другой

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

Слайд 60

Часть 5 Дополнительные элементы
Задание для самостоятельного выполнения:
Найдите и добавьте другой шаблон

особенностей курса на лендинг курса "Веб-разработчик".
Задание для продвинутых:
Выполните это задание для лендинга выбранного товара

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

Содержание

Часть 1 Проектирование лендинга

Лендинг (Landing Page, посадочная страница, одностраничник) - этоособый вид сайта.Лендинг отличается

Может быть конфликт разработчика и заказчика. Заказывают лендинг, потом говорят что

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

В настоящее время сложился некоторый типовой набор элементов, которые должен содержать

Из нового мы указываем фоновую картинку:.jumbotron-fluid { background-image: url("img/bg-start.jpg"); background-position: 0% 25%; background-size: cover; background-repeat:

Смотрим как это выглядит на маленьких экранах (принцип мобил фест)

Часть 2 Описание товара и призыв к действию

Какой размер лендинга оптимален?Ответ зависит от сложности товара. Чем более неизвестен

Два вида CTA (призыв к действию)Существует два основных вида CTA:1. Сбор

ПРИМЕРОткрываем код, смотрим, что если лендинг довольно большой то лучше подписывать

Посетитель нажимает кнопку и оказывается в блоке какого то действия (форма):

Есть еще прием усиления CTA :чуть ниже мы делаем яркий, контрастный

Секция иконок - для привлечения вниманияСекция описания курса – посмотрите код

Вид на мобильных устройствах:

Часть 3 Отзывы

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

ПРИМЕРПоказываем индикаторы и какой из них активныйСекция отзывов Отзывыslide" data-ride="carousel">

Отзывы

Дальше идут слайды:Картинка, текст и подпись, затем следующий блок.

Далее кнопки управления:Если ничего не делать то слайды будут автоматически переключаться

Для размещения отзывов мы использовали готовый компонент - карусель.

Часть 4 Цены, гарантии, реквизиты

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

https://www.amazon.com/ -сайт интернет магазина

В нем информации много, это нормально, посетитель хочет выбрать товар, а

https://www.google.ru/keep/ -сайт-реклама приложения

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

В интернет магазине - подробные описания, много характеристик, описание продуктов где

Пример –секция ценыОткройте в примере секцию цен Обратите внимание, что она

Пример – секция гарантииСостоит из набора колонок, картинка , текст

Пример – секция реквизитыЭту секцию сильно выпячивать не стоит, она не

Часть 5 Дополнительные элементы

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

Рекомендуется смотреть и изучать современные лендинги:https://www.taskade.com/https://www.satismeter.com/https://www.digitalocean.com/Есть еще интересный сервис , предназначенный

На этом сервисе:Основные секции -слеваДля каждой секции есть вариантыТам где замочек

ПРИМЕР -Секция особенностейДоработан бесплатный шаблон, Далее идет

При наведении мыши появляется тень блока и крутиться иконкаНа разных разрешениях