ПРОТОТИП САЙТА:
Дровокол45
Согласованная структура по ТЗ:
  1. главная секция
  2. Продукция
  3. О компании
  4. Преимущества
  5. ⁠⁠Отзывы
  6. Частые вопросы
  7. Вакансии
  8. Галлерея
  9. Контакты
Цветовое решение:
Меню сайта:
СЕКЦИЯ 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 по ширине) если есть ( либо дать описание какой образ искать)

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

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

Нужна ли кнопка с формой на заказ? какие поля у формы делаем?

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

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


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

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

Перечень услуги. / короткое описание / цена? 

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

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

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

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

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

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

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

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

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

Фото + название болезни или направление лечения  / либо просто фото пациентов с вашим продуктом

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

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

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

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

Примеры исполнения и визуализации:
/ 5
Секция ВАКАНСИИ

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