Life Before Animated Prototypes
When it came time to hand off our designs to our developers, we shared interaction examples from sites such as Dribbble or CodePen to support our static mocks. Sometimes we were lucky and could find the exact interaction in mind; other times, the interaction was close enough that we could provide addition explanation on how to tweak it. However, this approach didn’t always work depending on the complexity of the interaction, and we could inadvertently spend hours looking for an example.
Learning and Incorporating Principle
I wanted to introduce a robust tool that enabled the design team to create interactions and integrated nicely with our existing design workflow as our designs evolved to include more interactions. I experimented with other popular prototyping tools such as Sketch’s prototyping feature and InVision Studio, eventually landing on Principle. Principle didn’t have a steep learning curve, and the intuitive interface made it easy to create common interactions seen in websites and applications that we were looking to emulate. Instead of hunting for comparative interactions, I was able to create animated components after spending an hour or so exploring Principle. There were times I got stuck figuring out an animation but there were plenty of resources and examples to move me along.
Principle nicely supports multi-page interaction and smaller, component interactions, which gives designers the freedom to animate every detail without the need to code. Since designers could animate via a visual editor and there were an endless amount of tutorials, it was painless onboarding the rest of the team.
Adopting Principle into our design process resulted in:
- Improved communication with engineers. Handoffs included files that engineers could scrub through and see every detail.
- Higher quality reviews and meetings with stakeholders. Stakeholders no longer had to imagine what the final interactions would look like in a static prototype, making it was very easy for them to articulate what was or wasn’t working.
- Design critiques focusing on interactions and styling became more productive because there was an actual deliverable to review.
- Critically thinking through UI interactions and functionality. With static mocks, it was easy to overlook component states and how they interact together.
- Better use of time. We were able to direct our time, previously spent looking for interactions, and attention to exploring more variations and iterations.
Our Handoff Process
Once designs are finalized and we’ve had our spec review with Engineering, we move into the handoff stage. In addition to cleaning and prepping the high fidelity mocks, designers create interaction timelines to accompany the component breakdown page and export interactions as .mp4s which allows engineers to see the nitty gritty details of the animation.
As a best practice, when communicating animations we make sure to specify:
- Timing function e.g. ease-in, ease-out
- The element (this should match the layer name in the Sketch file)
The final handoff is composed of deliverables from our toolkit — Sketch, Principle, and InVision. Designers will pin a Slack post in the product’s channel, linking out to all files that engineers will need to reference:
- InVision project with the Inspect link
- Static screens
- Style guide
- Component breakdown
- Interactive/animated prototypes
- Dropbox folder with original files
Since adopting Principle, the team has learned how to make designs more expressive, and better understands the design decisions for page and component level elements. Animated prototypes have also improved collaboration and communication between teams. If you’re looking for a straightforward tool that’s easy to learn, integrates with Sketch, and has a supportive community, Principle is worth a try!