Задача
Создать адаптивный мобильный лендинг для косметического продукта, ориентированного на беременных и кормящих женщин.
Основная цель — адаптировать референс-дизайн под новую продуктовую нишу, заменив графику, тексты и визуальные акценты, сохранив при этом структуру и общую стилистику. Все тексты должны быть размещены не на картинках, а как редактируемые HTML-элементы, чтобы обеспечить гибкость в дальнейших изменениях.
Подход
Проект стартовал с технического и визуального аудита текущего референса. Далее был составлен пошаговый чек-лист изменений: от замены изображений и текстов до модификации блоков с отзывами и повторным оформлением футера.
Для обеспечения полной редактируемости все текстовые элементы были выведены из графики и сверстаны в HTML с применением CSS-стилей, поддерживающих адаптивность и сохранение фирменной палитры. Особое внимание — к UX: кликабельность СТА, навигация и восприятие блоков с проблемами/решениями.
Что реализовано
Стартовый экран
Добавлен верхний блок с номером телефона по техническим требованиям клиента.
Изменено основное изображение на адаптированное под ЦА (молодая мама с ребенком), с учетом пропорций и фокуса на моб. устройствах.
Заголовки и подзаголовки вынесены в HTML, без текстов на картинках.
Сохранены элементы ограничения предложения («осталось 27 баночек») и CTA без изменения логики.
Экран проблематики
Полностью заменены изображения с учетом визуальной стилистики проекта.
Переписаны и внедрены новые тексты, сверстанные в адаптивной сетке.
Тексты не зашиты в графику, доступны для редактирования в HTML.
Экран решения
Переподключена структура блока с возможностью замены текстового контента без правки верстки.
Произведена базовая ревизия верстки и цветов для повышения визуального акцента на УТП.
Временно оставлен старый текст — внесены комментарии в код для дальнейшей замены заказчиком.
Блок "Изменения"
Заменено основное изображение на релевантное (визуально соотносимое с дерматологическими улучшениями).
Внедрена семантическая разметка (section + figure) для улучшения SEO и индексации.
Блок "Рецепт"
Сохранена существующая визуальная структура.
Приведен к единому стилю с измененным предыдущим экраном (отступы, шрифты, цветовые элементы).
Блок "Доставка и оплата"
Оставлен без изменений по просьбе клиента.
Произведена проверка на корректность отображения при изменении текстов.
Блок "Отзывы"
Заменены все изображения пользователей, приведены к единому размеру и весу.
Существующие тексты временно сохранены, но выведены в отдельные HTML-элементы для будущей замены.
Добавлена lazy-loading подгрузка изображений для ускорения загрузки на мобильных устройствах.
Футер и форма заказа
Заменено фоновое изображение на уникальное (беременная девушка), без дублирования со стартовым экраном.
Сохранена логика формы: поля, чекбокс, юридическая информация.
Проверена корректность отправки и отображения формы на всех популярных мобильных браузерах.
Интерфейс и макеты проекта
Результат
-
Обновлен лендинг без изменения основной структуры и логики.
-
Все тексты вынесены в HTML и доступны для редактирования без дизайнеров/верстальщиков.
-
Сайт остался в пределах исходной палитры, но визуально адаптирован под новую ЦА.
-
Настроена полная мобильная адаптивность и протестировано отображение в основных браузерах.
-
Оптимизирован вес изображений — ускорена загрузка при сохранении качества.
-
Готовность платформы к запуску рекламной кампании с возможностью быстрых правок в тексте.
