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 between related divs, images, etc (using Paint).

What I want to achieve is to automate this process and generate an output file when you can easily see those distances just like in CAD software.

Sketch has great Measure plugin which I am using so far:

enter image description here

but while my views are getting more and more complex, it’s so time-consuming to be up-to-date with all the widths and spacings.


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.

Source : Link , Question Author : joe.kovalski , Answer Author : DA01

Leave a Comment