5 примеров веб-анимации, сделанной правильно

animation_logo

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

Рассмотрим 5 примеров анимации, которая сделана правильно:

Не анимировать несколько элементов одновременно

Представьте: вам необходимо создать анимацию, которая включает в себя текст, иллюстрации и призыв к действию.

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

А вот отличный пример от Anton Aheichanka, созданного для Craft.

animation_1

Делайте анимацию со смыслом

Случайная анимация без цели? Ну нет.

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

Эта смешная анимация GIF for the Timeline App от Сергея Валюха несет подтекст и смысл — прежде всего, переход от утра к вечеру.

animation_2

Следите за временем

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

Вот хороший пример от Joe Jordan для Open

animation_3

Просто скажите «нет» скучной линейной анимации

Движение из точки А в точку В кажется роботизированным.

Julien Renvoye отлично справляется с интересными анимациями для Event Website Design, не переусердствуя. Хорошие, плавные переходы с использованием методологии материального дизайна.

animation_4

Анимация не должна делаться в последнюю очередь

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

Pull Down to Refresh от команды Ramotion — хороший пример продуманной анимации с самого начала.

animation_5

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

Перевод статьи Joe Jordan, креативного директора JK design

Читайте также:

Главные тренды веб-дизайна в 2018 году

Почему ваше приложение смотрится лучше в Sketch, чем на iOS

«Эффект бабочки»: The New Yorker выпустил новую версию легендарной обложки

<p style="text-align: center">Нашли ошибку?  Выделите текст и нажмите <em>Ctrl+Enter</em>.</p>
Поделиться:

Теги

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Яндекс.Метрика