Основа визуального языка

Визуальный язык — это способ коммуникации бренда в цифровом и физическом мире. Мы стремимся, чтобы приемы визуального языка использовались сознательно, создавали дополнительную ценность, поддерживали прямую ассоциацию с брендом Деловой среды и не мешали использовать продукт.

Структура интерфейса

Упорядоченная структура и сетка помогают пользователю понять иерархию интерфейса, стандартизируют основные компоненты макета и задают единый визуальный ритм. Подробнее

Типографика

Типографика и фирменный шрифт помогают считывать смысл сообщения и делают бренд узнаваемым. Мы в полной мере используем корпоративный шрифт экосистемы Сбер — SB Sans. Подробнее

Палитра

Палитра расширяет визуальную эстетику и объединяет дизайн продуктов. Подробнее

Базовая палитра

Палитра бренда делает продукты Деловой среды узнаваемыми внутри и снаружи экосистемы. Наряду с основными цветами, базовая палитра содержит дополнительные цвета для различных состояний и оттенки серого. Мы стремимся использовать в продуктах минимум оттенков серого, поэтому они привязаны к семантике.

Иконографика

Иконки и пиктограммы — важная часть визуального языка Деловой среды и одна из ключевых точек контакта с брендом. В работе с иконками рекомендуется сохранять палитру бренда.

Эффекты

Понятный интерфейс должен отзываться на действия пользователя, поэтому важно, чтобы любой интерактивный элемент реагировал на наведение. Для этого мы активно используем микроанимацию в интерактивных элементах.

Мы стараемся не применять тени в базовых компонентах. Используем их только для выделения иерархии или визуального акцента. Подробнее

Доступность

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