ADN Studio
439
Блоги

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

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

Поделиться

В избранное

В избранном

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

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

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

{ "author_name": "ADN Studio ", "author_type": "self", "tags": [], "comments": 5, "likes": 13, "favorites": 10, "is_advertisement": false, "section_name": "blog", "id": "35150", "is_wide": "" }
{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Подписаться на push-уведомления
[ { "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": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "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, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]