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

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

Использование движения для передачи смысла

Мы можем найти вдохновение для включения движения в наши проекты повсюду вокруг нас. Чтобы помочь в этом, возникла целая культура веб-сайтов досок вдохновения — и вы даже можете многое узнать о теории движения, просто посмотрев телевизор критическим взглядом. Все основные принципы моушн-дизайна присутствуют в каждом сериале или фильме, который вы смотрите. Роль веб-дизайнера аналогична роли режиссера: объекты на вашем холсте — это актеры, а ваша задача — хореографировать их движения по всей сцене.

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

Чтобы абстрагироваться дальше, давайте рассмотрим это видео, созданное психологами Фрицем Хайдером и Марианной Зиммель. В ходе своего исследования ученые просили своих пациентов посмотреть видео и описать то, что они видели. Зрители неизменно приписывали увиденным формам человеческие характеристики. Попробуйте сами — сложно не построить историю по ходу просмотра.

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

Установка правильного тона на выходе

При создании дизайн-системы важно учитывать все аспекты. Думать о шрифтах и ​​цветах как о многоразовых токенах стало второй натурой, потому что мы работали с этими элементами всю свою профессиональную жизнь. Но поскольку библиотеки JavaScript и CSS3 эволюционировали, чтобы сделать создание анимации в Интернете более доступным для всех, нам нужно помнить о моушн-дизайне наших проектов, когда мы настраиваем эти системы.

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

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

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

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

Заглянуть за кулисы: элементы, составляющие стратегию

На простейшем уровне анимация CSS состоит из трех переменных:

1. Анимируемое свойство

2. Продолжительность анимации

3. Тайминг-функция для анимации

Переход: [свойство] [длительность] [функция времени];

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

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

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

Функция кубического Безье позволяет вам определять пользовательские замедления, указывая скорость, с которой элемент перемещается по плоскости, что дает вам гораздо больше контроля над тем, как вы определяете анимацию вашего бренда. Форматирование может быть немного сложным для понимания, но, к счастью, некоторые добрые люди создали инструменты и ресурсы, которые вы можете использовать, чтобы лучше понять, какие смягчения вы можете создать.

Повозитесь и создайте несколько пользовательских easings или возьмите некоторые значения с easings.net и назначьте их пользовательским функциям синхронизации; это, наряду с вашими предопределенными продолжительностями, позволит вам начать определять согласованные анимации в вашей системе дизайна, делая ваших разработчиков счастливее и придавая вашему сайту более сплоченный и унифицированный вид.

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

Первоначально опубликовано в блоге Eastern Standard. Чтобы узнать больше о Eastern Standard, посетите веб-сайт eaststandard.com.