Обсудить проект

[Инструкция] Создание целевых страниц с хорошей структурой

  • Юзабилити и дизайн
  • 28 августа 2015
  • 2775
  • 5 минут

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

Отложите оформление до подходящего момента

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

Запишите то, о чём хотите сказать

Чтобы не допускать этой ошибки, я «пишу страницы» — пишу текст, а потом думаю о блоках страницы и картинках. Это помогает создать структуру и убеждающий контент, а графику добавить на готовую страницу. Подход отлично работает на страницах, где много текста. В этом плане меня восхищает страница о продвинутом курсе Главреда. А я покажу этот подход на примере страницы Школы маркетёров. Страницу я создавал, чтобы получить телефон и почту людей, которые готовы учиться интернет-маркетингу. Чтобы посетитель захотел учиться, важно рассказать ему о Школе. Для начала я написал короткое объяснение. «Школа маркетёров — курс по интернет-маркетингу. На курсе студенты, маркетологи и директора научатся следить за сайтом, создавать целевые страницы, покупать рекламу, писать посты и отправлять рассылки. Научившись, они начнут вести интернет-маркетинг сами или будут контролировать подрядчиков. Обучение по вечерам, по скайпу и на проекте ученика. Лучшим ученикам мы предложим работу».

Составьте структуру из заголовков и напишите текст разделов

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

Нарисуйте эскиз страницы и расставьте акценты

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

Разместите текст на странице и отредактируйте

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

Оформите страницу картинками и поправьте типографику

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

Соберите обратную связь по странице и снова редактируйте

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

Проверьте структуру готовой страницы

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

Шпаргалка

Алгоритм подхода похож на инструкцию по написание поста:

  1. Выпишите идеи об оформлении. Забудьте их до подходящего момента.
  2. Коротко запишите, о чём страница.
  3. Выпишите заголовки, чтобы сразу появилась структура. Описывайте разделы двумя словами, а потом объясняйте.
  4. Нарисуйте эскиз страницы, чтобы понимать куда какой текст разместить. Расставьте акценты в тексте, чтобы выделить важное на странице.
  5. Редактируйте текст на странице. Это позволит сразу увидеть, как он выглядит.
  6. Теперь доставайте идеи оформления. Подберите подходящие картинки и оформите страницу. Поправьте типографику.
  7. Покажите страницу коллегам и запустите на неё первых посетителей. Соберите обратную связь, а потом отредактируйте текст и структуру. Помните, страница становится сильнее с каждым шагом алгоритма.

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

Научим запускать целевые страницы в Школе маркетёров

По описанному алгоритму мы учим запускать целевую страницу в Школе маркетёров. Ученик делает это для своего проекта. Поэтому эффективность обучения может измерить новыми лидами. Ещё учим планировать интернет-маркетинг, продвигать сайт в поиске, искать ошибки на сайте, настраивать рекламу в «Яндекс.Директе» и социальных сетях, вести инбаунд-маркетинг, отправлять рассылки. Занятия в Школе начинаются каждые три месяца. Все 10 мест быстро раскупают.


Обсуди с другими
Обсудить проект
Выберите услугу,
впишите имя и телефон, нажмите кнопку
Нужна консультанция Экспресс-аудит Реклама Аналитика Анализ конкурентов Стратегия ROI-маркетинг SMM Блог Сайт Другое
Нажимая кнопку, вы соглашаетесь с  Условиями обработки персональных данных