От имиджа к импульсу: как мы прокачали сайт TNF и собрали экосистему с WebGL, 3D и чувством статуса
Скажи «корпоративный сайт» — и большинство сразу представит скучную, сложную и устаревшую страницу. Но когда к тебе приходит крупнейший нефтегазовый форум страны — ты либо играешь по-взрослому, либо не играешь вообще. Chipsa выбрала первое. И превратила TNF в digital-платформу, где каждое движение — осмысленно, а каждый градиент — с характером.
Деловой стиль с цифровым нутром
TNF — не стартап с лампой, это хардкорная промышленность, где заходят с мобилы даже топы. ЦА — чиновники, технари, серьёзные люди. Сайт должен быть понятным, быстрым и… впечатляющим. Без шоу ради шоу. Поэтому первую скрипку здесь играет не вау, а доверие. Но с вау внутри.
И мы нашли баланс: статусный, минималистичный дизайн + насыщенные технологии на втором плане. Без аляповатости, но с глубоким digital-флером.
Главная страница как первое рукопожатие
Аналитика показала: пользователи сразу прыгают с главной к деталям. Поэтому мы решили не перегружать вход. Главная стала как good-looking визитка — говорит главное, не мельтешит, передаёт дух события. Имидж, статус, энергия.
Заложили идею «энергетического импульса», как метафору старта. Помните, в логотипе TNF есть точка? Мы превратили её в живой элемент интерфейса: она ведёт за собой пользователя через кнопки, навигацию, даже ссылки. Как будто сам форум зовёт.
WebGL вместо Canvas: когда Safari идёт против — побеждает графический процессор
Первоначальный план — канвас с градиентом. Красиво, просто… и не работает в Safari. Там вместо мягких переливов — визуальный ад из разноцветных кругов.
Решение? Подключили WebGL и Three.js. Нарисовали шейдером анимированный градиент прямо на 3D-плоскости. Цвета текут, фон живёт, а браузер — не задыхается. Бонус: теперь можно адаптировать под любые эффекты в будущем без переделки ядра.
Архитектура сайта: минимализм ≠ простота
Самая сложная часть — логика. Нужно было разделить TNF на два уровня: форум как событие и экосистема TNF как «медиа-хаб» с мероприятиями, новостями и кабинетом. Структура была как старый чемодан без ручки. Мы её разгрузили, переписали и построили заново.
Плюс — сделали новую админку. Единая архитектура блоков, редактирование любой кнопки, связки между сущностями — всё это не видно глазу, но очень ощущается в работе.
3D-конструктор: выставка начинается в браузере
Хайлайт проекта — 3D-конструктор стендов. Участники форума могут сами собрать свой экспозон прямо на сайте: вращать, менять конфигурацию, видеть бренд вживую. Реализовано на WebGL + Three.js. Это не просто фича. Это мощный инструмент самообслуживания, который разгружает менеджеров и вовлекает участников.
Когда дерзость — в решении, а не в интерфейсе
Весь проект — история про баланс. Не про шапки, которые танцуют, а про архитектуру, эстетику, продуманность. Сайт TNF не должен кричать. Он должен говорить уверенно и по делу. Но при этом — удивлять на уровне взаимодействия и плавности.
Мы называем это «интеллигентный digital-вау»: когда дизайн не мешает смыслу, а технологии не мешают скорости.
Выводы? Два.
- WebGL — может быть полезен, даже если вам кажется, что проект “не тот”. Правильная интеграция не просто украшает, а делает сайт живым. Главное — не переборщить.
- Даже самый “классический” корпоративный сайт может быть крутым, если в него вложена идея, энергия и чуть-чуть безумия в нужных местах.
Хочешь сайт, который не просто существует, а живёт своей жизнью? Пиши Chipsa. Мы умеем делать красиво, глубоко и по делу.
Подписывайся на наш Telegram — там мы регулярно выкладываем backstage, эксперименты и лайфхаки из мира креативной разработки.