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