Product Development

Product Design

Education

The magicNumber — the common truth for designers and developers

The magicNumber is a constant number used in the design and coding process of digital products. The main reason we use this holy number is for visual harmony and consistent responsiveness for all products for all different screen-sizes. Moreover, we learnt that it eases the handover between designers and developers. A common truth for spacing and pixel-fucking. Every design around spacing, sizing or scaling is based on the magicNumber.

The __magicNumber__ is based on the grid of the design. Normally, we design with a 20 grid in a 1440px space. This means our magicNumber is 1440 / 20 = 72 units. In web-based-products this is pixels. Working with SCSS you can set a global variable named

$magicNumber: 72px
and use this in all other components. Often we use the following pattern:
12px (mN / 6), 18px (mN / 4), 24px (mN / 3), 36px (mN / 2), 72 (mN), 144 (mN * 2), 288 (mN * 4) 
On smaller devices we use `$magicNumberFlex: 6vw` so elements size dynamically based on the viewport width.

So how can this unit be helpful?

  1. Daily Developer Life: your designer ghosted you and signed off before you could ask any questions. By tomorrow you need to deliver a form based on rough sketches and sloppy designs. This leaves room for interpretation and you don't want iterate over and over. So you let the magicNumber do the work: Your input field is height: $magicNumber so you set the spacing between input fields on margin-bottom: $magicNumber / 2 and the padding of the placeholder text padding: $magicNumber / 4. Done. Incremental spacing based on one unit. 2.Design to Development: you have finally got a green-light on your designs. Now you need to handover the design to the development team. Room to fuck up, you think. But with your magicNumber you can tell them: every size you will use is a multiplication or division from the magicNumber. Don't think twice, if you see a big element it is $magicNumber * 2 , small spacing between grid? $magicNumber / 2 . No exceptions. Ever. If you see a mistake in my deliverables of '13px' it is wrong, it should be $magicNumber / 6

Mobile applications

The real fun starts when coding in React Native or Swift. You can dynamically update the magicNumber based on the pixel-density. Since users won't rescale the browser window, the nightmare of each web-developer, you can fit your designs relatively to the screensize:


// Detect the pixel density of device, used later for determining sizes
export const detectDeviceSize = () => {
  const pixelRatio = PixelRatio.get();
  switch (pixelRatio) {
    case 1:
      return 'x-small'; // mdpi Android devices
    case 1.5:
      return 'small'; // hdpi Android devices
    case 2:
      return 'medium'; // iPhone 4, 4S, iPhone 5, 5c, 5s, iPhone 6, 7, 8, xhdpi Android devices
    case 3:
      return 'large'; // iPhone 6 Plus, 7 Plus, 8 Plus, iPhone X, Pixel, Pixel 2, xxhdpi Android devices
    case 3.5:
      return 'x-large'; // Nexus 6, Pixel XL, Pixel 2 XL, xxxhdpi Android devices
    default:
      return 'medium';
  }
};
// Calculating the magicNumber for styling elements in various screen sizes
export function calculateSizeScale() {
  const deviceSize = detectDeviceSize();
  switch (deviceSize) {
    case 'x-small':
      return 35;
    case 'small':
      return 40;
    case 'medium':
      return 55;
    case 'large':
      return 65;
    case 'x-large':
      return 70;
    default:
      return 60;
  }
}
export const magicNumber = calculateSizeScale();
// set variables used in various files
export const customSizes = {
  window,
  main: magicNumber,
  space: magicNumber / 3,
  spaceFluidSmall: viewportWidth(5),
  spaceFluidBig: viewportWidth(10),
  headerHeight: (magicNumber / 3) * 4,
  iconButton: magicNumber / 1.5,
};

Next