Упаковка невидимого: дизайн для Air Doctor

Air Doctor — макет одностраничного сайта для линейки товаров, которые помогают бороться с неприятными запахами, бактериями и вирусами. Проект создавался как продуктовый лендинг: с простым объяснением, каталогом, преимуществами, сценариями применения, отзывами, картой и формой заявки.

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

О проекте

Air Doctor — демонстрационный продуктовый лендинг для средств защиты от вирусов, бактерий и неприятных запахов. На странице представлены разные форматы продукции: спрей, гель, портативный бейдж, настольный вентилятор и другие товары.

Целевая аудитория проекта:

• взрослые с детьми;
• пожилые люди;
• офисные сотрудники;
• врачи;
• сотрудники учреждений;
• люди, которые часто пользуются общественным транспортом;
• покупатели, которым важны чистота, безопасность и комфорт.

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

Задача

Перед проектом стояла задача создать продающий одностраничный сайт для линейки продукции Air Doctor.

Основные задачи:

• объяснить назначение продукта;
• показать товары в каталоге;
• сделать акцент на здоровье и безопасности;
• выделить преимущества;
• показать сценарии применения;
• добавить отзывы;
• разместить карту и форму обратной связи;
• сделать путь к покупке максимально коротким;
• сохранить чистую и спокойную визуальную подачу;
• подготовить макет под рекламу и мобильный трафик.

Концепция лендинга

Главная идея страницы — простота и доверие.

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

Лендинг строится по прямой логике:

проблема → защита → продукт → где использовать → почему работает → отзывы → заказ.

Такой сценарий помогает быстро провести пользователя от интереса к покупке.

Хедер

В верхней части страницы расположен хедер с основными элементами интернет-магазина и контактов.

В него входят:

• логотип Air Doctor;
• название бренда;
• телефон;
• email;
• адрес;
• кнопка входа в личный кабинет;
• индикатор корзины;
• количество товаров;
• сумма заказа.

Хедер сразу показывает, что это не просто информационная страница, а лендинг с возможностью покупки. Пользователь видит контакты, корзину и понимает, что товар можно заказать прямо на сайте.

Первый экран

Первый экран построен вокруг сильного и понятного посыла:

«Защити своё здоровье и здоровье близких»

В hero-блоке используются:

• иллюстрация счастливой семьи;
• иконки преимуществ;
• акценты на защите от вирусов;
• акценты на защите от бактерий;
• акценты на устранении запахов;
• CTA-кнопка «Заказать».

Первый экран не пытается объяснить всё сразу. Он работает на эмоцию и базовую потребность: защита себя и близких.

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

Описание продукта

Следующий блок объясняет, что представляет собой продукт.

В нём раскрываются:

• идея нового поколения защиты;
• название продукта;
• краткое описание технологии;
• упоминание диоксида хлора;
• защита от бактерий и запахов;
• акцент на безопасность;
• акцент на комфорт.

Важно, что описание подаётся не как научная статья. Пользователю не нужно разбираться в химии на уровне лабораторного отчёта. Ему нужно понять принцип: продукт помогает очищать пространство от неприятных запахов и снижать риски, связанные с бактериями.

Описание работает как рациональное продолжение первого экрана. Сначала пользователь увидел пользу, теперь получает объяснение.

Каталог продукции

На лендинге предусмотрен каталог товаров.

В нём представлены:

• настольный вентилятор;
• спрей;
• гель;
• портативный бейдж.

Для товаров указана фиксированная цена:

500 рублей

Под каждой карточкой размещена кнопка:

«В корзину»

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

Это особенно важно для недорогих физических товаров. Чем короче путь от интереса до покупки, тем выше шанс заказа.

Карточки товаров

Карточки товаров сделаны простыми и понятными.

В них можно разместить:

• изображение продукта;
• название;
• краткое описание;
• цену;
• кнопку покупки.

Для линейки Air Doctor важно показать разные форматы применения. Один пользователь выберет спрей, другой — гель, третий — бейдж, четвёртый — настольное решение.

Разные форматы помогают закрыть разные сценарии: дом, офис, транспорт, рабочее место, личное использование.

Сферы применения

Отдельный блок посвящён сценариям использования.

В нём показано, где можно применять продукцию:

• в транспорте;
• на работе;
• в магазинах;
• в школах;
• в гостиницах;
• в медицинских учреждениях;
• дома;
• в общественных местах.

Этот блок помогает пользователю примерить продукт на свою жизнь.

Если просто сказать “защита от запахов и бактерий”, это звучит абстрактно. А когда показываются конкретные сценарии, становится понятнее: можно использовать в офисе, брать с собой в транспорт, применять дома или в учреждении.

Для таких продуктов сценарии применения продают не хуже самого описания.

Преимущества продукта

Блок преимуществ строится на трёх ключевых тезисах:

• антибактериальный эффект ×2,5;
• защита до 99% бактерий;
• безопасность для человека.

Каждый тезис сопровождается иконкой и короткой подписью.

Такой формат удобен для восприятия: пользователь быстро считывает главные аргументы без перегруза. Цифры усиливают доверие и делают обещание более конкретным.

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

Отзывы пользователей

На странице предусмотрен блок отзывов.

В нём используются:

• аватары;
• имена;
• должности;
• текст отзыва;
• кнопка «Оставить отзыв».

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

Даже если в макете тексты отзывов частично шаблонные, сам блок показывает правильную структуру: пользовательские мнения, визуальные карточки и возможность оставить свой отзыв.

Карта и форма обратной связи

В нижней части лендинга размещены карта и форма заявки.

Карта показывает адрес компании в Москве.

Форма обратной связи содержит:

• поле имени;
• поле телефона;
• кнопку «Оставить заявку».

Этот блок закрывает два сценария:

• пользователь хочет связаться с компанией;
• пользователь хочет понять, где находится организация.

Для лендинга физического товара карта и контактная форма усиливают доверие. Пользователь видит не просто кнопку покупки, а реальную компанию с адресом и способом связи.

Футер

Футер завершает страницу и содержит служебную информацию.

В нём размещены:

• контактные данные;
• предупреждение об оригинальности продукции;
• защита от подделок;
• копирайт.

Блок про оригинальность продукции важен для товарного лендинга. Он помогает подчеркнуть, что покупателю предлагают официальный продукт, а не случайный аналог неизвестного происхождения.

Визуальный стиль

Дизайн лендинга строится на ассоциациях с чистотой, здоровьем и спокойствием.

Основная палитра:

• голубой;
• белый;
• зелёный.

Голубой отвечает за чистоту и свежесть. Белый — за медицинскую аккуратность и лёгкость. Зелёный — за безопасность, здоровье и природные ассоциации.

Визуальные элементы:

• плавные волны;
• мягкие формы;
• иконки;
• доброжелательные фотографии;
• светлый фон;
• чистые карточки;
• яркие CTA-кнопки.

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

Конверсионная логика

Лендинг построен как прямой путь к покупке.

Блок	Задача
Хедер	Дать контакты, корзину и быстрый доступ
Hero	Показать пользу для здоровья и семьи
Описание	Объяснить продукт простым языком
Каталог	Дать возможность купить
Сферы применения	Показать сценарии использования
Преимущества	Подкрепить доверие цифрами
Отзывы	Добавить социальное доказательство
Карта и форма	Дать контакт и заявку
Футер	Закрыть страницу служебной информацией

Пользователь не должен теряться. Он видит продукт, понимает назначение, выбирает формат и может добавить товар в корзину.

Техническая логика макета

Проект можно реализовать как HTML-лендинг или как сайт на CMS.

Возможная структура реализации:

• HTML5;
• CSS3;
• адаптивная сетка;
• JavaScript для корзины;
• JavaScript для формы обратной связи;
• интеграция карты через API Яндекс.Карт;
• возможная реализация на WordPress с кастомной темой.

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

Почему такой подход подходит для продукта Air Doctor

Air Doctor продаёт не просто физический товар, а ощущение защиты, чистоты и контроля. Это сложно упаковать, потому что эффект не так очевиден, как у одежды, мебели или техники.

Поэтому лендинг должен делать три вещи:

• показывать, зачем нужен продукт;
• объяснять, где его использовать;
• давать быстрый путь к покупке.

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

Особенности проекта

Ключевые особенности лендинга:

• продуктовый фокус;
• одностраничная структура;
• каталог товаров;
• цена и кнопки покупки;
• сценарии применения;
• преимущества с цифрами;
• отзывы пользователей;
• карта;
• форма обратной связи;
• корзина;
• личный кабинет;
• светлая медицинско-продуктовая палитра;
• подготовка под рекламу и прямые продажи.

Результат

В результате получился макет одностраничного сайта для продажи продукции Air Doctor.

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

Проект хорошо подходит для прямых продаж, рекламного трафика, промо-кампаний и дальнейшей адаптации под мобильные устройства.