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

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

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

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

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

В брендбуке у клиента нас поджидали Montserrat и Roboto. На случай, если вы не разбираетесь в шрифтах, — это примерно то же самое, что включить в новогоднюю ночь телевизор, и обнаружить там Киркорова и Расторгуева.

Априори ничего плохого в этих шрифтах нет, но мы всё же предложили клиенту менее популярный вариант, представляющий собой нечто среднее между привычной всем рабочей лошадкой Montserrat, и скандинавским гротеском Firs Neue.

Вместо Roboto мы какое-то время использовали моноширинный Geist Mono, но впоследствии отказались и от него. Параллельно мы продолжали visual exploration, прикидывая различные идеи — в голове, в карандаше, в октане и редшифте.

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

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

И решили аккуратно разведать у самого клиента:

— Вы код пишете?

— Пишем

— А облачные сервисы же у вас есть?

— Есть

— Наверное, и ИТ-консалтингом занимаетесь?

— Конечно

— Понятно, ну вроде картина складывается… может быть, есть что-то ещё, о чём мы забыли спросить?

— А… ну, ещё мы офисы интерактивные делаем, нефтяные терминалы строим, цифровые двойники создаём, промышленную автоматизацию проектируем, ЦОДы с нуля, ситуационные центры возводим, а ещё комплексные системы безопасности периметра, инженерную инфраструктуру поднимаем, предиктивную аналитику…

— ...

(мы всё поняли ещё на слове «терминалы»)

В общем, воспользоваться каким-то уже готовым стереотипом и повесить на Айтеко ярлык — пусть и в самом хорошем смысле слова — не получилось. И если это не получилось у нас с клиентом, то что будет с посетителем сайта? Как ему во всём этом разобраться?

Разметив карту сайта, мы принялись активно искать рамки — какой-то общий множитель, который можно было бы вынести за скобки. Что-то, что помогло бы уложить всё это в какой-то привычный для посетителя шаблон, чтобы от него дальше оттолкнуться.

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

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

Но как это всё преподнести с точки зрения визуала? У клиента, например, есть совершенно крышесносные проекты, но они под NDA — на фотографии можно даже не рассчитывать... Вот почему на сайте столько 3D-иллюстраций. Они служат одновременно и объединяющим элементом с точки зрения арт-дирекшена, и успешно выполняют роль иллюстраций там, где фотографий нет и не будет.

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

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

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

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

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

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

Например, дискаверинг — процесс автоматического обнаружения и сбора данных о корпоративной сетевой инфраструктуре — представлен как сканирование и упорядочивание абстрактных блоков информации:

Любая информация, которая встречается в визуалах, создана на основе реального отраслевого применения и беспощадно (но не бессмысленно) анимирована.

Некоторые инженерные системы визуализированы в разрешении вплоть до 10К.

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

Всё это добро реализовано на Node.js/Vue/Astro и привязано к бэкенду на Битрикс с помощью REST API. Стэк включает ещё и Vite, и TypeScript, и GSAP с Three.js, и SCSS, и ещё много всяких страшных терминов. Но что важнее, там есть ряд собственных самописных разработок, благодаря которым удалось ещё до этапа Q&A добиться высоких показателей производительности — не только на десктопе, но и в высоконагруженной мобильной версии:

На момент написания кейса мы пытаемся придумать, как прикрутить к сайту DLSS-5. А если серьёзно, то дата альфа-релиза совпала со стартом Workspace Digital Awards 2026, а ждать до следующего года клиент не намерен. Судя по тому, что Айтеко хочет номинировать сайт на все популярные конкурсы, результатом клиент доволен. Ну а мы успели зарегистрироваться буквально за 50 минут до конца приёма заявок и продолжаем допиливать сайт цифровым напильником в реальном времени. Таков путь.