Since my early days working for a newspaper, I've been obsessed with grids, proportion, and trying to find a magic formula for solving layout challenges quickly. The past twenty years have been full of experimentation, deconstruction, failure, and revision. While I will never say I've settled on the perfect approach (is there one?), I have learned much in the process. The works of two designers—Josef Müller-Brockmann and Le Corbusier—have been great sources of insight and inspiration, which I continue to study and learn from. I'm no authority on the works of either, and certainly don't claim any special insight. Ultimately, I'm just a tinkerer, and I will do any amount of work necessary to save me time in the future!
Pursuit of a simple, yet effective grid development methodology for layout in any medium, fixed or flexible. My aim is a reusable system. There's nothing more frustrating than starting from scratch every time!
Try and synthesize ideas from Müller-Brockmann's work on grids and proportion with Fibonacci ratios, the basis of 'Le Modulor'. To start with, I break the canvas into thirty-two columns. This gives me my Unit 1 width. Then i create blocks 2, 3, 5, 8, and 13 times that width. I then create heights based on these same numbers. The resulting blocke are 1x1, 1x2, … 2x1, 2x2 … 3x1, 3x2, etc. These can be combined in all sorts of interesting ways.
This solution involved taking Le Corubusier's 'Modulor' proportions and breaking the page down into similar ratios. All images and typography align to the generated grid and are proportional to one of the block sizes. These are only two examples of the layout possibilities. Once you start to rearrange and combine the blocks the options are infinite.
A table showing the block sizes spaced apart for clarity.
The established grid can be used as generated, or blocks can be rearranged to create a seemingly infinite number of layouts. All images and typography align to the generated grid, or are proportional to one of the block sizes
An example of the process for creating a flexible grid system for fluid screen sizes
Exploring various UI patterns and layouts for a dashboard application