Проект для серьёзных людей: как мы разработали корпоративный сайт и создали единую экосистему

Что же такое TNF? Это главная площадка нефтегазовой отрасли в России, которая объединяет производителей оборудования и услуг, недропользователей, структуры, определяющие промышленно-технологическую политику страны. Каждый год на ней проходят масштабные события, участниками которых становятся первые государственные лица и топ-менеджеры крупных компаний. В общем, всё серьёзно.

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

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

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

Какие задачи перед нами стояли:

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

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

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

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

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

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

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

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

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

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

Перешли на WebGL — технологию, которая позволяет браузерам работать с 3D-графикой. Она мощнее канваса и использует видеокарту для рендеринга графики. План заключался в том, чтобы создать градиент, который бы генерировал цвета и делал их переливы плавными и динамичными с помощью библиотеки Three.js.

Вместо того, чтобы рисовать круги на канвасе, сделали плоскость и «окрасили» её в анимированные градиенты. Для этого использовали фрагментный шейдер, который помогает менять цвет в зависимости от времени. Это создало нужный эффект перелива и смешения цветов. Ещё добавили небольшие искажения, чтобы анимация выглядела более живой и естественной. 

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

Мы также разработали интерактивный 3D-конструктор выставочного стенда для TNF: прямо в браузере участники могут подобрать планировку и элементы стенда, вращать его под любым углом в реальном времени и сразу видеть, как их бренд будет выглядеть в экспозоне. Конструктор создан на базе Three.js и WebGL, поэтому сочетает высокую наглядность, гибкость настройки и долю игрового взаимодействия, став ключевым цифровым инструментом форума.

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

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

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