ПРОТОТИП САЙТА:
Производственная компания ДЭК
Согласованная структура по ТЗ:

1. Главная
2. Стат данные ( лет работы/довольных клиентов....)
3. Каталог ( 5 категорий/ 80 подкатегорий/ ? товаров)
4. ? Популярные товары
5. Форма захвата / Акция
6. ? услуги
7. О компании + преимущества
8. Партнеры
9. Отзывы
10. Форма захвата / Акция
11. Частые вопросы
12. Контакт

Цветовое решение:
Меню сайта:
СЕКЦИЯ 1:
Главный экран
Важная информация: О главном экране

Каким должен быть первый экран лендинга

1. Ориентирующий. За несколько секунд позволяет понять, где оказался посетитель и чему примерно посвящен сайт.
2. Информативный. Четко и лаконично сообщает, какой продукт предлагается, в чем его польза для клиента и что нужно сделать, чтобы этот продукт получить.
3. Лаконичный. Текст и визуал сбалансированы, нет лишних элементов — все находится на своих местах. Предложения без лишних уточнений и сложных формулировок. Дизайн не отвлекает от сути оффера.
4. Убедительный. Текст написан грамотно и проверен на опечатки. В нем нет штампов, канцелярита и витиеватых фраз. Дизайн соответствует стилю бренда, не содержит явно стоковых фото, странных декоративных элементов.
5. Правдивый. Не кликбейтит, не заманивает заведомо ложными, но яркими формулировками.
6. Цепляющий. Производит впечатление. Очаровывает тем, как визуально необычно показан продукт или как интригующе о нем рассказано. Вызывает желание узнать о продукте больше.

Исследования о важности первого экрана:

7 из 10 пользователей не листают дальше первого экрана, а покидают сайт сразу. Чтобы такого не происходило, первый экран должен четко отражать ценность предложения.
Около 80% времени на сайте человек изучает первую страницу, а на остальные страницы остается лишь 20% времени. Поэтому суть лучше выносить в начало, то есть на первый экран.

Три главные задачи первого экрана:

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

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

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

Оффер:

• 5W — оффер отвечает на 5 вопросов: что, кто, почему, когда, где. Формула помогает сегментировать аудиторию на небольшие группы.
Пример: 2 килограмма суши MUCHI за 1300 рублей каждый вторник в ресторане HALAPE.

• AIDA — внимание, интерес, желание, действие. Техника используется в копирайтинге для всего текста, но подходит и для первого экрана.
Пример: мы помогли 1000 клиентов масштабировать бизнес. Наш специалист просчитывает все зоны роста и дает подробный алгоритм. Узнайте подробнее.,

• 4U — польза, специфика, уникальность, срочность. Оффер по формуле одновременно отстраивает от конкурентов и располагает клиента к себе.
Пример: сбросьте до 3 кг лишнего веса за 20 дней с диетой от доктора Зябликова.

Подзаголовок

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

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

Кнопка / призыв к действию

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

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

Примеры призыва к действию

Хорошо:
– Получить консультацию
– Узнать больше
– Получить мой подарок
– Увеличить продажи
– Получить бесплатно
– Принять участие

Плохо:
– Отправить
– Заказать
– Купить

Изображение / фон :

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

Основное в изображениях — качество. Не обратили на него внимание, не устранили шумы, разместили нечеткую картинку, видны пиксели? Конверсия «убита»!

Какую информацию подготовить ? 

1. Логотип (в формате PNG - прозрачный фон,или какой есть)
2. Адрес
3. Ссылки соцсетей ( ВК, инстаграмм ...)
4. Номер телефона
5. Номера телефонов для мессенджеров ( viber,whatsApp)+ имя пользователя telegramm
6. Адрес почты email
7. Оффер - Заголовок - услуги/продукта
8. Подзаголовок ( если есть что расшифровать)
9. Буллиты 3-4 шт ( преимущества /фишки)
10. Название кнопки ПРИЗИВ К ДЕЙСТВИЮ + поля для ввода в форме которая открывается по кнопке ( может быть открытая форма )
11. Тематическое фото для фона главного экрана ( разрешение не менее 1920 px по ширине) если есть ( либо дать описание какой образ искать)

Примеры исполнения и визуализации:
/ 3
СЕКЦИЯ 2:
Статистические данные по компании / продукту
Какую информацию подготовить ? 

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

Примеры показателей
  • стаж работы;
  • количество клиентов;
  • количество проведенных переговоров за месяц / неделю / день;
  • количество посещенных городов / компаний / станций метро;
  • количество проданных товаров;
  • сумма денег, заработанных моими клиентами;
  • количество выигранных судебных процессов;
  • прирост клиентской базы;
  • количество позитивных и негативных отзывов;
  • сколько книг на профессиональную тему прочел;
  • сколько браков заключено и детей родилось благодаря мне;
  • сколько деревьев посадил на благо города;
  • сколько людей стало жить лучше благодаря мне и т. д.
  • общее количество за все время;
  • количество за период (год, месяц, неделя, день);
  • среднее количество за период;
  • процент.
Примеры исполнения и визуализации:
/ 2
СЕКЦИЯ 3:
Каталог продукции
Какую информацию подготовить ? 

Перечень  основных категорий  продукции :
- Название категории
- фото продукта / услуги 
- может быть цена ОТ

Примеры исполнения и визуализации:
/ 1
СЕКЦИЯ 4:
Популярные товары
Какую информацию подготовить ? 

Список товаров до 10 шт  самых ходовых популярных товаров
Можно сделать по разным группам товаров с переключалкой вверху в рамках одной секции
например https://gadget-line.ru/dyson#!/tab/846710988-4)

Примеры исполнения и визуализации:
/ 1
СЕКЦИЯ 5:
Лид магнит / Форма захвата / призыв / Акция
Важная информация о Лид магните

Не любой бесплатный бонус может стать лид-магнитом — тут есть свои определенные требования. Лид-магнит должен быть:

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

Конкретным.
Четко пропишите, чем ценен этот бонус и чем он поможет потенциальному клиенту. Один бонус = одно предложение.

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

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

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

Обучающие лид магнит

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

К обучающим лид-магнитам относятся чек-листы, инструкции, планы, инфографика, электронные книги, подборки, шаблоны, фрагменты материалов, вебинары, мастер-классы, курсы. Как видите, материалов масса.

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

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

Обучающие лид магнит

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

К обучающим лид-магнитам относятся чек-листы, инструкции, планы, инфографика, электронные книги, подборки, шаблоны, фрагменты материалов, вебинары, мастер-классы, курсы. Как видите, материалов масса.

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

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

Скидочный лид магнит

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

Итак, к скидочным лид-магнитам можем отнести сами скидки, промокоды, купоны, бонусные рубли, сертификаты и ваучеры.

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

А вот как раз реализация того, как компания дает скидку за подписку на рассылку.

Скидочный лид магнит

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

Итак, к скидочным лид-магнитам можем отнести сами скидки, промокоды, купоны, бонусные рубли, сертификаты и ваучеры.

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

А вот как раз реализация того, как компания дает скидку за подписку на рассылку.

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

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

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

Какую информацию подготовить ? 

Предложить НУЖНОЕ , то что важно клиенту, может частый запрос , может банально - Купи на 10 000р - доставка бесплатно - ну вообщем это ваша внутренняя кухня и маркейтинг

Примеры исполнения и визуализации:
/ 2
СЕКЦИЯ 6:
Услуги / Доставка
Какую информацию подготовить ? 

Информацию об услуге , желательно с тезисной презентацией преимущест

Примеры исполнения и визуализации:
/ 1
СЕКЦИЯ 7:
О КОМПАНИИ + преимущества
Какую информацию подготовить ? 

Краткое опсиание о компании ( до 5 предложений)
фото производства, офиса
Сертификаты
Преимущества 4-6 шт ( отражающие уникальность и фишки которые являются тригером для выбора поставщика: Срок , цена, гарантия, параметры )


Фото команды? Фото директора с речью от первого лица ?

Примеры исполнения и визуализации:
/ 5
СЕКЦИЯ 8:
Партнеры
Какую информацию подготовить ? 

Логотипы компаний в формате png ( прозрачный фон ) , либо список названий компаний если это известные и лого легко найти 
до 16 шт

Примеры исполнения и визуализации:
/ 1
СЕКЦИЯ 9:
Отзывы
Какую информацию подготовить ? 

Лучше всего  сейчас доверяют видеотзывам ( но это есть не у всех )
Как вариант сделать скрины с телефона ( с Авито, 2 гис, Яндекс карты, ваши месеснджеры, Flamp, Ozon, Wildberies ) - скрины во весь экран телефона 

Примеры исполнения и визуализации:
/ 3
СЕКЦИЯ 10:
Форма захвата / Акция
Какую информацию подготовить ? 

Предложить НУЖНОЕ , то что важно клиенту, может частый запрос , может банально - Купи на 10 000р - доставка бесплатно - ну вообщем это ваша внутренняя кухня и маркейтинг

Примеры исполнения и визуализации:
/ 2
СЕКЦИЯ 11:
FAQ /  Частые вопросы - ответы
Важное о рубрике вопрос-ответ, или FAQ

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

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

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

Какую информацию подготовить ? 

Список частых вопросов от клиента - самые болевые ( ответы) точки ( 5-8 шт )

Примеры исполнения и визуализации:
/ 1
СЕКЦИЯ 12:
Контакты
Важное о секции Контакты - подвал 

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

Какую информацию подготовить ? 

Реквизиты компании
Карта - схема проезда
Дополнительные контакты к инф которая уже размещена на главном экране ( если есть такая)
Договор оферты 
Политика конфидециальности ( можно использовать шаблон)
Согласие на обработку ПД ( можно использовать шаблон)

Примеры исполнения и визуализации:
/ 2