Компания: Neuro Smile — стоматологическая клиника с передовыми методами лечения. В 2025 году начался редизайн сайта компании.

Проблема: Редизайн был остановлен из-за недостатков старой дизайн-системы: она не позволяла переиспользовать компоненты, разрушала визуальное единство и нарушала стандарты доступности (accessibility).

Роль в проекте: UX/UI дизайнер.

Задача: Аудит текущей системы, разработка дизайн-системы 2.0 (компоненты, токены, документация), внедрение стандартов доступности.

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

Последствия: Отрыв от реальных кейсов ломал работу по всем направлениям: каждая новая страница увеличивала хаос вместо развития продукта.

Разрыв визуала и функции. Одинаковые элементы вели себя по-разному в схожих сценариях.

Дисбаланс библиотеки: Избыток компонентов «на будущее» при дефиците базовых паттернов.

Игнорирование доступности (accessibility): Отсутствие доступности для всех групп пользователей.

Вместо обсуждения отдельных макетов мы с клиентом согласовали верхнеуровневые принципы продукта:
✓ Спокойный визуальный язык без агрессивных акцентов.
✓ Высокая читаемость контента и предсказуемость интерфейса.
✓ Соответствие стандартам WCAG 2.2 AA.
✓ Простая масштабируемость без усложнения поддержки.

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

✓ Цветовая система.
✓ Типографическая шкала.
✓ Токены и правила наследования.
✓ Архитектура компонентов.
✓ Документация и принципы.

Иерархия акцентов. Разделила визуальный стиль и функциональные приоритеты. В старой системе смешивались понятия акцента (primary/secondary) и отображения (solid/outline), из-за чего одинаковые по смыслу кнопки выглядели по-разному.

Новые компоненты. Унифицировала терминологию и создала под нее новые компоненты. Ранее часть компонентов использовалась не по назначению (Toast подменял функцию Alert и назывался Message), также путались паттерны Select, Combobox и Snackbar. Разработчикам в перспективе было бы сложнее понимать систему, а документация перестала бы быть «нормативной».

Эффекты вместо цвета. Заменила резкую цветовую динамику (например, переход фиолетовой кнопки в оранжевую при клике) на спокойные overlay-эффекты.
Это сохранило доверительный тон интерфейса и сократило число токенов. Избыточная цветовая динамика разрушала ощущение доверия и шла вразрез с ТЗ.

Визуальная иерархия. Хаотичные тени заменены ступенчатой системой теней, основанной на физической высоте объектов — от базового слоя до парящих Pop-up и Focus-состояний.

Доступность (WCAG). Добавила интерактивным элементам явное состояние Focus, увеличила контрастность полей ввода, вынесла Label за их пределы для снижения визуального шума.

Контекстные компоненты. Разделила ссылки на Inline (внутри текста) и Standalone (самостоятельные). Вместо стандартного Select для сложных форм выбора услуг разработала Combobox и Multiselect с тегами.

Полноцикличные паттерны. Форму загрузки файлов (file upload) перепроектировала из статичной в динамическую. Теперь она отображает весь цикл: загрузку, паузу, отмену и сетевые ошибки.

Единая логика. Из компонента Textarea убрала ручной ресайз мышкой, конфликтовавший с функцией авторасширения (auto-grow), и зафиксировала только одно предсказуемое поведение.

Техническая оптимизация. Исправила слетание цветов в элементах при замене инстансов с помощью комбинирования слоев через операцию Union.

Кнопки. Перенесла внутренние paddings текстовых контейнеров на уровень параметров самой Button. Задала минимальную ширину для защиты от деформации и максимальную ширину с обрезкой текста троеточием.

Адаптивность. Для динамических элементов (тултипов) зафиксировала min-width и max-width вместо фиксированных контейнеров, автоматизировав их поведение на мобильных устройствах.

Что изменилось:
✓ Архитектура компонентов стала системной и легко масштабируемой.
✓ Интерфейс стал доступным для всех пользователей благодаря стандартам WCAG.
✓ Упростилась поддержка продукта, сократилось время разработки новых страниц.

Планы развития. Фиксация технической документации, описание production-паттернов и контекстов использования элементов, развитие доступности (accessibility) на уровне сквозных сценариев продукта.