Задача
Разработать мобильный лендинг для женского косметического продукта SkinFormer, направленного на борьбу с растяжками, на основе комбинации референсов и промо-материалов.
Требовалось сохранить эффективность верстки и блоков конкурентов, при этом улучшить визуальную часть, структурировать тексты, обеспечить их редактируемость в HTML и адаптировать дизайн под целевую аудиторию (женщины после беременности).
Подход
Мы провели анализ нескольких лендингов из смежной ниши и выделили наиболее конверсионные элементы: работающие заголовки, логика CTA, скрипты срочности (таймеры) и визуальные паттерны.
Вместо использования копипасты готовых решений, мы собрали лендинг-конструктор, где каждый блок был переработан под продукт и целевую аудиторию. Важным требованием было отделение текста от графики — все тексты выведены в HTML. Цветовая гамма и изображения подбирались исходя из эмоционального фона: доверие, женственность, безопасность.
Что реализовано
Стартовый экран
Имплементирован таймер обратного отсчета с автоперезапуском по циклу (без фликера).
Размещено фоновое изображение женщины с растяжками, адаптированное под retina-экраны и мобильную вёрстку.
Добавлено изображение продукта, масштабируемое без искажения в адаптивной вёрстке.
Заголовок и подзаголовок сверстаны в HTML, с возможностью редактирования через CMS или прямо в коде. Разметка с упором на семантику
Экран проблематики
Полностью кастомизирована схема отображения зон появления растяжек: иконки + подписи.
Использована сетка Flexbox с приоритетом на mobile-first.
Вся текстовая часть размещена вне изображений, допускает быстрое редактирование.
Вставлен модуль lazy-load для графики, чтобы ускорить загрузку.
Экран решения
Визуальный стиль блока сохранён из выбранного референса, переписана вся структура под проект.
Все подпункты решения сверстаны с отдельными якорями — улучшено сканирование при просмотре.
Обновлён шрифт, увеличены отступы и добавлена анимация появления для удержания внимания.
Блок «Доказательство»
Разработана таблица-сравнение по типу "SkinFormer vs конкуренты" с использованием CSS Grid.
Данные оформлены в виде списка с псевдоиконками и microcopy-текстами.
Размечено структурировано: список + визуальные теги для продуктов.
Блок "SkinFormer vs лазер"
Добавлена секция с фотографией врача, оформленная в стиле медицинского инфографика.
Использован контрастный фон и карточки с фактами для повышения вовлеченности.
Произведена верстка текста из десктопной версии в мобильной обертке, без потери структуры.
Отзывы
Имплементированы слайдер и карточки отзывов с реальными фотографиями и lazy-loading.
Картинки приведены к единому формату (1:1) с минимизацией веса без потери качества.
Каждый отзыв заверстан с подписью, city-tag и заголовком.
Блок "Доставка и оплата"
Использован шаблон с предыдущего проекта: форма + этапы доставки.
Подключена валидация формы через JavaScript, с UX-оптимизацией для тач-интерфейсов.
Футер и форма заказа
Сверстан блок с финальным CTA и повторением формы заказа, стилизован отдельно от стартового.
Заголовок и кнопка отделены от фона, усилен контраст для читабельности.
Проверена корректность работы формы на Android WebView и Safari iOS.
Интерфейс и макеты проекта
Результат
-
Лендинг адаптирован под мобильные устройства, скорость загрузки — менее 1.8 сек (PageSpeed Mobile).
-
Все тексты вынесены в HTML: готовы к A/B тестированию и SEO.
-
Внедрен обратный таймер и lazy-load изображений, что снизило нагрузку на трафик и увеличило глубину скроллинга.
-
Логика блоков спроектирована под женскую ЦА: акцент на визуальные болевые точки и мягкие CTA.
-
Готов к размещению как standalone-страница или часть воронки через трекер.
