Сайты с анимацией смотрятся вкусно, вызывают вау-эффект и, благодаря росту средней мощности клиентских устройств, анимацию можно сделать и на мобильных. Сколько стоит анимация, способная удивить ваших клиентов?
В статье речь пойдет об анимации, с которой можно взаимодействовать или с той анимацией, которая зависима от положения пользователя на странице.
Анимация для лендинга
Например, нам нужно сделать красивый лендинг для бренда. Заказчик предоставил брендинг, логотип, цвета, фирстиль, в общем — всё, что нужно для хорошей работы по дизайну.
С учетом составления договора, общения с заказчиком, прототипа, 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) анимация отлично подходит, с точки зрения усвояемости информации и вовлечения пользователей в обсуждение, если такая задача стоит. Кароч, анимацию нужно уметь использовать к месту. Анимация в вакууме (тупые шурешки, прогрузки и переходы и вот это вот всё) бессмысленна, хотя эстетики добавляет иногда.
все зависит от сайта же
есть режим чтения, сам им пользуюсь регулярно
посетителю нужна АНИМАЦИЯ
Сайты с анимацией смотрятся как говно.
Разработчики таких сайтов соответственно тоже
Спасибо за ваш ценный комментарий
от первого предложения захотелось блевать: «смотрится вкусно и вызывает вау-эффект». извините, а может вам не писать статей?)
Спасибо за ваше мнение.
Не читайте моих статей или напишите свою, все в ваших руках :)
А там что-то после "вкусно" было полезное? А то я не смог дальше читать.
А кому нужен ВАУ-эффект если при рассмотрении будет гавно-продукт или сервис? Крутые в анимации - рисуйте мультики для детей, будет более полезно, потребители будут всегда довольны и карму не портит.
У сайтов с анимацией обычно целевая аудитория - не разработчики, а потенциальные заказчики, для которых это всё "ВАУ, круто!"
Да чтож комментаторы так любят упоминать эту субстанцию. Хорошая статья по существу. Автор молодец. Ваши додумки и предположения возможно излагать и в более вежливой форме. Ну уподобляйтесь наполнению своей фразы.
Анимация крайне посредственная, уровень средних фрилансеров в регионах.
Прайс в статье завышен раза в 2 - 2.5
Спасибо за ваше мнение.
Как и упоминала в статье - всегда можно найти дешевле, вопрос в том, что вы потом будете делать с этой дешевизной. Тестировать все самостоятельно на десятках устройств или переделывать сайт, потому что кто-то не проанализировал конкурентов?
Я продаю результат соотносящийся с потраченным временем. У человека НЕ МОЖЕТ уйти намного меньше времени на те же этапы, что делаю я. Отсюда эта дешевизна чаще всего обусловлена или тем, что он какие-то из этапов пропускает.
Не понимаю комментаторов, которые без разбору обосрали все, что содержит анимацию
не у всех проекты для корпоративных цмс, если речь идет о глянцевом журнале или презентацией геймдев продукта, она очень даже к месту
для примера всем консерваторам и любителям дизайна аля ucoz 2000ых
https://staratlas.com/
(кликаем по центру "Click to Enter" и крутим скролл)
Вы как глоток воздуха в этом темном царстве :)
А если вспомнить, что почти все популярные сайты эту самую анимацию содержат...
Комментарий недоступен
Дела - очень хорошо :)
Сейчас в продакшене 4 проекта с анимациями.
Тоже самое вы вряд ли делаете, а похожее - может стоить и много дешевле, и много дороже. Я не конкурирую с (как вы выразились) "копеечными фрилансерами" или конструктороделами, поскольку я создаю продукт гораздо более высокого качества, где каждый кусочек сначала проанализирован, задуман, затем реализован и протестирован.
У меня, например, нет наценки за "студийность", в том смысле что крупные студии берут еще X3-X10 от моей цены и у них при этом есть клиенты. Поэтому, в сравнении с ними, я беру гораздо дешевле, ведь у меня нет штата менеджеров по продажам, PR-SMM и так далее.
Поэтому, ваше решение - найти для себя подходящую нишу, проанализировать конкурентные предложения и продавать то, в чем вы лучше всего по честной цене.
Цены из разряда влажных мечт)
Охх, помню я как один раз на реализацию всех задумок дизайнера с WebGL анимациям ушло 15-ть дней, заказчик ещё потом был в шоке от того как это дорого, думая что это ну максимум + 1-2 дня работы... кастомные WebGL анимации.. 🥲
О да. Переборщить - легко :)
Анимация на сайте конечно красиво, но рядовому пользователю она не нужна. Может даже, будет раздражать.
Такая красочная как у меня в примерах - нужна не всем и не всегда. Но анимация в принципе есть почти на всех сайтах, минимальная.
"Сайты с анимацией смотрятся вкусно" - идиотский оборот, тошнит уже от этого "вкусно" по всюду...
Русскый нэ владэю, вкусна гаваришь брат.
Русский язык, как и любой другой живой язык, претерпевает изменения, ничего уж тут не поделаешь.
А повсюду - пишется слитно, тут тоже ничего не поделаешь.
Да уж, в комментариях как обычно токсичность, сарказм, пассивная агрессия, провокационные вопросы и ноль конструктива. Потрясающее комьюнити.
Привет, VC! :)
Но, разумных людей тоже много. Они, как правило, пишут в личку.
Даешь японский веб-дизайн!
https://www.rakuten.co.jp/
Их сайты за двадцать лет вообще не изменились, для них главное - использовать место с пользой, никаких bells and whistles.
Выглядит отвратительно, пришлось идти глаза промывать. Не может такой сайт нравиться адекватному человеку, это же пиздец полный
Что-то сьело мои глаза, слава богу что я умею в слепую печать...
Но у японцев, конечно, есть стиль, которые они несут из сайта в сайт. Надо же!
Обычный сайт.
Пойду на сайт бренда https://www.apple.com/ и буду наслаждаться отсутствием анимации и поблагодарю их маркетологов, которые ничего не понимают в анимации.
Как ни странно - она там есть и там ее много :)
При чем тут игры и видео? откройте страничку https://www.apple.com/iphone-13-pro/ одна анимация сплошь и рядом
Народ, здесь вовсе не написано что ее нужно пихать во все проекты и чтобы глаза текли кровью. А как раз о том, что она нужна на некоторых сайтах, типа промо или портфолио. И она реально работает! Там и создается этот вау-эффект и ощущение чего-то дорогого в представленном продукте или услуге.
Естественно никто не будет ее использовать в различных корп. сайтах и уж тем более в CRM.
А есть исследования с цифрами, в которых замеряли, что сайт с анимацией дает показатели выше аналогичного без неё? Или «реально работает» — это только мысли дизайнеров, которые кайфуют от визуала?
Абсолютно верно. Ни в корп.решениях, ни на интернет-магазинах, ни на какой-нибудь упаси боже сантехнике красочной анимации не будет, только служебная.
Перед тем, как делать анимацию на сайте, нужно заказчику определиться, а дизайнеру 100 раз подумать и обговорить с заказчиком. А то заходишь на хороший сайт продукта для бизнеса - а вместо минимальной анимации или же её отсутствия встречаешь нечто "навороченное" и совсем не к месту. И жаль, что дизайнеры и верстка потратили время для создания эффекта "укачивания" от морской болезни пользователя. Я это к чему - во всем нужна норма. А статья хорошая и классный пример анимации с "Наши проекты"!
Спасибо!
Да, все зависит от продукта и принцип 7 раз отмерь - 1 раз отрежь актуален, как и всегда.
Спасибо за интересную статью и особенно за пример расчёта работ.
Я смотрю иногда лендосы у Самсунга, где они презентуют очередной телефон, и там полно этой анимации, особенно привязанной к скроллу. И ты скролишь, скролишь, скролишь, когда же она закончится, чтобы прочитать что-то еще, а не смотреть вот это вот все.
Сейчас где-то верстальщик тихо плачет в сторонке и спрашивает, а как это сделать, под разные устройства, разрешения, браузеры и версии браузеров))) Сделать это под пк версию конечно особого ума не надо... На тильде по моему такое могут сделать за 10-ку...
Комментарий недоступен
Александр, как поставить 2 плюса?)
Отличное описание, спасибо.
Крутой Front.
Я ему передам :)
Ого, интересно
а я себе сайт с анимацией заказал. мне нравится, не знаю к чему это приведет. Но мне не понравились кстати ваши примеры. Мне сначала сделали так же. Я просто развернул и отправил все переделывать. Пока что у меня есть верстка но еще не прикручена к сайту. Вот такие вот дела. Кто бы что не говорил, все вопрос в креативе и подходу к делу. Кстати по цене вышло так же как и у топикстартера вышло.
Вот, разумный комментарий про цены. Дешевле сделать и не получится, если нанимать нормальных специалистов.
Мои примеры могут не нравится, но они соответствуют задаче. И для каждого заказчика я всегда нахожу индивидуальное решение.
Анимации - штука сложная. Если не обойтись css, стараюсь делать без них. Любые живые элементы в canvas это дорого. Svg дешевле, но часто тормозит на мобиле.
Сложные анимации вызывают ощущение дорого-богато и раздражения, если ими спамят постоянно.
Если вы разрабатываете интересные анимации и рассматриваете новые проекты - добавляйтесь, думаю найдем над чем поработать.
Сделать анимацию, которая будет большой, красивой, оригинальной (макет из статьи довольно часто встречается в похожих воплощениях), адаптивной под мобилу, и при этом будет рабоать на всяких этих ваших сафари и фаерфоксах - это что-то из разряда фантастики для большой части разработчиков, которые кроме мемо в реакте ничего про оптимизацию не знают.
Чтобы вы понимали, о чём я говорю, я делал сайт для своего проекта и баловался с элементами киберпанка и футуризма (ссылка: https://marka.link/) - использовал голый джс и цсс с максимальной оптимизацией, в которую на тот момент мог - но сафари, например, не особо переваривает многие даже простейшие наслоения теней и т.д.
И на другой странице, где я хотел создать элемент голграммы: https://marka.link/download/ - вышло красиво и адекватно в хроме, но после теста в других браузерах (привет мозилле), пришлось вырезать 2/3 красоты, что бы это +/- адекватно работало везде.
Как итог, чувство недоделанности и не самые высокие отметки на аwwwордс. Хотя опыт вышел прикольный, как и некоторые анимации, например второй блок на главной.
У вас однозначно получилось почувствовать нужную грань брутализма. Да, можно еще над чем-то поработать, но лучшее - враг хорошего.
А то, что многие ноют про анимацию - иногда это косяк создателей сайта, например когда большие и сложные анимации в интернет магазинах или на сайте почты - они там не нужны. Но если это страница какого-то крутого диджитал агенства или нового современного продукта - крутые анимации, пёстрый контент, грань разработки и дизайна - это всё просто мастхэв. Это демонстрация крутости. И часто там есть на что посмотреть.
А если вам не нравится обилие анимаций где-то ещё - используйте одно из тысяч расширений. Используйте режим чтения в браузере. Пользуйтесь браузерами, в которых можно отключить это всё в настройках. Буквально кучи разных вариантов что с этим можно сделать, большую часть из которого можно было бы осуществить за время написания гневного комментария под постом в виси. Подумайте, может вы тратите своё время не на то, на что стоило бы...
Сняли с языка, у вас разумный подход :)
Если клиент выбирает анимацию, то должен быть уверен в своей ЦА. Глупо его отговаривать. По посту: анимация хорошая! Если это действительно протестировано на различных браузерах и устройствах = адекватно работает, то вообще браво! Стильно, юзабильно. И спасибо за хау-ту
Пожалуйста :)
Это работает хорошо в современных браузерах, если тщательно подходить к тестированию.
Подскажите, пожалуйста, преподаёте ли Вы курсы по созданию таких сайтов?
Я не делаю свои курсы просто потому, что не могу гарантировать что все осилят эти знания, а обучение типа *известных онлайн школ* я предоставлять не хочу :) Но обучаю иногда и не всех в индивидуальном порядке. Чтобы учиться анимации UI - нужно хорошо уметь в UI.
Лена, спасибо! и за наглядные видосы и за цены
Какое же унылое г комментит…
Жалеете, что flash умер? Теперь проблема "найти программистов, которые могут создавать сложные анимации...".
Flash был незаконорожденным отпрыском ужа с ежом. И JS, если задуматься, туда же. Работаем с тем, что есть :)
А в чем сделана анимация, что за ПО использовалось для создания макета?
Figma + AE + немного фотошопа
Не то чтобы сайт, скорее видео поясняющее как работает бот.
Вот прикрепил, посмотрите...
Ищу исполнителя для нового своего продукта.
Сколько стоит? Где заказать? Буду благодарен советам)
А для нового продукта нужно что - по пунктам?)
Комментарий недоступен
Отличная статья, все по делу. Было смешно читать все эти комментарии )))
всегда интересовала анимация на сайтах, но дело предельно трудоемкое, конечно