Промо-сайты [WIP]

Основные принципы построения промо-сайтов.

Контролы

  1. На промо-сайтах используются контролы со стилями медиапроектов
  2. Мобильные версии промо-сайтов подчиняются правилам наших мобильных сайтов
  3. На промо-сайтах могут использоваться большие промо-кнопки. Допускается выбирать цвет кнопки под стилистику промо-сайта.
  4. Строго рекомендуется использовать на странице не более одной главной кнопки
  5. Объекты на промо-сайтах, являющиеся производной от уже существующих элементов и компонентов интерфейса (карточка, картинка с ссылкой, кнопка, список и т.п.) должны подчиняться правилам нашей дизайн-системы.
    1. если у объекта есть рамка, то она использует стандартную переменную для рамок;
    2. если объект — карточка, то он наследует стиль карточки (граница, тень);
    3. попап может иметь внутри уникальный дизайн, однако в остальном будет подчиняться правилам попапов: скругление, тень, иконка закрытия, расположение элементов управления, отступы между блоками.

Шапка

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

Правила по ним должны быть максимально формализованы.

Из чего состоит шапка

1. Логотип

  1. высота — 48px
  2. на синих фонах допускается использовать логотип без подложки

2. Меню (при наличии дополнительных разделов)

  1. ссылки в ряд
  2. call to action кнопка акцентного цвета размером 32px или 40px (второе предпочтительнее)

3. Заголовок

  1. шрифт Roboto light 44px, line-height: 52

4. Подзаголовок (опционально)

  1. когда текста немного - Roboto light 24px, line-height: 32
  2. когда текста много - Roboto light 17px, line-height: 24px

5. Сall to action кнопка (опционально)

  1. при большом размере шапки необходимо использовать анимированную иконку с мышкой

Прочее

  1. Размер шапки определяется контентом
  2. По умолчанию в шапке используется выравнивание элементов по центру, однако при необходимости можно использовать выравнивание по краям в две колонки. В этом случае в левой колонке располагается текстовая часть, а в правой - какой-то акцентный элемент.
  3. Фон шапки бывает следующих видов:
    1. цветной (сплошной цвет / градиент)
    2. серый
    3. с изображением на фоне (изображение значительно перекрывается цветом, чтобы не мешать тексту)
    4. с иллюстрацией в нижней части плашки
    5. допускается использование наших фирменных паттернов

Примеры шапок

Примеры организации типовых контейнеров

Характерные примеры организации контента в информационных блоках, которые неоднократно использовались на тех или иных промо-страницах.

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