Как мы построили виртуальную клинику и перезапустили сайт для компании «Хоссер»

Компания «Хоссер» проектирует и строит медицинские учреждения: от чистых помещений до новых объектов и капитальных ремонтов. Делают они это с учётом требований медицинской практики и современных строительных технологий, поэтому заказчик получает комплексное решение «под ключ». Фокус – создание высокотехнологичных объектов здравоохранения на территории РФ и СНГ.

Направления деятельности компании:

● проектирование медучреждений;

● строительство и модернизация;

● производство и поставка модульных решений для чистых помещений;

● техническое обслуживание инженерных систем.

Старый сайт перестал соответствовать масштабу и позиционированию компании. Задача была сделать новый ресурс, который демонстрирует экспертность, упаковывает ключевые компетенции и останется актуальным еще несколько лет.

Клиенту нужен был имиджевый сайт, который работает на восприятие бренда, а не просто перечисляет услуги. Чтобы усилить этот эффект мы решили поработать с 3D-графикой и видео, но классический продакшн в 3D мог сделать бюджет слишком высоким. Поэтому часть визуальных сцен мы собрали с помощью AI-инструментов: это сократило объём ручной 3D-работы и помогло уложиться в желаемые бюджеты, четко следуя задаче. 

✔️ Что было сделано:

  ● провели аналитику: цели, смыслы бренда, сценарии пользователей,

  ● спроектировали структуру и наполнение разделов,

  ● собрали прототипы ключевых страниц,

  ● подготовили две дизайн-концепции (одна была сразу утверждена).

  ● сгенерировали AI-референсы клиники и собрали по ним 3D-модель (с ручной работой 3D-дизайнера),

  ● собрали сценарную главную страницу.

  ● сделали полностью сгенерированный шоурил и при этом в рамках имеющегося бюджета на проект,

  ● сделали дизайн внутренних страниц и адаптивы, сверстали, протестировали и интегрировали на WordPress.

На старте мы провели аналитику: уточнили позиционирование, зафиксировали задачи сайта и разобрали сценарии пользователей (что человек должен понять и сделать за 2–3 минуты на сайте). 

На основе этого мы:

  ● определили ключевые смыслы, которые сайт должен транслировать (экспертность, технологичность, доверие);

  ● собрали структуру разделов и логику навигации;

  ● определили наполнение ключевых страниц и трастовые блоки (проекты, компетенции, документы/факты).

Дальше спроектировали структуру будущего сайта:

  ● главная – рассказ о компании и компетенциях;

  ● «о компании» – опыт, география, подход, подтверждения;

  ● услуги/направления – проектирование, строительство, чистые помещения, инженерка;

  ● проекты – как доказательная база;

  ● новости/документы/контакты – поддержка имиджа и операционных задач.

Опираясь на цели и структуру, мы перешли к прототипированию, чтобы собрать удобный UX под ключевые сценарии. На этом этапе мы:

  ● разложили контент по сценариям для разных аудиторий (заказчики, партнёры, потенциальные сотрудники);

  ● собрали прототипы всех страниц в соответствии с логикой пользовательского поведения ;

  ● продумали раздел «проекты» как каталог портфолио для быстрого просмотра на отдельной странице сайта;

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

Когда стало понятно, что именно сайт должен говорить, мы перешли к вопросу, как он будет это делать. 

✔️ Две концепции – одна вне конкуренции

Мы подготовили две дизайн-концепции:

● обе опирались на идею технологичности

● обе были аккуратными и строгими по визуалу,

● отличались цветовыми акцентами и графическими приёмами.

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

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

Важно было создать: 

  ● ощущение современности и технологичности,

  ● инструмент, который позволит увидеть объект внутри и его устройство,

  ● акцент на компетенции в чистых помещениях и инженерных системах.

Мы нашли решение – связка 3D и генеративных инструментов:

  ● взяли за основу измененные чертежи объекта и с помощью ИИ сгенерировали прототип клиники;

  ● далее создали черновой 3D-рендер;

  ● наш 3D дизайнер доработал его в полноценную 3D-модель, которая стала основой серии иллюстраций.

Далее мы разработали сценарную историю для главной страницы, чтобы:

  ● визуально усилить первое впечатление,

  ● последовательно раскрыть экспертность клиники и самой компании.

Пользователь не просто видит один статичный экран:

Он как будто «заходит» в клинику и постепенно знакомится с её устройством, зонами и решениями, таким образом считываются ценности бренда «Хоссер» – ответственность, технологичность, новаторство.

Когда рассказать об экспертности компании – это хорошо, но показать – еще лучше. Тишина, камера, мотор! Но без дорогостоящих съемок и специальной техники. 

Как это было:

1. Написали сценарий ролика и детально описали пролёты камеры и ракурсы.

2. С помощью ИИ описали сцены и подготовили промпты для генерации стартовых кадров.

3. В Midjourney сгенерировали изображения и на их основе протестировали композицию. 

4. Важно: Midjourney пока не так хорошо справляется с видео, но такие быстрые генерации позволяют тестировать проверять гипотезы.

5. Финальные сцены делались в Higgsfield (Wan 2.5, Kling).

6. Итоговый результат мы собрали в After Effects и сделали всему видео однородный цвет, чтобы ролик выглядел цельно.

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

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

Мы собрали сайт на WordPress как на наиболее практичной готовой CMS под задачи клиента. Для заказчика – это знакомая и понятная админка без лишних сложностей, а для проекта – возможность дальше развиваться без привязки к одной команде. 

Чтобы контент редактировался легко, мы использовали Advanced Custom Fields (ACF): собрали структурированные поля и блоки, благодаря которым страницы обновляются в админке быстро и аккуратно, без риска сломать верстку.

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

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

В результате получился современный и стильный сайт, который:

  ● укрепляет имидж компании и вызывает доверие за счёт сочетания строгой структуры и продуманного визуала;

  ● делает визуальный акцент на ценностях и ключевой компетенции – чистых комнатах и высокотехнологичных медицинских объектах;

  ● формирует образ бренда «Хоссер» как новаторского игрока, который ставит высокие стандарты и берёт на себя ответственность за качество.

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