Лендинги на главной

Шаблоны
Чек-лист
Подготовка к разработке
Изображения
Структура
Баннеры
Типографика

Шаблоны

Скачать шаблон лендингов на главной странице.

Чек-лист

1. Используйте фотореалистичные изображения в стиле QIWI в качестве Key Visual.
2. Выбирайте для фона обложки градиент от #FFF до #E6E6E6.
3. Располагайте Brand Button в размере Accent в нижней части экрана горизонтально по центру.
4. Размещайте в промо-карточках иллюстрации в стиле QIWI.
5. Используйте на промо-карточках Simple Button в размере Normal.

Подготовка к разработке

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

Необходимые размеры:
— 1920px;
— 1440px;
— 1280px;
— 1024px;
— 600px;
— 400px;
— 320px.

Изображения

В качестве key visual используйте брендированные фотореалистичные изображения, содержащие логотип QIWI.

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


Структура

Лендинг на главной странице состоит из обложки и нижнего блока, состоящего из промо-карточек.

Обложка

Композиция обложки может выравниваться:
— по центру;
— по левому краю;
— по правому краю.

Конентная область

В нижней части страницы располагаются баннеры. Баннерырасполагаются в белых интерфейсных блоках.

Баннеры

Размер баннеров на лендинге зависит от разрешения устройства.

Важно!
Растровые картинки для баннеров предоставляются в формате jpg, векторные иллюстрации — в формате svg в размере 144×144px.

1280px, 1440px, 1920px

Для десктопных разрешений предусмотрено 2 размера баннеров:
— 1180×200px;
— 580×400px.

Размещайте на баннерах Simple Button в размере Normal.
Для заголовка баннеров используйте уровень H2 (Desktop).
Для основного текста — Body M 300 (Normal) в черном цвете.

1024px

Для разрешения 1024px предусмотрено 2 размера баннеров:
— 944×200px;
— 464×524px.

Для заголовка баннеров используйте уровень H2 (Mobile).
Для основного текста — Body M 300 (Normal) в черном цвете.

600px

Для разрешения 600px предусмотрен один размер баннера с фиксированной шириной — 560px, высота баннера зависит от контента.
Используйте для мобильной версии те же стили текста, что и для разрешения 1024px.

400px

Для разрешения 400px предусмотрен один размер баннера с фиксированной шириной — 360px, высота баннера зависит от контента.

320px

Для разрешения 320px предусмотрен один размер баннера с фиксированной шириной — 288px, высота баннера зависит от контента.Используйте те же стили и размеры, что и для разрешения экрана 400px.

Типографика

Типографика лендингов следует общей стилистике QIWI. Акцентный заголовок используется во всех продуктах и является одним из отличительных элементов нового стиля.

Десктопная версия

ПараметрШрифт
Museo Sans
Размер
текста, px
Высота
строки, px
Title 19004856
Title 29004048
H39002428
H47002024
Body L3002024
Body M3001624

Мобильная версия

Параметр Шрифт
Museo Sans
Размер
текста, px
Высота
строки, px
H1 Mobile9002832
H2 Mobile9002632
H3 Mobile9002228
H4 Mobile5001824
Body L3002024
Body M3001624

Далее «UI-kit и шаблоны»