Пользователь задаёт три базовых цвета, на основе которых алгоритм формирует полную цветовую палитру интернет-магазина на платформе Яндекс КИТ
Инструмент автоматической генерации цветовых палитр
Проблема
В конструкторе интернет-магазинов на платформе Яндекс КИТ пользователи могли настраивать только один цвет — акцентный.
Это серьёзно ограничивало кастомизацию дизайна и делало невозможной полноценную адаптацию сайтов под брендбуки компаний. В результате платформа теряла крупных клиентов и агенства-партнёры, которым требовалась более гибкая настройка визуального стиля.
Задача
Дать пользователям возможность кастомизировать ключевые цвета интерфейса:
- цвет бренда
- цвет фона
- цвет текста
Решение
Я предложила подход, при котором пользователь задаёт три базовых цвета, а система автоматически строит на их основе полную цветовую палитру интерфейса.
Алгоритм генерирует:
- оттенки фоновых поверхностей,
- состояния кнопок,
- вторичные акцентные цвета,
- цвета ссылок,
- вспомогательные оттенки для интерфейсных элементов.
Таким образом, пользовательский сценарий остаётся максимально простым, а система автоматически достраивает все второстепенные цвета и учитывает требования доступности.
Доступность
Важно было сохранить читаемость интерфейса при любых выбранных цветах.
При генерации вторичных оттенков система автоматически проверяет их контрастность к тексту и при необходимости корректирует, чтобы интерфейс соответствовал требованиям доступности.
Также я предусмотрела предупреждения для пользователя о том, что выбранные им цвет текста и фона не достаточно контрастны. Эту часть вынесли во вторую итерацию из-за стоимости разработки: для MVP было важно быстро запустить решение, и первую версию реализовали за 2 дня благодаря прототипу.
Создание нескольких палитр для одного интернет-магазина
Следующей итерацией генератора палитр стала возможность создавать несколько цветовых палитр для одного интернет-магазина.
Это позволило использовать разные цветовые сценарии для отдельных секций сайта и подготовил основу для поддержки тёмной темы в будущем.
Было
Стало
Проверка идеи
Background/Secondary.html
Пример прототипа для формирования цвета второстепенных фонов с оттенком брендового
Чтобы проверить гипотезу, я собрала быстрый прототип генерации палитры через ИИ.
Прототип позволял:
- задавать разные комбинации базовых цветов,
- автоматически генерировать производные оттенки,
- проверять поведение интерфейса на экстремальных цветовых сочетаниях.
Это позволило быстро протестировать жизнеспособность алгоритма, доработать его и использовать прототип для обсуждения решения с командой разработки.
Background/Neutral.html
Пример прототипа для формирования цвета второстепенных фонов
Как работает алгоритм?
Кликните на название токена, чтобы увидеть, по какому правилу он был сгенерирован и для каких элементов интерфейса он используется.
Background-Secondary
Background-Neutral
PartnerWidgets
Text&Icon-Secondary
Text&Icon-Disable
Text&Icon-Accent
Control-PrimaryBrand-Hover
Control-Secondary
Control-Secondary-Hover
Control-Neutral
Control-Neutral-Hover
И еще 11 токенов
Цвета, сгенерированные на основе пользовательских
Цвета, заданные пользователем
Background-Basiс
Text&Icon-Primary
Control-PrimaryBrand
=
Одна из самых интересных схем в кейсе. Она наглядно показывает логику формирования палитры. Придумана с помощью ИИ.
Пользователь задаёт три базовых цвета, на основе которых алгоритм формирует полную цветовую палитру интернет-магазина на платформе Яндекс КИТ
Инструмент автоматической генерации цветовых палитр
Проблема
В конструкторе интернет-магазинов на платформе Яндекс КИТ пользователи могли настраивать только один цвет — акцентный.
Это серьёзно ограничивало кастомизацию дизайна и делало невозможной полноценную адаптацию сайтов под брендбуки компаний. В результате платформа теряла крупных клиентов и агенства-партнёры, которым требовалась более гибкая настройка визуального стиля.
Задача
Дать пользователям возможность кастомизировать ключевые цвета интерфейса:
- цвет бренда
- цвет фона
- цвет текста
Решение
Я предложила подход, при котором пользователь задаёт три базовых цвета, а система автоматически строит на их основе полную цветовую палитру интерфейса.
Алгоритм генерирует:
- оттенки фоновых поверхностей,
- состояния кнопок,
- вторичные акцентные цвета,
- цвета ссылок,
- вспомогательные оттенки для интерфейсных элементов.
Таким образом, пользовательский сценарий остаётся максимально простым, а система автоматически достраивает все второстепенные цвета и учитывает требования доступности.
Доступность
Важно было сохранить читаемость интерфейса при любых выбранных цветах.
При генерации вторичных оттенков система автоматически проверяет их контрастность к тексту и при необходимости корректирует, чтобы интерфейс соответствовал требованиям доступности.
Также я предусмотрела предупреждения для пользователя о том, что выбранные им цвет текста и фона не достаточно контрастны. Эту часть вынесли во вторую итерацию из-за стоимости разработки: для MVP было важно быстро запустить решение, и первую версию реализовали за 2 дня благодаря прототипу.
Создание нескольких палитр для одного интернет-магазина
Следующей итерацией генератора палитр стала возможность создавать несколько цветовых палитр для одного интернет-магазина.
Это позволило использовать разные цветовые сценарии для отдельных секций сайта и подготовил основу для поддержки тёмной темы в будущем.
Было
Стало
Проверка идеи
Background/Secondary.html
Пример прототипа для формирования цвета второстепенных фонов с оттенком брендового
Чтобы проверить гипотезу, я собрала быстрый прототип генерации палитры через ИИ.
Прототип позволял:
- задавать разные комбинации базовых цветов,
- автоматически генерировать производные оттенки,
- проверять поведение интерфейса на экстремальных цветовых сочетаниях.
Это позволило быстро протестировать жизнеспособность алгоритма, доработать его и использовать прототип для обсуждения решения с командой разработки.
Background/Neutral.html
Пример прототипа для формирования цвета второстепенных фонов
Как работает алгоритм?
Кликните на название токена, чтобы увидеть, по какому правилу он был сгенерирован и для каких элементов интерфейса он используется.
Background-Secondary
Background-Neutral
PartnerWidgets
Text&Icon-Secondary
Text&Icon-Disable
Text&Icon-Accent
Control-PrimaryBrand-Hover
Control-Secondary
Control-Secondary-Hover
Control-Neutral
Control-Neutral-Hover
И еще 11 токенов
Цвета, сгенерированные на основе пользовательских
Цвета, заданные пользователем
Background-Basiс
Text&Icon-Primary
Control-PrimaryBrand
=
Одна из самых интересных схем в кейсе. Она наглядно показывает логику формирования палитры. Придумана с помощью ИИ.