Главная » Hi-Tech » Что такое медиадизайн

Что такое медиадизайн

Первый материал из цикла про медиадизайн.

Скорее всего, вы видели эти проекты.

Сейчас выглядит уже достаточно скромно. Snow Fall — с него началось победное шествие длинных историй с картинками.

Aquatilis — красивый отчёт про глубоководную экспедицию.

The Dawn Wall — рассказ про восхождение на гору El Capitan (в честь которой названа одна из версий macOS).

Aquatilis

Я бы сказал, что всё это — медиаистории. Что их объединяет? В зависимости от формы воплощения можно называть их лонгридами, «листалками», визуальной журналистикой, дата-сторителлингом, скроллителлингом и ещё парой десятков слов, которые (если откинуть форму) обозначают примерно одно и то же — истории с сильной визуальной составляющей, несущей в себе весомую часть смысловой нагрузки.

Композиция, типографика, цвет, сама структура повествования — всё имеет смысл и является частью нарратива. И это не просто текст с картинками.

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

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

Медиадизайн или веб-дизайн

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

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

Медиадизайн — проектирование контента для публикации на различных площадках и в различных контекстах.

Именно журнальный, потому что в газетах вёрстка, как правило, находится в жёстком подчинении сетке, срокам и общему образу издания. Ближайшая аналогия здесь — журнальный дизайн. Не в плане скорости потребления, но скорости создания. Газета — быстрый формат.

Подобного трудоёмкого контента с сильной визуальной составляющей в газетах (в их подавляющем большинстве) сильно меньше половины. Конечно, можно вспомнить прекрасные развороты с инфографикой того же печатного The New York Times, на которые уходили если не месяцы, то недели работы, но это скорее исключения — подарки читателям. В отличие от журналов, большинство которых изначально задумано как «набор красивых разворотов».

Разворот журнала W. Арт-директор — Антон Юхновец

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

До недавнего времени вопрос дизайна контента в онлайн-изданиях вообще не стоял — мешали как серьёзные ограничения CMS, так и в целом психология дизайнеров и разработчиков, мыслящих шаблонной вёрсткой (шаблон — не синоним чего-то плохого, просто нешаблонная обходилась слишком дорого).

Даже те, которые были не про ежедневную новостную повестку или являлись цифровыми версиями бумажного глянца. Цифровые СМИ до недавнего времени были «газетами». Условно — GQ бумажный и GQ цифровой отличались как журнал от газеты.

Инструментарий медиадизайнера

Если десять лет назад вы открывали текстовый редактор и писали код (или просили верстальщика), чтобы сделать синенький заголовок, выключенный по центру и набранный 40 кеглем, то сейчас вы открываете, скажем, Tilda и делаете это руками на экране в режиме благословенного WYSIWYG (what you see is what you get). В чём главное преимущество современных инструментов?

0 (простите), потому что сейчас вы проектируете не только внешний вид, но и поведение элементов (например, в Readymag отличная система создания контекстных анимаций, и он продолжает эволюционировать). Я бы назвал это даже WYSIWYG 2. И всё это

.

Но потом пришёл Quark. Тут самое время вспомнить, что первые печатные издания тоже кодились в специальных системах, а не рисовались. Его доступность и большая средняя скорость работы, а также порог входа в инструментарий (не в профессию, не путайте), упавший примерно до нуля, очень быстро привели к исчезновению подобных систем (и надобности в подобных программистах — вот тут верстаки могут реально напрячься).

Интерфейс Readymag

Итак, теперь у нас есть Tilda, Readymag и даже несколько экспериментов по автоматизации работы уже самих дизайнеров (а не только программистов) вроде The Grid , а современные CMS некоторых изданий не сильно уступают им в возможностях.

Или ваша команда из крутых программистов, которые за несколько месяцев сваяют вам стабильно работающий конструктор лонгридов (ещё раз простите) и прикрутят к вашей rocket-science-CMS. Я обещал немного сказать про инструментарий, но Tilda с Readymag, пожалуй, единственные, реально работающие и представляющие интерес (для дизайнера) сейчас.

Например, Verstka и Setka (от создателей уже упоминавшегося The Grid). Есть также ряд инструментов b2b-формата, заточенных на интеграцию в редакционные процессы и обладающих тем или иным объёмом возможностей для создания визуальных историй. Так что если вы уже сейчас работаете в издании и сталкиваетесь с подобными задачами, рекомендую посмотреть в этом направлении.

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

Помимо них я бы ещё отметил Medium в качестве перспективной платформы для сборки медиаисторий, но для дизайнера там пока что ещё слишком много ограничений. Tilda и Readymag эти проблемы совместимости так или иначе решили, так что это не только удобные, но и (относительно) надёжные решения.

И я намеренно пропускаю тут некоторые экзотичные способы вроде «собери дизайн в Adobe Muse». Всё остальное либо слишком нишевое (например, шаблоны для личных лендингов или портфолио по принципу «картинка-подпись»), либо менее стабильно и беднее по функциям (но если я неправ, то готов удивиться новому крутому инструменту, буду только благодарен).

Лендинг, прежде всего, конверсионный инструмент. Кстати, не следует путать медиаистории с лендингами. Схожесть лендингов с медиаисториями лишь в том, что и там и там есть чёткая последовательность изложения, но отличаются они примерно как консультант в магазине от лектора на TEDx. Его задача — шаг за шагом загрузить в читателя информацию о товаре или услуге. Хотя, конечно, есть неплохие примеры смешения жанров.

На чём учиться и где искать вдохновение

Куда смотреть дизайнеру, который решил заняться дизайном контента в медиа?

Условно — если вы видели Snowfall (не верю, что не видели, вон же ссылка в начале статьи), то, скорее всего, весь медиадизайн для вас похож на лонгрид. Когда вы занимаетесь поиском референсов, как правило, вас в первую очередь интересуют проекты, похожие на то, что вы уже видели.

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

Некоторые истории могут быть построены исключительно на ней. Прежде всего — инфографика жива как никогда.

  • График-история от The New York Times про будущее экономики США. Мой любимый пример. Хочешь — листай, хочешь — исследуй самостоятельно (лучше смотреть на десктопе).

При этом она вовсе не обязательно должна быть сложной. Анимация почти всегда работает в плюс проекту. Даже простые GIF могут одновременно оживить историю и дать новый уровень понимания: "In Water Polo, the Real Action Is Under the Water".

Как в этой истории, рассказывающей про то, как несколько американских семей спонсируют президентские выборы в США. Грамотно найденная метафора помогает сформировать нужное впечатление.

Возможны самые разные форматы, например комикс: грустная история от The New York Times. Медиапроект — это не обязательно длинная публикация с картинками.

Как в этом проекте про Сирию. Фотографии и видео сами по себе могут стать историей, а не просто чередоваться по вертикали с кусками текста.

Но ей надо пользоваться с умом, как сделал The New York Times на этом проекте, предлагающем стартовать быстрее, чем Усейн Болт, или в отличном тесте на тему инклюзивности в спорте («Угадай вид спорта по внешнему виду спортсмена»). Геймификация — отличная опция.

Reshaping New York — в проекте «Как менялся Нью-Йорк» круто замешана анимация, инфографика и картография. Синтез нескольких подходов часто даёт крутой результат.

Круче всех, на мой взгляд, с формой обращается Bloomberg. Хоть мы и говорим про содержание, форма сама по себе может быть частью истории.

Я думаю, что это просто честный подход к работе с материалом на уровне формы. Bloomberg является ярким представителем стиля, называемого сейчас «веб-брутализм».

Это не значит, что другие не делают хорошие проекты, просто я чуть не сошёл с ума, пытаясь выбрать несколько наиболее наглядных ссылок из пары сотен, в итоге получилось так, как получилось. Как вы заметили, все вышеприведённые примеры либо из The New York Times, либо из Bloomberg.

В российских медиа тоже периодически появляются неплохие истории.

  • Проект «Яндекса» к дню рождения Фредди Меркьюри.

  • Большая и серьёзная история «Секрета фирмы» совместно с «Рамблер-инфографикой» про советско-российскую систему исполнения наказания.

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

  • Арт-проект Антона Реппонена про здания, выдернутые из привычного контекста.

  • Проект про конструктивистские здания.

Помимо отдельных проектов надо отметить и дизайнеров (коллективы), за которыми стоит следить (это далеко не полный список).

  • Конечно, The New York Times (подборка от газеты за 2017 год).
  • Уже не раз упоминавшийся Bloomberg. У него даже есть специальный раздел с визуальными историями, и публикуются регулярные подборки (например, за 2017 год).
  • Washington Post также радует регулярными визуальными историями и инфографикой (подборка за 2016 год).
  • Wired — отличное издание, но большая часть визуальной красоты прячется в бумажной версии журнала.
  • Кристоф Ньюман — знаковая фигура, один из самых известных мировых иллюстраторов, работающий с The New Yorker (на который, кстати, тоже стоит посматривать). Может сделать историю из чего угодно. Активно экспериментирует с 360-video, AR и VR.
  • Молодая, но очень сильная студия Polygraph, которая недавно запустила собственное медиа The Pudding — a weekly journal of Visual Essays.

В России сразу несколько студий занимаются сторителлингом в медиа (чаще всего называя это инфографикой, но не будем придираться к терминам).

  • Студия инфографики ТАСС с помощью Readymag уверенно движется вперёд. Например, проект про вторжение Наполеона в Россию, основанный на классической карте Шарля Минара.

  • Самые старые и заслуженные игроки на рынке — студия инфографики РИА.

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

В нашей индустрии это называют нехорошим словом «спецпроекты» или (что лучше) «нативной рекламой», хотя термин «нативная реклама» не очень подходит для относительно (или откровенно) кастомных (штучных) проектов.

  • Рассказ про историю искусственного холода для Miele.

Вот, например, виртуальное восхождение на Эверест и (пока) маленький, но гордый коллектив JSKT data group, работающий на стыке больших данных и сторителлинга. Из близких по жанру также стоит отметить уже упоминавшийся «Яндекс», периодически экспериментирующий с разными форматами историй.

Точнее, на списки работ-победителей. И разумеется, надо смотреть на конкурсы. И сама инфографика (по крайней мере, в медиа) постепенно смещается от дашбордов к историям. Исторически сложилось, что большинство работ в формате сторителлинга группируется на конкурсах инфографики.

Здесь наибольший интерес представляют три конкурса — Malofiej (не пытайтесь найти список финалистов самостоятельно — вот он), SND Awards (список призёров 2017 года) и Information is Beautiful (хотя последний всё же больше тяготеет к инфографике в её классическом понимании, чистого сторителлинга там немного.

Мир журнальной, газетной и книжной вёрстки, мир плаката за последние 150 лет накопили огромное количество визуальных приёмов и примеров высококлассной работы. Важный совет — не стоит пренебрегать референсами из офлайна. Здесь сложно посоветовать источник референсов лучший, чем Pinterest — десятки досок с работами самых известных дизайнеров от времён Баухауза до наших дней.

Это беглый и грубый срез индустрии (и я намеренно пропустил огромный сегмент видеоисторий), но его достаточно, чтобы начать самостоятельное изучение темы.

#дизайн #медиа


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

Тест для руководителей: оцените свои управленческие качества

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

Influencer marketing: что это такое, почему он так популярен на Западе и когда придёт к нам

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