Перейти к содержимому
Silka

B2B SaaS2026EN

AERA Systems

Слой аналитики, который стоит между инструментами, что компания уже использует, — и сайт, который должен объяснить это за один экран.

Открыть живой сайт
  • SaaS
  • Продуктовый UI
  • Веб-приложение
  • Дизайн-система
Главная страница AERA Systems с визуализацией поля сигналов
Отрасль
B2B SaaS
Длительность
10 недель
Команда
1 дизайнер · 2 инженера
Платформы
Маркетинговый сайт · Интерактивное демо продукта · Командная палитра

01

Задача

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

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

Категория
Операционная аналитика
Главная сложность
Продукт — это слой, а не экран
Требование
Показать механику, а не заявление

02

Решение

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

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

Командная палитра K работает на всём сайте — тот же паттерн взаимодействия, что и в продукте, так что интерфейс сам становится частью питча.

Нарратив
Шесть этапов, зеркалящих конвейер продукта
Взаимодействие
Палитра K, общая с продуктом
Рендеринг
Серверные компоненты с клиентскими островами

03

Архитектура

  1. L0
    Next.js App RouterRSC-оболочка
  2. L1
    Клиентские островаПо секциям
    Командная палитраK, на всём сайте
  3. L2
    Слой анимацииПривязан к скроллу
    Модель контентаТипизированные объекты
  4. L3
    Запрос доступаServer action
    АналитикаВнешнее
Связи (6)
  • Next.js App Router Клиентские острова · гидрация в видимой зоне
  • Next.js App Router Командная палитра
  • Клиентские острова Слой анимации
  • Next.js App Router Модель контента
  • Командная палитра Запрос доступа
  • Клиентские острова Аналитика
Статическая оболочка с интерактивными островами. Ничего тяжёлого не загружается, пока секция не попадёт в видимую зону.

04

UX

Страница отвечает на три вопроса технического покупателя в том порядке, в котором он их задаёт: над чем это стоит, что именно оно делает с сигналом и что меняется в моём дне.

Каждая интерактивная секция работает с клавиатуры и деградирует до статичного читаемого состояния — аргумент выживает без JavaScript, а значит выживает и для поискового робота.

Порядок чтения
Где стоит → что делает → что меняет
Запасной вариант
У каждого блока есть статичное состояние

05

UI

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

Числа набраны как данные, а не как украшение — все цифры выровнены по общей табличной сетке и читаются как система.

06

Разработка

Next.js App Router с серверными компонентами по умолчанию; интерактивные секции — изолированные клиентские острова, загружающиеся при входе в видимую зону. Это держит начальный пейлоад малым несмотря на плотность страницы.

Анимация, привязанная к скроллу, работает через один общий observer вместо слушателей в каждом компоненте, а вся хореография сворачивается до мгновенных смен состояния под prefers-reduced-motion.

07

Что он умеет

  • Поле сигналов

    Интерактивная визуализация данных, поступающих со всего стека компании.

  • Движок решений

    Пошаговый разбор того, как сырой сигнал становится рекомендованным действием.

  • Живой воркспейс

    Рабочая миниатюра адаптивного дашборда продукта.

  • Операционный таймлайн

    История решений как последовательность, которую можно прокрутить.

  • Командная палитра

    Навигация K на всём сайте по паттерну самого продукта.

  • Запрос доступа

    Короткая квалифицирующая форма на server action.

08

Интеграции и стек

Интеграции

  • Аналитика
  • Конвейер запросов доступа
  • Email-уведомления

Фронтенд

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Motion

Платформа

  • Server actions
  • Edge rendering
  • Vercel

09

Чем это закончилось

6 интерактивных этапов
История продукта

Механика показана, а не заявлена

K
Единство взаимодействия

Сайт использует паттерн продукта

Только острова
Пейлоад

Интерактивный код грузится в видимой зоне

Полностью статичный
Без JS

Читается без JavaScript

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

Секция поля сигналов AERA
Поле сигналов
Секция движка решений AERA
Движок решений
Воркспейс и метрики AERA
Живой воркспейс
AERA на мобильном
Мобильная версия

Каждый продукт проектируется под телефон как отдельный опыт, а не как суженный десктоп.

Есть продукт, который давно пора сделать?Расскажите о нём.

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