1

I'm looking for a solution/tool that will allow me to validate that my frontend project is pixel-perfectly aligned with the Photoshop mockups.

Best would be to make the browser window transparent - that way I could lay it over the mockups and see if they align as they should. Unfortunately, I cannot find such a tool for MacOS. Safari used to have "Use transparent window" debug feature, however it's missing in Catalina. There used to be tools like afloat and afloax however they don't work with Catalina - and even if they did, they need to disable SIP, which is impossible in corporate environment for security reasons.

Any ideas?

Improve this question
3
  • If you are having to do this, I suggest that a better design and handover process needs to be in place otherwise the effort and complexity won't scale for bigger projects.
    – Michael Lai ♦
    Feb 6, 2020 at 23:34
  • @MichaelLai what do you mean? How could I tune the process to help with this issue? The CSS from mockup designs cannot be easily copy-pasted, they don't scale and respond to changes properly...
    – Mirek
    Feb 7, 2020 at 15:50
  • These types of tools fit into the category of UX tools known as handoff tools. You'll find a list of them at the UX Tools website (uxtools.co/tools/handoff), including Zeplin.
    – Michael Lai ♦
    Feb 8, 2020 at 0:41

2 Answers 2

Reset to default
0

Zeplin has this feature as it seems..

https://support.zeplin.io/en/articles/1437093-comparing-app-website-with-designs-using-pop-out

Improve this answer
0

If this was an iOS project, you can use the Flawless app but I really have not come across a tool for web front end that handles this scenario.

A hack I have personally used in the past is to use take a full-page screenshot of each web front end with Full Page Screen Capture then place this either on top of the UI design or just side by side using artboards.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.