О проекте
SharxDC — ведущий российский разработчик защищённой платформы виртуализации и поставщик гиперконвергентных решений. Компания создаёт программно-аппаратные комплексы для корпоративных дата-центров: SharxBase, SharxStorage и SharxDesk.
Мы разработали полный UX/UI дизайн управляющего веб-интерфейса платформы — от концепции и дизайн-системы до финальных экранов всех модулей. Это цифровой продукт для инженеров и администраторов, поэтому нас интересовал не только визуал: мы глубоко разбирались в том, кто пользователи, какие задачи они решают каждый день, какие метрики для них критичны и почему вообще нужны те или иные экраны. Дизайн здесь — это прежде всего стратегия и логика: понять, для кого, зачем и как — и только потом проектировать.
Масштаб задачи
Перед стартом мы провели детальный анализ всех сценариев использования продукта. Платформа охватывает несколько ролей: администратор кластера, администратор ВЦОД, конечный пользователь. Для каждой роли мы проработали отдельный флоу — от авторизации до специфичных операций.
В итоге получилось более 120 уникальных экранов, структурированных по разделам: Облако, Мониторинг, Доступы, Отчёты и аналитика. Вся работа велась в Figma с использованием собственной дизайн-системы.
Статистика и метрики
Редизайн платформы принёс измеримые результаты. Мы сосредоточились на снижении когнитивной нагрузки на администраторов и ускорении ключевых операций. Последовательная навигация, чёткая визуальная иерархия и продуманные дашборды позволили существенно сократить время на выполнение рутинных задач.
Благодаря переработанному интерфейсу администраторы стали реже обращаться в техподдержку, а скорость выполнения типовых операций выросла кратно. Продуманная дизайн-система позволила разработчикам быстрее внедрять новые функции.
Простой и безопасный вход в защищённую инфраструктуру с двухфакторной аутентификацией
Авторизация — первая точка контакта пользователя с системой. Мы спроектировали минималистичный экран входа с поддержкой защищённого соединения, а также полноценный флоу двухфакторной аутентификации через приложение или код на почту.
Особое внимание уделили состояниям ошибок и подсказкам — пользователь всегда понимает, что происходит и что нужно сделать дальше.
С первой секунды — всё под рукой
Главная страница встречает пользователя онбордингом и сразу показывает полный срез инфраструктуры: список виртуальных машин, доступные сети и хранилища, ключевые события кластера. Отдельная панель отображает ресурсы в реальном времени — виртуальные ЦПУ, оперативную память, распределённое хранилище.
Мы проектировали главный экран как точку ориентирования: от него можно быстро перейти к любому разделу, не теряя контекст. Навигация плоская — максимум два клика до нужной функции.
Дашборды
Для администраторов ВЦОД мы разработали специальный дашборд с детализацией по каждому виртуальному центру обработки данных: утилизация ресурсов, графики нагрузки по времени, мониторинг сетевых интерфейсов и физических параметров узлов — температура, питание, блоки вентиляции.
Каждый виджет адаптирован под тип данных: временные ряды отображаются как графики с масштабированием, ресурсы — как кольцевые диаграммы с числовыми подписями, а критичные показатели сразу привлекают внимание цветовым кодированием.
Создание новых сущностей
Создание виртуальных машин и других объектов инфраструктуры — одна из ключевых операций в платформе. Мы спроектировали пошаговые формы с контекстными подсказками, которые ведут пользователя через настройку ресурсов: имя, описание, виртуальные ЦПУ, ОЗУ, диски и правила размещения.
После создания сущности пользователь попадает на детальную страницу объекта — с графиками нагрузки в реальном времени, статусами, доступом к консоли и быстрыми действиями.
Дизайн система
Дизайн-система — это язык продукта. Единый набор правил, компонентов и токенов, который делает интерфейс консистентным, а командную работу — предсказуемой. Без неё каждый экран становится отдельным решением, и продукт теряет целостность по мере роста.
Для SharxDC мы построили масштабируемую дизайн-систему на переменных Figma: полная палитра с поддержкой светлой и тёмной темы, типографика, сетка, радиусы, отступы и обширная библиотека компонентов. На одной дизайн-системе построено 4 продукта экосистемы Sharx — SharxBase, SharxStorage, SharxDesk и CMP.
Семантические цветовые токены
Все цвета реализованы через семантические токены: textDefault, textSecondary, textLink, filedBg, bgApp и другие. Это обеспечивает консистентность интерфейса при переключении тем и значительно ускоряет разработку. Иконки вынесены в отдельную библиотеку и охватывают все сценарии платформы.
