As product designers we’re in this amazing space now with loads of tools to help us accomplish objectives. We’ve gone from Fireworks, to Photoshop, to Sketch… Now we’ve got tools that merge static mocks and code, thus generating high-fidelity prototypes. Without investing myself heavily into creating them, I’ve been wondering, how can they provide value?
So… what do I mean by hi-fi prototypes?
When discussing Hi-fi prototypes I refer mainly to Origami and Framer. Tools like Flinto or Principle are better suited for micro-interactions rather than full flows.
Framer describes itself as a tool that empowers you to draw, animate, and share high-fidelity work. Being the complete workflow for creating interactive designs. Origami describes itself as the tool to explore, iterate, and test your ideas as a new tool for designing modern interfaces.
What are their main visible diferences?
Upon first glance it’s noticeable that Framer appears to be code based with some basic design drawing tools, making it more complete as an overall design tool.
Origami feels like it’s difficulty is halfway between Principle and Framer, which gives this perception (probably unreal) that it’s much easier to learn, especially for those who aren’t comfortable around code.
New possibilities, thoughts, and ideas
When designing anything, it’s important to think of it as a unified experience rather than a collection of static screens. By viewing our work this way our eyes are open to all kinds of new problems that otherwise might be missed. Software like Marvel and InVision helped make this way of working accessible to us by allowing us to join these static screens together and, in some instances, include transition animations between them.
By viewing our work this way our eyes are open to all kinds of new problems that otherwise might be missed.
While the above truly increases the quality of what we’re doing, making what you’re working on feel like the real thing (what it’ll be like once it’s gone through engineering) cannot be achieved with them as there are limits to what you can do with it.
An amazing aspect of Origami and Framer is that you can make it feel like you’re using the real thing, a real unified experience rather than a collection of static screens.
Sounds great, right. There’s more…
Very rarely are we part of our user base. Testing our features, and improvements, and everything with users holds insane value. It provides insights into what’s working and what’s not, giving us ideas on what next steps may be and ensuring that we don’t provide engineering with half baked ideas.
Hi-fi prototypes allow us to do is provide the user with something that feels real, something that won’t be interpreted as a collection of screens or something that feels sluggish, taking away focus from what you’re asking them.
All this sounds great, the downsides… 🙈
It’s hard and takes time… For lots of us there will be a large learning curve in comparison to other tools, takes time to put stuff together and make it work, and requires the majority of the design work to have been done in another tool before being imported.
Back to the original question… Are hi-fi prototypes worth it? 🤔
Well… It depends. It depends on your design process, what exactly you’ll be doing with it, and what your timeframes are like. But if we have a kick-ass design process, have allotted time to prototyping then we can do things from presenting to stakeholders, influencers, or users with them believing it’s an authentic and bug free experience. Allowing focus to remain where it should be and provide honest feedback.
This, for me, is where their value is. This is what they do that Flinto, Principle, Sketch, etc. don’t.
Can they substitute Sketch?
Right now prototyping feels like an afterthought and not something done while designing. This is probably because Sketch doesn’t offer a very powerful prototyping experience, although it’s getting better with time. Both tools require the majority of assets to be generated in other software and imported.
What’s missing and what’s next?
In order for prototyping to become part of everybody’s process, we need to have powerful prototyping and static screen creation work from within the same app. Framer seems to be moving in this direction, churning out meaningful updates that could allow provide us with an all-in-one tool (static mock, prototype, development handoff) relatively soon. Looking at players on the static screen creation spectrum, they’re also moving towards becoming the same goal.
Ultimately if you have the time available, want to test with users, or want to make handing over to engineering as seamless as possible, Hi-fi prototyping can be valuable. But it really comes down to if your process allows it to be included.
That said, I’m looking forward to Hi-fi prototyping being more accessible to a wider audience, becoming part of everybody’s process and not just left as an afterthought for most people.