Better grid systems in UI design tools.

Designers must be able to explore the consequences of grids visually—not just in code.

Ryan Lucas
Mar 14, 2017 · 8 min read
Image for post
Image for post

So what’s wrong with grids in UI design tools?


Responsiveness

Image for post
Image for post
Sketch and Photoshop’s grid controls
Print-legacy grids: in existing tools, grids are just visual guide lines to which elements can be snapped.
No responsiveness: resizing the artboard in existing tools doesn’t resize the grid.
Image for post
Image for post
Simulating responsive: creating grids for a few different device sizes can help, but details still fall through.

Propagating changes

Pixel pushing: in existing tools, changing the gutters or adding columns means manually realigning every element.

Experimentation

Image for post
Image for post
Some of Joseph Müller-Brockmann’s hand sketches from Grid Systems in Graphic Design.
Doing maths: dividing up available space equally in existing tools is tedious.

What might better grid tools look like?


Grids should be responsive by nature.

Responsive grids in Subform: when the artboard resizes, so does the grid.
Responsive proportions in Subform: a column set to always be 3 times as wide as other columns.

Forget guides and snapping—elements should have a formal relationship to the grid.

Element/grid relationships in Subform: elements automatically preserve their alignments.
Adjusting grids in Subform: directly resizing gutters and columns in context.

Grids should enable fast experimentation.

Informal grids in Subform: dividing up available space evenly, without using a calculator.

Two-dimensional grids shouldn’t be overlooked.

Creating 2D grids in Subform: Elements can be described across both rows and columns.
Manipulating 2D grids in Subform: element relationships persist, even when the grid is changed.

Anything should be able to contain a grid.

Conclusion


Subform

Subform is a digital product design tool.

Thanks to Kevin Lynagh

Ryan Lucas

Written by

Occasional thoughts on building products. Find me at https://ryanlucas.org and @ryanlucas.

Subform

Subform

Subform is a digital product design tool.

Ryan Lucas

Written by

Occasional thoughts on building products. Find me at https://ryanlucas.org and @ryanlucas.

Subform

Subform

Subform is a digital product design tool.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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