Hey DN! I have a process question!

5 years ago from , Designer

Hey guys! I had a question about process, specifically for motion/interaction design.

I'd like responses from those of you that work on agile teams at agencies and/or work with developers, but everyone is free to answer.

So my current process at work is this: Each sprint is dedicated to a certain feature or taskflow, and usually towards the end of the sprint (which is not enough time, but thats another story), I jump into Principle and start prototyping any animations/micro-animations.

I find that this isn't very ideal for a couple of reasons

1) Theres a chance the designs will change for a myriad of reasons, and then I've wasted time coming up with some cute little animation for a component that may not exist anymore

2) It doesn't allow me to holistically look at animations/interactions across the whole app.

So, when do you guys start to consider any animations or microanimations when you work in an agile environment? After the app is about done? Do you dedicate an entire Sprint or 2 to it?

Bonus question: How do you guys pass off animations to the devs? I've defined 2-4 Springs in Principle and sent a spec sheet, but it's still not a good process.

Any help would be appreciated. Trying to improve this process!

(P.S I also know Principle isnt ideal when designing animations across an entire app. Looking to switch to Framer soon!)


  • Cristian MoiseiCristian Moisei, 5 years ago

    Here are my thoughts on this:

    First of all, I think of the different layers of design as a pyramid, where the base is the purpose of the product (does it actually solve the problem we are trying to solve), and this should be the first thing that is figured out, then you have the IA where you determine what goes on each page and roughly how it will be organised, then you have the visual side, where once the purpose of the app is set in stone and the structure is pretty much agreed on and tested, you worry about what it looks like visually, and then at the very top you have interactions. I am in no way saying that the delimitations are clear or that you can work exclusively on one without paying any consideration to the other, but this approach means by the time you get to the interactions, there will be far fewer changes to the design or the structure. Think of it like building a house. You prepare the foundation first, do the walls and basic structure, then you add windows, floors, etc and then you worry about interior decoration. Your problem seems to me like you are not agreeing on enough of the fundamentals before moving on to the interior decoration stage so of course it's difficult to choose paintings to put on the walls when the location of the walls isn't final or their paint colour might change.

    On the other hand, I try not to rely too heavily on prototyping software, I usually leave interactions for after we have a coded prototype so we can try them out on the real product. I do still make concepts (I use AE) but those are there just to give devs a rough idea of what we could do, the final thing will be fine tuned in code.

    I hope this helps.

    2 points
  • Alejandro DorantesAlejandro Dorantes, 5 years ago

    Plan interactions by category, for example, plan for inputs, toggles, sliders, etc. these should transition within the same timing function, bigger media such as image blocks, grids, etc, might need some slowing down, so the way i do it is:

    1. Prototype desgin view, then 2. Front-End, then 3. prototype interaction, then 4. Populate content, then 5. implement interaction
    1 point
  • Darinka Kostelnik, 5 years ago

    I liked both anwsers from Cristian and Alejandro. First, there needs to be a foundation that you can decorate on.

    I think all animations/transitions should follow a system. There should be some definitions put in place: timings (bezier easings), page/screen transitons, hovers/focuses/taps, do things slide or fade?, do buttons and icons change color or explode or what?

    If your app is playful or serious, you choose these definitions accordingly and no matter what feature or element is added, yiu just follow a pattern.

    Do not overthink it. People overthink and complicate things. Have a simple pool of transitions in place and just copy! (Also, people are already used for things to work a certain way. For example, double-tap to like.)

    So maybe if you make things super-simple for yourself, the sprints will not stress you anymore. I like when things are just simple...

    0 points