Руководство по стилю создано для стандартизации оформления рекламно-информационных сообщений на цифровых площадках присутствия Страхового Дома ВСК (сайты, социальные сети, платформы, в том числе «Яндекс. Дзен» и пр).

Предназначен для сотрудников компании, разрабатывающих рекламно-информационные материалы для цифровых площадок, для разработчиков, для подрядчиков и партнеров.
Ключевые функции

1. Имиджевая. Формирование и поддержка быстро узнаваемого, оригинального и привлекательного образа Страхового Дома
2. Идентифицирующая. Способствует повышению узнаваемости бренда, услуг и рекламы.
3. Дифференцирующая. Выделение товаров и рекламы фирмы из общей массы аналогичных. Облегчение процесса выбора.
ЦВЕТА
Цветовая палитра состоит из фирменных цветов логотипа бренда, дополненная яркими дополнениями. Спецификации цветов для различных моделей приведены в этом разделе.

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

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

Предпочтительно использование градиента в рамках основных цветов.
Основные цвета
Градиенты
#3381DF
#EDEDEE
#2D6ABA
#5900FF
#65B6E6
#5CAB42
#EF8231
#3381DF
#EDEDEE
#2D6ABA
#5900FF
#65B6E6
#5CAB42
#EF8231
#65B6E6
#CFCFCF
#3381DF
#3381DF
#3381DF
#94DE7B
#FEC77B
ТИПОГРАФИКА
Шрифт
Начертания
Цвета
Montserrat
Шрифт играет важную роль в коммуникации и позволяет выразить суть бренда в наиболее четкой и ясной форме.
Medium
Bold
Black
#2A2A2A
#225CA5
Кегль заголовка
Необходим баланс между объёмом текста и изображением на картинке. Размер кегля может колебаться в пределах 2-3 pt.
Короткий заголовок из 2-3 слов

Montserrat black

Кегль: 67 pt

Межстрочный интервал: 83 pt
Средний заголовок в 2 строки

Montserrat black

Кегль: 65 pt

Межстрочный интервал: 80 pt
Длинный заголовок в 3-4 строки

Montserrat black

Кегль: 60 pt

Межстрочный интервал: 75 pt
Кегль для карточек
Для заголовков карточек необходимо использовать одинаковый кегль вне зависимости от количества символов.
Заголовок
Текст
Montserrat bold

Кегль: 60 pt

Межстрочный
интервал: 70 pt
Montserrat

Кегль: 32 pt

Межстрочный
интервал: 44 pt
Логотип
Полный вариант логотипа присутствует на первой и последней карточках. На остальных визуалах — сокращенный вариант, без текстовой составляющей логотипа.
Оптимальное количество текста на карточке — 100 символов с пробелами.

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

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

Выделение текста создаётся с помощью плашки со скругленными углами контрастного цвета с начертанием Black.
Зафиксируйте виновника
Фраза с глаголом передает действие и основной смысл текста, следующего после заголовка
Защита
вашего дома
от рисков
Страховка
для путешественников
Какая страховка лучше
для ваших детей
Для читателя слова «ваши дети»
важнее, чем слово «страховка»,
т.к. они сразу понимают, о чем пойдет речь.
ГРАФИКА
Основной стиль акцидентная графика с использованием рисованных элементов.
Она может уходить под обрез формата, становясь фоновой и освобождая место для текстового контента.

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

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

Текст и ключевые изображения необходимо размещать в пределах охранного поля
размером 980х980 px.
1080 px
Виды графики
Подробнее о стилистике фото и иллюстраций в главе «Визуальный стиль».
Фотографии
Графические элементы
ПРАВИЛА ОФОРМЛЕНИЯ
ВИЗУАЛЬНЫХ МАТЕРИАЛОВ
Заглавный пост
Основные форматы:

1. Набор карточек.
2. Статичное изображение.
3. Анимация / Motion-design.
4. Видео.
Квадратный вижуал 1х1.
Минимальный размер 1080х1080.
Используются идеально обтравленные цветные фотографии хорошего качества (от 1800 в ширину, 72 dpi) с использованием тени для придания объема.
Логотип ВСК
Заголовок —
Montserrat black
Выделение ключевой части текста контрастным цветом
Графические элементы
Обтравленная фотография
Пример оформления историй
Instagram & VK

Пропорции: 9х16

Размер изображения: 1080х1920 px

Фото: jpg или png.
Видео: mp4 или mov.
Используются идеально обтравленные цветные фотографии хорошего качества (от 1800 в ширину, 72 dpi) с использованием тени для придания объема.
ЛОГОТИП
При выпуске нескольких сторис подряд полная версия логотипа присутствует только на первой и последней сторис.
На остальных — сокращенная версия в виде гор.

ТИПОГРАФИКА
При выпуске нескольких сторис подряд цветная подложка под текст присутствует только на первой и последней сторис.
Карточки
Пропорции: 1:1

Размер изображения:
1080х1080 px

Фото: jpg или png.
Видео: mp4 или mov.
Используются идеально обтравленные цветные фотографии хорошего качества (от 1800 в ширину, 72 dpi) с использованием тени для придания объема.
ЛОГОТИП
В карточках (галереях изображений). полный логотип используется только на первой и последней карточках.

ТИПОГРАФИКА
Цветная подложка под текст используется только на первой и последней карточках.
РАСПОЛОЖЕНИЕ ЭЛЕМЕНТОВ
При наличии цифр в тексте возможно их использование в цветовой стилистике выделителя. Фотография располагается либо в правом верхнем углу, либо целиком в нижней части композиции.
При небольшом количестве текста фотография размещается по центру.
Когда текста много, фотография может выводиться за пределы композиции, размещаться в правом нижнем углу.
Логотип
Посетители просматривают изображения слева направо. Больше внимания будет уделено левой части визуала. Логотип, размещенный справа. получит меньше зрительных взглядов. Что приведет к слабой запоминаемости бренда компании. Поэтому приоритетное размещение логотипа на имидже с однотонным фоном — левый верхний угол согласно шаблону.

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

Кистью, стилизованной под мел, можно заштриховать часть фотографии, чтобы «вписать» ее в общую стилистику.

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

Цвет дудла может меняться в зависимости от цветового решения рубрики, в которой он применяется (подробнее о цветовых схемах в главе «Рубрики»).

Закругленные формы — важная составляющая дудла.

Варианты дудлов не ограничиваются данными видами, а могут меняться в зависимости от контекста.
Смысл дудла напрямую зависит от тематики заголовка. Здесь приведены примеры того, что использовалось ранее.

Все рисунки должны быть белого цвета.

Закругленные формы — важная составляющая дудла.

Варианты дудлов не ограничиваются данными видами, а могут меняться в зависимости от контекста.
Заглавная карточка
Карточка-пояснение
Охранное поле.

В пределах охранного поля не должен быть размещен текст или логотип.

Исключение: некоторые изображения, выходящие за пределы композиции.
Поле размещения текста
Логотип
Используется логотип ВСК, он размещается в левом верхнем углу, в пределах трех клеток сетки.
Логотип
Для карточек — графическая часть логотипа размещается аналогичным образом в двух клетках.
оформления цифровых продуктов Страхового Дома ВСК
Обновление: май 2020
Руководство по стилю
Для всех стилей используется композиция, тематические элементы и соответствующая рубрике цветовая схема (подробнее о цветовых схемах в главе «Рубрики»).
РУБРИКИ
Авто
Оттенки синего универсальны с точки зрения спокойствия и дружелюбия.
Ассоциируются с прогрессом, ростом и стабильностью.
Имущество
Фиолетовый помогает сосредоточиться и расставить приоритеты, сделав акцент на самом главном: доме и имуществе.
Здоровье
В качестве основного цвета выбран голубой цвет.
Светлые тона ненавязчивы и ассоциируются с безопасностью, поэтому будут использованы в рубрике «Здоровье».
Путешествия
Зеленый цвет привлекает внимание без излишней настойчивости, настраивает на общение и положительные эмоции во время путешествия.
Конкурсы
Оранжевый цвет вызывает интерес и бодрость. Создает ощущуение энергии без остроты и резкости, присущих красному, пробуждает радостные мысли и настраивает на позитив.
ОФОРМЛЕНИЕ СООБЩЕСТВ
«ВКонтакте
Обложка группы (1590х400 px)
Оформление сообществ может изменяться в рамках гайдбука и актуализироваться под праздники и инфоповоды.
Контент в оформлении может динамически изменяться с помощью API платформы.
Отображение в мобильной версии
Чтобы текст и ключевые изображения корректно отображались в мобильной версии, необходимо размещать их в пределах поля 916х317 px.

Мы рекомендуем загружать видео или изображения в разрешении 1080х1920 px. Длительность не более 30 секунд, размер файла не более 20 Мб, видеокодек H.264, аудиокодек AAC.
Меню
Обложка для статьи (1926х1080 px)
Необходимо учитывать, что поверх изображения располагается заголовок. Рекомендуется размещать фотографии или большую их часть ниже срединной линии по горизонтали и слева/справа по вертикали.
Facebook
Обложка группы (820x312 px)
Оформление может изменяться в рамках гайдбука и актуализироваться под праздники и инфоповоды.
Обложка статьи на Facebook (1200x445 px)
На Facebook содержание картинки не перекрывается текстом, поэтому расположение ключевого изображения не привязано к срединной линии.
Одноклассники
Обложка группы (1944x600 px)
Важно учитывать расположение аватарки, которая может перекрывать часть картинки.
Чтобы обложка правильно отображалась на всех устройствах в пределах безопасной зоны 980х240 px
Отображение в мобильной версии
РЕКОМЕНДАЦИИ
ПО ВЫБОРУ ФОТО
ДЛЯ КОНТЕНТА
Для лучшей обтравки рекомендуется использование цветных фотографий хорошего качества с нейтральным фоном. Максимальная естественность. Модная одежда (элегантность, не нарочитая стоимость), интересная «фактурная» внешность, модель находится в процессе какого-то действия, а не в постановочной позе.

В приоритете не прямые образы, а осмысленные, ассоциативные, соответствующие посылу текста. Возможно использование коллажа путем совмещения нескольких фото.

Фотографии должны отражать в себе живые эмоции. Люди на фото должны быть европейской/славянской внешности.

Избегать классической стоковой фотографии: идеальная модель, профессиональный свет, «стоковая» одежда, не привлекающая внимание.

Рекомендуемый размер: 1800 px в ширину, 72 dpi.
В визуальных материалах запрещается использование излишне «стоковых» изображений.
Плохая цветокоррекция, неестественность поз.
Двойная экспозиция и засветы, не видно лиц, обрезанные края.
Стандартные серые костюмы, искусственные эмоции.
РЕКОМЕНДАЦИИ
ПО АНИМАЦИИ
Появление элементов в gif-изображениях должно происходить следующим образом.

1. Первыми появляются персонажи.
2. Появляются дудлы.
3. Через 12 кадров текст (появление букв и появление плашки происходит одновременно).
4. Последним появляется логотип.

Анимация исчезания происходит за 24 кадра и одинакова для всех элементов. Ее необходимо добавлять для бесшовного зацикливания.
Анимация логотипа
Параметры анимации текста представлены на картинке:
Любая анимация появления элементов должна длиться от 1,5 до 2 секунд и соответствовать этому графику скорости:
Анимация исчезания создается путем анимирования параметра Position длиной 24 кадра. График скорости выглядит вот так:
На всех анимируемых слоях, за исключением текстовых и логотипа, должен быть включен Motion blur.
752х512 px
1944 px
752х512 px
752х512 px
752х512 px
1196 px
Во вложении с гайдбуком также идут:
ссылка и архив на скачивание шрифта Montserrat: Скачать
psd-макет с сеткой для формата 1080x1080: Скачать
кисть для фотошопа KYLE ultimate charcoil pencil: Скачать