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 consider my discoveries novel. Ultimately, I'm just a tinkerer, and I'm always happy to engage in work and exploration that will save me a ton of time in the future!
I felt that I was lacking a simple, yet effective grid development methodology for layout in any medium, fixed or flexible. My aim was to develop 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 divide the canvas into thirty-two columns. A single column width 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, 1x3 … 2x1, 2x2 … 3x1, 3x2, etc. These can be combined in all sorts of interesting ways. They become the building blocks that can be used in the layout.
This solution involved taking Le Corubusier's 'Modulor' proportions and breaking the page down into similar ratios. The designer can either simply utilize the blocks created, optionally aligning all images and typography to the generated grid. These are simple 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