So, you’ve just finished your design presentation and the team is excited to get started! You go into your Photoshop file and begin to slice your assets and export them to CD for delivery to the engineers.
This is 2016. The future we were all promised (minus the hoverboards) is fast approaching. Designers have an entirely new set of tools at their disposal and there’s one in particular which nearly every designer has heard of by now. InVision has dominated the design prototyping space for some time, but with new features rolling out they are poised to become the most useful tool in the UI designer’s arsenal.
At Crema, InVision helps us validate ideas and get them in front of clients and potential users faster, allowing us to be agile and react quickly to feedback.
Receiving feedback is incredibly useful to designers. It provides constraints and direction which lead to more fluid usability in the products we create. The ability to have conversations inside InVision with visual context about what part of the product we’re talking about has definitely enhanced our discussions both internally and with clients.
Iterations to designs happen rapidly and those JPGs and PDFs can stack up pretty quickly.
We use Dropbox sync to directly sync the file we’re working on or even multiple files. All designs go to one place and they sync/update within minutes of your changes. This comes in handy for a web application where you need a landing page and an admin back end as well.
InVision offers other options for syncing including Box, Google Drive, and even their own dedicated folder sync system. We use Dropbox because we like the versatility of keeping our design files with the rest of our project files, as well as choosing which files get synced.
Asset delivery is pretty easy too. Any asset a developer may need is available for download from InVision. And with the forthcoming Insight, hand-off to developers will be even easier.
All designs go to one place and they sync/update within minutes of your changes.
We’ve recently come across Slack integration for InVision. This feature posts a number of options including new comments, new share views, screens added or updated, and screen status changes. This keeps everyone on the project in the loop with design changes and provides an easy way to transfer them into the InVision project. We’re still playing around with the best balance of these options. For example, when we’re uploading a bunch of new screens it can quickly overwhelm the feed, but with those options easily toggled on and off, we can adjust the settings based on the project’s current state.
This keeps everyone on the project in the loop with design changes and provides an easy way to transfer them into the InVision project.
I was first introduced to InVision by George Brooks back in 2013, and over the years I’ve become a proficient user. In my experience, hotspotting is one of the most powerful features. It allows you to turn a series of screens into a flow in no time. It’s one thing to show a client a series of screens, but it’s exceedingly better when they can interact with it, navigating from screen to screen like a user would. Instead of having a developer take time to code a bunch of screens for a final deliverable, we’re able to quickly get an InVision project up, share it with them, and begin collecting useful feedback. The timed transition screen feature has long been a part of their offerings, but now with overlays we’re able to create usable designs that act very much like a real product, giving context to every screen.
Oftentimes we need to test our designs with actual users. Crema is currently doing that with our internal Innovation Lab project, String. Our team pre-downloads the String project onto a phone and finds kind souls in local coffee shops willing to try it out, allowing us to deliver an app experience while we’re still developing it.
InVision allows us to deliver an app experience while we’re still developing it.
The Future is Bright and Full of Shiny New Things
One of our favorite things about InVision is how its creators are constantly evolving its offerings while being mindful about how they can integrate more value into the workflow of a designer. Too often great products come out, but they force us, as designers, to fit our workflow into their product. It really should be the other way around.
InVision has created one of those rare products that simply fits into a designers daily life. That being said, there are still tasks we need to go elsewhere to complete. InVision has been working on how to solve this. Here are just a few of the upcoming services we’re looking forward to coming out of beta testing soon:
Last year, InVision previewed a new project they call Motion. It promises to become part of their current product offerings and gives the designer code-level control over their designs and how screens animate from one to another. They do this by changing the way they deal with the elements, moving from hotspotting a part of a screen image to selecting actual assets.
This will be a big departure from how Invision has operated thus far…
This will be a big departure from how InVision has operated thus far, which explains the methodical and slow rollout of this feature. This change also facilitates another one of their upcoming features: Inspect.
At roughly the same time as Motion was announced, InVision announced their answer to the problem of delivering design information to developers. I regularly find myself responding to requests about the exact pixel size of a button or icon, requests for .png or .svg files, a HEX value for a background, or the -webkit-prefixes for gradients. While I have access to this information and am happy to pass it along, cutting that communication down is a great goal for time-saving.
Insight will give the developer direct access to the assets they need, as well as the colors, fonts, etc. involved with the project. I had the chance to see Insight in action a few months ago during KC Design Week and am excited for the future of this industry and product!
Recently, Macaw, a product we were playing with, was acquired by InVision, and seems like it will play an integral role in the development of this feature.
The Crema team is eager for the release of Prototype. I check my Craft Manager almost daily to see if it’s out. We’ll be describing how Craft has changed the way we design in another post, but Prototype ties into the future of InVision so much that it felt wrong to leave it unmentioned.
Prototype will allow designers the ability to design and set up animations directly in Sketch.
Tying in with Motion, Prototype will allow designers the ability to design and set up animations directly in Sketch. While this is available in Adobe’s new XD, Prototype (which was announced the same morning as XD) will take the animations and put them directly into Motion, eliminating the need to go into InVision to hotspot and link up screens.
InVision has come a long way since it’s debut as a simple screen hotspotting app in 2011. The future is bright and full of shiny new things, both for the benefit of InVision and the designers who rely on their product daily.