Система

Обзор

Система айдентики бренда t2 основана на двух подходах:

Бенто система
Основной метод компоновки информации на макете в бенто-модулях.

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

Бенто система используется для решения большинства коммуникационных задач. Интернациональный стиль может использоваться для сегментирования коммуникации бренда (B2B), мероприятий и рекламных кампаний.

Cетка и отступы

Алгоритм построения сетки:

  1. Сравните стороны формата и выберите наименьшую.
  2. Умножьте эту величину на 0.02* — квадрат с такой стороной будет являться отступом.
  3. Поместите отступ в края формата и очертите рамку. Межколонник сетки будет равен отступу.
  4. Поместите бенто модули на формат, при этом делая радиус скругления равным отступу.

* Для небольших диджитал баннеров допустимо использование отступа равного 0.04—0.08 наименьшей стороне.

Детализация сетки

В зависимости от дизайн-задачи и формата количество колонок может сокращаться с 8-ми до 2-х. Например, в узком формате с пропорциями 1:3, может использоваться 2-х колоночная сетки, при этом отступ равен 0.04 (или 0.08) наименьшей стороне формата.

Бенто модули

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

Система состоит из круга, квадрата и прямоугольника:

  1. Круг — используется для акций, цен, иконок и изображений. При этом, круг используется только в паре с квадратом или прямоугольником.
  2. Квадрат — используется для изображений, графики и основного сообщения.
  3. Прямоугольник — используется для основного сообщения и изображений.

Квадрат и прямоугольник можно пропорционально растянуть по сетке, заполняя оставшееся пространство.

* Для небольших диджитал баннеров допустимо использование прямоугольного модуля с пропорциями 3:1.

Использование бенто модулей

Использование бенто модулей позволяет:

  1. Организовать информацию: Использование модулей создает порядок и гармонию в дизайне.
  2. Организовать пространство: Она позволяет легко распределять пространство, что особенно полезно при создании сложных макетов.
  3. Соблюдать последовательность в айдентике: Бенто-модули легко адаптируются под разные форматы и контент, за счет чего, создается целостное восприятие бренда.

Бенто система

Бенто модули с изображением
Основной способ компоновки, когда вместе с модулями с типографикой и логотипом используется модуль с изображением.

Бенто модули с изображением на вылет
Дополнительный способ, в котором, модули расположены поверх изображения на вылет.

Бенто модули только с типографикой
Также возможно использование модулей только с типографикой. Например, в качестве выразительного элемента, может выступать символ с приемом Text as Image.

Бенто система: построение

Алгоритм построения бенто системы:

  1. Определите сетку в соответствии с требованиями формата (см. подраздел «Сетка и отступы»).
  2. Разместите бенто модули и пропорционально растяните их по сетке, заполняя доступное пространство (разрешается только трансформировать квадраты и прямоугольники).
  3. Определите содержимое каждого модуля.
  4. Разместите соответствующее содержимое внутри модулей, следуя руководству и правилам дизайна.

Интернациональный стиль

Типографика с изображением
Основной способ компоновки, когда вместе с типографическими сущностями модулями используется модуль с информацией.

Типографика с изображением на вылет
Дополнительный способ, в котором, изображение располагается на вылет.

Только с типографикой
Также типографика может выступать главным героем на формате.

Интернациональный стиль: построение

Алгоритм построения:

  1. Постройте сетку на формате (см. подразд. «Сетка и отступы»).
  2. Поместите квадратный бенто модуль и поместите контейнер для изображения выравнивая его край по центральным осям модуля.
  3. Поместите контент на формат, соблюдая правила типографики и композиции.
  4. Финализируйте макет, учитывая правила из руководства.

Фон макета

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

Диджитал баннеры: принципы

Диджитал баннеры (Digital banners) бывают анимированными или статичными и обычно включают информацию о продукте, услуге или акции, а также призыв к действию (call to action), например, «Купить» или «Подробнее».

Справа представлена раскадровка анимированных GIF-баннеров. При дизайне следует руководствоваться следующими принципами:

  1. Self-readable: Каждый кадр в диджитал баннере должен быть понятным и доносить ключевое сообщение. Это важно, потому что потребители могут увидеть любой кадр в анимации в любое время.
  2. Ясность и простота: Используйте простой язык и четкие изображения или анимации.
  3. Контраст и иерархия: Чтобы привлечь внимание пользователей, рекомендуется использовать правила по дизайну кнопок и использованию цвета в руководстве (см. подраздел «Функция цвета»).
  4. Адаптивность: Учитывайте различные размеры экранов и устройств, чтобы баннеры выглядели хорошо как на компьютерах, так и на мобильных устройствах.

Диджитал баннеры: примеры

Возрастное ограничение

Метка возрастного ограничения набирается Rooftop Regular.

Если к размеру возрастного ограничения нет требований, то она является частью текста дисклеймера.

Если к размеру возрастной метки есть требования по заметной величине — она располагается крупно рядом с дисклеймером.

Если в макете нет дисклеймера, метка становится отдельным объектом, который можно размещать в углу одного из бенто-модулей с фото или текстом.

Партнеры

В случае присутствия логотипа партнёра приоритетно использование монохромных версий логотипов.

Логотип партнёра может располагаться либо в связке с логотипом t2 через разделитель, либо в отдельном бенто-модуле.

Разделитель должен иметь высоту логотипа t2. Толщина разделителя составляет 1/10 от квадратного модуля логотипа t2.

Резюме

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

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

Неправильное использование