![]() Our screens are full of elements, from raw data, to visualisations, imagery, tables and form fields. ![]() Performance is a key factorĪs mentioned, the UI concept I used was designed to represent a glimpse at the complexity of the applications we create. This means that the second group I mentioned inherently felt much more suitable for our workflow – and the rest of this write-up focuses on only those. This reminded me of Apple’s Keynote (another popular but much more limited tool, built for presentations) and its “Magic Move” transition, which allows you to place objects in one slide, change them in any way in the next slide, and the result is an automatic transformation happening between them.įor prototyping this approach is incredibly powerful, because as a designer you need only design the end states of your animation on Sketch, copy them across to these tools, and create an animation in minutes, with plenty of time spare for further refinements and details. This means the user designs a “before” and an “after” state for a UI component or screen, and the application builds the animation automatically, without you having to manually plug all the different elements to their animation attributes. Principle, Proto.io, Atomic.io and Flinto all belong to this group, by approaching animation as a state transition between 2 versions of a design. The other group of tools focus primarily on effectiveness: the ability to very quickly produce a good result that conveys the broader strokes of your custom animation, with enough quality to convince your stakeholders. While After Effects feels more organic to use because of its drag-and-drop style interface, Origami (and in an extreme example Framer) allows you to communicate the design to a developer in an easier way to understand and replicate. This is especially relevant for animated illustrations, loading spinners or splash screens. I would consider any of these tools as ideal for when a specific animation was prototyped and accepted by all important stakeholders, but needs a level of refinement harder to achieve in more simplified tools. Another tool of this type which I didn’t have time to test is Framer, which combines design tools similar to Sketch, with a code-based approach to creating animation. Hard to learn and to master, they can be great tools in the hands of an animator, but aren’t necessarily designed for rapid prototyping, since they lack automation features and pre-made libraries to speed up the prototyping work. Origami takes a programmatic approach to animation, by linking attributes and triggers to individual nodes, which combine in tree branches to create the interaction states.ĭue to their focus on flexibility, they are also overwhelming and potentially overkill. After Effects explores animation through the perspective of time, by placing each layer and attribute change to an editable timeline. ![]() While boasting completely different animation paradigms, they are both designed to create an animation down to the finest detail, and to that end give you complete control over each animation attribute. Within the tools designed for flexibility, I would include After Effects and Origami. Other tools I have previous experience with will also be mentioned along the way.Īll the tools tested had varying degrees of flexibility and effectiveness, depending on their main goal: to create pixel perfect complex animations, or to quickly prototype an animated interaction. The goal was to download each tool, follow some tutorials to learn the basics and create the prototype in less then a day each. The tools I tested were: After Effects, Principle, Atomic.io, Proto.io, Origami Studio and Flinto. Within this short time-frame, I decided to evaluate 6 tools, and committed to reproducing the general animations in all of these – to properly establish how well they would fit our workflow.
0 Comments
Leave a Reply. |