
Стас Аки
Продуктовый дизайнер в Readymag, автор
короткометражного фильма о Ле Корбюзье
в рамках проекта «100 лет дизайна», в прошлом —
графический дизайнер и сооснователь проектной группы S I L A.
Анимация в вебе логично вытекает из медиа, которые предшествовали интернету. XX век прошел под знаком кино и телевидения, так что к концу столетия дизайнеры уже были подкованы в анимации разного формата, будь то мультфильмы, кинотитры или рекламные ролики. На мой взгляд, главный отличительный параметр веб-анимации — ее интерактивность.
В истории веб-анимации есть, как мне кажется, два ключевых момента: появление инструмента Macromedia Flash и массовое распространение смартфонов. Второй момент особенно интересен. На устройствах с сенсорными экранами пользователь взаимодействует с интерфейсом при помощи пальцев. Прикосновения для людей более привычны, чем манипуляции курсором. При помощи анимации дизайнеры как бы продолжают жесты пользователя и незаметно переносят его из реального мира в цифровой. Такая функциональная анимация создает среду, копирующую динамику привычного физического мира, и поэтому воспринимается естественно. К примеру, когда вы берете iPhone и начинаете открывать панель с настройками Wi-Fi, яркостью и фонариком, движение происходит ровно с той скоростью, с которой вы ведете пальцем по экрану. Все происходит так, как если бы вы выдвигали ящик стола. Более того, вы можете остановить анимацию на полпути и задвинуть панель назад, не отрывая палец от устройства. В современном вебе анимация все чаще начинает использовать ускорение и замедление, наделяя диджитал-элементы воображаемым весом.

Вал Хэд
Входы и выходы в анимации, конференция dotCSS, 2016

Я предпочитаю мультипликацию с суперпримитивной графикой и ограниченной цветовой палитрой, например, работы британского художника Фила Маллоя и короткометражный сериал Дэвида Линча «Страна тупых». Нарочитый стилистический аскетизм в таких работах выводит на первый план анимационную составляющую. Кстати, Линч сделал «Страну тупых», используя Flash и мышку.
Мне нравится, как Чарльз и Рэй Имзы в своей короткометражке «Десятые степени» наглядно показывают вселенную на макро- и микро- уровнях благодаря анимации.
В последнее время я часто обращаю внимание на работы агентства Wolff Olins — в их инстаграме много эффектных видео.
Я люблю анимированные типографские плакаты. Среди множества дизайнеров, которые сегодня экспериментируют с ними, я бы выделил швейцарское бюро Studio Feixen.


Чарльз и Рей Имзы
«Десятые степени», 1977


Фил Маллой
Cowboys: High Noon, 1991
Фильм — особенно авторский фильм — всегда кого-то задевает или не задевает. Вы ничего не можете с этим поделать. Дэвид Линч




Дэвид Линч
«Страна тупых», 2002
Readymag изначально не претендовал на роль мощной анимационной машины, но со временем анимация стала одной из наших центральных фич. Мы увидели, что благодаря ей наши пользователи делают интересные, красивые и продуманные сайты, отвечающие духу времени. Заметив спрос на анимацию, мы начали целенаправленно ее развивать.
Первое время в Readymag существовали только предустановленные настройки анимации для переходов между страницами и для смены состояний виджетов (так мы называем любые элементы на экране). В начале 2016-го мы запустили анимацию как полноценную фичу, которую можно применять к любому виджету. При этом мы постарались максимально упростить создание и настройку анимации в Readymag и отказались даже от стандартного монтажного таймлайна в интерфейсе.
В том же году мы запустили триггеры, благодаря которым можно вызывать анимацию на одном виджете, совершая действия на другом. Наши юзеры начали использовать эти новые возможности очень изобретательно.
В будущем наша команда сосредоточится на развитии анимации в мобильном формате, ведь сегодня браузеры в смартфонах дают в разы больше возможностей, чем несколько лет назад. Также мы продолжим расширять функционал и улучшать перформанс анимации в опубликованных десктопных проектах.
Главная идея, которую я хочу выразить
в этой работе, заключается в том, что мы, дизайнеры, можем сделать веб-проект интересным и насыщенным, не добавляя никаких дополнительных украшательств. Я сделал несколько вариантов верстки для каждой страницы и потом придумал, как совместить их так, чтобы одна перетекала в другую прямо при прокрутке страницы.
Может прозвучать странным, но, продумывая анимацию для своих проектов, я нахожу вдохновение не в мультипликации, а в кино. Мои предпочтения сформировались под влиянием Орсона Уэллса, Жана-Люка Годара, Питера Гринуэя и Сергея Параджанова (смотрите его фото ниже) — неутомимых искателей нового визуального киноязыка. Так же поступаю и я: экспериментирую с анимацией и ищу новый язык в вебе. Например, не просто добавляю анимацию поверх контента, а стараюсь делать ее неотъемлемой частью визуального нарратива.
Поэтому всем заинтересовавшимся я рекомендую снимать собственные видео и монтировать их в iMovie или Final Cut. Практика монтажа дает отличное понимание, что такое работа с материалом, который развивается во времени.



Сергей Параджанов
«Цвет граната», 1968



Даниэль Берд
О создании фильма «Цвет граната», 2011

У всех вас есть мобильные телефоны, архивы сохраненных видеозаписей и ноутбуки, так что все вы режиссеры. Питер Гринуэй




Саския Боддеке и Питер Гринуэй
Obedience, 2015


Питер Гринуэй
О смерти кино, 2017
пионеры анимации
материалы для самообразования
книги
Google Material Motion Guidelines
Курс Иссары Вилленскомера
Рассылка Вал Хэд
Web Animation Weekly Newsletter
Рассылка Рэйчел Нейборс
Slack-канал
Youtube-канал
Вдохновляющий сайт
«Набор для выживания аниматора»
Ричард Вильямс
Фрэнк Томас и Олли Джонстон
Walt Disney: The Triumph of the American Imagination
Нил Габлер
Рэйчел Нейборс
Animation: Meaningful Motion for User Experience
Вал Хэд
Норман МакЛарен
Photoshop Animation Techniques
Алекс Григг

Design School




Типографика
Сетка
Цвет
Анимация
о проекте
Альманах сделан при помощи графического веб-редактора Readymag. Это инструмент, который позволяет создавать мультимедийные проекты в вебе без участия разработчиков. Команда Readymag создает главы Альманаха совместно с выдающимися профессионалами, которые формируют современную дизайн-культуру.
команда
Куратор
Дизайнер
Продюсер
Диана Касай
Редактор (Типографика)
Антон Терехов
Редактор (Сетка)
Дима Девишвили
Редактор (Цвет, Анимация)
Цветелина Митева
Переводчик
Говард Голдфингер
Советники