This prime-number multiplication chart is an absolutely beautiful visualization of which values UI designers / developers should use for height, width, x and y position a.k.a 'sticking to the grid'.

Hint: avoid the numbers wherever red and purple color shows up. :) Numbers having blue and green are acceptable, though not ideal. The more orange your number, the more pixel-perfect and crisp your designs will be at any screen size!

All these years, ever since I learned how to operate Adobe software, I would do these calculations automatically in my head and apply it in my work, and I 'sort of knew' why it yielded good results for me, but would struggle to explain in theory to others. I would never use odd values, never use decimal values, and would be picky about which even number values to use. For example, I would pick 16px, 24px, 32px as values, but NOT 10px, 28px, 30px.

I always knew deep inside that it was not exactly about following a '4-point-grid' or an '8-point grid', but it was only in 2021, a few months ago, that I realized it is all about prime factorization that I had learned in primary school! But still, I couldn't quite nail it down. I would often describe it as a 'powers-of-2-and-multiples-of-4' logic (with exceptions for 3 and 5) to other designers and developers..

But now it's crystal clear and I can explain it to anyone! This is so incredible. As someone who struggled a lot in senior high school with math, I cannot tell you how much joy it gives me that the theory I came up probably as long ago as 2013 out of 'practical common sense' and self-exploration is having a sound logic and a strong mathematical basis - and that this chart has already had a real-world application for me this whole time!

--

Jack of all trades, master of some.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Suhrd Joshi

Suhrd Joshi

Jack of all trades, master of some.