Image
Top
Navigation
March 12, 2012

InVision – An Interactive UX Prototyping Tool

InVision is a UX prototyping tool built with visual designers in mind. From basic wireframes to full-fidelity mock-ups, designers can use InVision to give clients and developers a realistic picture of the flow and function of the sites they’re putting together. Even better: InVision works with the tools that designers already use, which eliminates the learning curve and lowers the barriers to entry for people who are new to the web design world.

Enter your name, email address, and a password to create a new account, then head back to Photoshop, Illustrator, or whatever tool you were using to design the mockups you’re currently working on. Choose between wireframe and full-fidelity, and then export your screens as PNG files. Move back over to the My Project page on InVision, and click “Add New Project” to import your screens. Once your screens have been imported, you can view them in Build or Preview modes. Wire individual pages together by highlighting the parts of each screen that you want users to click. Replacing an existing screen with an updated version is incredibly easy. Just drag and drop the updated file into place to change out the existing screen. InVision will keep the links and hot spots you’ve created in place, which cuts down on work and improves efficiency. When you’re done with Build mode, head over to Preview mode and start interacting with the prototype you’ve built.

Not only is InVision a great tool for building UX prototypes, but it’s an excellent sharing and collaboration system, as well. InVision users can invite selected team members to work and comment on their projects while still limiting what outsiders and clients can view. They can also share individual project screens by sending out password-protected links, while reading threaded comments from all the people who’ve checked out their work.

Practical Uses:

  • Put together an interactive wireframe to see how your site will run
  • Share screens with clients to give them an idea of what you’re putting together
  • Replace individual screens without adding new links or hot spots
  • Get feedback and criticism from colleagues whose opinions you trust

Insider Tips:

  • Screens can be imported from Photoshop, Illustrator, and any other program that saves files as PNGs or JPGs
  • Users can send password-protect links to clients
  • InVision works on iOs and mobile devices
  • Users can receive comments via email

What we liked:

  • InVision offers a number of useful videos to help people getting started
  • Replacing existing screens with updated files is incredibly easy
  • Designers can use InVision to securely share professional-looking prototypes with their clients
  • People can decide whether or not to allow comments on their prototypes

What we didn’t like:

  • Users with the Starter plan can only have three active projects at any time

Alternatives:

Company Info:

  • Launched: 2011
  • Privately Held
  • Headquarters: New York, New York
  • Founded by: Ben Nadel and Clark Valberg
  • Web site: http://www.invisionapp.com

Costs:

  • Starter plan is $8/month
  • Professional plan is $25/month
  • Studio plan is $79/month

Comments

  1. Free tool to create clickable wireframes for mobile and web apps
    http://tiny.cc/Free-Prototyper

  2. This is a great posting. It was very informative. I look forward in reading more of your work. Also, I made sure to bookmark your website so I can come back later. I enjoyed every moment of reading it.

Submit a Comment