General considerations on prototyping

As a creative studio trying to build web sites with attention to details, transitions and animations, we’re having a really hard to time create compelling prototypes that will help our clients to understand and adhere to what we’re trying to achieve for them.
It’s rather time consuming while remaining a very important step into testing things before spending a lot of time with the developer doing trial and errors on animation curves and trying to communicate the overall feeling to our clients.

Right now there are in my understanding 3 main approaches to prototyping :

Animation software.
Meaning pure animation.

  • After effects and the likes.

Hybrid :
Animation and non linear conditional states and triggers
Kite, Origami, protopie, principle…

Programming :
Stuff that you’ll be able to reuse at some point in production or that will look like the final product.

  • Framer
  • Noodl…

Each one has its pro and cons.
While i believe the programming approach is the best in the long run (and a hope that nodal based softwares will become the norm over the years), the learning curve is steep, it’s expensive for smaller structures (unless they have programmers in their team) and in some cases a bit overkill. It will remain niche, unless there’s a set of tool and libraries available that will make it easier to use.
Animation softwares take a lot of time and are simply not cut for that kind of jobs also no one will be able to make use of those videos (have fun sharing the animation curves in after effects).
Hybrid is nice with each software bringing its own limitations depending on the idea on which the software is build. Protopie for example is great, since you can use variables but the timeline in itself if a bit of a drag if you want to create a lot of animations.
Principle remains one of my favorite one while a i’m still facing so many limitations that make some things purely impossible. But that’s not the point there.

My main issue is the ability to bridge as much as possible the gap between design and production. We have ideas in mind we need to test them. Creating a static page is not enough to help people understand the overall feeling of navigating through content. Once we’ve managed to do that we have to be able to deliver something to the developers that will also speed up their implementation.
Right now none of the solutions above completely do that correctly and we sometimes have to use 2 or 3 softwares depending on what we need to prototype.
The good thing is, there’s still a lot of room for improvement. On the other hand these changes come at a very slow pace. There’s a real market for that and while i’m not expecting the perfect solution that will never exist, i’d really like to see changes that will make this part of production process smoother and more efficient.

I’m curious how you feel about it and how you cope with that yourself.

1 Like

Agree with you that there’s not a perfect tool yet, I have the same approach as you, depending on the prototyping needs will use a tool or another, in my case, prototypes which goal is to test flows and more linear cases I tend to leave it in Figma as it comes with some decent prototyping features.

If I need to showcase something fancier that includes some nice animations and transitions I’ll go to Principle.

We have to remind ourselves that is just one person behind Principle so changes and features might come whenever is possible.

My major issue regarding production would be the handover to developers in terms of animations, I suggested that Principle could have an inspector mode that won’t require developers to have a license to just check the animation/transition values (like a read only mode for files) or some sort of export feature similar to what Lottie does with after effects, at the moment I find myself screenshooting all those values in order to deliver it to the dev team and I agree that process could use some improvement.

Things that are for example major game changers in my opinion are the drivers and messages, such powerful features that I’m so grateful Principle has implemented.