ВИВОТЧ — сайт и дизайн-система панели управления

, сайт и интерфейс

ВИВОТЧ — сайт и дизайн-система панели управления

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

Сайт

Весной 2024 года я сделал для проекта сайт. Тёмная главная с крупным широким шрифтом и объёмные иллюстрации в жёлто-оранжевой гамме — отдельная для каждого сценария: пожилые люди, офисы, технические помещения, риелторы, стройка.

wewatch-glavnaya.png1280×800, 67 КБ
Главная сайта
Главная сайта
wewatch-primenenie.png1280×800, 77 КБ
Раздел «Применение»: каждому сценарию своя иллюстрация
Раздел «Применение»: каждому сценарию своя иллюстрация

Панель управления

Самое интересное началось потом. Осенью 2025 года я спроектировал интерфейс личного кабинета — панель, в которой организация видит все свои объекты, двери, события и людей. Это кликабельный прототип без бэкенда: 61 экран, по которому можно пройти как по настоящему продукту.

Внутри:

  • трёхуровневая иерархия объектов: группа, адрес, помещение;
  • шесть мастеров — подключение устройства, пользователь, группа, уведомления, объект, QR-код;
  • виджеты на главной, фильтры «Требуют внимания», «Склад», «Опека», «Аренда»;
  • отдельная «Панель заботы» для родственников: дома ли человек, когда было последнее движение, не было ли падения.
wewatch-panel.png1280×800, 125 КБ
Панель управления: объекты, события, быстрые действия
Панель управления: объекты, события, быстрые действия
wewatch-zabota.png1280×800, 77 КБ
«Панель заботы»: карточка квартиры, статус жильцов, уведомления о падении
«Панель заботы»: карточка квартиры, статус жильцов, уведомления о падении

Дизайн-система и Liquid Glass

В мае 2026 года я перевёл панель на новый визуальный язык в духе Apple Liquid Glass: полупрозрачные слои, мягкие тени, иконки Phosphor вместо эмодзи. Правило было жёсткое: не трогать структуру страниц и логику, менять только дизайн-токены. Поэтому редизайн всех 61 экрана уложился в несколько дней, а тёмная тема получилась сама собой.

wewatch-panel-temnaya.png1280×800, 74 КБ
Та же панель в тёмной теме
Та же панель в тёмной теме

К прототипу приложены описание дизайн-системы и отдельный гид для бэкенд-разработчика: какие данные где нужны и как устроены модули.