Перейти до вмісту
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 на мобільному
Мобільна версія

Кожен продукт ми проєктуємо під телефон окремо, а не звужуємо десктопну версію.

Є продукт, який давно час зробити?Розкажіть про нього.

Опишіть, що має змінитися у вашому бізнесі. Ми розберемось, що для цього справді потрібно — навіть якщо потрібно менше, ніж здається.