Оформление соцсетей банка еды «Русь»

Задача

У банка еды «Русь» много рубрик: истории благополучателей и волонтёров, цифры года, анонсы акций и мероприятий, срочные объявления, юмор, рубрика о продуктосбережении в регионах. Каждый такой пост — отдельная карточка, а в ленте они идут подряд.

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

Правила системы

Все карточки квадратные, 1080 × 1080. Шрифт один — Museo Sans Cyrl: плотные начертания Bold и Black для заголовков и цифр, Medium для мелкого текста. Логотип «Русь» по умолчанию стоит вверху справа, а фон карточки выбирается из семи цветов палитры.

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

Фоновые цвета

Типографика и плашки

Система держится на одном шрифте — Museo Sans Cyrl — и небольшом наборе повторяющихся форм. Заголовки набраны плотным Bold, самые крупные акценты — Black, а пояснения — Medium. Регистр везде обычный, без капса: фразы читаются как живая речь.

Шкалы размеров с жёсткими ступенями нет: размер заголовка подбирают под длину текста, поэтому в файле встречаются значения от 38 до 140 px. Зато принцип один — чем крупнее строка, тем плотнее интерлиньяж и трекинг.

Заглавная карточка поста

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

На иллюстрации — вариант с цветным фоном: те же макеты собраны на разных цветах палитры — оранжевом, синем, зелёном, голубом и жёлтом — и на белом.

Семейства карточек под рубрики

Каждой рубрике фонда соответствует своё семейство. Внутри семейства — несколько цветов и вариантов компоновки, поэтому в ленте один и тот же тип не повторяется буквально.

Цифры и статистика

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

Важная информация

Три подсемейства: срочные объявления и предупреждения, изменения, новости проекта. Срочные сообщения выделены малиновым цветом, значком колокольчика и пометкой «ЧП»: на фото — ситуация или человек, ниже — заголовок и призыв «Ваша помощь нужна прямо сейчас».

Анонсы мероприятий

Для акций, приглашений и мероприятий — карточки с пометкой «Мероприятие», названием, датой и местом: дата вынесена на цветную плашку, чтобы её находили первой.

Благополучатели и волонтёры

Два десятка макетов для историй о людях фонда: крупное фото человека, пометка рубрики вверху и подпись с именем, а для историй — цитата или короткий рассказ. Лицо идёт первым, поэтому карточка читается как рассказ, а не как объявление.

Рубрика «Продуктосбережение в регионах»

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

Не показаны здесь, но входят в систему: карточка с цитатой (интервью, комментарий эксперта, мнение спикера — 24 макета), карточка для мемов и юмора (6) и карточка под фото продуктов (6).

Внутренние карточки карусели

Карусель — это заглавная карточка и несколько внутренних. Для внутренних сделаны четыре типа шаблонов, 46 макетов: текстовая карточка, текст с цифрами, текст с фото, список и тезисы.

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

Логотип на карточках

Логотип «Русь» нужен на каждой карточке, но не везде в одном месте. Поэтому сделано три варианта размещения: логотип снизу, логотип слева вверху или внизу и вариант без логотипа.

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

Графические элементы и иконки

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

Вместе с иллюстрациями — четыре фирменных пятна (два синих, два оранжевых) для подложки под текст и готовые блоки заголовков: плашки с цифрами, акцентные заголовки, подписи для людей и дат.

• около 70 контурных иллюстраций продуктов в белом и оранжевом цвете
• четыре фирменных пятна-подложки
• готовые блоки текста: плашки, цифры, акцентные заголовки, подписи

Как устроен файл

Все макеты собраны в одном файле Figma на одной странице. На странице собраны четыре примера ленты и блоки по рубрикам, а внутри блока — подразделы по назначению: например, «срочные объявления», «изменения» и «новости проекта» для важной информации.

Названия блоков и подразделов написаны по-русски и описывают назначение, поэтому нужную карточку находят по рубрике, а не по номеру.

• 20 верхнеуровневых блоков: 12 семейств карточек, набор графических элементов, четыре примера ленты и вспомогательные заготовки
• названия блоков и подразделов по-русски, по смыслу рубрик
• в каждом подразделе — серия макетов в разных цветах и компоновках

Все работы по соцсетям →