Анимация, у которой есть задача.

Пусть анимация объясняет связь

Крупная надпись с названием, которая превращается в логотип в меню, рассказывает маленькую связную историю: бренд остаётся с вами, пока вы изучаете сайт. Изображение проекта, которое разворачивается в страницу с подробностями, связывает общий обзор со следующим уровнем информации. Такая анимация объясняет связи, которые уже есть в содержании. Эффект без такой связи может впечатлять, но он забирает внимание и ничем не помогает посетителю. Прежде чем добавлять анимацию, опишите, что она должна сообщить. Если единственный ответ в том, что блок кажется пустым, сначала вернитесь к композиции и содержанию.

Дайте тексту закончить мысль

Текст может появляться по строкам, по словам или по буквам, но читать его всё равно будут как предложение. Короткому заголовку подходит более выразительное появление. Длинному абзацу обычно лучше стоять спокойно. Посмотрите на момент между скрытым и видимым состоянием: успевает ли человек понять смысл, прокручивая страницу в обычном темпе? Сохраняйте порядок чтения. Не разбивайте анимацией слова в языках со слитным письмом, например в арабском: от этого меняется начертание букв. Ивриту нужна отдельная работа с направлением справа налево. Анимация, которая убедительно выглядит на одном языке, не обязательно готова для другого.

Продумайте версию для телефона

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

Сайт без анимации тоже должен быть полноценным

Сайт должен работать полноценно и тогда, когда анимация отключена или остановлена (например, в режиме «уменьшить движение»). Покажите содержание, сохраните порядок и оставьте доступными все действия. Фоновому видео нужны осмысленная обложка и возможность паузы. Останавливайте видео, когда его больше не видно, чтобы оно не отнимало внимание и ресурсы. Проверяйте страницу целиком, а не анимацию отдельно: типографика, изображения и навигация воспринимаются вместе. Лучшая анимация — не самая сложная, а та, при которой сайт воспринимается естественно и остаётся удобным, когда движения нет. Хотите такую анимацию на своём сайте? Расскажите Даниэлю о своей идее. Он ответит в течение одного рабочего дня, а первая консультация бесплатна.