Menu Sheet Overlay
Search Sheet

The Prototyping Process

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

Invision App
Invision App allows you to create hotspots directly on your design that link to other pages

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.

Prototyping Interaction

Our Recommended Tools: Principle, Framer, Keynote

Prototyping Interaction
Principle is an excellent tool for communicating motion and microinteractions. You won't be able to design at this level of detail using tools such as Invision or Craft Protoype.

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.