Энерголайн: как сделать сайт, который команда назвала самым чистым проектом года

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

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

И добавил то, что делает эту историю по-настоящему интересной: этот сайт был сделан оперативнее других проектов похожего объёма.

Разбираемся, как так вышло.

Энерголайн поставляет оборудование для энергетической отрасли. Основное направление — охлаждение газовых турбин.

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

Есть нюанс, который многое объясняет в их бизнесе. Энергетическое оборудование в России исторически было в основном европейское и американское — Германия, США. Последние годы возить его стало заметно сложнее. У компании выстроена сеть юрлиц по всему миру — США, Европа, Ближний Восток, Азия, Ташкент, — через которую поставки всё-таки идут. Но зависеть от этого вечно нельзя. Поэтому компания сознательно смещает фокус: меньше про «купи-привези», больше про инжиниринг, сервис и собственную экспертизу. Сайт должен был отразить именно этот разворот.

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

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

Но материалы — это полдела. Главное было в другом. Наш менеджер описал это так: «Чуваки прикольные, с ними приятно общаться, они довольно структурированные. Они к нам прислушиваются. Если вы скажете, что это говно, мы вам поверим». Сроки обсуждались спокойно. Горящих дедлайнов не было. Контент по каждому направлению клиент собирал сам — и это критично, потому что их предметная область сложная: какое оборудование, кому, зачем, как оно связано между собой. Без клиента мы бы в этом плавали.

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

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

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

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

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

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

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

У нас 16 лет опыта и насмотренности именно в имиджевых решениях и визуализациях. Поэтому связка «ИИ + структурный макет + ручная доработка» в наших руках даёт результат, который не выглядит как генеративный шаблон.

ИИ здесь — ускоритель. А направление задаёт команда.

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

Макет. «Женя (наш дизайнер), прекрасный макет, фигма, всё структурно, просто шедевр», — сказал наш frontend тим-лид. Когда дизайн разложен на компоненты, экономятся не часы, а дни — и человеком, и ИИ.

Архитектура. Astro на фронте, раздельные фронт и бэк, связь через REST API. Фронтендер и бэкендер работали параллельно и сошлись в конце.

Производительность из коробки. PageSpeed показывал 100 на десктопе и 96–98 на мобильном до подключения аналитики. На десктопе всё ещё сотка.

Честности ради: не всё получилось так, как задумывалось. В блоке «О компании» должна была быть инфографика — цифры о компании, количество сотрудников, проектов. Но клиент не смог определиться, какие именно цифры туда поставить. Мы убрали инфографику, и блок стал выглядеть пустовато. Это то, что мы сами хотели бы доделать. Ещё была идея отдельной страницы о компании с внутренними историями — у них, например, есть своя хоккейная команда, и генеральный директор очень хотел про неё рассказать. Пока отложили, но задел остался.

Вывод, который мы для себя сделали

Этот проект вышел показательным по одной причине: он доказал, что «быстро», «в бюджете» и «красиво» — не взаимоисключающие вещи. Условия были ограниченными — и по деньгам, и по срокам. Но связка сработала: структурный макет, ИИ на рутине, ручная доработка на финише и насмотренность, которая всем этим управляла. Результат не выглядит как компромисс и не похож на генеративное решение — в нём всё на месте, и придраться не к чему.

Но главный урок — про клиента. Если бы Энерголайн давил сроками, менял требования на ходу и не доверял нашим решениям, проект был бы дольше, дороже и хуже. Он был бы обычным.

Так что если вы клиент и читаете это: приходите со своими материалами, доверяйте команде, не устраивайте пожар там, где его нет. У вас будет красивый проект и почти сотка на PageSpeed.

Проверено на Энерголайне.

Мы делаем сайты, которые работают быстро и выглядят так, будто над ними думали. Потому что над ними действительно думали — 16 лет подряд.

Написать нам: https://chipsa.ru