Сайт Heron AI: студия Bearplus о дизайне ИИ-продукта без клише

12 октября на Codrops вышел разбор сайта Heron AI, написанный его авторами — студией Bearplus. Heron — ИИ-агент для архитекторов: он работает внутри модели здания, отмечает ошибки проектирования и исправляет их после одобрения человеком. В тот же день сайт стал «Сайтом дня» на Awwwards.

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

Конкретные решения. Палитра — почти белый и почти чёрный, красный оставлен только для нарушений и предупреждений, как в чертежах и проверках. Шрифт один, BT Grotesk: и в крупных заголовках, и в мелких технических подписях. Главная страница идёт по шагам работы продукта — Observe, Advise, Act, Learn — вместо списка функций. Анимации собраны на GSAP, Lenis и Barba.js, курсор нарисован на Canvas 2D, переходы — на SVG-фильтрах. От WebGL отказались: по словам авторов, для двумерной чертёжной графики обычный DOM и расчёт координат легче и проще в поддержке. Проект планировали на 10 недель, он занял чуть больше 12.

Что из этого пригодится в работе над сайтами: брать образы из предметной области клиента, а не из жанра; давать акцентному цвету одну функцию; не тянуть WebGL туда, где хватает DOM и SVG. Это опыт одной студии на одном проекте, а не правило — сам сайт и приёмы в коде стоит посмотреть по ссылке.

Источник: Codrops: Inside Heron: Designing an AI Agent Without Designing “AI”