@juancaorg
Posted
Hi Akshat 👋,
Answering your questions,
Judging the measurements from a preview image only accurately is pretty hard.
Ideally, you'll have the original design on Figma/Sketch/Adobe XD to work on, but if that isn't the case, you can leverage various tools for measuring.
The one that I'm currently using and I would recommend (and found in the Frontendmentor Resources) is PixelSnap. It's pretty handy once you get used to it and has great tolerance config when the tool struggles to measure because of low contrast.
Unfortunately, is a macOS exclusive and paid app. If you don't have the resources, the next best thing that I found is the web extension Dimensions. Available in Chrome and Firefox and is totally free. Of course, for this case, you would have to open the preview image in your browser to measure.
Keep in mind the zoom level when measuring with these tools. These tools don't keep in mind the "real" dimension, they just measure whatever is on screen, so it can get tricky. Try to get the whole image on screen to get closer to the real dimensions when measuring.
And again, this isn't a substitute for using the original design, but these are useful tools nonetheless.
For minor details, like distinguishing if you should add a box-shadow or not, I use a color checker/picker to check for any contrast and to be sure if I should add one.
The one that I'm currently using is Sip, again, macOS exclusive and paid app. But there's probably a web extension available in Chrome and Firefox, but I ignore which is the best, so I can't recommend any for now.
And the last, for checking details in general, is just training your eye. The more you practice and the more more UIs you watch in general, the more details you'll spot.
~~Anyway, that's a lot of text. Sorry.~~ Hope this helps you out 🙌
Marked as helpful
