: Tool for UI Designer where you can see distances between elements I am creating tons of pixel-perfect views for static websites. My front-end developers losses their times figuring out distances

@Samaraweera207

If you're using Sketch you should have a look at Zeplin.

Vote Up Vote Down

@RJPawlick971

I'm going to offer up an entirely different way to look at the problem:


don't focus on pixel-perfection


I'd argue there are several reasons to avoid pixel-perfection:

Reason 1: Pixel perfection simply doesn't exist on the web. A major benefit of the web is that it is flexible. Flexible in the sense of browsers, user preferences, devices, settings, fonts, etc. Now matter how much effort you put into making an HTML page 'pixel perfect' with your photoshop file, all it will take is one user preference change to blow it all apart on you.

Reason 2: Distances in your mock up tool don't translate to distances in CSS. For instance, you may have 20px between a paragraph and an image. But in CSS, you need to figure that all out with line spacing, margins and padding. And even then, depending on the particular version of the font that may (or may not) be installed on the end-user's device, you may be off by 3 or 4 pixels vs. a different person with a different version of the font installed.

Reason 3: Code benefits from consistency. Your mockups have no such demand. One of the more frustrating things to see is developers spending undo amounts of time to fix a 'couple of pixels of space' on page x vs. page y and to do so, end up writing a half dozen new CSS classes. Yes, they've managed to match your PSDs closely, but now they have a whole mess of additional markup and CSS that is just going to make maintenance of this beast more and more difficult. Instead, let them create a 'standard' 10px margin around a drop down list. Then just leave it at that. Yes, in some situations on some pages, there may be 15px of space due to an extra 5px of padding on another object. But that's OK. Again, it's the web.

In conclusion, I'd suggest making your mockups, and telling your developer to 'aim for this'. Then, work with them as much as you can to help tweak things as you go.

Vote Up Vote Down

@Radia289

There are different opions/tools depending on the tool you use for your UI designs.

Let's say you create PSD files, the simplest solution is your front-end dev uses Photoshop CC too. By pressing and holding strg (win) or cmd (mac) and hover between the elements PS shows guides that measure the distance between elements.

If this is not a solution for you, the only tool I remember is the inbuild Adobe Extract in the code editor Bracktes or rather Adobe Extract itself. The front-end dev need a PSD, where every element is on its own layer. So designing your UI in Adobe Illsutartor would become a bit more awkward...

Vote Up Vote Down