Prototyping’s Big Impact on Digital Design
Posted in Insights
Digital designers have always relied on a range of imperfect options to present their interactive ideas and concepts. Photoshop mockups. Wireframes. After Effects. Paper sketches. And lots and lots of gesticulating and verbalized description. In one way or another, all of these forms fail to fully convey the intent of their concepts.
That’s all changed for the better in the past few years as a number of new prototyping apps that help make it easier to express interactive design and behavior flooded the market. At FINE, we’ve embraced prototyping and made it an integral part of our workflow. It’s transformed our design thinking, our collaborative process, and the manner in which we present our work.
https://youtu.be/PiTkSb4GOdc
Prototyping Pros and Cons
For purposes of interactive design, a prototype is a brief, animated demonstration of how a web or app design is intended to behave once coded into its final, digital form. These types of prototypes have been impactful for us in three main ways:
They put power in the hands of designers to execute interactive concepts and give them a test-drive before they go into development. That's huge. In a few hours or less, a designer can put together a prototype and see how it looks and functions in the real world. No more guessing and assuming.
They bridge the gap between design and development. Previously, a designer would articulate their interactive ideas to a developer through static designs, rather than through their intended environment. Then, they’d have to wait until the developer coded it before finally seeing their concept in action. During this cumbersome process, any number of things might have been miscommunicated or interpreted incorrectly, resulting in wasted time and effort. Prototypes have changed all of that. Now, a developer can quickly assess a prototype, expose any usability flaws, and get a firm grasp on what they’ll be putting together.
They’ve made a huge impact in the way we pitch our interactive ideas to clients. Gone are the days of awkwardly explaining our concepts and intentions through static mockups and wordy descriptions, which often lead to confusion. Now, we can show our design intentions in action, providing clients with a more accurate vision of how their site will look and behave.
Naturally, there are a few disadvantages, mainly having to do with making sure clients understand the nature of a prototype. While prototyping gives designers a whole bevy of tools to replicate animation and functionality, they’re not without their limitations. They might not necessarily behave or animate exactly how they will on a website.
The effect is the finished product might not match expectation, for better or worse. Clients can be misled into thinking that a prototype, which is intended to get an idea across, represents exactly how the finished product will perform or function. They may be distracted from the core “look and feel” and other approvals required early in a project flow.
Tools of the Trade
At FINE, we use prototypes primarily to demonstrate specific interactions on a particular page, not an entire site. Focusing their use in this way helps to direct client attention and communicate the idea effectively. For example, we might do a prototype of a homepage to showcase parallax scrolling, transitions, animations, or fading. We’ve tried a number of tools to show these kind of focused, but complex interactions.
We found there are many great prototyping tools on the market right now that help in this process, each with its own distinct merits. A quick Google search for design prototyping tools reveals countless options, a few of which we’ve looked closely at, including Framer, Pixate, and Protio.io.
So far, Principle is the one tool that meets all of our particular prototyping needs. It’s super easy to use, utilizes timeline animation, doesn’t require coding, and integrates seamlessly with tools like Sketch. With Principle, we’re able to simply generate a prototype that expresses the design intent, without all the paper sketches and wild gestures.
Prototyping has been a game-changer for us. Are you using prototypes in your workflow? Share your thoughts—we’d love to hear what works for you.
-Joe Flory, Senior Designer at FINE
