Seeing the unseen: notation for transformations
One of the largest pitfalls during the implementation of micro interactions lies in the handover between the ui designer and the frontend developer.
The ui designer spends plenty of time in optimising and tweaking the animation in his favourite tool (e.g. ProtoPie, Principle, Flinto, to name a few). When satisfied, the designer exports it as a movie or GIF file and hands it over to the frontend developer.
The developer watches the animation and starts to interpret the duration, the easing curves and the timing and translate it into CSS or code. During that process the developer spends a lot of time watching and comparing the movie with his programmed animation.
Most likely, the result isn’t the same as intended by the ui designer, and often it turns out to be a waste of time. Not only for the the developer, but also for the ui designer, who might also spent a lot of time, e.g. for animating the reverse animation with slightly different durations, or similar transitions for slightly different layouts.
For that reason we developed a notation for transformations and created a sketch template with nested symbols, which makes it very easy to analyse, describe and even define transitions between two different states.
Using this template does not only save much time, it also enhances the quality of our ui animations for every user interface related project.
The Basics
The notation works similar to the one for music instruments. Any property of an element, which changes over time, can be compared to an instrument. The duration and the easing curves of the animation is transcribed into a timeline next to the element. By putting each transforming element with its timeline above each other gives a visual interpretation of the whole choreography of a complex transition.
Using that notation transfers a short animation into readable and understandable choreography within less than a second.
By using this notation, the developer can easily find the values and property of an element which needs to be animated. Additionally, the easing curves can be extracted as well as their durations and delays.
On the other side, the ui designer can quickly check inconsistencies in the type of easing curves or timings. It’s even possible to sketch out first the transformation by using the notation and transcribe it afterwards into the ui animation tool. For instance, the reverse animation can be defined by duplicating the art board with the notation of the original transformation inside Sketch.app. Then you just rearrange the motion curves inside the time line and shorten them — disappearing transitions have usually a shorter duration. This can either be used by the developer or by the ui designer as a blueprint for building the transformation in the ui animation tool.
The Motiongraph Template
By using the motiongraph sketch template and the associated Sketch library, the process of transcribing the transition isn’t only streamlined and efficient, it also avoids inconsistency by using slightly different easing curves. These curves are already defined as symbols and can be applied to any motion curve symbol in the overrides section.
The sketch library contains 3 core elements and two variations for the time line grid. One grid with 5 subsections labeled “Grid-100” and one with 8 subsections called “Grid-80”. The “Grid-100”
is usually labeled with “100ms”, “200ms”, “300ms”, and so on. The Grid-80 can be used for 80ms steps.
The motiongraph template has Grid-100 by default, but the symbol can be replaced by the “Grid-80” in the overrides section.
Curve Description Symbol
The symbol called “Curve Description” can be used for an overview of the predefined easing curves. It contains various override options:
- Name of the curve
- Selection of nested symbols of a visual graph and values of predefined easing curves
- Text overrides for the code on different plattforms/languages such as Principle, CSS, Android and iOS
Properties Description Symbol
The symbol which holds the information regarding the element and the property to be transformed is called “Properties-Description”. Inside the overrides section of the symbol you can:
- Add a description for the element (e.g. Button container)
- Select the attribute type which is been affected by the transformation (e.g. Opacity)
- Two text overrides for the start and the end value of the property (e.g. 100 %, 0 %)
Motion Curve Symbol
And finally there’s the “Motion Curve” symbol, which embodies the type of easing curve, duration and — based on the position on the time line — also the start and end point of the transformation.
- Start point
- Duration (e.g. 200ms)
- Curve type (e.g. Ease InOut)
- Affected property (e.g. Opacity)
Working with the Sketch Motiongraph Template
Here’s a brief overview of the template with the placed symbols and a recommendation of how to enter the information required to describe a transformation:
- Enter a self explaining title for the transition (e.g. “Expandable panel — Expanding”).
- Select the time line grid either to use with 4 or 5 subsections.
- Enter the name and short description of the element, which should be transformed.
- Choose the property from the Overrides under “Property Type”, which is affected by the transition (e.g. Opacity, Width, Color, etc.).
- Enter the start value inside the overrides of that symbol in the first field and the end value into the second field.
- Place the symbol “Motion Curve” onto the time line where the transformation should begin and change the property type inside the overrides to the property which is being transformed.
- Change the curve type inside the overrides to the desired easing curve and stretch the symbol to the desired duration of the transformation.
Repeat step 3 to 7 for each element and property.
You can download the Sketch Library and the Motiongraph template file from here.
