Delivering a pixel-perfect website

15 / 05 / 2017

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?

  • View spacing between elements to create pixel perfect design.
  • Copy the CSS for the element, fast tracking code for developers.
  • Export assets if marked for export in Sketch.
  • Copy the text.
  • Check line-height.
  • View colours.
  • View font-size.
  • View fonts.

How does the process work?

Here’s an example of how we might use this tool to communicate with developers:

  • We use craft to sync dartboards from your Sketch file to an InVision project.
  • We share the project with teammates.
  • We make changes to the header in the design and sync the artboards to the InVision project via the Craft plugin.
  • We use InVision’s commenting system to alert the developer of changes.
  • Our developer views the comment.
  • They switch over to InVision’s Inspect.
  • The developer copies the new CSS styles for the header and executes the changes in the code.
  • They then mark comment as complete.

The Outcome?

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.

Share
Read other blogs
Awwwards