When you’re taking a user experience from design to development, there’s more that needs to be communicated than just pixels and assets. Every project has a story that needs to be told; every stakeholder wants to know what state the product is in, how the design is coming along, and when it’s supposed to be built. Prototypes can’t convey all of that.
You might be used to using prototypes to communicate designs with your developers—but what about the soft bits of the process, like intentions and emotions? The parts of a project that you can’t find in a technical document or buried in the design? Sharing the intention and thought behind your work demands a different tool.
At InVision, we use Freehand. It’s an unlimited digital whiteboard that lets us map out processes, with space to write and comment, and it can host InVision prototypes too.
(You can use Freehand too. Try it here.)
This is how we do it.
Mixing prototypes and comments
The toughest part of presenting your design process is balancing the deliverables and the story.
We’ve found that syncing our prototypes to Freehand and then collaborating with others in that space helps us share the full picture of what we’re working on—and to do so asynchronously when needed.
To get started, here’s how to move your prototypes into Freehand:
-
- If you’re using Sketch, download the Craft suite of plugins, which comes with a way to upload your artboards directly to a Freehand in InVision.
-
- When you select “Create new Freehand,” all of your artboards will be synced to a new Freehand.
- Now with all your artboards synced to a Freehand, you can map out a customer flow and make annotations for your developers to see. Plus, they can chime in and ask questions or create personal notes about the build.
Just like a whiteboard in a shared office space, anyone can jump in and add to what you’ve created.
Uploading designs directly to Freehand
-
- If you’re not using Sketch or want to upload screens directly from your desktop or saved files, you can do so directly from a freehand. First start by creating a new freehand by tapping the pink plus sign in your projects home page, then select “Create New Freehand.”
- Then, select the image upload tool at the top of the screen.
- Just like when you sync artboards with Craft, you can now map out flows and annotations for your developers to view and comment on within your Freehand.
Sharing feedback
Once the prototypes are in the Freehand, you can start leaving comments—visual and verbal.
At the top of the browser window, you’ll notice the Freehand toolbar. These are the Freehand tools:
Selector
The selector tool lets you choose any amount of shapes or objects to move by dragging and dropping on the Freehand canvas. Any object or group of objects selected can be scaled up or down.
Pencil
The pencil tool lets you draw on your canvas. Hovering over the pencil tool will display 3 different opacity options (). Click your desired opacity to begin drawing.
Hold down the Option key while you draw to have Freehand assist you in creating neat circles or squares. Holding shift + click (Alt + click in Windows) to start/end of the line creates any-angle diagonal lines.
Text
The text tool allows you to enter text on your canvas. Once you select the text tool, click anywhere on your canvas and begin typing. Switch to the Selector tool to resize your text or drag it to a different point on the canvas. Use the text tool to leave feedback on individual screens, flows, or specific features. Pressing Shift + Enter creates a line break.
Image
The image tool lets you upload images directly to the canvas. Once you upload an image, switch to the selector tool to resize your image or drag it to a different point on the canvas.
Eraser
The eraser tool lets you hover over drawings you’ve created. Once you hover over a drawing, Freehand will highlight the drawing; clicking the highlighted drawing will delete it.
(Read more about what you can do with InVision Freehand here.)
Communicating design using words and pixels
When prototypes can’t speak for themselves, we use Freehand as our collaboration backbone. Giving context to our designs makes them stronger and helps our team work better—together.
by Kacy Boone
Product Marketing at InVision. Passionate about customer advocacy, being creative, and running.
