Сколько стоит дизайн + верстка анимаций на сайте?
Сайты с анимацией смотрятся вкусно, вызывают вау-эффект и, благодаря росту средней мощности клиентских устройств, анимацию можно сделать и на мобильных. Сколько стоит анимация, способная удивить ваших клиентов?
В статье речь пойдет об анимации, с которой можно взаимодействовать или с той анимацией, которая зависима от положения пользователя на странице.
Анимация для лендинга
Например, нам нужно сделать красивый лендинг для бренда. Заказчик предоставил брендинг, логотип, цвета, фирстиль, в общем — всё, что нужно для хорошей работы по дизайну.
С учетом составления договора, общения с заказчиком, прототипа, 2 итераций правок, кропотливой, вдумчивой и раздельной работы над каждым разрешением, только дизайн в 3-4 разрешениях (375, 768, 1140, 1440-2880) обходится в 35-50 часов, что в переводе на деньги 70-100 тысяч рублей. Плюс верстка, разметка, установка на систему управления, текст, всякие формы-карты-квизы-счечики, тестирование результата на 12 устройствах обходится еще в ~30-50 тысяч рублей.
Получается вот это:
Далее, делаем анимацию и считаем:
- Веб-анимация для лендинга — 10 часов для десктопа + мобилки.
- Верстка анимаций — 5-10 часов.
- Также добавляется дебаг анимаций — 2 итерации по 2-4 часа, итого 8 часов. К сожалению, анимации почти никогда не работают идеально с 1 раза (привет, JS и зоопарк браузеров) , особенно на слабых устройствах, поэтому нужно проверять и править, править и проверять.
Получается вот так
Итого лендинг без анимаций под ключ ~130 тысяч рублей, лендинг с анимациями ~180 тысяч рублей. Проще говоря, моушен дизайн увеличивает стоимость лендинга на 1/3.
Анимация для многостраничного сайта
На мой взгляд, сложную анимацию стоит делать исключительно на промо-сайтах, сайтах с услугами, стартапов. Как правило, на таких сайтах 6-10 уникальных шаблонов. Самая сложная анимация делается на главной странице, страницах услуг, на тех же Контактах, Оплате смысла в ней нет. На подобных страницах создается «легкая» анимация, стандартная, если можно так сказать.
Обычный дизайн без анимации + всё что я перечисляла для лендинга (от анализа конкурентов, прототипа до текстов и интеграции в систему управления), для 8 шаблонов обходится в 230-350 тысяч.
Сложная анимация для 3 страниц, простая — для остальных, верстка анимаций, дебаг прибавляют к этой картине около 70-90 тысяч рублей. Получаем рост стоимости на ~1/4, что кажется вполне оправданной ценой за преимущества моушен-дизайна.
Особенности, которые стоит знать или короткий HOW-TO по анимации
Самая большая проблема анимации в людях. Я потратила почти пол-года чтобы найти программистов, которые могут создавать сложные анимации так, чтобы они не «тормозили» на недорогих телефонах и не рассыпались на нестандартных и при этом чтобы ценник не был космическим. Могу поделиться контактом в л/с.
Пользователям нравится, когда обычная “загрузка” заменяется на легкий анимационный эффект. Например, можно поставить шагающего маскота вместо стандартного кружочка.
Лучше всего использовать максимально “легкие” анимации. Вместо полноценного 3D лучше использовать 2D или псевдо3D.
С анимациями важно не переборщить. Слишком много анимаций или длинные анимации могут раздражать пользователей.
Анимации не будут корректно работать в старых браузерах. Однако, в наш век постоянных обновлений — я бы не сказала что это проблема. Решение — отключать их для старых устройств/браузеров.
- Кликабельная анимация и анимация в принципе нравится Яндексу, поскольку увеличивает ПФ/время просмотра страницы. Поэтому, анимация это не только про запоминающийся сайт, это еще и про привлечение новых посетителей, при должной SEO оптимизации.
Анимации стоит подключать к A/B тестированию. Проверяйте, какие анимации вызывают у людей положительные эмоции, мотивируют смотреть страницу дольше.
Всегда можно сделать дешевле. Вопрос только во времени, которое вы потратите на доведение результата до ума. Сдавать проект без багов для исполнителей многого стоит, поскольку чтобы организовать подобный результат — тестировать и дебажить нужно каждый этап: чистовую верстку, установку на CMS, программирование анимаций.
А еще оно нередко люто лагает при разработке, поэтому дебаг - штука не лишняя:
И напоследок — всегда думайте о целесообразности анимаций на сайте. Бренду уникальной косметики или культурному объекту — в большинстве случаев сложная анимация поможет в привлечении пользователей, интернет-магазину сантехники — вряд ли.
С вами была Лена — UX/UI/Motion-дизайнер. Если у вас остались вопросы по анимациям — жду вас в телеграмм. Также много полезного для заказчиков можно найти в моем канале "Бизнес-дизайн".
Всегда рада нетворкингу с UI/Motion-дизайнерами и Frond-end — вы знаете где меня найти.
Жду ваших вопросов по анимациям — в комментариях.
ненавижу анимацию (а тем более видосы) на сайтах
- особенно, если нет возможности отключить автопроигрывание
- поймите, разрабы, посетителю сайта инфа нужна, а не вот это вот всё
Ответ прост - разные аудитории.
Кому-то подавай брутализм, кому-то минимализм, а анимации нужны чтобы передать эмоции от продукта НУЖНОЙ целевой аудитории (подразумевается, что ЦА должна быть эмоциональной) ИЛИ улучшить взаимодействие с продуктом за счет плавности-понятности происходящего.
У каждого инструмента есть цель. На условном макретплейсе/классифайде это ни к чему. С другой стороны на том же apple анимация максимальна органична, и еще есть тысячи примеров где с ней лучше чем без нее
Удалено
Ну смотря какая информация нужна и для какой аудитории делается сайт. Например, для информационных порталов (вспомните хотя-бы статьи с интерактивной анимацией в статьях WSJ) анимация отлично подходит, с точки зрения усвояемости информации и вовлечения пользователей в обсуждение, если такая задача стоит. Кароч, анимацию нужно уметь использовать к месту. Анимация в вакууме (тупые шурешки, прогрузки и переходы и вот это вот всё) бессмысленна, хотя эстетики добавляет иногда.
все зависит от сайта же
есть режим чтения, сам им пользуюсь регулярно