Wow-эффект и веб-дизайнер?

Question

[Алена]

День добрый.
Работаю в Adobe XD и Photoshop. Поступил запрос на Лендинг с вау-эффектом.
(Уточнила, нужна анимация). Как я, веб-дизайнер, да еще и начинающий, могу воплотить эту затею в жизнь?
Спасибо за ответы)

Comments

[Максим]

А что за эффект то ? Как он выглядит ?

[archelon]

я вдруг подумал, а может, заказчик имел в виду использование библиотеки wow.js?

[Алена]

archelon, почитала Хабр и тоже подумала о wow.js. Но пока что я от этого совсем далека ((

[archelon]

Алена, ну, этим уже верстальщик должен озаботиться.
вам, наверное, стоит прояснить у заказчика, что конкретно имелось в виду: эффекты, как в wow js, или эффекты такие, чтоб ВАУ.

[Алена]

Согласна. Спасибо за ответ)

[Rustam Bainazarov]

Ну, если вы не владеете After Effects, то никак не сделаете. Ну или каким-нибудь ПО, где есть функционал анимаций.

Answer 1

[Владимир Солнцев]

Я вижу несколько вариантов, как можно сделать:

1. Сделать промежуточные варианты состояний. Например, пользователь жмакает на ссылку, кнопка красится в фиолетовый цвет, затем цвет полукругом расходится на всю страницу, затем сходится к кнопке, открывая обновленный контент, и наконец исчезает, а кнопка становится активной.
Вы можете нарисовать состояния кнопок и к этому добавить 3 состоятия, как расходится цвет.
Для точности можно прям словами описать.

2. Посмотреть демки всяких вов решений и скинуть ссылки на них верстальщику, написать где и что подключать.

3. Работать совместно с верстальщиком над эффектами. - Вы как дизайнер создаете идею и описываете, он помогает осуществить или отказаться, если воплощение слишком затратно. Тут хорошо, когда есть знакомый, с которым уже работали. Можно клиенту предложить полную разработку сайта, с версткой и хостингом. Но это уже меня понесло)

В любом случае, вам с клиентом нужно это обговаривать, объяснять, договариваться.

Comments

[Алена]

Спасибо за развернутый ответ.

Answer 2

[Sanes]

У каждого свой WoW

Answer 3

[archelon]

Просто нарисуйте промежуточные варианты анимированных элементов.
Можно слепить из них гифку, это просто.
В некоторых случаях можно дать словесное объяснение ожидаемых эффектов, в т.ч. с референсами на другие сайты.
===
Это, если речь идет о технической реализации, а в видеоредакторы вы не умеете.
За идеями и вдохновением можно пойти сюда: https://www.awwwards.com/

Answer 4

[Михаил Проскурин]

Все очень просто, если человек обратился к вам, надо думать, он уже видел ваше портфолио, а значит понимает, на что нужно рассчитывать - иными словами, делайте как привыкли, делайте так, чтобы ваше внутреннее чувство прекрасного было довольно)

Comments

[Алена]

Видел, доволен, но хотел посмотреть на работы «в действиии». И тут я поняла, что нужно что-то большее )

[Михаил Проскурин]

Алена, если чересчур заморочиться с мыслью, что нужно сделать что-то нереальное - может получится не очень)

Вам надо расслабиться и делать то, что вы делаете всегда.

Answer 5

[Sergey]

Как я, веб-дизайнер, да еще и начинающий, могу воплотить эту затею в жизнь?

С помощью референсов? Просишь референс, узнаешь, что в их понимании "вау-эффект" – делаешь.

Comments

[Алена]

)) хороший вариант

Answer 6

[igapeka]

Auto animate в Adobe XD сделает любого, даже самого начинающего веб дизайнера «вау-дизайнером». Вот ссылка на чувака, который пилит короткие и понятные (если знаете английский) туториалы, очень полезные. Вот и весь вау-эффект. Не знаю, правда, как потом это будут разрабы делать))) Но вам же надо заказчика удивить)
https://www.youtube.com/playlist?list=PLkiM1tZke4m...

Comments

[Алена]

Круто! Спасибо.
Подписалась на него.