When starting a Storytelling Studio project, one of the first things we do is create a low-fidelity prototype to test our assumptions. In its most basic form, a prototype is a proof of concept for a story, a specific interaction, a new format, or all of the above.
Prototyping helps validate ideas and enables you to move more quickly into the building stage of a project. And prototyping doesn’t have to take a lot of time. There are some quick things you can do to test your ideas:
Prototyping recommendations from the Vox Media design team
“Sketch mirror lets me see my design on my phone as I'm working. I used to use Keynote for super lo-fi animation — if I wanted to show how a menu would open and close for example. Now InVision lets me do most of this work with their tools.”
— Yesenia Perez-Cruz
“Make prototypes out of screenshots instead of translating the whole design to code. Important thing is figuring out how it feels not coding all the things.”
— Scott Kellum
“Read copy out loud. If you trip over saying it, users will probably have trouble reading it.”
— Sanette Tanaka
“Slush project templating allows for me to scaffold one of our brand sites after answering just a few questions and and jump into coding an interaction with real content in less than a minute. The prototype builds to S3 and can be shared with others to show the work and let people experience the idea themselves. The custom code can then be reused if we decide to move forward with the idea.”
— Yuri Victor
Other tools you can use
There are a seemingly endless amount of prototyping tools available to designers and engineers, and sometimes the prototyping phase can be a bit overwhelming. Here are a couple of tools to get you started:
- Sketch is useful for creating static mocks, and validating basic layout and interface details.
- Invision allows you to share links and comment directly on designs, as well as create clickable prototypes from static images.
- Marvel is similar to Invision in that it allows you to create clickable prototypes from static images, but it also has a handy Sketch plugin that allows you to update your designs live from Sketch without exporting images.
- Principle allows you to make animated prototypes that you can share with your team, and has a number of plugins.
- Adobe XD has the benefit of being in the Adobe family, and has a nice preview function so you can preview prototypes on a phone.
Ultimately, the best prototyping tool is the one that’s available to you and works for your specific needs.
Do you have a favorite prototyping method or tool? Tweet us @voxstorytelling and let us know!