Встречают по обложке: визуальные приемы, которые делают корпоративное медиа лучше
Сегодня модно развивать корпоративные медиа, то есть издания, которые выпускают сами бренды. Самый известный проект в рунете — пожалуй, Т—Ж. Конечно, такой спецпроект может потянуть не каждый бренд — всё-таки речь идет о создании и поддержке собственного СМИ. Это, на минуточку, не только «запустить сайт и писать статьи», речь о создании целой инфраструктуры — нужно оформлять публикации, поддерживать соцсети, вести каналы, работать с комментаторами, продвигать.
Бренды с PR-бюджетами поскромнее могут начать с качественного блога (или, как его сейчас модно называть с подачи всё того же Т—Ж, журнала).
Этот текст — сборник советов, идей, решений и просто актуальных тенденций в такой узкой, но важной области, как обложки в цифровых медиа. В качестве примеров — разные современные онлайн-издания, не обязательно корпоративные.
Смысловой резонанс с названием
Банально, но важно. Картинка на обложке — такой же способ выразить что-то, как и заголовок вашей статьи. Как отличить хорошую обложку от плохой по этому критерию?
Картинка должна перекликаться с названием.
-
На обложке кадр из аниме, девушка смотрит монитор и разводит руками, будто бы повторяя: «действительно, как?».
-
Агент Смит пытает Морфеуса. Трудно найти место в заголовке и подводке, с которым перекликается картинка. Видимо, это «не облажаться?» (Морфеус и команда попали в засаду, облажались... ну хз).
хорошо | сложно и спорно |
Оба примера с сайта DTF
Картинка дает по башке
Когда делаете обложку, вспоминайте о том, что потом она попадет в новостную ленту в Фейсбуке, где ваша аудитория скроллит со скоростью пятнадцать метров контента в секунду. Не хотите, чтобы вас проскроллили — сделайте что-нибудь эдакое.
Обложка, которая заставляет замереть — хорошая. Она может шокировать или призывать что-то порассматривать (это не обязательно чьи-то [вырезано феминистками]). Или вызывать в мозгу воспоминания: «где же я видел эту картинку?».
-
Самый запоминающийся и интригующий кадр фильма «Начало». И одновременно он про юлу — перекликается с названием.
-
Картинка с шаттерстока по запросу business meeting. В интернете тысячи их. Спасибо, что не рукопожатие.
хорошо | уныло и неинтересно |
Примеры с Shopolog
Конечно, лучший пример такого «давания картинкой по башке» — в блоге Елены Торшиной ?
Еще способ встряхнуть читателя — сделать верстку нарочито «поехавшей», как это делает, например, Т—Ж. Да, купюра всегда перекрывает текст справа и никто не боится, что читатели не станут кликать на заголовки.
Визуальный стиль
Сейчас дизайнеры настаивают на том, чтобы бренд придерживался своей визуальной стилистики в коммуникации, блога или корпоративного СМИ это тоже касается. Объяснение простое — особый визуальный стиль помогает читателям быстро ассоциировать публикацию с брендом. И выделиться из общего потока это тоже помогает.
Визуальный стиль может быть разным, но стоит над ним поработать.
Arzamas использует цветофильтры на фотографиях — так разноплановые снимки получают единый визуальный стиль
У «Мела» это иллюстрации в определенной стилистике и свой шрифт для обложек. Используется не на всех обложках, но определенную гармонию уже создает
Журнал Brodude на всех обложках использует одинаковое осветление — получается «зарифмовать» даже совсем разные по стилю фотографии.
Не жмотиться на пиксели
Деды рассказывают, что когда-то разрешением мечты было 1024×768, а вечно пиликающий модем не пропускал большие картинки в браузер. Сегодня медиа могут выглядеть лучше — во многом благодаря большим изображениям.
Большие обложки — это правильно. Еще лучше, если издание чередует разные макеты для анонсов статей: по размеру, расположению текста и картинки и так далее.
У ныне покойного Look at Me очень хорошо сверстана главная — крупные графические блоки делают страницу «глянцевой», ее хочется изучать. Этот журнал задал многие тренды, верстка главной страницы — один из них.
То же самое у Meduza — на главной комбинируется 7 разных типов блоков, под блоки с фотографией отведено больше места, под текстовые — меньше. Получается хорошо.
А теперь контрпример — главная страница «Спутника и Погрома». Включите прокси, заклейте веб-камеру и если что, мы вам про этот сайт не рассказывали ?
Вообще у «Спутника» очень качественные обложки-постеры — но из-за крохотных миниатюр их просто не видно.
Анимация
Все вокруг становится анимированным и интерактивным. Обложки тоже можно оживить — просто чередуя статичные картинки с гифками.
Как это работает в Т—Ж:
Еще один покойник, Furfur, очень увлекался гифками. Кстати, движущаяся абстракция в качестве фона — выглядит отлично.
Набор иконок
Чтобы разнообразить верстку, можно использовать иконки в качестве анонсирующей картинки. Обычно медиа разрабатывают набор в одном стиле для разных рубрик и тематик.
The Village рисует уникальные иконки в едином стиле для отдельных статей
У Furfur решение попроще: иконки для схожих тематик повторяются. Но выглядит всё равно хорошо.
Контрастная верстка
Контрастные соседние блоки — один из способов сделать корпоративное СМИ еще более привлекательным визуально. Это может быть чередование разных по размеру блоков, игра на контрасте фона карточек, комбинирование фотографических обложек с иконками, рисунками, смешивание статичных и анимированных изображений.
На «Меле» для создания контраста используют размер и сочетание фото с иконками.
The Village комбинирует обычные фотографии с обтравленными по контуру изображениями на однотонном фоне.
На ВОСе — «дружат» маленькие и большие миниатюры, статика и анимация
На Meduza используется несколько типов текстовых блоков и несколько — текстово-графических. Сетка ломается, получается нескучно.
Мало «дизайна»? Сделайте текстовые анонсы, как у Republic
У Wonderzine — нетипичное использование фотографий в качестве иконок. Казалось бы, микроскопические миниатюры должны «шуметь» и воссоздавать визуальную эстетику новостных сайтов нулевых — но нет, всё очень хорошо.
Статьи без картинок на обложке — норма
Многие думают, что у публикации обязательно должна быть заглавная картинка (на такие посты якобы кликают чаще). Это не обязательно так — как мы видели выше, есть много других способов выделить статью из общей массы.
Если вам неймется сделать обложку, но нет мыслей, какая картинка к ней подойдет — сделайте текстовую обложку.
На VC.ru используют такой прием — крупный шрифт на светлой подложке и ничего больше. В ленте выглядит отлично и цепляет.
Кстати, у Buffer есть сервис Pablo, в нем очень удобно делать такие простые обложки (особенно для соцсетей). Выбор кириллических шрифтов не ахти какой, зато быстро. Там же есть встроенный поисковик по популярным бесплатным фотостокам — можно в два клика поставить красивую картинку на фон.
Заключение, ну и про нас немножечко
Мы запустили свое скромное студийное издание в 2016. А, ладно, это просто блог. Но с самого начала решили — надо заниматься обложками. Сначала это были просто фотографии с Unsplash, это такой модный фотосток с хипстерскими снимками.
Такое себе, стерильно. Со временем мы пришли к тому, что обложками занимается наш иллюстратор — сначала добавляли рисованные обложки только на избранные статьи. И каждый раз экспериментировали со стилистикой, например, страница блога могла выглядеть так, три обложки — три разных стиля.
Потом начался Tagline Awards, там была номинация «лучший блог агентства». Подумали, надо участвовать. Поняли, что делать обложки с иллюстрациями — круто и никто так в отрасли не делает. Немного смущало, что каждая картинка была в своей стилистике — несведущий читатель может принять их за купленные на стоке. А Кристина столько в них вкладывает! Поэтому иллюстратор с арт-директором разработали единый стиль для обложек — в таком относительно быстро можно что-то нарисовать. Так выглядит блог сейчас:
Гармонично и весело. Каждая картинка — шуточки, мелкие детали, пасхалки, отсылки. В итоге мы даже взяли «серебро» в том конкурсе, приятно.
В общем, сейчас коммуникация бренда — это самая настоящая командная работа. Даже обложка в группе — и то надо заморачиваться и делать. Иначе на фоне других брендов будешь выглядеть как отстающий в развитии. Если видели крутой подход к обложкам для статей — можно набросать скриншотов в комментарии и всем вместе посмотреть.
Мы отправляем полезные материалы, которые помогут вам в работе
Популярные статьи в категории Дизайн
-
06 августа 2020
3 461
11
-
06 июня 2017
1 353
13
-
09 августа 2017
2 383
23