Встречают по обложке: визуальные приемы, которые делают корпоративное медиа лучше

Сегодня модно развивать корпоративные медиа, то есть издания, которые выпускают сами бренды. Самый известный проект в рунете — пожалуй, Т—Ж. Конечно, такой спецпроект может потянуть не каждый бренд — всё-таки речь идет о создании и поддержке собственного СМИ. Это, на минуточку, не только «запустить сайт и писать статьи», речь о создании целой инфраструктуры — нужно оформлять публикации, поддерживать соцсети, вести каналы, работать с комментаторами, продвигать.

Бренды с PR-бюджетами поскромнее могут начать с качественного блога (или, как его сейчас модно называть с подачи всё того же Т—Ж, журнала).

Этот текст — сборник советов, идей, решений и просто актуальных тенденций в такой узкой, но важной области, как обложки в цифровых медиа. В качестве примеров — разные современные онлайн-издания, не обязательно корпоративные.

Банально, но важно. Картинка на обложке — такой же способ выразить что-то, как и заголовок вашей статьи. Как отличить хорошую обложку от плохой по этому критерию?

Картинка должна перекликаться с названием.

На обложке кадр из аниме, девушка смотрит в монитор и разводит руками, будто бы повторяя: «действительно, как?».

Агент Смит пытает Морфеуса. Трудно найти место в заголовке и подводке, с которым перекликается картинка. Видимо, это «не облажаться?» (Морфеус и команда попали в засаду, облажались… ну хз).

Оба примера с сайта DTF

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

Обложка, которая заставляет замереть — хорошая. Она может шокировать или призывать что-то порассматривать (это не обязательно чьи-то [вырезано феминистками]). Или вызывать в мозгу воспоминания: «где же я видел эту картинку?».

Самый запоминающийся и интригующий кадр фильма «Начало». И одновременно он про юлу — перекликается с названием.

Картинка с шаттерстока по запросу business meeting. В интернете тысячи их. Спасибо, что не рукопожатие.

Примеры с Shopolog

Конечно, лучший пример такого «давания картинкой по башке» — в блоге Елены Торшиной 👊

Еще способ встряхнуть читателя — сделать верстку нарочито «поехавшей», как это делает, например, Т—Ж. Да, купюра всегда перекрывает текст справа и никто не боится, что читатели не станут кликать на заголовки.

В тренде: Глитчи

journal.tinkoff.ru

Сейчас дизайнеры настаивают на том, чтобы бренд придерживался своей визуальной стилистики в коммуникации, блога или корпоративного СМИ это тоже касается. Объяснение простое — особый визуальный стиль помогает читателям быстро ассоциировать публикацию с брендом. И выделиться из общего потока это тоже помогает.

Визуальный стиль может быть разным, но стоит над ним поработать.

Arzamas использует цветофильтры на фотографиях — так разноплановые снимки получают единый визуальный стиль

У «Мела» это иллюстрации в определенной стилистике и свой шрифт для обложек. Используется не на всех обложках, но определенную гармонию уже создает

В тренде: Иллюстрации

blog.adn.agency

Уникальный визуальный стиль ВОС — треш-коллажи, 3D, гифки. Ни с чем не перепутаешь. Разве что…

В тренде: Треш-арт

gorky.media

Журнал Brodude на всех обложках использует одинаковое осветление — получается «зарифмовать» даже совсем разные по стилю фотографии.

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

Большие обложки — это правильно. Еще лучше, если издание чередует разные макеты для анонсов статей: по размеру, расположению текста и картинки и так далее.

У ныне покойного Look at Me очень хорошо сверстана главная — крупные графические блоки делают страницу «глянцевой», ее хочется изучать. Этот журнал задал многие тренды, верстка главной страницы — один из них.

То же самое у Meduza — на главной комбинируется 7 разных типов блоков, под блоки с фотографией отведено больше места, под текстовые — меньше. Получается хорошо.

А теперь контрпример — главная страница «Спутника и Погрома». Включите прокси, заклейте веб-камеру и если что, мы вам про этот сайт не рассказывали 😝

Вообще у «Спутника» очень качественные обложки-постеры — но из-за крохотных миниатюр их просто не видно.

Все вокруг становится анимированным и интерактивным. Обложки тоже можно оживить — просто чередуя статичные картинки с гифками.

Как это работает в Т—Ж:

Еще один покойник, Furfur, очень увлекался гифками. Кстати, движущаяся абстракция в качестве фона — выглядит отлично.

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

The Village рисует уникальные иконки в едином стиле для отдельных статей

У Furfur решение попроще: иконки для схожих тематик повторяются. Но выглядит всё равно хорошо.

В тренде: Эмодзи

awdee.ru

Контрастные соседние блоки — один из способов сделать корпоративное СМИ еще более привлекательным визуально. Это может быть чередование разных по размеру блоков, игра на контрасте фона карточек, комбинирование фотографических обложек с иконками, рисунками, смешивание статичных и анимированных изображений.

На «Меле» для создания контраста используют размер и сочетание фото с иконками.

The Village комбинирует обычные фотографии с обтравленными по контуру изображениями на однотонном фоне.

В тренде: Анимация на цветном фоне

lookatme.ru

На ВОСе «дружат» маленькие и большие миниатюры, статика и анимация

На Meduza используется несколько типов текстовых блоков и несколько — текстово-графических. Сетка ломается, получается нескучно.

Мало «дизайна»? Сделайте текстовые анонсы, как у Republic

У Wonderzine — нетипичное использование фотографий в качестве иконок. Казалось бы, микроскопические миниатюры должны «шуметь» и воссоздавать визуальную эстетику новостных сайтов нулевых — но нет, всё очень хорошо.

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

Если вам неймется сделать обложку, но нет мыслей, какая картинка к ней подойдет — сделайте текстовую обложку.

На VC.ru используют такой прием — крупный шрифт на светлой подложке и ничего больше. В ленте выглядит отлично и цепляет.

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

Мы запустили свое скромное студийное издание в 2016. А, ладно, это просто блог. Но с самого начала решили — надо заниматься обложками. Сначала это были просто фотографии с Unsplash, это такой модный фотосток с хипстерскими снимками.

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

Потом начался Tagline Awards, там была номинация «лучший блог агентства». Подумали, надо участвовать. Поняли, что делать обложки с иллюстрациями — круто и никто так в отрасли не делает. Немного смущало, что каждая картинка была в своей стилистике — несведущий читатель может принять их за купленные на стоке. А Кристина столько в них вкладывает! Поэтому иллюстратор с арт-директором разработали единый стиль для обложек — в таком относительно быстро можно что-то нарисовать. Так выглядит блог сейчас:

Гармонично и весело. Каждая картинка — шуточки, мелкие детали, пасхалки, отсылки. В итоге мы даже взяли «серебро» в том конкурсе, приятно.

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