Основа визуального языка
Визуальный язык — это способ коммуникации бренда в интерфейсе наших продуктов. Мы стремимся, чтобы приёмы визуального языка использовались сознательно, создавали дополнительную ценность, поддерживали прямую ассоциацию с брендом Mail и не мешали использованию продукта.
Структура интерфейса
Лэйаут и сетка помогают пользователю понять иерархию интерфейса. Помимо структурирующей, лэйаут выполняет и утилитарную функцию — стандартизирует основные компоненты продуктов, задаёт единый визуальный ритм.
Типографика
Типографика и фирменный шрифт помогают считывать смысл сообщения и делают бренд узнаваемым. Ключевой элемент брендинга наших продуктов — корпоративный шрифт VK Sans Display.
Палитра
Палитра расширяет визуальную эстетику и объединяет дизайн продуктов.
Палитра бренда
Палитра бренда делает продукты Mail узнаваемыми внутри и снаружи экосистемы.
Базовая палитра
Палитра бренда содержит дополнительные цвета для состояний и оттенки серого. Мы стремимся использовать в продуктах минимум оттенков серого, поэтому они привязаны к семантике.
Иконографика
Иконки и пиктограммы — важная часть визуального языка Mail и одна из важных точек контакта с брендом. В работе с иконками рекомендуется сохранять палитру бренда.
Эффекты
Для определения параметров тени мы используем концепцию слоёв. Чем ниже находится слой объекта, тем менее интенсивную тень он получает.
Тематизация
Сервисные продукты могут поддерживать тёмную тему на десктопных и мобильных платформах. Для работы с тёмной темой мы используем концепцию слоёв: чем выше находится объект, тем он светлее.
Доступность
Мы проверяем, чтобы константы визуального языка и их сочетания были доступны для максимального количества пользователей. Почти в каждом разделе гайдлайна вы найдёте рекомендации по доступности.