Как мы сделали этот сайт

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

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

Двадцать команд, по пять в четырёх треках: строго по ТЗ, свободная трактовка, полная свобода и отдельный продакшен-трек со своей рубрикой. Каждая сдала отдельное приложение, которое можно запустить у себя.

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

Варианты получились по-настоящему разными: живая карта-меш, журнал, пульт оператора, лифт по слоям масштаба, моно-терминал. Гран-при взял «Пульт оператора» из трека B с 86,2 балла — на две десятых впереди «Спуска по слоям масштаба» из трека A. В продакшен-треке лучшая работа набрала 93,3, но по другой рубрике, с остальными её не сравнить.

Были и провалы. Там, где команды перерисовывали наш знак руками или оставляли на внутренних страницах старую сине-зелёную палитру, судья снимал баллы. А самое обидное выяснилось позже: у победителя трека A первый экран был пустым и чёрным. Судья проверял код и сборку, но в браузер не смотрел — в той среде headless-браузер плохо переживал WebGL, и пиксельную проверку двадцати сайтов мы решили не делать. Решение оказалось плохим.

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

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

В группе E победил «Зум по масштабам сквозь меш» с 84,5 балла: прокрутка приближает один и тот же знак через четыре уровня, от скопления до отдельного узла. Это первая работа, где айдентика выглядела нашей. Пятое место занял «Журнал-номер»: сильная главная и внутренние страницы в чужом фиолетовом интерфейсе, та же болезнь, что в первом раунде. Среди доведённых чемпионов главное — у трека A наконец починили первый экран: вместо WebGL постер из 130 узлов, который рисуется на сервере. Победившие команды группы E от WebGL отказались сами. Мы тоже: на этом сайте его нет.

Основа сайта — победитель группы E. К нему мы добавили куски ещё четырёх работ, и у каждого куска есть причина, которую можно назвать. Баллы — оценки судьи во втором раунде.

• 84,5

  E/team-03

  Зум по масштабам сквозь меш

  Взяли: основа сайта — цвета и шрифты, знак, шапка, которая сама подстраивается под тёмные и светлые секции, зум меша к узлу компетенции, карточки-реплики.

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

• 80,6

  E/team-04

  Граф-инспектор узлов

  Взяли: доступность меша — по узлам можно ходить с клавиатуры, зона нажатия не меньше 44 px, у узлов есть подписи, «дыхание» узлов не больше половины пикселя.

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

• 76,4

  E/team-01

  Звёздная карта-операционка

  Взяли: меш, который рисуется на сервере как SVG, крупные числа над тонкой линией и карточка-реплика со стрелкой.

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

• 79,2

  v2/C

  Доведённый чемпион трека C

  Взяли: анимация — построчное появление текста, кнопка-магнит, прелоадер с предохранителем по времени и ветка для тех, кто отключил анимацию в системе.

  Почему: единственный набор, где текст виден уже в серверном HTML и не ждёт скрипта.

• 79,0

  v2/B

  Доведённый чемпион трека B

  Взяли: прокрутка — один движок на весь сайт вместо разрозненных приёмов и полоса прочитанного в материалах.

  Почему: аккуратная работа с GSAP: контекст создаётся и сбрасывается, нативная прокрутка не перехватывается.

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