Структура, контент и прототип лендинга
автор: Павел Станкевич
дата публикации: 11 февраля 2024 г.
последнее обновление: 26 августа 2025 г.
Здравствуйте, Люди!

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

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

Этапы создания лендинга

Я выделяю 7 этапов создания Landing Page:

  1. Анализ конкурентов
  2. Анализ целевой аудитории
  3. Создание УТП
  4. Создание структуры страницы
  5. Создание контента страницы
  6. Создание прототипа страницы
  7. Вёрстка страницы

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

Иными словами мы подходим к созданию структуры Landing Page с таблицами и УТП.

Создание структуры лендинга

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

Во время определения целевой аудитории мы пришли к нескольким выводам:

  • Наши клиенты делятся на тех кто будет перепродавать нашу продукцию и на тех кто является конечным потребителем: строительные, госкомпании, тепличные и животноводческие хозяйства.
  • Аргументы для конечных потребителей лучше всего убедят и тех, кто собирается перепродавать нашу продукцию.
  • Лендинг надо дополнить материалами для менеджеров закупочных отделов строительных компаний, госкомпании, тепличных и животноводческих хозяйств.
Структура landing page будет во многом зависеть от формулы по которой вы решили делать посадочную страницу:

AIDA (attention, interest, desire, action) или
PMPHS(pain, more pain, hope, solution)

Подробнее о классических формулах создания landing page читайте здесь.

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

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


Исходя из систематизированной информации в таблицах я составляю структуру которая теоретически понравится моей ЦА:
Структура лендинга
  1. УТП + главные преимущества.
  2. Основные преимущества
  3. Мы – производитель. Качество исходного сырья.
  4. Мы производим.
  5. Сферы применения поликарбоната.
  6. Материалы для скачивания
  7. Отзывы.
  8. Рейтинг организации.
  9. Хиты продаж.
  10. Все Преимущества.
  11. Карта и контакты.
  12. Подвал.
Если вы делаете сайт для клиента, то эту структуру надо согласовать с заказчиком. А если для себя, то обсудите её с заинтересованным лицом, например партнером по бизнесу.

Каким должен быть контент лендинга

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

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

    Если вы продаете матрасы, текст лендинга — история о том, как вы пришли к таким пружинам, материалам, технологиям изготовления и как они влияют на сон.

    Текст лендинга это история о продукте или взаимодействии ЦА с продуктом.

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

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

    УТП — Уникальное Торговое Предложение

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

    В итоге у меня получилось следующее УТП:
    УТП
    Гарантия до 15 лет
    Поликарбонат оптом от производителя №1 в Беларуси

    • Возможность изготовления любого размера и цвета.
    • Изготовление продукции под брендом заказчика.
    • Бесплатная доставка по всей Беларуси.
    • Отсрочка и рассрочка платежа.

    Призыв к действию: Запросить оптовые цены.

    Мотиватор, срочность: *Первым 5-и клиентам специальные условия.
    Пример первого экрана с УТП

    Основные преимущества

    В этом блоке я выделил ещё несколько основных преимуществ в классическом формате:

    • Крупнейший производитель поликарбоната в РБ
    • Самый большой склад поликарбоната в Беларуси
    • Доставка продукции по всей Беларуси
    • Широчайший ассортимент продукции из поликарбоната в РБ
    Пример блока с основными преимуществами

    Мы — производитель. Высококачественное сырье

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

    Позже блок надо дополнить ссылками на такие страницы как "История завода, Наше производство, Наш офис и Наш склад".
    Пример информации об организации

    Мы производим

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

    Это будет навигация по основным разделам каталога — разделам верхнего уровня.
    Пример подвала сайта

    Сферы применения поликарбонат

    Мы ищем всему подтверждение. И будет не лишним если ЦА ещё раз убедиться, что это предложение для неё.

    Следующий блок должен наглядно пояснить с чем клиент будет иметь дело, для кого этот товар или услуга. Он должен чётко дать понять подойдёт ли ему этот материал, его ли он искал.
    Пример блока описывающего для кого подойдёт продукция(поликарбонат).

    Материалы для скачивания

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

    Отзывы

    Положительные отзывы увеличивают конверсию и доверие к сайту и организации.

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

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

    Рекомендую собирать отзывы на платформах Яндекс и Google бизнес. Это одновременно поможет продвижению сайта.

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

    Рейтинг организации

    Разместим рейтинг организации в сервисах Яндекс и Гугл бизнес, а также ссылки на отзывы.
      Пример блока с рейтингом организации

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

      Мы — целый завод — преимуществ работы с нами много.

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

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

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

      Хиты продаж

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

        Контакты, точка на карте

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

        Этот блок можно закрепить на всех страницах вместе с подвалом сайта.
        Пример блока с контактами и точкой на карте.

        Подвал сайта

        Разместите в подвале сайта:

        • Логотип
        • Реквизиты организации
        • Основные номера телефонов
        • Кнопку заказа консультации
        • Адрес офиса, склада, филиала
        • Ссылки на социальные сети
        • Ссылки на нужную информацию
        • Кнопку возврата к началу страницы
        • Другую информацию которую посчитаете нужной
        Пример подвала сайта

        Чем ещё можно дополнить посадочную станицу

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

        Давайте я расскажу что ещё мы можем разместить на Landing Page.

        Аргументация

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

        Взгляните на мой сайт https://gost-teplitsa.by/

        Мы в самом начале делаем громкое заявление: "Теплицы самого высокого качества по самой низкой цене".

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

        Конверсионные блоки

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

        Информация о себе или об организации

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

        Преимущества одного над другим

        В нашем случае можно выделить преимущества поликарбоната над стеклом, а их очень много:

        • Высокая светопропускная способность (до 90% спектра). В то же время полимер рассеивает световые лучи, что создает более комфортные условия в помещении или теплице.
        • Теплоизоляция. Защищает от зимних морозов и летней духоты. Позволяет экономить на отоплении. Растения лучше переживают заморозки.
        • Легкий. Не нуждается в усиленных опорных конструкциях, прост в монтаже.
        • Устойчив к действию экстремальных температур (от -60 до +80 градусов) и их перепадам.
        • Безопасен. Устойчив к горению, при ударах не разбивается на острые осколки. Что особенно важно для садовых участков, где часто бывают дети.
        • Гибкий. Из поликарбоната удобно создавать конструкции различной формы, не используя специальное оборудование и не затрачивая дополнительные средства.
        • Пластичный - можно без труда сверлить, вырезать окна, люки, навесы, козырьки любой формы и размеров.
        • Наличие уф-покрытия защищает от негативного воздействия ультрафиолета.
        • Почти в 100 раз прочнее стекла. Выдерживает удары, сильный ветер, снег.
        • Устойчив к химическому взаимодействию.
        Пример блока с плюсами одного варианта и минусами другого

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

        Следующий этап проектирования сайта — прототипирование.

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

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

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

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

        Для создания прототипой онлайн вы можете воспользоваться сервисами https://excalidraw.com/ или https://www.tldraw.com/
        Пример прототипа сайта нарисованного от руки
        Made on
        Tilda