БАЗА мо-дизайна + почему и как он ОБЯЗАН продавать? (а те кто считают иначе — дурачки)

Все же в курсе, что дизайн как целое направление является составной частью маркетинга и его следствием? А какая задача маркетинга? Риторический вопрос. В этом материале я решил зайти со стороны принципов моушена и знатно повеселиться, чтобы ответить на вопрос статьи. Да. Он Обязан.
Время прочтения: ~ 9-12 минут.

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

В кратце, моушен дизайн = дизайн движений. Это мы уяснили.

Чтобы сделать нормальный дизайн движений, нужно знать и понимать природу законов этих движений. Кто-то умный это понял лет сто назад, и сформировал в 12 принципов анимации, щас я вкратце разжую их на пальцах, чтобы было понятно что стоит за каждым из них, т.е. по сути задача — понять какая цель у каждого из принципов, чтобы потом все сложить воедино и ответить на вопрос в начале статьи, иначе не варик, сорян(

Щас моя задача простая: без технического погружения, нудятины, душниловки и прочей лишней хрени на словах объяснить принцип и цель этих принципов)) Чтобы у каждого чела мозг придумал свой визуал и свои уникальные представления об этой теме.

1 — Сжатие и растяжение. Все просто. Есть тело, со своим весом, структурой материала и скоростью. Задача тупо передать эти параметры до зрителя (как, это уже мои проблемы). Допустим моя рука, если быстро помахать ей перед лицом, то она как бы растянется, это по сути визуализация скорости. Еще пример, че далеко уходить, налейте воды в презик, завяжите, и положите на стол. Поздравляю, у вас +1 настольный хрен. Если его аккуратно поднять и опустить то будет видно, как при прикосновении с поверхностью он сжимается, а в воздухе под действием гравитациии и эластичности материала расстягивается. Или другой пример, мяч для боулинга, если сделать все тоже самое то он никак не сожмется и никак не растянется. Если все резюмировать, то в этом принципе мы просто передаем часть физических свойств, для показа реалистичности объекта, тем самым даем доп. стилизацию динамике. Цель — чтобы человек поверил в физику объекта.

2 — Подготовка. Задача этого принципа простая — дать человеку понять что щас будет происходить мясо или какой-то главный экшон, маркетинговый в тч, а для этого его надо подготовить, чтобы он сосредоточился в моменте и был самым готовым. Важно, Супер важно, просто ну мега важно, чтобы чел который будет смотреть не просрал важный момент и понял что произошло. Кстати вот эти мои важно…тоже часть подготовки перед основной мыслью, чтобы вы ее не просрали) Лайфхак - Можно усложнить и усилить этот принцип, если у вас в ролике несколько ракурсов, то в первом кадре с 1м ракурсом можно сделать подготовку действия и начать основное действие, а во 2м кадре, с другого ракурса как бы откатиться на 2-4 кадра назад и повторить динамику объекта. Небольшой типс из киноиндустрии, пользуйтесь. Опять руки в деле: поднятая рука - и я хочу ударить по столу, то в данном случае подготовкой будет поднятие руки и отведение кулака назад. Цель — Чтобы человек не пропустил важную мысль/фразу/движение.

3 — Сценичность, или по русски — композиция. Этот принцип основополагающий, по крайней мере для меня, ибо тут вообще все что связано с композицией, где расположен объект в кадре и как он расположен, в какой позе в каких пропорциях, какого размера, какая цветовая палитра и еще куча разных вещей. Тут важно так же показывать крупность кадра и угол камеры. И. Очень важно, опять приготовтесь — Тут очень важно правильно строить последовательностью восприятия зрителя. Смысл принципа в том чтобы в кадре и с композицие все гуд было, и действия происходили не одновременно все сразу, а последовательно. Например: если бы я снимал в студии себя на камеру (глубина, композиция, свет.. я мог с таким же успехом поставить мобилу на подоконнике) + я говорю все последовательно а не одновременно обо всем. От этого принципа зависит ваще все. Если он будет запорот, ваш ролик даже не будут смотреть. Честно, это лично мой приоритет, я прям очень много времени уделяю на него, порой даже через чур. Цель — чтобы на ролик хотябы обратили внимание, чтобы он зацепил

4 — Последовательное задание динамики или от позы к позе. Этот принцип скорее о том КАК работать с анимацией, то есть больше про технологию. Он отвечает за характер нашей динамики и ее выразительность. Раньше это было особенно актуально когда все рисовали от руки. Принцип такой - если это персонаж, то сначала ему выделяют ключевые позы(сидит, потом стоит, потом идет — это делал главных художник) а потом младшие как бы дорисовывали переходные состояния. Если это что-то природное/хаотичное, как движение рук при ходьбе, колыхание листьев, то там просто рисовали динамику как она должна идти в зависимости от основной силы - персонажа, силы ветра и тп. Все просто: От позы к позе - это там где вам важно контролировать анимацию, а последовательнось — для остальной непредсказуемой хрени. Надеюсь это было понятно. Щас это можно совместить и юзать везде за счет функций софта. И этот принцип используют все крутые моушены. Например это очень хорошо видно на этапе блокинга, неважно 2д или 3д ролик, когда мы просто задаем базу движения, ставя объекты и персонажей в ключевых позициях, а промежуточное движение уже заполняет сама программа по стольку по скольку, или если нужен хаос - просто пишем скрипт на рандом или запускаем симуляцию по определенному алгоритму и автоматика все сделает, а если персонаж или иллюстрация — тогда страдаем)). Этот принцип щас очень важен на стадии планирования и препродакшена по сути там мы даем характер и стиль основной части динамики. Цель — задать историю действий, вовлекая

Читаю гдето в ваших мыслях: ну как же ты зае6@л со своей херней душной. Знаю, но это надо для понимания 🙂

5 — Сквозное движение и захлест. Частично можно подогнать под эту тему оффсета в анимации, но лишь только частично. Есть такой термин — оверлапинг — это когда у тебя идет задержка в динамике между основным телом и второстепенными его частями. Например: если какой-то объект резко останавливается, то доп части по Инерции продолжают движение. Возьмем руку, расслабтье ее и подергайте влево в право — кисть остает, это оно и есть. По сути этот принцип так же дает большую реалистичность, дополняя первый принцип анимации, токо уже во второстепенных делалях. Еще раз на всякий случай проговорим: смысл принципа в том что действия дополнительных элементов анимированного объекта или же системы, должны быть логически связаны и с этой системой и с внешней средой. Тупой пример: Ты едешь на скейте в данном случае - ты как чел - система, твои руки, волосы, футболка и штаны это дополнительные элементы, а встречный воздух - это внешняя среда. Задание тебе. Что в этой сцене будет сквозным движением?(ответ в комент + 10% скидки)))))) Я не буду рассказывать как людям ломают локти, на этом принципе, кто шарит тот поймет))) Если можно так сказать, то это дополнительная стилизация динамики ток более локальная. Цель — реалистичность движения тела, чтобы в него поверить

6 — Мягкий вход и выход. Я бы назвал этот принцип - Изи ин / изи аут. Мои любимые графики. Все движения которые начинаются и заканчиваются должны быть естественными, а не механическими. Потому что если вы посмотрите вокруг у нас все динамично начинается и динамично заканчивается, всегда изменение параметров идет по дуге, неважно что это. Есть набор скорости и ее спад . Поезд начинает медленно, разгоняется, останавливается. Молния тоже относительно! плавно начинает ускоряться и заканчиваться. Про варианты линейного и экспоненциального ускорения писать не буду, обещал не душнить. Надеюсь тут все понятно. Цель аналогичная с прошлым принципом. Реалистичность.

7 — Дуги. Тоже считай графики, токо траектории, которые решают проблемы механического движения и добавляют характер. Здесь я прям стал задротом после своего проекта Сторикс, попробовал там это внедрить и мне так понравилось, все стало более естествено и плавне, появился более выразительный характер движений, прям вообще кайф, особено когда ты видишь на разнице, ну это просто небо и земля. После этого со скоростями(таймингом) работать в разы проще. Основной принцип простой, глвное шобы траектория движения в кадре была по дуге без углов, а плавненькая и красивая. Цель — Реалистичность. показать характер траектории + естественность движений.

8 — Дополнительные действия, можно сказать вторичные. По сути это еще один пункт стилизации динамики и выражается он в действии которое дополняет, чтобы показать еще бОльшую выразительность. Работать с ним лучше после того как задали основное действие, чтобы было на что опираться, тк оно по сути зависимое от него. Напимер чел сидит в метро в телефоне/в газете, сам колышется от метро(волосы/ одежда), а доп действием будет вибрация телефона или отрыввание куска газеты, который улетает или еще один, ты чет покупаешь в магазине, дополнительным действием будет выпадающаяя монетка, пока достаешь кошелек. Или если брать пример со скейтером из 5го принципа — там футболка развивается. Думаю суть вы уловили, цель аналогична.

9 — Тайминг. Мои любимые графики Часть 2. Это следующий самый главный принцип после композиции, если 3 пункта назад это было только про начало и конец, то тут вообще в целом про динамику в кадре. По сути тайминг — это количество “промежуточных” кадров в динамике основного движения , или же скорость этого движения. Грубо говоря если много рисунков/кадров = график скорости в афтере(прога для мо-диза) в самом низу - тело движется медленно, а если рисунков/кадров мало = график скорости высоко, то скорость высокая. Медленные анимации лучше делать на низком фреймрейте, это даст большую мягкость, и может дать свой шарм, и наоборот, бысрые на большом для оживления анимации (если учтены предыдущие принципы). Но в целом, стандарт индустрии 24 кадра. Если честно, я год назад переехал на него, теперь вообще не слажу, все проекты в таком фреймрейте, кайф. Цель — правдоподобность динамики, чтобы в нее поверили.

Мы почти закончили, осталось немного.

10 — Преувеличение. Сам еще не пользуюсь, но оооочень хочу внедрить, это мега крутая штука. Смысл очень простой. Это когда ты даешь бОльшую драматургичность движению и черезчур ее проявляешь. Спросишь для чего это делать? Ну давай спроси? Че молчишь? ….. А делать это нужно для того, чтобы увеличить воздействие на зрителя. Реализм в анимации это скорее не про реализм как в жизни, а про увеличение выражаемых эмоций у персов, пропорции амплитуд динамики, всего чего угодно, потому что глаза видят серединное значение динамики и сравнивают их с начальным/конечным и соответственно быстрее считывают что щас происходит. Поэтому так важно показать выразительность. Если приводить пример приувеличения…..то в дверь я буду стучать не легонько, а прям херачить в нее со всей руки, или если я бью по столу, то у него ломается ножка. Токо важно учитывать что, это должно работать на убедительность, а не на дибилизм. Запомнил? Кивни если да, красава, едем дальше. Целью кстати тут будет уже вовлечение, то что вызывает у нас диспропорцию эмоций - вызывает большее желание посмотреть шо эт такое.

11 — Четкий рисунок. Честно вообще практически не юзаю его щас в своей работе, да и по правде говоря не очень то и понимаю нахрена. Может я не достаточно просвятился еще….(на этапе написания статьи вкурил) В наше время, чисто для меня это помесь композиционных решений и стилизации. По крайней мере для себя я этот принцип воспринимаю так. В чем суть? Вообще этот принцип про перспективу в пространстве, чтобы форма чувствовала себя как в 3д пространстве, будучи в плоскости монитора смотрящего. Тут важно учитывать объем, вес и балланс и вписывать это все как будто это в реале. Не нужно делать симетричных линий (пример с рукой) если это не задумано так. Например когда мы смотрим на комнату…. не видим прямых линий, связано это с тем что мы воспринимаем наш мир через глаз, а там изогнутая линза, как и в камерах, тоже изогнутые линзы, а не плоское стекло, поэтому так важно вписать все элементы композиции под нашу природную линзу, чтобы мозг поверил. Ну и наконец-то мы дошли до последнего принципа. Цель — реализм, но уже повлиять на бессознательную часть мозга.

12 — Харизматичность/привлекательность. Принцип, который отвечает за наши эмоции и интерес к анимированному объекту, чаще это относят и к персонажам, но можно и к объектам, которые должны быть приятными для просмотра. Нам важно показать его характер, личность и историю.

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

Целью этого принципа как и 10го является вывести зрителя из эмоционального равновесия, чтобы он захотел продолжить смотреть.

Самое место, в жопе статьи, сказать 2 слова обо себе — я моушен-дизайнер, и я помешан на бизнес процессах, психологии мозга. Все.

Фух, закночили с душниной, надо передохнуть…. Вдох выдох. Финиш. Надеюсь кому-то это было интересно…

— ….ты уже зае6…л!

— Угу :)

Давайте резюмируем все цели принципов по порядку:

Теперь сократим повторяющиеся моменты и расставим

Ой, а че так мало получилось? Математика братцы. Теперь самое вкусное и интересное в награду тем кто прочитал целиком всю статью. Расшифруем и дам ответ на вопрос.

ответ на вопрос статьи: ПОЧЕМУ ПРОДАЕТ?

Ответ на вопрос статьи: КАК ПРОДАЕТ?

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

Хочу пригласить в свой тг канал: https://t.me/reflct

Буду писать крутой контент там, как наберем сотку читателей

Ну и если могу быть полезен, или интересны мои кейсы, можно мне стукнуть по голове тут: https://t.me/vch_pt

Всем любви, добра и хорошего дня!