Дизайн
Dmitrii Kuchev
7900

Дизайн-система в клиентских проектах

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

В закладки
Аудио

По сравнению с крупными студиями из топа «Тэглайна», Reactive — небольшое агентство: штат дизайнеров — два–три человека. Над одним клиентским проектом редко работают одновременно два дизайнера. Чаще один проект — один дизайнер. Казалось бы, причем тут дизайн-системы, если нет командной работы над дизайном?

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

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

Зачем нам дизайн-система

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

Наши проекты живут долго: иногда проектирование и дизайн занимают полгода–год. За это время забываются идеи, заложенные вначале. Часто к проектам возвращаемся спустя год–два: нарисовать новую страницу, спроектировать новый раздел или сервис на сайте.

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

Стандартизация приёмов помогает ускорить проектирование. Скорость — это деньги. Обычно бюджет и срок проекта зафиксированы. Поэтому жизнеспособность студии немало зависит от скорости работы.

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

Чтобы делать быстро и качественно, нужна система. Здесь качество зависит от степени проработанности дизайна. Ничто не должно быть произвольным или случайным.

Стандартизация — это уважение и забота о пользователе.

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

Сетка

Микромодуль

Микромодуль 5х5 px

Каждый интерфейс, который я проектирую, основан на сетке. Основа сетки — микромодуль, всё начинается с него. Я использую пятипиксельный модуль, то есть все размеры и отступы кратны пяти. Главная задача микромодуля — упростить решение.

Какой выбрать отступ между элементами — 10 px, 11 px, 12 px, 13 px, 14 px, 15 px? Можно потратить массу времени и энергии, если выбирать между близкими вариантами. Сразу тяжело выбрать, какой из них визуально лучше. Если умножить это на количество вариантов, где в интерфейсе нужно принять решение, то никакого времени не хватит.

Микромодуль отвечает на вопрос: или 10 px, или 15 px. Контраст в 5 px достаточно виден, чтобы сразу решить, какой лучше.

Часто студии используют четырёх или восьмипиксельные модули. Не так важно, какой модуль выбрать, главное, чтобы команде было понятно и удобно с ним работать. Мы выбрали пятипиксельный. Это упрощает счет: делить на пять проще, чем на четыре и восемь. Математику не обманешь.

Карточка товара. Каждый квадрат сетки — 5х5 px

Микромодулям подчиняются вертикальная и горизонтальная сетка, размеры элементов и отступы между ними, интерлиньяжи в типографике.

Вертикальная сетка

Вертикальная сетка — обязательное составляющее адаптивного дизайна. Адаптивный — значит тот, который подстраивается под разные размеры экрана. Ширина экрана может быть 1024 px, 1200 px, 1440 px и так далее. При проектировании мы должны строить надёжную систему — одну для всех.

Я использую три разрешения экрана для адаптивных сайтов — 320 px для мобильных интерфейсов, 768 px для планшетов и 1440 px для десктопов. Три разрешения — это необходимый минимум. Кажется, что трёх мало и нужны промежуточные — для больших смартфонов, альбомной ориентации планшета, ноутбуков и 4К-десктопов.

Но дополнительные экраны — это дополнительное время на проектирование и разработку и дополнительные расходы для клиента.

Я использую стандартную 12-колоночную сетку. 12 колонок — это удобный стандарт, на котором легко построить множество комбинаций макромодулей. На 12 колонках легко строить и воздушные композиции с малым количеством элементов и высокодетализированные макеты.

При расчёте сетки стараюсь подбирать ширину колонок и межколонников кратными пяти. Это не догма, но так проще рассчитывать размеры. Это не жёсткое ограничение — потому что задачи разные, не всегда получается подогнать сетку к микромодулям.

Горизонтальная сетка

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

Какой лучше отступ между картинкой и текстом — 10 px, 15 px или 20 px? Как и в случае с микромодулем, система лучше, чем каждый раз выбирать на глаз.

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

Отступы строятся на микромодулях. В каждом проекте система своя — в зависимости от того, что нужно: плотность или воздух. Обычно достаточно четырёх–пяти видов отступов: между логическими этажами страницы; большой, средний и маленький между блоками внутри этажа; и, например, самый маленький — для отступа между иллюстрацией и подписью. Например, так:

Здесь минимальный отступ — 15 px. Остальные строятся на его базе: 2x15, 3x15, 5x15

Размер минимального отступа зависит от интерлиньяжа наборного текста. Например, наборный текст 16, 20 px, значит, минимальный шаг сетки — 20 px. Остальные отступы строятся от него. Это удобно, потому что текстовые блоки всегда будут заканчиваться на границе сетки.

Типографика строится так, чтобы каждая строчка попадала в шаг сетки

Типографика

Использовать максимум два шрифтовых семейства

Работа с типографикой начинается с выбора шрифтовых пар. Выбор шрифта относится к работе над стилем сайта, поэтому это вопрос не стандартизации, а создания образа.

Правило: «Использовать не больше двух шрифтов», уходит корнями в печатную типографику. В «Эссе о типографике» Эрик Гилл пишет:

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

Эрик Гилл

Я думаю, что использовать не больше двух шрифтов учат потому, что в руках неопытного дизайнера сочетание более двух гарнитур выглядит неряшливо и хаотично. Найти гармонию между двумя шрифтами проще, чем между тремя или четырьмя. Но это не значит, что использовать больше двух запрещено. На сайте газеты «Ведомости» дизайнеры из Charmer использовали четыре шрифта: Arial, Georgia, Roboto Slab Serif и Fedra Sans.

Четыре шрифта гармонично сочетаются на одном экране

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

Чтобы выбрать шрифтовую пару, я знаю четыре пути:

  • Выбрать один раз две–три любимые и работать с ними из проекта в проект.
  • Подсмотреть у крутых дизайнеров. Я ориентируюсь на Charmer. Мне кажется они самые сильные в работе с типографикой в России.
  • Использовать пару шрифтов из одной гарнитуры. Например PT Sans и PT Serif.
  • Использовать сервисы подбора пар. Например, комбинатор шрифтов Артема Помельникова.

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

  • в какой среде живут тексты;

  • какой и сколько контента;

  • сколько колонок занимают заголовки и параграфы;

  • какой объем воздуха нужен блокам.

Систематизация работы над типографикой начинается, когда готовы черновые макеты трех страниц сайта. Например, в интернет-магазинах — это главная, страница каталога и страница товара.

Я выкладываю все текстовые стили на один артборд в таблицу и смотрю, что можно улучшить: от каких стилей отказаться, какие объединить.

Пример уже систематизированных стилей. По опыту обычно для проекта достаточно 10–12 стилей. Таким набором можно покрыть все задачи с условием адаптивности макетов

Тут есть:

  • назначение (подзаголовок в статье);

  • семейство и плотности (Geometria Bold);

  • кегли и интерлиньяжи (24,36 px).

Все это для десктопа, планшета и мобильных устройств.

Минимизировать количество стилей

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

Одним стилем решать как можно больше задач.

Разнообразие стилей достигаю минимумом используемых кеглей. То есть строю на одном кегле несколько стилей. Например, 16 кеглем названия кнопок, маргиналии и выноски.

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

На сайте Reactive Media мы используем 14, 16, 18, 21, 24, 32, 36, 56 кегли. Кажется, что между 14 и 16 небольшая разница — зачем использовать такие близкие кегли, может быть, от одного отказаться? Похожая ситуация с 21 и 24 кеглями, 32 и 36. Но отказаться не получилось.

Выноска (14 пт) чересчур контрастна к основному тексту (21 пт)
Выноска (18 пт) недостаточно контрастна к основному тексту (21 пт)
Идеально

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

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

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

Использовать кегельные ряды

Стили делю на интерфейсные и контентные. Интерфейсные — это стили статичных элементов сайта: навигации, выносок, ссылок, кнопок, элементов карточки товара и так далее. Контентные — это стили для текстовых страниц, которые клиент создаёт сам: новости, описание акций, описание условий продажи, технические страницы и так далее.

Синие — интерфейсные стили. Красные — контентные

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

Наполнением контентных страниц дизайнер не управляет. Клиент может написать заголовок в четыре строки, а может в одно слово; может написать абзац из одной строчки, а может из 20. Поэтому важно для контента создавать надежную систему.

Для контентных стилей я придумываю систему кеглей, чтобы выстраивались ряды с логикой. Например, 12, 18, 24, 36, 48, 72. Тут все делится на 6 или 12. Или 15, 20, 30, 60, 100 — тут на 15 или 20. Кажется, что так получаются более гармоничные шрифтовые композиции.

На сайте Reactive для контента используем 14, 21, 36 и 56 кегли — ряд с делением на 7 (вместо 35 взяли 36 кегль как более привычный в использовании).

Система может сломаться об контент. Увидеть и проверить это можно только при тестировании на «живом материале». В дизайне карточек проектов для названия проекта я использовал 21 кегль.

Разрешение 1440 px, названия проектов в 21 пт

При проверке на маленьких экранах, длинные слова вроде «государственных», «информационный» не входили в ширину карточки.

Разрешение 1024 px, названия проектов в 21 пт

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

Разрешение 1024 px, названия проектов в 18 пт

Графика

Использовать размеры, кратные пяти

Как писал выше, в макетах я использую микромодульную сетку основанную на 5 px. Рисуя иконку, я вписываю ее в квадрат, состоящий из микромодулей. Размеры квадрата кратны пяти. Так иконку удобнее располагать в макете. При этом, размер самой иконки определяет оптическая сетка.

Фрейм иконки — 30 px. Размер контентной области — 20 px

Использовать оптическую сетку

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

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

Использовать пиксельную сетку

Пиксельная сетка нужна, чтобы иконки выглядели резкими на экранах без Retina. Для этого надо:

  • Располагать опорные точки в целочисленных значениях. Не 8,93 px, а 9 px. «Вываливание» опорных точек за границы пикселя приводит к размыванию иконки на неретиновых экранах.

Сверху не ок, снизу ок

  • Не использовать выравнивание линии по центру. Для контурных иконок границу шириной в 1 px лучше выравнивать по внутренней или внешней стороне, но не по центру. Выравнивание по центру приведёт к полупрозрачным пикселям, иконка будет выглядеть размытой.
  • Использовать углы в 45 градусов. Сглаживание неровностей при 45 градусах производится равномерно: активные пиксели хорошо прилегают друг к другу. Если стиль иконки не позволяет использовать 45 градусов, то лучше использовать кратные 45: 22,5, 30, 60. Диагонали с такими углами выглядят четче, чем с нестандартными (например, 18,5 градуса).
Верхняя иконка будет выглядеть размытой при 100%. Хотя при увеличении выглядит достаточно четко. Нижняя будет четкой всегда

Придерживаться одного стиля

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

  • Толщину. Например, 2 px для крупных деталей и 1 px для мелких.
  • Скругления. Это придаёт набору единство формы.
  • Размеры промежутков. Расстояние между близкими элементами не должны быть слишком маленькими, иначе контуры «слипнутся». Минимальный размер промежутка — толщина линии.
  • Заливку. Либо все иконки с заливкой, либо все без. Если одни залить, то может показаться, что они важнее.
У залитых иконок больший визуальный вес. Поэтому их можно использовать как акцентные, либо для наведенного состояния

Стилистика набора зависит от общей стилистики сайта, но в целом все подчиняется этим правилам.

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Dmitrii Kuchev", "author_type": "self", "tags": [], "comments": 36, "likes": 48, "favorites": 169, "is_advertisement": false, "subsite_label": "design", "id": 65584, "is_wide": true, "is_ugc": true, "date": "Wed, 24 Apr 2019 17:00:18 +0300", "is_special": false }
0
{ "id": 65584, "author_id": 287897, "diff_limit": 1000, "urls": {"diff":"\/comments\/65584\/get","add":"\/comments\/65584\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/65584"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
36 комментариев
Популярные
По порядку
Написать комментарий...
8

Очень полезная информация, которой часто не хватает. Спасибо автору.

Ответить
3

Ребята из реактива! Пожалуйста переименуйтнсь в дизайнерское агенство и перестаньте делать сайты!

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

Ответить
3

Вы бы слышали, что говорят о стартмедиа...

Ответить
1

Сёма в треде, бегите

Ответить
0

Я хз о чем ты) у нас за всю историю 12 клиентов ушло. И большая часть из за цены.

Ответить
0

Интересно, как вы в одного со всем потоком клиентов справляетесь

Ответить
0

плохо ты знаешь нашу компанию) но спасибо за комплимент.

Ответить
3

Это не комплимент

Ответить
1

Я уже запутался, кто кого тролит)

Ответить
3

4px сетка более гибкая, интересно послушать про исключения потому что сохранить те же отступы внутри кнопок практически нереально, либо сильно ограничит возможности

Ответить
0

Да, например, в элементах с центрированием отступы должны быть четными, чтобы не было полупрозрачных пикселей. Поэтому либо беру кратные 10, либо просто отхожу от 5.

Микромодуль — это условность, чтобы быстрее собирать макет. Но это не жесткое правило, конечно.

Ответить
0

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

Ответить
4

Норм работает, когда делаешь плюс-минус похожие проекты: интернет-магазины, медиа, госпорталы, корп.сайты. Там, где контента много.

В лендосах система обычно излишня.

Ответить
1

Фигня все эти модули. Всегда на глаз херачу хыы

Ответить
1

По этой теме наиболее интересен вопрос, как потом заставить верстальщика соблюдать горизонтальную сетку, а не только вертикальную

Ответить
1

А в чем проблема? Наоборот, если дизайн-система есть, то так проще даже.
Создал один раз ряд классов с нужными значениями и используешь их по всему проекту, ведь это проще, чем каждый раз для каждого элемента отдельно "угадывать" и писать.

Если версткой занимается не такой "ленивый", тогда задалбывать за эти несоответствия до тех пор, пока эта "гениальная" мысль сама его не навестит.
Работает это конечно в условиях нормального бюджета, а если брать первого попавшегося на фриланс-бирже по 500 руб. за страницу, то проект скорее бросят уже через пару дней, чем доведут начатое до желаемого результата

Ответить
0

А для них это тоже удобно. Не нужно замерять отступы в пикселях. Сразу видео: ага, тут 5 шагов, значит 75 пк.

Ответить
1

Спасибо автору, очень нужная информация и подача крутая.

Работа по системе в разы ускоряет и упрощает работу, особенно если дело касается сложных интерфейсов и многостраничных сайтов, да и для лендинга сгодится, чего уж там.

Ответить
1

Бля, ну наконец-то нормальные дизайнеры подъехали, а не трешак, который 10 лет на рынке, а в понртфолио — хуй

Ответить
1

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

Ответить
0

Когда программисты решили заняться дизайном

Ответить
1

И не слышали ничего о визуальной компенсации

Ответить
0

Нормальные слышали.

Ответить
0

Получается размер кегля шрифта вы не считаете относительно формата строки, а берете по наитию?

Ответить
0

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

А можете привести пример расчета?

Ответить
0

Да, могу. К примеру можно ориентироваться на формулы из книги Джеймса Феличи (Часть 2, глава 9 стр174). - "Кегль и формат колонки. Идеальное соотношение равно примерно 2:1 или 2.5:1, что означает от 20 до 25 пик для шрифта 10 кегля. Когда соотношение приближается к 1:1 хорошая верстка становится практически невозможной. Соотношение 1.5:1 это уже хождение по тонкому льду."
Подобная калькуляция есть для всего - интерлиньяж, трекинг и кернинг, ширина апрошей и полуапрошей. Многое из этого уже реализованно в SCSS плагинах, и мне как версталщику стала интересна эта тема, поэтому я спросил это у вас. Интересно используют ли топовые студии такие вещи в деле?
Если честно, примеры рассчета Феличи мне понравились, но есть в них одна особенность - он говорит про книжный или газетный текст. В типографике есть другие примеры, которые могут подходить для UI - например текст набранный исходя из рамок плоского дизайна (когда тот был придуман для карт). Поэтому всегда можно отступить от правил, как никак верить собственному глазу - основа всего в типографике.
А что вы об этом думаете?

Ответить
1

Есть замечательный курс по веб-типографике от Метея Латина (Matej Latin), и вот глава про вертикальный ритм:
https://betterwebtype.com/rhythm-in-web-typography

В конце есть формула и миксин для SCSS.

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

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

lypovetsky@gmail.com

Ответить
0

Кайф! Спасибо за ссылку!

Ответить
0

Вот это и есть проект Матея Латина)

Ответить
0

Понятненько. Скоро буду блог значит переделывать под scss - учту опыт.

Ответить
0

Про расчет для печатной типографики я читал. А вот для веба не встречал. В вебе адаптивная колонка — динамическая. Получается, кегль должен динамически меняться. Я встречал такое в практике, но редко. Чаще, когда кегли фиксируются между брейкпоинтами.

Будет круто, если скинете что-то почитать на эту тему. mail@dmitriikuchev.ru

Ответить
0

Спасибо за ответ. Даже не знаю, чего я такого скину крутанам. Я то всего ничего прочитал. Конечно, если будут какие то сподвижки я поделюсь.

Ответить
0

Отличная статья, спасибо! Особенно порадовало наличие не только правильных, но и неправильных примеров.

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }