How InVision’s Inspect has helped us to achieve the best results.
Delivering a pixel perfect website from an initial discovery meeting with our clients to designing, building and going live can be a challenging task. We’ve discovered a powerful tool that has helped us achieve amazing results and we thought we’d share it with you.
Turning our visual designs into a polished product can be a challenge. This is especially true when the person creating them is not the one building the code. As designers we have experienced questions like this from developers: “Can you just send me the Photoshop or sketch file?” “Can you export this asset for me?” “What colour is this?”
This is where Inspect comes into play, so we decided to add it to our toolbox!
What is InVision’s Inspect?
Inspect allows users to select elements in a design and then view their properties; including size, font, borders, spacing, etc. For developers, think of it as a browser inspector for an artboard in a Sketch or Photoshop file.
How Can Inspect help your execution?
Having continuity in design is incredibly important. Inspect gives access to helpful information about the design without sharing an editable document to those who don’t need it.
How do we use Inspect?
How does the process work?
Here’s an example of how we might use this tool to communicate with developers:
The big advantage of using InVision vs. handing the Sketch or Photoshop files over to developers is there will no alterations and the original design will be realised. You know the fonts will be loaded so the design will look correct and there will be no accidental changes to the file. All the developers will get the designs at the same time, and you will be assured that they will be referencing the correct version of the designs.
Our clients will be delivered a website, true to the prototype that we presented in sign-off and all elements will be consistent across the board.