How we use InVision to power our website design process

by in Web Design & Dev

Website design and development are the bread and butter of work here at Wave Digital. On any given day our studio team works on multiple websites for our clients, so team communication needs to be clear and transparent. This is where InVision App comes in to play. We’ve been using it for about a year now, and boy do we love it.

What is InVision App?

InVision is a web based prototyping, communication, project management, presentation, collaboration and handover tool. Sounds like a lot? We think so too, and that’s why we use it every day to power our website design process.

With InVision a designer can easily take plain flat design and quickly prototype it. The end result is a website prototype where you can test the look of your website and the user journey, complete with links between the pages. The best thing is, both the team and the client can see this prototype and give feedback for the team to work on. Comments can be added directly on the design so everyone involved knows with precision what changes are needed.

Commenting on an InVision project

Comments on projects help with team communication

What does it do?

Communication is key within a creative team and InVision helps us to communicate better. The main feature is the ability to create live prototypes of websites from static images. It’s then possible to mockup the transitions, test buttons and the user journey throughout the website, creating a high fidelity prototype that acts and looks like a website. By sharing the prototype with the rest of the team, designers can quickly get feedback and proceed with any alteration of the design.

But the features don’t stop there. Designers and developers will know how complicated a handoff handover? process can be. Well, InVision is here to help us. Through its Inspect and Sync features, the design of a webpage can be easily uploaded to a prototype and developers can see (inspect) the design of that page, complete with fonts, colours, the css code for any elements and even asset export – skipping the need to create an extensive style guide that details every element on the website.

Another small feature that we like to use are Boards, as with prototypes you can easily add images and files to a mood board like structure and share this around. This makes it much easier on the initial stages of a website while getting inspiration and exchanging ideas with the client. We also found a cool use for it as a media library for any assets that the whole agency can use. This is where we keep things such as profiles photos, portfolio images, for easy access to everyone in the team.

Wave Digital InVision prototype

Page designs can be organised and multiple team members added to the project

How is InVision powering the way we work?

Any website project at Wave Digital goes through an extensive and detailed process, involving various skill sets; from design to development, project management and analytics, and InVision is crucial during this.

  1. Designers can easily share website designs with the rest of the team, getting faster feedback trough the commenting system on the tool
  2. Design handoff is quicker and easier; no more need to export assets or have developers use Photoshop files to create the developed pages.
  3. We can share a link to the prototype with clients, where they can see the design of their new website, interact and test the user journey, and give feedback on the sections they would like changed.