InVision

How we use Freehand at InVision

by

on

View all posts

W

e don’t just build tools for creators here at InVision. We also use the products we’ve made every day to help design new experiences for our users. One of our tools in particular is popular across the full spectrum of our teams as a way to collaborate and communicate about new and exciting things.

I’m talking about Freehand, the infinite, collaborative space where your team can work through design ideas in real time. Freehand in InVision lets you rapidly capture feedback throughout the product design process in a real-time, flexible, and collaborative way, all contained in your desktop or mobile browser. You spend less time exporting work into presentable formats and more time creating meaningful experiences for users in collaboration with your team.

Kaysie Garza, one of our content specialists, puts it like this: “Freehand in particular is a product for anyone. You don’t need any special skillset to come into an empty Freehand project and start working, so it’s often a good waypoint between ideation, planning, and basic wireframes before entering a more specialized design arena. We use it because it’s the halfway point we need, not just because it’s our product.”

Related: Wireframing vs. prototyping: What’s the difference?

Here are some other ways we’re using Freehand in-house to make designing our products and experiences better, faster, and more efficient.

Brainstorming

Part of the design thinking process is getting all of your ideas (good, bad, or otherwise) out in the open for analysis. Some people prefer to do this on paper while others like to mind map and brainstorm digitally. Why not try a hybrid of both?

With Freehand, your team can brainstorm ideas and solutions collaboratively. Think of it as an endless whiteboard with built-in commenting that everyone can add to all at once. You have the freeform creative style that paper gives you alongside the collaboration and backup that a digital tool offers.

Stephen Olmstead, our VP of Product Strategy, likes the limitless possibilities that a new Freehand project offers: “Freehand is a blank, infinite canvas. I don’t need to start with a priority, and I don’t even need to understand how deep in the weeds I am when I first start. If I find that I need to be on a higher level, I simply zoom out and construct a larger idea. If I’m too high level, I zoom in and add more details.”

Freehand also offers some variety when it comes to the design elements within the product. Claire Karjalainen, our Senior Manager of Design Education, likes to use different color and opacities to showcase varying levels of connection: “[The line tool] allows you to create visual distinctions between parts of your plans, and use different opacities to show different levels of intensity. It gives nuance to something that could otherwise just be overwhelming.”

“Freehand is a product for anyone.”

There are a few ways you can create your first Freehand. The easiest way is to simply click the “+” button inside InVision and select Freehand. Save it as a draft, and it’ll be added to your projects for easy access later.

freehand new project

If you’re working in Sketch or Photoshop, you can generate a Freehand right from your design environment with the Freehand plugin from Craft. Lastly, if you have the InVision for Slack app, just type /freehand into any channel to generate a brand new Freehand document.

Pro tip: Your drawing experience is completely transformed when you hold down the alt/option key. Go from weird toddler-esque shapes to near perfection with the touch of a button:

freehand shape detection

GIF courtesy of Jon Moore on Medium

Related: How to make your first wireframe

Bridging the gap between low and high fidelity

Another part of the design thinking process is generating prototypes and solutions. Once again, feedback (and potentially approvals) is a key piece of this step. Freehand gives your team an open space to view screens and workflows, weigh in on changes, and collectively move forward.

Claire uses Freehand to bridge the gap between a low-fidelity idea and a high-fidelity prototype: “Nothing beats a visual medium for getting people onboard with a shared vision and showing interactions between things. [Freehand is] a no-brainer for visual projects, of course, but it can also help people understand relationships and progressions—chronological time, lead flows, where programs fit in relation to other programs, etc.”

“Freehand is a blank, infinite canvas.”

To load images or screens from your computer into Freehand, select the image tool at the top, then choose an image on your computer. You can also just drag items right into your browser. Looking for feedback on your latest prototype? You can copy and paste layers, groups, and artboards from Sketch or Photoshop.

freehand image upload

Related: Low-fidelity vs. high-fidelity prototyping

Visual planning

Freehand is great for more than just digital product design. It works well for any kind of visual planning as long as you’re openminded.

Our Senior Manager for Industry & Partner Events + Sponsorships Jessi Thorp uses Freehand to help plan some of our in-person InVision events: “I design in-person events, so my nature is to be very visual when conveying ideas or concepts to my collegues or partners. Freehand has allowed me, in real-time, to highlight the attendee experience through storyboarding. I’ve uploaded venue floor plans and laid out the activations with our partners and vendors, saving valuable time on-site.”


Using Freehand in this visual, collaborative way really helps the tool shine. Once you’ve spun up a Freehand project in Photoshop or Sketch, hop into the browser with your team and get feedback. You can markup the screens using the pencil and text tools, leave comments and feedback, and sketch out new solutions.

freehand markup comments

Image courtesy of Stephen Olmstead

Once you’ve come to a consensus on the changes, you can go back into your design tool, redesign your project based on what your team discussed, update the Freehand in two clicks, and watch the changes sync quickly with the Freehand project in your browser.


Read more posts like this
Author

Will Fanguy
Digital content wrangler at InVision | UX enthusiast | Recovering educator | Shameless nerd & GIF connoisseur | Hockey fan (Go Preds!) | Oxford comma or death | It’s pronounced FANG-ee

Join over 3 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 3 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 3 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 3 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 3 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.

Follow us