Что в видео-уроке:
В уроке оформляем блок с тестом-калькулятором. Собираем текст, список и CTA в единую композицию, добавляем изображение подарка и используем уже знакомые цвета, формы и расстояния.
Не вводим новые формы без необходимости
При оформлении теста-калькулятора используем уже существующую визуальную систему: светлые и серые поверхности, терракотовую кнопку, знакомые скругления и маркеры списка.
Можно проверить более активную терракотовую плашку или тёмную карточку, но если они начинают перетягивать внимание, лучше вернуться к спокойной светлой основе. Новый блок должен отличаться содержанием, а не набором новых декоративных приёмов.
Компонуем текст относительно изображения
Заголовок «Что вам нужно сделать сейчас» оставляем крупным, но не растягиваем на слишком большое количество строк. Основную текстовую часть выстраиваем по единой силовой линии и отводим под неё большую часть карточки.
Для изображения достаточно примерно четырёх колонок. Такое распределение позволяет сохранить текст свободным и одновременно добавить заметный визуальный акцент справа.
Внутри карточки продолжаем уже знакомые расстояния — около 60–80 px от краёв и меньшие интервалы между связанными текстовыми элементами.
Вместо очередного дома показываем результат для пользователя
В блоке уже говорится о расчёте стоимости дома, подборке проектов и бонусе. Поэтому вместо ещё одной фотографии архитектуры используем изображение подарка.
Так визуальный ряд становится разнообразнее, а фотография дополнительно привлекает внимание к выгоде. Пользователь видит коробку с бантом, замечает необычный для страницы объект и начинает искать в тексте объяснение, какой бонус сможет получить.
Изображение не обязательно буквально повторяет заголовок. Оно может работать как смысловой акцент и направлять внимание к важной части предложения.
Список делаем компактным
Пункты с результатами прохождения теста оформляем обычным наборным текстом и небольшими круглыми маркерами, аналогичными тем, которые уже использовались выше.
Для компактных списков применяем ранее созданный стиль Body List с меньшими межстрочными расстояниями. Размер маркеров оставляем небольшим, а расстояние до текста подбираем визуально — на светлом фоне около 10 px воспринимается свободнее, чем слишком плотная компоновка.
Выстраиваем иерархию текста и CTA
Подзаголовок можно оформить более жирным начертанием, не создавая для него новый типографический уровень. Основной список остаётся легче, а терракотовая кнопка получает главный цветовой акцент.
Расстояние между связанным текстом и кнопкой делаем меньше, чем расстояние до других смысловых частей карточки. Так CTA воспринимается продолжением предложения, а не отдельным случайным элементом.
Все элементы выравниваем преимущественно по одной левой силовой линии. Дополнительные смещения допустимы, если они заранее заложены в композицию, но вводить их только ради разнообразия необязательно.
Изображение помогает усилить предложение
Сам текст объясняет, что пользователь может пройти тест-калькулятор, получить ориентировочный расчёт, подборку проектов и один из бонусов при заказе строительства.
Фотография подарка усиливает именно последнюю часть предложения и добавляет эмоциональный акцент. Благодаря этому карточка не превращается в очередной информационный блок с домом и заметнее отличается от соседних секций.
Проверяем блок в контексте всей страницы
После завершения секции важно отдалить макет и посмотреть на неё вместе с предыдущими блоками. Проверяем ритм светлых и тёмных областей, повторение скруглений, расположение терракотовых акцентов и общую плотность страницы.
В результате блок использует уже знакомый визуальный язык, но получает собственный характер за счёт нового изображения и предложения с бонусом. Это позволяет сохранить целостность лендинга и одновременно избежать однообразия.
