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

Прочел статью на хабре 9 основных принципов отзывчивого веб-дизайна, и меня заинтересовала анимация используямая для наглядной демонстранции различия отзывчевого веб- дизайна от неотзывчевого, вот она:
fd7cbf28142f47d3b9d4f4b43ca8316c.gif5ed205024fcd431ca5bcb33fdb3d10dc.gifc1b1638ec29d4b409cb7f98d6466bcef.gif
Так как на хабре я read-only и не имею возможности спросить в коментариях, я поднимаю этот вопрос сдесь

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

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

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

Если вы поняли что я имею ввиду, перефразирую вопрос: С помощью чего прототипировать макеты с нестандартным UX(активными дивижующимися элементами)? Макет должен быть понятен любому пятикласнику!!
  • Вопрос задан
  • 1374 просмотра
Решения вопроса 1
@krll-k Автор вопроса
Я думал что есть волшебный способ который избавит меня от излишних объяснение, но его нет. Лучше чем словесное объяснение на данный момент способа не придумали

Использовать для этого все остальное недопустимо. Вы меня уж простите, но такого мое мнение. Кто готов его оспорить, пожалуйста
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 6
SashaMelbourne
@SashaMelbourne
Web-designer
After Effects жешь, не?
Ответ написан
Комментировать
nicogold
@nicogold
UX Strategist
Indigo Studio
Ответ написан
Комментировать
@Kalist0
1)Photoshop: можно делать как анимацию gif, получится как на выложенной в вопросе картинке, но это скорее для демонстрации в портфолио или презентации. А для верстальщика лучше воспользоваться layer comp, для дальнейшей работы это будет более понятней, так как вся верстка будет в одном файле. Где вся графика будет отзывчивой, станет ясно, что происходит при нажатии на какой либо элемент или как ведет себя сетка при разных масштабах.
или edge animate)
Ответ написан
Комментировать
@Yartydote
что именно вам нужно(вы про макеты или прототипы?? ну, сначала о макетах говорите и пэседэ а потом про прототипирование )?красивая анимация или понимание того, как будет меняться макет?
адаптивные макеты можно легко делать в Axure, респосив - улучшенный адаптив
а респонсив прототипы нафиг не нужны. остальное комментариями, да - этого достаточно для понимания
одна из главных целей прототипа - понимание
вылизвать и прочяя херь - все потом

я вообще предпочитаю бумажное проектирование
Ответ написан
Комментировать
MIkola35
@MIkola35
Team Lead UX/UI Designer
Эти анимашки делаются в after effect. Я поначалу тоже пытался найти ему альтернативу, но со временем втянулся и оказывается там не так уж плохо.
Ответ написан
Комментировать
H1ppy
@H1ppy
Веб-дизайнер из Петербурга
Adobe XD со своим auto-animate вполне справляется, также Invision и Figma пойдут.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы