Проект запущен

Сайт для специалистовАдаптивныйФарма1С-Битрикс

Сайт препарата «Релатокс» для АО «НПО «Микроген»

Сайт препарата «Релатокс®» для АО «НПО «Микроген»: спокойный, чистый дизайн для косметологов и неврологов, предупреждение для медицинских работников на входе и карта дистрибьюторов в 47 городах.

relatox.ru

Клиент: АО «НПО «Микроген»
Аудитория: Косметологи и неврологи, медицинское образование
Платформа: 1С-Битрикс
Формат: В рамках технической поддержки

Сайт для тех, кто принимает решения по делу: никакого шума, чёткая структура, фирменные цвета направлений и честное предупреждение на входе.

0города в карте дистрибьюторов, выбор из списка и на карте

0показаний на главной с иконками, у каждого свой цвет направления

0направления: косметология (фиолетовый) и неврология (синий)

О клиенте

АО «НПО «Микроген» — национальный производитель иммунобиологических лекарственных препаратов полного цикла, входит в холдинг АО «Нацимбио» Госкорпорации «Ростех». Релатокс® — один из препаратов компании.

Задача

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

Решение

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

Для медицинских работников

От закрытого входа к понятному предупреждению

Сначала сайт хотели закрыть полностью: вход по e-mail и коду, регистрация с загрузкой диплома или документа о квалификации и проверка. Дизайн всех окон был нарисован. Затем решили ограничиться предупреждением, что материалы предназначены для медицинских и фармацевтических работников.

Макет: вход в личный кабинет по e-mail — Было задумано Закрытый вход с подтверждением статуса

Макет: ввод кода из письма — Было задумано Закрытый вход с подтверждением статуса

Главная страница

Мозаика: фото и ключевые тезисы в одной сетке

Под первым экраном лежит мозаика из чёрно-белых портретов и цветных плиток с тезисами. Фиолетовый и синий повторяют цвета направлений. Наведите на плитку, чтобы увидеть её фото и текст.

Чёрно-белые фото не спорят с цветом плиток
Те же два цвета встречаются на всех страницах
Плитки складываются в одну колонку на телефоне

Желатин в составе — неиммуногенный стабилизатор^2,3

Длительность клинического эффекта — 4–6 месяцев³

Высокое содержание активного нейропротеина⁴

Многоступенчатая система очистки, снижающая общую белковую нагрузку⁵

Макет и результат

Без прототипов: сразу дизайн в Figma

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

Макеты в Figma для компьютера (1920 px) и телефона (360 px) на каждую страницу
Отдельные макеты окон входа, регистрации, куки и соглашения
Сайт собран по макету и дополнен деталями при разработке

Макет → сайт

МакетСайт

Показания к применению

Восемь карточек в двух цветах

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

Коррекция гиперкинетических складок лица

Коррекция вертикальных морщин шеи

Аксиллярный гипергидроз

Хроническая мигрень

Блефароспазм

Фокальная спастичность мышц верхней конечности

Цервикальная дистония

Спастичность мышц верхней и нижней конечностей у детей

Блок показывает оформление карточек. Медицинская информация о препарате приведена на сайте клиента.

Макет · главная целиком

От героя с портретами до карты дистрибьюторов

Первый экран с тремя портретами, мозаика тезисов, блок о препарате с упаковкой, показания, о компании, карта «Где купить», обратная связь и контакты. Скролльте страницу, окно справа прокручивается вместе с вами.

relatox.ru

Макет главной страницы «Релатокс» целиком

Внутренние страницы по макетам

Макет страницы «Косметология» — Косметология: анатомические схемы и дозировки

Макет страницы «О препарате» — О препарате: таймлайн регистрации и производство

Макет страницы «Применение» — Применение: показания по направлениям

Где купить

47 городов и карта дистрибьюторов

Посетитель выбирает город в списке или на Яндекс Карте и видит официальных дистрибьюторов. Начните вводить название в поле, чтобы отфильтровать города.

Где купить

Адаптивность

С телефона так же удобно

Врачи заходят и между приёмами. Для телефона нарисован отдельный макет каждой страницы (360 px): меню прячется в кнопку, плитки встают в колонку, показания идут списком, а список городов остаётся удобным для прокрутки.

ТелефонКомпьютер

Что вошло в работу

Под капотом

Сайт для специалистов

Задача была в том, чтобы врач быстро нашёл суть: цвета направлений, понятная навигация и спокойный тон.

Дизайн по макетам Figma
Цвета косметологии и неврологии
Предупреждение для медицинских работников
Адаптивная вёрстка

Где купитьГорода списком и на Яндекс Карте, дистрибьюторы по региону
Поиск по сайтуСтрока поиска в шапке, результаты сразу под ней
Обратная связьФорма с темой обращения, вопросом и обязательными согласиями
ПредупреждениеСоглашение для медицинских работников и уведомление о cookies

Bitrix

Сайт на 1С-Битрикс

Mobile-FriendlyПолная адаптивность проекта
Дизайн без прототиповСразу макеты в Figma из-за сжатых сроков
В рамках поддержкиСайт сделан в работе по договору поддержки клиента

Как работали

Коротко и по делу

1
Задача
Аудитория, направления, сроки и бюджет
2
Дизайн
Макеты в Figma без отдельного прототипа
3
Разработка
1С-Битрикс, адаптив, карта дистрибьюторов
4
Вход для медиков
Закрытый вход заменили предупреждением
5
Запуск
Тесты, правки, публикация

Страница описывает дизайн и разработку сайта и не является рекламой лекарственного препарата. Препарат отпускается по рецепту, сайт «Релатокс» предназначен для медицинских и фармацевтических работников. Названия и торговые марки принадлежат их владельцам.