Have you ever wished your developer (or even your clients!) could take a peek inside your brain?
Sometimes, a project’s other stakeholders just can’t “see” your vision based on static mockups and explanations alone. Especially if there’s any kind of interactivity involved—and there always is when you’re designing websites—communicating the picture you have in your head can be downright impossible. But what’s a designer to do? Short of actually building out the entire design, there hasn’t been a better way to prototype this sort of thing.
Until recently, that is.
Two tools you can use to communicate interactivity with zero confusion
You heard right: there are some relatively new tools you can use to clearly communicate the design of interactive elements to your developer or your client. Showcasing interactivity with these tools is easy because you can create prototypes that actually react to a viewer’s hovers, clicks, and more.
Your Mockups & InVision: an interactivity design match made in heaven
The best tool on the market for prototyping interactive designs is InVision. InVision has been around for a while—the company launched in 2011—but has really picked up steam in the last four years. If you’ve been bogged down with client work and haven’t done a lot of professional development recently, you may not have heard about this amazingly useful new tool.
InVision was built to help designers quickly create interactive prototypes of their designs directly from their mockups. With InVision, you can link one screen to another to simulate the flow of your live app, add hover states that actually work, show clients prototypes at multiple screen resolutions, and much more. You can even use InVision Sync to automatically update your prototypes every time you save your mockup files!
InVision works best when used with Sketch—in fact, that combo is currently the darling of many user interface designers—but you can also use it with Photoshop or Illustrator files if you prefer not to learn another new tool right away. You can try InVision for free, but most designers would need more than the single active prototype the free plan allows to integrate it into their workflow. For $15/month, you can get three active prototypes; for $25/month, you can get unlimited active prototypes. If you need to add team members, you can do that for $99/month, but you can also invite project stakeholders to view your prototypes without adding them to your team.
An InVision alternative for Adobe lovers
If you’ve got an active Adobe Creative Cloud All Apps subscription, you can download and use an alternative to InVision as a part of your subscription. Adobe Experience Design (XD) is the famous creative company’s answer to easier interface design and interaction prototyping. It has a lot of similar features to InVision, and you can even generate links to allow project stakeholders to preview your XD prototypes in their browser.
Have you used InVision or Adobe XD, or are you planning on trying one of them? Tell me about it in the comments!
Put your next developer collaboration on auto-pilot...
Leave a Comment