Дизайнер анимации. Полное руководство по веб-анимации

Все советы

Качественная и уместная анимация веб-страниц радует глаз и помогает в работе. Это – одна из основ веб-дизайна наших дней. Взаимодействие пользователей с современными веб-сайтами серьёзно завязано именно на анимации. Она способна сообщать о неких состояниях страницы, направлять внимание. Анимация помогает пользователю увидеть результат его действий и может влиять на его поведение.

Когда анимация способна улучшить впечатления пользователя от работы со страницами? Что именно стоит «оживить» для того, чтобы взаимодействие с ресурсом стало бы более удобным, понятным, увлекательным?

Анимация и последовательности событий

Анимация при загрузке данных

Отвлечь пользователя во время загрузки контента – вот одна из самых распространённых ситуаций использования анимации. Дело в том, что анимация в подобные моменты воздействует на то, как люди воспринимают время. Она создаёт ощущение того, что действие выполняется быстрее, чем на самом деле.

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

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

Примечание: тут везде анимированные GIF-файлы, вставил в виде ссылок и выделил.

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

Анимация процессов и пошаговых операций

Анимация может показать выполнение некоей линейной последовательности действий, не зависящей от пользователя. Классическая полоса загрузки – самый распространённый пример.

Полоса загрузки для Aviasales. (

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

Анимация может показать прохождение по шагам некоей последовательности действий. (

Анимация и каркасное отображение веб-страниц

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

Каркасные экраны загружают элементы пользовательского интерфейса ещё до того, как будет полностью отображено содержимое страницы. (

Визуальная обратная связь

Анимированная реакция на действия пользователя

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

Анимация элементов управления для настольных и мобильных сайтов

Один из самых распространённых примеров визуальной обратной связи – анимация при наведении курсора на интерактивный элемент.

Когда пользователь не уверен в назначении элемента управления, он пытается навести на него курсор мыши. Анимация элемента при наведении курсора, на интуитивном уровне, сообщит пользователю о том, что с объектом можно взаимодействовать. (Источник: codepen)

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

Затенение указывает на то, что элемента можно коснуться для выполнения некоего действия. (

Привлечение внимания с помощью анимации

Хорошо известно, что наши глаза привлекает движение. Этим можно воспользоваться для того, чтобы направлять внимание пользователя и подкреплять выполняемые им действия.

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

Форма отрицательно «качает головой». (

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

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

Вот – пример с веб-сайта Brian Hoff Design. Когда пользователь щёлкает по круглой кнопке со стрелкой, большой блок меню появляется с правой стороны экрана. Благодаря анимации, меню будто выезжает из области, находящейся за пределами экрана. В результате во взаимодействии со страницей нет логических разрывов.

Анимация помогает связать воедино два состояния страницы

Плавное изменение состояний

Анимация переходов бесценна для указания смены состояний страницы. В статье «Умные переходы в UX-дизайне» Адриан Зумбруннен показал отличный пример того, как анимация может помочь пользователю оставаться в курсе того, где именно он находится, при щелчке по ссылке, которая ведёт к другому разделу той же самой страницы.

Просто сравните это с резким переходом, который ощущается как неестественный «скачок».

Внезапное изменение состояния выглядит ненатурально. Пользователю тяжело воспринимать подобное. (

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

Применение анимированной графики и трехмерной (3D) анимации

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

Моушн дизайн также активно применяется в самом актуальном направлении ивент-индустрии сегодняшнего дня - (3D video mapping) или, в простонародии, - . В маппинг шоу является контент, производимый моушн дизайнерами, с помощью различных видеопроекторов проекцируется на различные поверхности или даже на воздух.

Моушн дизайн также широко применим в интерьерном маппинг дизайне, т.е. когда интерьеры декорируются посредством видеопроекторов. Это позволяет создавать совершенно новые пространства, текстуры и предметы декора, ведь проекторы можно осветить поверхность любой формы, изменив ее тем самым любую до неузнаваемости, и даже создать абсолютную иллюзию физического изменения пространства.
BTL-маркетинг, брендинг пространств и помещений и моушн технологии сейчас практически неразделимы. Реклама, презентации, видео-инфографика, макеты, логотипы, брендирование – во всех этих сферах бизнеса активно применяется и является трендом моушн дизайн. Современные эпизоды таких кинофраншиз, как Джеймс Бонд и Гарри Поттер, суперпопулярные сериалы, как Игра Престолов, – их локации, спецэффекты, оформление – все это «рисуется» графиками и аниматорами на компьютере.

Моушн дизайн как вид современного искусства

Благодаря активному развитию программного и аппаратного обеспечения для 3D-графики моушн дизайн получает активное развитие в кино, а также являет собой один из самых тресковых изысканных видов современного искусства. В 1960 году Джон Уитни был одним из первых, кто признал моушн-графику искусством и ввел этот термин в профессиональный жанр. Его компания Motion Graphics Inc. получила говорящее название и стала пионером моушн графики и дизайна в кино индустрии. В течении нескольких лет компания Джона Уитни активно работает над такими картинами, как Psycho, Advise & Consent, Man With The Golden Arm, Vertigo. Задачей компании было создание относительно простой, но атмосферной моушн-графики для усиления настроения фильма.
В дальнейшем моушн-графика получает активное развитие, создаются визуально привлекательные графические композиции в движении, которые также заимствуют элементы из фотографии, видео и иллюстрации. Благодаря этому объекты, персонажи и фоны изменяются, двигаются, взаимодействуют и трансформируются.
Такой вид моушн-искусства в синергии с бизнес-задачами получил активное применение в для презентаций тех или иных крупных мировых брендов. Очевидное преимущество моушн-графики как искусства перед другими изобразительными средствами самовыражения художника - это абсолютное отсутствие каких-либо границ реализации идей худождика. С помощью комьютера и современного программного обеспечения и аксессуаров можно претворить в жизнь любую фантазию или идею.

Моушн дизайн в бизнесе

На Facebook 85% видеоконтента просматривается без звука и, тем не менее, благодаря графическим технологиям бизнесу удается донести до целевой аудитории необходимый месседж даже без звукового сопровождения. Посредством моушн-графики создаются самые лучшие презентации. Информационный моушн дизайн как нельзя лучше способен продемонстрировать в графическом виде процессы, алгоритмы, раскрыть суть документов, технические параметры устройств, факты и цифры.
На сегодняшний день моушн дизайн сопровождает вас везде: в телефоне, рекламе, кино, на спектаклях и шоу-постановках, выставках, презентациях и, конечно, на телевидении.
Моушн дизайн &ndash это крайне перспективная форма создания визуально привлекательного контента с рекламной или имиджевой целью. Если вы задумываетесь о создании моушн графических презентаций, рекламных видео для продвижения бизнеса, обратитесь в , наша команда всегда рада разработать что-то уникальное, найти решение именно для вашего бизнеса и создать невероятный и фантастический контент.

Как стать дизайнером моушн графики

Профессия моушн дизайнера - это достаточно молодое направление в дизайне, возникшее в следствии развития современных технологий и программного обеспечения. Графические дизайнеры, веб дизайнеры, дизайнеры интерфейсов, иллюстраторы, 3d специалисты и конструкторы – все они в некоторой степени могут быть моушн дизайнерами.
Наиболее важным шагом для всех, кто планирует продолжить карьеру в этом направлении, является ознакомление с основами 3D-моделирования, анимации и графического дизайна. Одни из самых популярных компьютерных программ для создания моушн контента являются Adobe Premiere Pro, Cinema 4D, Adobe Photoshop, Adobe After Effects и Final Cut Pro. В наше время при желании практически любой талантливый художник может научиться создавать качественный моушн контент даже без профильного технического образования. В интернете можно найти огромное количество обучающих видео и других материалов про создание моушн-графики.
Важно постоянно следить за трендами, анализировать работы коллег, чтобы всегда понимать тенденции и перспективы индустрии. Моушн дизайнер - это профессиия, востребованная во всем мире. Средняя зарплата моушн дизайнера в США порядка $99000 в год. Профессионалы топ-уровня и руководящие специалисты имеют еще больший доход.
В качестве резюме можно констатировать, что профессия моушн дизайнера перспективна для творческих людей вне зависимости от того, есть у них профильное образование или нет. Главное – желание и упорство.

Спасибо! Вы успешно подписались на нашу рассылку.

Submit an Application Form

Set Up Your User ID and Password

International applicants may get access to their accounts after they apply for a User ID and a password using the link . Once you have submitted a form, an e-mail will be sent to the address you indicated during registration with your User ID and password. Please make sure уou have provided the correct e-mail address. Your User ID/password application will be considered within 72 hours (including weekends and public holidays).

Fill in the Form

Application Evaluation

IMPORTANT! Recognition procedure is mandatory for all foreign citizens applying to HSE and is offered free of charge. If you have a Russian high school/degree certificate issued by a Russian academic institution, you are still required to submit an application for recognition of academic credentials.

4. Apply for a Russian visa

If you have been admitted as a state-funded student (tuition waiver), your visa reference will be issued by the Ministry of Education and Science of the Russian Federation (MES), once HSE staff uploads all documents listed to the MES information system. The list of visa reference numbers will be published in your personal account in the Visa section. Normally visa references should be available in early August.

If you have been admitted to HSE as a fee-paying student, please submit an application to obtain a visa invitation via your personal account (Visa section). More details are available in your personal account.

Please note that citizens of the following counties DO NOT NEED a student visa to study at Russian educational institutions: Azerbaijan, Abkhazia, South Ossetia, Belarus, Kazakhstan, Kyrgyzstan, Moldova, Tajikistan, Ukraine, Armenia, and Uzbekistan.

If you are a citizen of Belarus, Armenia, Kyrgyzstan or Ukraine, you may use your national (internal) passport when crossing the Russian border. If you are a citizen of any other country, you must obtain a travel passport to enter Russia.

Russian nationals arriving in Russia must also show an ID (Russian travel passport for Russian citizens residing abroad). To enrol in HSE, you must also have your national (internal) passport readily available, even if you are residing abroad. Please make sure to make your plans in advance, since it may take up to 2 months to issue a national passport in Russia (if you don’t have a permanent registration and only have a temporary one).

5. Enrolment procedures for foreign applicants

To officially enrol in HSE and secure a place at an HSE dormitory, please visit us at the following address starting from August 20, 2019:

Room 330, 3rd floor, 11 Myasnitskaya Ulitsa.

Make sure you have the following documents with you:

Your passport + its copy + notarized translation of your passport into Russian (if applicable);

Original high school/degree certificate/diploma + its copy + a notarized translation of your high school/degree certificate/diploma into Russian (if applicable);

Migration card issued upon entry to Russia (at the airport or another border checkpoint) or a copy of your Russian visa;

IMPORTANT! In the migration card, please make sure to underline Education («учеба») as your purpose of visit.

4 photographs (on matt or glossy paper), size: 3×4cm;

Original of your medical certificate (must be dated no later than March 2019), and negative HIV test results. Please note that a medical certificate is valid for 6 months, and an HIV certificate is valid for 3 months.

Your voluntary health insurance policy (if available). You can purchase an insurance policy fromany insurance company of your choice or obtain one at our office. For your convenience from August 20 to August 31, representatives of 3 Russian insurance companies will be working on 11 Myasnitskaya Ulitsa.

Enrolment procedure includes the following steps

1. Submitting documents for enrolment to HSE.

2. Preparing documents to obtain a migration registration.

Please note that foreign students must register at their actual residence address:

If you are staying at an HSE dormitory, please contact the dormitory staff to get registered via a local migration office;

If you are staying at a rented apartment, please contact your landlord/landlady to get registered via a local migration office.

Please visit our office to for more details regarding the registration of students who are staying at rented apartments.

IMPORTANT! Citizens of the following countries may stay in the Russian Federation without registration for a fixed period of time only:

· citizens of Ukraine - 90 days;

· citizens of Belarus, Kazakhstan and Armenia - 30 days;

· citizens of Tajikistan - 15 days.

3. Dormitory check-in.

Dormitory places will be allocated via applicants’ personal accounts. You will get access to the Dormitory section in your personal account, once you’ve completed the Enrolment Consent and Recognition of Foreign Education and (or) Qualifications sections but no earlier than August 10. Therefore, by the time you visit us to submit your documents starting from August 20 , a place at the dormitory will have already been assigned to you.

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

Мы сделали подборку из 5 библиотек для создания анимации на web-сайтах, рассказав об их преимуществах, недостатках и сферах применения.

GreenSock Animation Platform

Но при этом для анимации HTML элементов tween.js совершенно не подходит - с этим справляются следующие два инструмента.

Move.js

Move.js - javascript-библиотека, позволяющая делать всё то же, что и tween.js, только с использованием CSS3 и HTML5 вместо Canvas. Она является не самой легкой (как для JS), но одной из самых популярных. Набор заранее заготовленных видов анимации (поворот, наклон, ротация и тд.) делает её также одной из самых легких в использовании.

Пример кода c использованием Move.js:

Move("#example-4 .box") .rotate(140) .end();

WOW.js + Animate.css

На самом деле это не настоящие библиотеки или фреймворки для анимации, по крайней мере в привычном понимании.

Animate.css - всего лишь CSS файл, в котором собраны несколько десятков правил, связанных с анимаций, а WOW.js - всего лишь маленький скрипт, запускающий эти анимации по мере прокрутки страницы.

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

Во-первых, решает легковесность. Всего 2 КБ и никаких зависимостей!

Во-вторых, wow.js и animate.css являются крайне простыми в использовании. Скорее всего, вам не придется написать ни строчки лишнего JS кода. Достаточно подключить эти два скрипта к странице и добавить к элементу, который нужно анимировать, пару css классов: класс wow и класс нужной нам анимации.

Теперь при загрузке страницы вместо статического отображения этот элемент будет красиво крутиться:

Для настройки анимации используются специальные data-атрибуты, например, data-wow-duration=»2s» задаст продолжительность кручения в 2 секунды.

Демо, более подробную документацию и полный список data-атрибутов можно найти на официальном сайте WOW.js , полный список классов анимации - на официальном сайте Animate.js.

Анимация средствами JQuery

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

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

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

Огромное спасибо http://www.webdesignerdepot.com и, как обычно, обязательно посмотрите прошлые подборки с красивыми сайтами:

www.noiretrenoir.com

Замечательный сайт, который использует крутую анимацию для большей связи с аудиторией. Особенно понравилось, как с начала сайт был чёрно белый а по степени загрузки он набирает цветность, в обем всё очень креативно и красиво сделано.

barcampomaha.org

Совершенно восхитительный и разноцветный сайт, который наполнен разными анимированными монстрами и иностранцами.

www.azahran.com

www.quechua.com

Замечательный интернет магазин, который использует анимацию объектов, что в свою очередь очень сильно принуждает к действию. Обычно на таких красивых сайтах люди покупают товар на много чаще.

Parallax.js

Сайт используется в место демо страницы которая демонстрирует работу скрипта Parallax.js. Ну что сказать, всё выглядит очень и очень эффектно!

www.buffalowildwings.com

Сайт простой но затягивающей игры. Как обычно тут используется причудливая анимация.

goodtwin.co

Этот сайт использует как красивые иллюстрации так и хорошую анимацию к ним. Всё вместе это смотрится очень круто.

www.intacto10years.com

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

Это, можно сказать, качественно сделанная и анимированная инфографика, которая показывает, что Вам сделать и принуждает к действию. Она сделана в стиле Flat, что даёт этому сайту современности и стиля.

www.ipolecat.com

Этот сайт использует в основном красивые иллюстрации, но при перелистывании слайдера они не много анимированные, что придаёт сайту некой причудливости.

www.octaveoctave.com

Интересный сайт с необыкновенными картинками и рисунками, плюс анимация. Другими словами — необыкновенно, но стильно.

www.milkable.me

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

www.mitchlana.com

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