Корпоративный сайт «ПСК Фарма»

1. Запустить сайт к Петербургскому международному экономическому форуму (жёсткий дедлайн).

2. Передать через дизайн экспертность и ценность компании, сделать образ запоминающимся.

3. Разработать две концепции главной страницы: сдержанную и креативную с «живой молекулой».

4. Реализовать анимацию молекулы при скролле и динамические фоновые эффекты.

5. Создать аккуратные внутренние страницы: о компании, производстве, карьере, пресс-центр, фармаконадзор.

6. Сделать каталог препаратов с удобной фильтрацией по сфере применения и форме выпуска.

7. Систематизировать данные о препаратах и оформить детальные страницы с ключевой информацией.

8. Разработать адаптивную форму фармаконадзора (для врачей и пациентов с разными сценариями).

9. Организовать итеративную разработку: сначала MVP с ключевыми страницами, затем расширение функционала.

10. Добавить поиск, английскую версию и расширенные промо-страницы на втором этапе.

1. Успели запустить сайт к ПМЭФ, начав с MVP и доработав функционал позже.

2. Реализовали креативную концепцию с «живой» молекулой и анимациями, которые выделили сайт среди конкурентов.

3. Сделали удобный каталог препаратов с фильтрацией и детальные страницы с систематизированной информацией.

4. Разработали адаптивную форму фармаконадзора с разными сценариями для врачей и пациентов.

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

Затем включили креатив на полную. На главной появилась «живая» молекула, которая движется за пользователем по скроллу, меняется и ставит акценты в нужных местах. Вдохновением стал логотип «ПСК Фарма» — дерево из окружностей, отсылающее и к химии, и к строению лёгких. Молекула идеально вписалась в промоблок и провела посетителя дальше по странице.

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

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

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

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

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

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

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

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

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

С таким дедлайном, как ПМЭФ, без поэтапной разработки — никак. Мы пошли по пути MVP: сначала собрали самые необходимые страницы, а остальное оформили как простые текстовые. Первая версия сайта вышла за несколько дней до форума, и компания успела громко заявить о себе на главном событии года.

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

Мы запустили сайт в срок к ПМЭФ, начав с MVP и постепенно расширяя функционал в следующих спринтах. Главной фишкой стала креативная концепция с «живой» молекулой и анимациями, которая задала тон всему проекту. Мы сделали удобный каталог с фильтрацией и детальные страницы препаратов на основе систематизированных данных, а также разработали адаптивную форму фармаконадзора с разными сценариями для врачей и пациентов. В итоге получился цельный и современный корпоративный сайт, который выгодно выделяет «ПСК Фарма» среди конкурентов.