1

See for example the Google Accounts log-in experience, where you move from 'Enter email' to 'Enter password' via a smooth dynamic transition with no page refresh

https://accounts.google.com/

How can I speak to a front-end designer/developer about achieving this type of interaction? Is it just "JavaScript"?

Too often I find developers turning these kind of UX specs/features into basic clunky page refreshes, and I want to have the language to speak to them about it.

3 Answers 3

1

Find examples online that you can show or prototype it yourself in figma using smart animate. I do some front end development and some things are much more difficult to do than you think. From the developers perspective it may not be a top priority, so they don't want to put all that work into something small like a transition when they may have bigger parts of the front-end to work on. You need to emphasize that this transition is an important part of the overall flow and absolutely required.

0

The discussion about the relationship between a designer and a developer tends to get really complicated when we talk about communication.

I have to make it clear that it is your responsibility as a designer to communicate how you want elements to behave so in this case you can create animations, prototypes or interaction guides that clearly shows how animations work and feel.

So the language you need designs.

Now, I know that in real life, your business managers might not give you the needed time for such things but you can have a video recording app and find examples in real life that you can show them when needed.

0

Try to avoid telling your developer what tools they should use - It's a little like a developer coming to you and saying "I need you to use Adobe InDesign to make me a new button". While you could make a button using InDesign, you know it's not the best tool for the job. Let your developers make the call about what tools/languages to use to build your designs.

If you want to describe animated transitions (slides, fades, etc) to your developers, the best way to do it is to create a demonstration of the transition using some animation software. If you have access to Adobe Creative Cloud you could try using AfterEffects but there are also plenty of free simple animation tools that will also do the job.

As with any deliverable for development, you should include any information about measurements and colours etc. as well as information specifically about the animation you want to see such as ease-in/out timings.

You will want to make a note of all of these animation settings for yourself too to ensure that any other animations are consistent.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.