Промо-лендинги

Примеры
Чек-лист
Подготовка к разработке
Структура
Типографика

Примеры

Скачать примеры лендингов

Чек-лист

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

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

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

Необходимые размеры:
— 1280px — для десктопа (популярное разрешение);
— 1024px — для десктопа или планшета;
— 600px — для планшетов;
— 320px — для мобильных.

Структура

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

Обложка

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

Желательно использовать Brand Button в размере Accent и фотореалистичное изображение в стиле QIWI.

Описание преимуществ

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

Блоки могут располагаться как на белом #FFF, так и на сером фоне #F5F5F5. На сером фоне могут располагаться белые карточки.

Информационные блоки

Информационные блоки выравниваются:
— по центру,
— по левому краю,
— по правому краю.

Типографика

Типографика промо-лендингов отличается от текстовых стилей в интерфейсе. Желательно придерживаться следующих стилей:

ПараметрШрифт Museo
Sans
Размер
текста, px
Высота
строки, px
Title 19004856
Title 29004048
H39002428
Body30020от 24 до 28
List30020от 24 до 32

 

Далее «SMM-материалы»