Сайты с анимацией смотрятся вкусно, вызывают вау-эффект и, благодаря росту средней мощности клиентских устройств, анимацию можно сделать и на мобильных. Сколько стоит анимация, способная удивить ваших клиентов?
В статье речь пойдет об анимации, с которой можно взаимодействовать или с той анимацией, которая зависима от положения пользователя на странице.
Анимация для лендинга
Например, нам нужно сделать красивый лендинг для бренда. Заказчик предоставил брендинг, логотип, цвета, фирстиль, в общем — всё, что нужно для хорошей работы по дизайну.
С учетом составления договора, общения с заказчиком, прототипа, 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 — вы знаете где меня найти.
Жду ваших вопросов по анимациям — в комментариях.
Комментарий недоступен
Дела - очень хорошо :)
Сейчас в продакшене 4 проекта с анимациями.
Тоже самое вы вряд ли делаете, а похожее - может стоить и много дешевле, и много дороже. Я не конкурирую с (как вы выразились) "копеечными фрилансерами" или конструктороделами, поскольку я создаю продукт гораздо более высокого качества, где каждый кусочек сначала проанализирован, задуман, затем реализован и протестирован.
У меня, например, нет наценки за "студийность", в том смысле что крупные студии берут еще X3-X10 от моей цены и у них при этом есть клиенты. Поэтому, в сравнении с ними, я беру гораздо дешевле, ведь у меня нет штата менеджеров по продажам, PR-SMM и так далее.
Поэтому, ваше решение - найти для себя подходящую нишу, проанализировать конкурентные предложения и продавать то, в чем вы лучше всего по честной цене.
Комментарий недоступен
Вы спросили - я ответила.
Мой прайс обусловлен моими знаниями и тем, что забивая себе очередь на пол-года вперед за 1500р/час - я просто повышала цену для следующих клиентов и сейчас у меня очередь на 2000р/час.
"Во-вторых, все что вы описали - делает любой нормальный фрилансер." - так любой нормальный фрилансер и возьмет не меньше 2000/час. Теперь соберите 5 таких нормальных фрилансеров в группу (аналитик с навыками UX, UI дизайнер, моушен дизайнер, верстальщик, программист) и сделайте их силами 1 проект.
Какая получится цена? Моя или дороже.
Еще раз, вы продолжаете говорить о дешевых фрилансерах и вообще о ценах. Ну не станет производитель косметики или банк думать о том, как бы сэкономить 50-100 тысяч, выбрав фрилансера чуть дешевле. Потому что знает что сэкономив - получат, скажем, на 0.2% меньше конверсий, что для сайта, который посещают тысячи людей в сутки - очень даже много. А если работать не по регламентам, не быть дотошным, не перепроверять себя - эти 0.2% (а то и больше) - легко потерять.
Комментарий недоступен
Я и не предлагаю считать меня профи просто потому, что я так говорю :) Почитайте другие материалы, возможно - увидите что-то для себя.
Я не сочетаю в себе навыки всех 5 человек, нужных для качественного выполнения 1 проекта (на самом деле - 6, потому что копирайтера забыли). Я однаково хорошо разбираюсь в UX/UI и Motion дизайне, и достаточно разбираюсь в аналитике, верстке и программировании для того, чтобы проверять свою команду, с которой эти проекты и делаю.
И да, по сути я конкурирую со студиями, где лендинг сделают за 3 млн. Только я его сделаю так же качественно и в 5-7 раз дешевле :) И это минимальная цена, по которой можно обеспечить подобное качество. За 100к подобный лендинг уже не получить просто потому, что работа делающих его людей (банальная себестоимость) - больше.