Кинетическая энергия шрифта: как надписям оживать

Способов анимировать текст — сделать его «кинетическим» — много. Можно растянуть, сжать, разобрать и пересобрать — только для буквы -A- нашлось 100 вариантов. Но использовать движение ради движения бессмысленно. Оно как минимум должно подчеркивать суть написанного.

Мы подобрали семь примеров кинетической типографики, в которой на коне и вижуал, и польза.

Kinetic Typography Experiments

Kinetic Typography Experiments — это анимированные типографические постеры фриланс-дизайнера Дункана Браззила. Первую работу в этом ключе он сделал в 2018 году, чтобы «вытолкнуть себя из зоны комфорта» и научиться новому. Но постепенно Браззила затянуло в моушн-дизайн — тогда «просто учеба» переросла в мощный проект.

В каждом постере Kinetic Typography Experiments объединяются минимализм, типографика и анимация. Всего Браззил создал 100 изображений, 30 из них опубликовал в открытом доступе:

Суть экспериментов простая: берется слово и анимируется в соответствии со значением. Например, для move Браззил показал семь видов движения в семи строках: одна превращается в узор, другая сужается, третья размывается. А значение 3D креатор выразил в виде одной надписи, которая распадается на копии:

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

Логотип Kings Place

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

Идея — с помощью аудио передать энергию ивентов в Kings Place. Чтобы реализовать этот замысел, написали программу SoundWaveMachine, которая превращает звуки в анимированные графики:

Графики совмещают со статичным логотипом Kings Place: названием, написанным шрифтами Champion Middleweight и Neue Haas Grotesk. В результате получаются слова, которые пересекаются неровными линиями.

Статичная часть логотипа по форме всегда одна и та же, а график может меняться в зависимости от выбранной песни. Например, для презентации брендинга взяли график на основе одной из сюит Баха, которая «открывала» хаб в 2008 году:

Программу SoundWaveMachine будут использовать и для продвижения новых ивентов в хабе. Организаторы смогут выбирать композиции и совмещать их визуализации со своими лого. Это поможет сделать уникальный суббрендинг на основе Kings Place.

Польза: пример того, как кинетическая типографика может сделать бренд динамичнее.

Презентация шрифта Söhne

Söhne — это новый шрифт новозеландской словолитни Klim. Его презентацию в 2019 году делала нью-йоркская дизайн-студия DIA, которая специализируется на кинетической типографике. Это не первая ее необычная работа: в 2018 году команда студии делала экспериментальную анимацию для Nike.

Над презентацией Söhne команда DIA работала больше полугода. Делали ее полностью вручную, без компьютерных эффектов. Буквы «писали» жидкостью, а потом распыляли их или разбавляли водой, а процесс снимали на пленку. В итоге получилась серия аналоговых «фильмов» со шрифтом в главной роли:

Под выпуск нового шрифта сайт Klim Type Foundry тоже обновили — и там тоже есть элементы типографической анимации. Его разработкой занималась дизайн-студия Springload.

Польза: пример использования аналоговых техник для презентации текстовых проектов.

Обновление Curated Content Shop

Curated Content Shop — это онлайн-магазин швейцарского медиа о визуальной культуре и дизайне Curated Content. В нем продают книги, постеры и сумки-шопперы с авторскими иллюстрациями. Последнее обновление — серия продуктов с типографикой, которая начинает двигаться, когда смотришь на нее через AR-приложение.

Графику сделал диджитал-художник Ксавье Монней в 2020 году специально для конференции Curated Content и словолитни newglyph. Ивент был посвящен коммуникациям в графическом дизайне. Монней передал главную тему в трехмерной кинетической типографике, на которой слова бесконечно летят в лицо зрителю:

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

Польза: пример разных вариантов использования одного продукта.

Space Type Generators

Space Type Generators — это веб-сайт, на котором собрана серия генераторов кинетической типографики. Его в 2019 году запустил мультидисциплинарный художник Киль Мучелкнаус — он создал 30 генераторов, но на свой сайт выложил только десять.

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

В Cylinder трехмерный текст вращается по кругу, можно изменять его скорость, направление и размер. В Field ты работаешь с текстом, как с листом бумаги в реальном пространстве. Его можно, например, перевернуть другой стороной.

Есть и более продвинутые генераторы. Например, Morisawa — в нем по умолчанию текст не только движется, но и изменяет размер в зависимости от расположения. Чем выше строчка — тем больше текст. Если применить эффект Mirror, картинка отзеркалится и станет еще сложнее.

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

Польза: показывает, как много вариантов показать один и тот же цифровой текст.

Emotive Typography

Emotive Typography — это серия анимированных типографических постеров о жизненных событиях. Проект создал в 2020 году основатель дизайн-студии Seleqt Риджвед Сате.

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

Сате рассказывает о ситуациях максимально просто. Бесцельное времяпровождение в инстаграме он показал двумя картинками: картинка post сменяется картинкой one more — и так по кругу. А безысходность от того, что размоченное печенье упало в кофе, передал анимацией, где от слова biscuit «отваливается» bis:

Польза: пример того, как простые решения вызывают яркие эмоции.

Artificial Intelligence Motion Graphic

Artificial Intelligence Motion Graphic — это проект начинающего дизайнера Там Хоанг об искусственном интеллекте. Для визуализации Там использует кинетическую типографику.

Проект, который Хоанг сделала в 2019 году, состоит из шести текстовых анимаций, собранных в одно видео. Каждая показывает область, в которой задействован ИИ: образование, создание смарт-городов, банкинг, медицина, автоматизированный транспорт и робототехника.

Чтобы объяснить сферы нагляднее, Хоанг брала простые символы. Так, образование в видео — это книга, а медицина — спираль ДНК. Чтобы минутное видео воспринималось как цельная история, креатор разбавила иллюстрации текстом:

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