Разработка корпоративного сайта VisionLabs

VisionLabs — подразделение MTS AI, которое разрабатывает продукты на основе технологий компьютерного зрения: от распознавания лиц и объектов до видеоаналитики, транспортного мониторинга и систем безопасности.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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