Jun 25 2014

InVision: Design Prototyping and Collaboration Made Easy (Free for Three Winners)

Advertisement

This tool is able to do wonders to your design process. No longer do you need to shift around versions of your creative work by mail, hoping things won’t get messed up after the fifth back and forth (knowing they definitely will). You can simply create design mockups with your favorite image editor, then make them work interactively using InVision. Discuss the designs online, open and close tasks, even chat or talk with your collaborators, clients, basically any stakeholder involved with the given project – in real-time. And here at Noupe, you can not only get to know this productivity booster, but also win yourself a one-year professional plan, saving 264 dollars that way. Read on…

InVision: Landing Page

InVision: Landing Page

Tales from the Past: Web Design in the Nineties

I create websites since the early nineties. And I have worked with countless clients from different industries around the world. What always was the hardest part in any given project, besides negotiating the price and then have it gotten paid afterwards (but that’s a story of its own), was the design discussion. Just like any other designer I knew then, we used to squeeze out a quick Photoshop mockup to show it to the client. I usually did three to five different with one being absolutely ugly to make choices clearer and easier ;-)

Old Skool, Baby...

Old Skool, Baby…

Mockups were sent by mail, feedback was given in the same way, except that the client more often than not had imported the mockup into Word. That bloated document then got sent back and forth until both me and the client lost track. With clients nearby I hopped into the car, drove over with printed-out versions of what I thought was the latest version. Then we sat together around the conference table and scribbled onto the prints.

This was extremely time-consuming and despite the effort not very reliable. In the late Nineties I turned to Powerpoint, yes that presentation dinosaur, to solve another problem that had arisen. Clients wanted to see a working version of their site-to-be. But I didn’t want to produce actual markup and waste time on a design that was most likely far from final. Powerpoint allowed me to link mockups together via hotspots, very similar to clickable urls. The result could be exported in a way that no Powerpoint at the client side was needed. This solution was not too bad, though only scratching the very surface of a much bigger communication problem.

We didn't have much...

We didn’t have much…

Then a company named Macromedia came up with a product named Fireworks. I left Powerpoint without looking back and turned to Fireworks. With this software we could produce mockups just like we could in Photoshop, but with a better focus on web production. Fireworks enabled us to create graphic prototypes with clickable urls directly integrated. We would then export the project to HTML, upload it to a web server and be presentation-ready.

This solution was not bad, but did not rid us of other problems in the collaboration process. Communication had still to be conducted via email and phone, tasks were coordinated using a third-party solution, such as Basecamp for example. The whole process remained cluttered and time-consuming, far from satisfactory.

But then, that’s what we had in these times where the rubber boots were still made from wood. Why did I tell you all this?

InVision and Collaboration is Fun Again

Fast forward to 2014. All of the above needs not bother you anymore. Today we have InVision. InVision is a design prototyping and collaboration solution I would have died for in the Nineties. It allows you to create interactive mockups, upload them and share them with any stakeholders involved with your projects. It has a live presentation mode, where you can collaborate simultaneously, marking errors, add annotations, create tasks from design elements. It offers group chat and even voice over IP calls. InVision is able to produce engaging mockups not only for the web, but also for mobile devices, complete with touch effects and gestures.

InVision: Comment Directly to the Screen

InVision: Comment Directly to the Screen

Communication is built right into the core of the product. Feedback can be placed right onto the mockup. Even better, a feedback comment is not a one-way note to the designer. You can reply to these comments and have a conversation going right be beside the element to be discussed. This mode of operation keeps everyone informed and in the loop of any upcoming changes.

This one-minute video offers a quick first impression:

As far as mockups are concerned, InVision works with any image editor that is able to export to common file formats such as JPG, PNG or PDF and some others. With their latest update, InVision allows you to save your source files from Photoshop, Illustrator and Sketch directly to the project folder. That way you don’t even need to export your screens anymore. InVision creates all the individual pages automagically. You can control this behavior by sticking to a simple naming convention for the layers involved.

InVision: Project Screens

InVision: Project Screens

Syncing of projects can be done through InVision’s cloud or your own Dropbox. Another great new feature is the full version control they implemented. Revert to any version hassle-free. InVision will automatically keep track of any changes, so you don’t have to. If you are on a Mac, InVision Sync, a small tool for automatic synchronization of your project files can further enhance your work-flow.

Want to take a closer look? Watch the two-minute Getting Started video here:

InVision: Available for Free

InVision is available for free as long as you only handle one project at the same time. If you want to be able to collaborate on three projects, you’ll need to buy their Starter plan for 15 dollars monthly or 156 dollars annually.

With Free and Starter, you’ll still not be able to use the premium features, as there are the already mentioned version history, asset management, PDF export, embedding of prototypes onto other websites, archiving of older projects and the download of prototypes for offline use. If these features appeal to you, the Professional plan is the plan of your choice. The Professional plan costs 25 dollars monthly or 264 dollars annually and is the plan we will be giving away to three lucky winners for the course of one year.

InVision: Activity Feed

InVision: Activity Feed

Teams of (up to) five designers can save a few bucks with the Team plan for 100 dollars monthly or 1,080 dollars annually, basically saving you the cost of the fifth team member.

InVision is used by renowned companies such as Adobe, Evernote, Yahoo, Zendesk, EA and more. Maybe you will be the next in this illustrious circle. Try your luck in our little quiz below…

InVision: Win One of Three One-year Professional Plans

Today we are giving away three Professional plans for a full year each – a value of 264 dollars per winner. There are no regional restrictions to our game. Wherever you happen to reside on this globe, if you got internet access, you are entitled to participate.

The game starts immediately and runs through until Wednesday, the 2nd of July, 6.00 P.M. CEST. All you have to do is answer the questions in the following quiz correctly. The winners will be drawn at random from all correct entries. Make sure to leave an existing mail address down below. If you fake one, we will not be able to get in touch with you in case you win. All addresses will be kept inside Noupe headquarters and will not be given away to any third parties for promotional purposes whatsoever.

The correct answers can be found on the product website if not in the article above. Good luck!

This is Where the Game Begins

About the Author

Dieter Petereit is Noupe's Editor-In-Chief and a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called webdesign and has carried on ever since. Almost a decade ago he started writing for several online publications, some well, some lesser known. Dieter is a heavy G-Plusser, so why not meet him over there?

Homepage

Leave a Reply

Comments are moderated - and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

comments form
search form
 
image description image description