Лидогенерация с помощью лендинга: отрисовка блоков в прототипе

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

Перейдя на сайт wireframe, сверху вы увидите пустую сетку и меню. С помощью меню можно задать доп. настройки, выбрать вариант отображения (мобильный, десктопный и т.д.) и сохранить шаблон.

Для начала нужно настроить размер макета. Рекомендуем выставить ширину (Width), равную ширине вашего монитора минус 20 пикселей. А длину (Height) - 5000 пикселей. Делается это в настройках. Для примера мы выставили ширину 1900х5000.

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

1. Шапка

Приступаем к отрисовке первого блока — шапки сайта. Основные элементы, которые быть в шапке:

• Номер телефона или кнопка “Обратный звонок”;
• Якорное меню;
• Логотип агентства и логотип застройщика;
• Фото жилого комплекса;
• Оффер - Название жилого комплекса, торговое предложение, акции/скидки.

Разместим эти элементы в нашем шаблоне. Сначала нарисуем номер телефона в правом верхнем углу. Рисуем прямоугольник и выбираем тип “Text”:

Дальше пишем номер телефона, настраиваем размер шрифта и располагаем недалеко от краёв сетки в правом верхнем углу. В итоге должно получиться следующее:

Чтобы отредактировать текстовое поле, кликните по нему два раза, для удаления — выберите любой блок и нажмите Delete.

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

Переходим к логотипам. Как правило, они располагаются в левой части меню. Для этого рисуем прямоугольник и выбераем тип “Image”. Если место позволяет, добавляем кнопку обратного звонка или адрес + время работы.

В итоге должно получиться что-то типа этого меню:

Далее указываем, где будет располагаться фотография ЖК. Рекомендуем использовать всю ширину экрана, чтобы она была как бы фоном. Для этого просто рисуем очень большой прямоугольник и располагаем фото по всей длине. Если представить, что это — одна большая фотография, то ЖК на ней должен располагаться слева. После этого мы напишем наш оффер, который будет справа. Лучше сделать именно так, в таком порядке информация считываются нашим мозгом лучше всего. В итоге шапка будет выглядеть следующим образом:

Также, текст можно расположить справа и по центру. Главное, чтобы он не перекрывал фото ЖК. А ещё текст можно располагать в разных частях: что-то внизу, что-то наверху. Экспериментируйте и ищите свой собственный шаблон.

2. Описание ЖК

После того, как пользователь получил основную информацию ей, расскажем больше о самом ЖК. Покажите красивые фотографии, виды из окон, придомовую территорию — все, что может завлечь покупателя. Также, дополним свои фотографии текстом. В каком порядке и как располагать — дело вашей фантазии. Одни из самых популярных расположений:

Плиточное расположение:

Слайдер:

Списком:

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

2. Планировки

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

Помните, что удобство на первом месте. Можно сделать очень красивые и необычные блоки, но какой в них смысл, если пользователь не получит нужную информацию?

4. Доп. информация

Данные блоки могут встречаться по всему сайту, если они короткие. Например, небольшой блок длиной 300-400 пикселей, в котором можно разместить форму для скачивания буклета-презентации ЖК или планировок квартир. В качестве примера нарисовали форму для скачивания презентации:

Важно сначала получить контактные данные пользователя, и только потом поделиться обещанной презентацией. Такая механика полезна и универсальна для любых форм и файлов для скачивания. Не упускайте данную возможность!

⌘ ⌘ ⌘

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