What's the best way to document screen element interactions, animated or gestural micro-interactions, and animated transitions from designers brains to developers hands?

Question

adickers0514 OP

Created May ’20

Replies 2

Boosts 0

Participants 3

Greetings Apple Dev Community!

I am working on a project with a development team that is not in my studio. I need to document how I want screen elements to move around, and how these cool gestures I've imagined make their way into the final development of the product. In what ways are you documenting this kind of thing now? We're using JIRA to write up how these screens work, and what needs to be on them - but there is no magic check box that says "HAS COOL ANIMATIONS". How are you currently doing this? Is there a best-practice way that works regardless of tooling?

Boost

Answer 1

Claude31 OP

May ’20

I would recommend:

have an initial spec, simple, with the critical elements

- typically, the storyboard should be completely defined

- it must guarantee that all the architecture elements are in place

That's your contractual framework.

- describe user experience where needed (eg, smooth transition)

- define key performance objectives (eg: max size of a tableView, spped of some data request or comutation, …)

- And of course, all the devices it must work on, what to change for small devices, for large size devices…

Then iterate with the developers pretty frequently to test options and validate what you get.

You could also shoot some videos of the desired result, but that may be too much work.

0

Answer 2

KMT OP

May ’20

Apple provides various assets that can help your process, such as the UI Design Resources discussed/listed here: https://developer.apple.com/design/resources/

As for visually depicting/sharing flow, perhaps a combination of your mock-ups with your narration could be provided via screenrecording - see this video from Apple:

h ttps://www.youtube.com/watch?v=s9xnsj6ditM

As for mock-up tools that may help, check the MAS - example: Mocks 2 - https://apps.apple.com/us/app/mocks-2/id990064858?mt=12

0