The Prototyping Process
With complex flows, interactions, and product customization, a flat mockup is not enough to communicate your vision. By creating a prototype, you can test to make sure the user's flow through the app is cohesive. The prototype can be large enough to encompass the entire flow, or it can be detailed, for a specific interaction. We recommend using a mix of both.
Prototyping User Flow
Our Recommended Tool: InVision
Creating a simplified prototype out of your mockups is a great way to give the client a taste of how the site will look before you move into development. Not only is it a great way to make sure the flow is clear, it’s an excellent resource to share your designs with developers and clients alike.
InVision is the tool to do just that. (You will have seen an InVision prototype from our examples.) InVision lets you show page-to-page progression by linking flat mockup images together using hotspots. You can also include basic interactions using transitions and overlays.
Sometimes you need to show a little more detail on how something will work, like a specific animation for a design pattern. InVision’s animations are not the best tool to get those important details across.
Take the time to perfect those animations to make sure the intention is clear. With tools like Principle or Framer, you can fine-tune your animations to communicate the details with developers. Both of these apps will allow for fine adjustments of motion and timing.