В чем можно сделать анимацию прототипа сайта?

Question

[saveTibet]

Допустим, есть макет сайта с боковым меню. Со здоровым таким сайдбаром. Он статичен. Остальная часть, справа, скроллится. Как можно показать это? Типа сделать какой-то кинетический прототип, чтобы показать клиенту, чтобы было более полное представление.

Comments

[Ди Ма]

Можно экспортировать в svg.
А в javaScript анимировать нужные элементы.

[saveTibet]

Это уже из области задач верстальщика

Answer 1

[Mikalai Bulava]

Adobe Effects
Principle

Comments

[saveTibet]

Principle пробовал, но пока не нашел, как сделать так, чтобы одна часть была фиксирована, а остальная скроллилась.

Answer 2

[xmoonlight]

Сделайте ролик (запись с экрана) для непонятных динамических моментов прототипа.

Comments

[saveTibet]

В этом собственно и вопрос — как? Как показать то, как будет работать страница в итоге?

[xmoonlight]

Слой можно потаскать (drag-n-drop) "мышью" вверх-вниз и записать часть экрана в анимированную GIF-ку или полноценный видео-ролик.

[saveTibet]

xmoonlight: да, но скролл — это всего лишь малая часть того, что я хотел бы получить. Холеры, параллаксы, анимации простые — вот что нужно в итоге.

[xmoonlight]

saveTibet: это только вёрсткой с помощью заранее подготовленных блоков делается.

Answer 3

[Ульян Романов]

Adobe Effects или
Marvel
Moqups

Если собираетесь дальше в этой области работать, то приступайте к первому варианту, т.к. возможностей невероятно больше.

Comments

[saveTibet]

Имеется ввиду Adobe After Effects? Он что, и для анимации сайтов используется?

[Ульян Романов]

saveTibet: для анимации всего

[saveTibet]

Ульян Романов: все бы хорошо, но изучать адобовские продукты пока нет возможности.

Answer 4

[Руслан Галиев]

Если по быстрому, то Инвижн

Comments

[saveTibet]

В Инвижне нет такой функции, о которой я говорю.

Answer 5

[Илья Дзенски]

Быстрые варианты - Marvel или Invision. Также можно использовать Principle for Mac

Answer 6

[lvbmessage]

АE.. жрёт много оперативки, и лично у меня ещё не получилось нормально вывести gif.. размер исполняемого файла большой

Answer 7

[Сергей Тилион]

Если вы на винде и нужно показать только скролл, то можно сделать два jpg: сайдбар и макет, залезть в простой онлайн wysiwyg конструктор прототипов и запилить в нём.

P. S. "Кинетический прототип" - классно звучит).

Answer 8

[lukoie]

Так, стоп. А сам прототип в чем сделан? Если там уже есть параллаксы и статичные блоки - в чем проблема это показать так, как оно сделано сейчас, без участия третьего инструмента?

Comments

[lukoie]

https://dribbble.com/shots/2513404-Magazine-Flow
типа такую анимашку Вы хотите?

[saveTibet]

Отвечаю на первый вопрос:
Прототип сделан в Скетче.

[saveTibet]

lukoie: Да, но не такую навороченную, более упрощенную. Например, показать, что боковое меню фиксированно, а прокручивается только правая часть страницы. Или показать ховер на элементе. Или показать анимацию блоков при прокрутке страницы.

[lukoie]

saveTibet: чтобы клиент САМ это увидел, повозив мышью, или продемонстрировать такой функционал, чтобы клиент это увидел пассивно, просто глядя на экран?

[saveTibet]

Возможно, и так, и так. В принципе, если сделать так, чтобы можно было мышью потыкать, то не проблема потом с этого записать скринкаст

[lukoie]

Ну так, если Скетч, то Principle же ж.

[saveTibet]

Ну я там в первом ответе написал, что пробовал Принципл, но не разобрался, как сделать именно то, чего я хотел.

[lukoie]

saveTibet: https://www.youtube.com/watch?v=cirowjZHuc0
либо тут пару видео гляньте
principleformac.com/tutorial.html
то есть слоями сделать один статичный, а другой динамичный совсем не проблема.

Answer 9

[Tati_Bo]

Я думаю, решение Вы уже нашли, но всё же напишу)))
Есть в invision такая штука screen as overlay. С её помощью можно создать подобие того, о чём Вы спрашивали. Сама только сегодня додумалась использовать его так. Но этот вариант не идеален. Есть минус, пишу о нём ниже. В общем.
В режиме build mode растягиваете прямоугольник на всю правую область с контентом, в выпадающем меню выбираете всё как на скрине https://prnt.sc/inhtrz (в 3 пункте выбираете отдельно сохраненное изображение сайдбара) и галочку hotspot обязательно (если будет такое меню использоваться ещё на каких-то скринах). Проблема только в том, что менюха поедет, если смотреть на другом разрешении монитора, чем прорисован макет. Смотреть нужно именно размер в размер. Т.е. если рисовалось под 1920, то и смотреть на 1920 мониторе нужно.

Comments

[saveTibet]

оверлей скрин я использую давно. но это не то. в общем, пока я не нашел такого инструмента, потому задача сейчас неактуальна.