Дыши легко

1. Вводная задача от заказчика, проблематика, цели

Компания «ПСК Фарма» пришла с запросом на создание информационного портала для пациентов с респираторными заболеваниями — астмой и ХОБЛ. Цель — донести важную медицинскую информацию в понятной форме и поддержать пациентов, вселив в них уверенность: с диагнозом можно жить полноценно. При этом нужно было учесть возраст аудитории (чаще — зрелые пользователи), соблюдать медицинские стандарты и сделать ресурс, которому доверяют. Информационный портал должен был быть не только полезным, но и живым — с элементами эмпатии, навигацией для врачей и возможностями распечатки и шеринга статей.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Аналитика

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

Дизайн

Из визуальных пожеланий — спокойствие и сдержанность, без перегруза. Однако мы предложили три концепции:

• Основная — акцент на дыхании: видео в промоблоке, плавная типографика, образы пациентов, с которыми можно себя ассоциировать.
• Медицинская — без лиц, упор на экспертность. Анимированный фон, логотип превращается в дерево — метафора роста и устойчивости.
• Альтернативная — чуть смелее: с анимацией дыхательных гимнастик и идеей сделать их интерактивными (в финале оставили в статике, чтобы не навредить пациентам).

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

Создали универсальную навигацию по статьям, добавили связанные материалы, реализовали страницы с тестами — для самопроверки уровня контроля над заболеванием. Цветовое кодирование (синий для астмы, зелёный для ХОБЛ) помогло быстро ориентироваться. Продумали и версию для слабовидящих.

Разработка

Главная страница обрела дыхание — в прямом смысле: реализовали курсорную анимацию, имитирующую вдох-выдох. Самый интересный вызов — блок дыхательных гимнастик: сложная, двухэтапная анимация концентрических кругов.

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

Добавили поиск — не только по статьям, но и по видео, тестам, материалам. Сделали всё на базе стандартных возможностей Битрикса — с точечной кастомизацией.

Контент

Тексты и тесты предоставил заказчик, что гарантировало достоверность. Мы оформили всё в соответствии с брендбуком и медицинскими рекомендациями. Особое внимание — инфографике: переработали её для простоты восприятия, облегчили визуально, вписали в стиль сайта.

3. Результаты сотрудничества

Получился ресурс, который не только выполняет функцию справочного портала, но и говорит с пользователем по-человечески: доступно, ясно, с заботой. Он стал полезным инструментом как для пациентов, так и для врачей, а неформальный подход к дизайну добавил эмоциональности и сделал проект запоминающимся. Позитивный визуал, продуманная структура, удобные механики тестирования — всё это делает «Дыши легко» живым и полезным сайтом.