С помощью чего прототипировать UX макеты с активными дивижующимися элементами?

Question

[krll-k]

Прочел статью на хабре 9 основных принципов отзывчивого веб-дизайна, и меня заинтересовала анимация используямая для наглядной демонстранции различия отзывчевого веб- дизайна от неотзывчевого, вот она:

Так как на хабре я read-only и не имею возможности спросить в коментариях, я поднимаю этот вопрос сдесь

автор поста andrew-r, но всего лишь переводчик!!

Допустим представим вот такую ситуацию. Есть макет. Есть верстальщик, фронтенд-разработчик с плохим пониманием ux, или ux нестандартный - как вы демонстрируете какую активную деятельность. Существует ли спизилизированные приспособления для этого? Может прям включаете анимацию в PSD?

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

Если вы поняли что я имею ввиду, перефразирую вопрос: С помощью чего прототипировать макеты с нестандартным UX(активными дивижующимися элементами)? Макет должен быть понятен любому пятикласнику!!

Answer 1

[krll-k]

Я думал что есть волшебный способ который избавит меня от излишних объяснение, но его нет. Лучше чем словесное объяснение на данный момент способа не придумали

Использовать для этого все остальное недопустимо. Вы меня уж простите, но такого мое мнение. Кто готов его оспорить, пожалуйста

Answer 2

[Sasha Melbourne]

After Effects жешь, не?

Answer 3

[Nicolai G.]

Indigo Studio

Answer 4

[Kalist0]

1)Photoshop: можно делать как анимацию gif, получится как на выложенной в вопросе картинке, но это скорее для демонстрации в портфолио или презентации. А для верстальщика лучше воспользоваться layer comp, для дальнейшей работы это будет более понятней, так как вся верстка будет в одном файле. Где вся графика будет отзывчивой, станет ясно, что происходит при нажатии на какой либо элемент или как ведет себя сетка при разных масштабах.
или edge animate)

Answer 5

[Yartydote]

что именно вам нужно(вы про макеты или прототипы?? ну, сначала о макетах говорите и пэседэ а потом про прототипирование )?красивая анимация или понимание того, как будет меняться макет?
адаптивные макеты можно легко делать в Axure, респосив - улучшенный адаптив
а респонсив прототипы нафиг не нужны. остальное комментариями, да - этого достаточно для понимания
одна из главных целей прототипа - понимание
вылизвать и прочяя херь - все потом

я вообще предпочитаю бумажное проектирование

Answer 6

[Николай Мамадаев]

Эти анимашки делаются в after effect. Я поначалу тоже пытался найти ему альтернативу, но со временем втянулся и оказывается там не так уж плохо.

Answer 7

[Ваня Богатырев]

Adobe XD со своим auto-animate вполне справляется, также Invision и Figma пойдут.