Принципы композиции для графики в соцсетях

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

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

Что на самом деле значит «читать главное первым»?

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

Исследование F-образного паттерна от NN/g показало, что читатели веб-страниц просматривают верхнюю полосу, затем более короткую вторую полосу, потом спускаются вдоль левого края и редко читают слово за словом. Это исследование касалось веб-страниц с большим количеством текста, а не изображений в ленте. Мы предполагаем (это не проверялось в том исследовании на изображениях), что та же привычка переносится на графику в ленте: ставьте главную мысль в левый верх текстового блока и выносите важное в первые слова.

Используйте тест прищуром из той же статьи NN/g: размойте дизайн или отойдите от экрана и посмотрите, что всё ещё выделяется. Если это не то, что вы задумали, меняйте композицию, а не текст.

Принцип 1: Как работает иерархия в одной публикации?

В нашем пересказе статьи NN/g иерархия строится на масштабе, контрасте и группировке. Совет NN/g: не больше трёх вариантов размера и не больше двух крупных элементов. Наша рекомендация для публикации 1080 px: три уровня, то есть заголовок, одна поддерживающая строка и небольшая подпись.

В этой композиции в швейцарском стиле единственный крупный элемент это заголовок. Подпись и метаданные намного меньше по размеру, поэтому тест прищуром выдаёт одно пятно: заголовок. Мелкие элементы здесь не для конкуренции. Они отвечают на вопросы «что это» и «сколько времени это займёт».

Принцип 2: Зачем сетка для одного изображения?

Сетка это повторяющаяся единица, которая определяет, где могут находиться элементы. Material Design 3 строит отступы на шкале в 8dp и различает внутренние отступы (внутри элемента), промежутки (между элементами) и поля (снаружи). Применять эту идею к публикации в соцсетях это наша рекомендация, а не правило платформы: выберите одну единицу, например 24 или 40 px при ширине 1080, и используйте только кратные ей значения.

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

Принцип 3: Сколько пустого пространства достаточно?

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

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

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

Принцип 4: Как выделить что-то одно, не крича?

В нашей трактовке акцент это иерархия, доведённая до предела: один элемент, одно оформление. NN/g также советует ограничить палитру несколькими цветами и не полагаться только на цвет, что важно для доступности. Значения коэффициентов смотрите в статье цветовой контраст в соцсетях и WCAG.

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

Как выглядит быстрый чек-лист по композиции?

Проверка	Наше практическое правило	Принцип
Тест прищуром	После размытия остаётся один элемент	Иерархия
Размеры текста	Два или три, не больше	Иерархия
Левый край	Подпись, заголовок и строка автора выровнены по нему	Сетка
Единица отступа	Одна базовая единица, только кратные ей значения	Сетка
Промежутки между группами	Внутри группы меньше, чем между группами	Пустое пространство
Края	Поле свободно со всех четырёх сторон	Пустое пространство
Акцент	Одно оформление, использованное один раз	Акцент
Контраст	Соответствует WCAG, не только цветом	Акцент

Прежде чем завершить работу, проверьте размер холста и безопасные зоны в руководстве по размерам изображений для соцсетей. По нашему опыту, платформы накладывают поверх публикаций собственный интерфейс, поэтому композиция, которая работает в 1080 x 1080, всё равно может потерять подпись у края. Для Stories и Reels смотрите безопасные зоны простыми словами, где приведены безопасные зоны рекламы Meta.

Как сохранить единообразие композиции в команде?

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

Куда идти дальше в этом разделе?

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