Designing thru the display

In my experience as a designer (both for print and web), I’ve come to differentiate my approach to each medium in terms of spatial measurements.

For print, all I needed to measure are the margins, in inches–and it’s all “what looks good” from there. For web, everything must be pixel-calculated–the margin, padding, distance from each element, width, height, etc.

I wouldn’t be able to answer how many inches the image element is away from another element in a, say poster I’m designing–I could only say it’s just about the right distance from the other elements. But when you ask what is the height of the button on that app I’m designing– I could simply say it has a minimum height of 48 pixels (in 160 pixel density) and there’s 24px padding on both sides of its label and 18px padding on the top and bottom; it is right-aligned with a 32px right margin and it is 48px apart from elements before and after it.

The reason for this is that, unlike print, after designing a website or an app, a designer would go on developing that design (which is only just a concept) into something interactive thru a device’s display where one has to account for the very limited space and optimal positioning and size of the elements. Pretty much the same as after designing a poster, you go on printing it to be tangible.

Displays for the web are thru the devices’ display monitors while for print, it is the actual medium–like paper. Designing thru the display in mind means that one must come to terms with the unit of measurement–at least for the minimum size of an element–be it the minimum width and height of a touch surface or the minimum points of text on a poster. This means that, for digital, if your device could display a bazillion ppi, you must design for it using its css pixel or as I call it 48/160 – 48px as minimum width and height of interactive elements (based on Android) and at 160 ppi.

This way you would be able to account for the initial available space of the display using the optimum size of UI elements. Also, the end product would be at that actual size on the display–meaning, your 48px x 48px element is displayed as that (and not 1.5x or 2x zoomed in).