Связаться с нами
Кейс: MedSoft

Клиническая
точность в интерфейсе

Разработка иконографической системы для SaaS-платформы управления электронными медкартами. Задача: создать визуальный язык, исключающий двусмысленность в критических сценариях работы врачей.

Интерфейс медицинской платформы MedSoft с новой иконографией

Требования к читаемости и стерильности стиля

В медицинской среде визуальный шум может стоить жизни. Для MedSoft мы отказались от декоративных элементов в пользу «стерильного» стиля (Sterile Line).

  • 01
    Минимальный stroke-width Толщина линий 1.5px для максимальной четкости на ретина-дисплеях в операционных.
  • 02
    Скругленные углы (Radius 4px) Отсутствие острых углов психологически снижает тревожность пациента и врача.
  • 03
    Высокий контраст Соответствие стандартам WCAG AAA для работы в условиях недостаточной освещенности.

Концепция «Визуальной тишины»

Мы проанализировали 400+ действий в интерфейсе MedSoft. Выяснилось, что 60% времени уходит на поиск нужной кнопки в плотной таблице данных.

Новая система иконок использует метафоры, принятые в международной медицинской номенклатуре, что сократило время обучения новых сотрудников с 3 недель до 2 дней.

Сравнение 'До' и 'После'

От стоковых наборов к авторской системе, где каждый пиксель обоснован.

Было

Стоковые иконки

Разрозненные стили, разные толщины линий, избыточная детализация. Визуальный шум отвлекал от данных пациента.

↓ Проблема: Когнитивная перегрузка
Стало

Система MedSoft UI

Единая сетка 24x24px, толщина 1.5px, скругление 2px. Читаемость иконок «Инъекция» и «Анализ» улучшилась на 40%.

↑ Результат: Скорость принятия решений

Техническая спецификация SVG

Мы не просто передаем файлы, мы передаем готовый к продакшену код. Каждая иконка оптимизирована для быстрой загрузки и легкой стилизации через CSS-переменные.

/* variables.css */
:root {
--icon-stroke: 1.5px;
--icon-radius: 2px;
--icon-color: currentColor;
}

/* example.svg */
<svg viewBox="0 0 24 24" fill="none">
<path d="..." stroke="var(--icon-color)" />
</svg>

SVG Sprite

Объединение всех иконок в один файл для мгновенной отрисовки.

React/Vue

Компонентная обертка для легкого импорта в SPA-приложения.

Figma API

Автоматическая синхронизация библиотеки при обновлениях.

340 Иконок в наборе
1.5px Толщина линии
-40% Время поиска
WCAG Уровень AAA

Нужна система для вашего продукта?

Мы разработаем иконографию, которая не просто «красивая», а решает бизнес-задачи.

Обсудить задачу