Josef Müller Brockmann - grid-based layout and web design
In recent years there has been a trend towards visual overload in web design. The growth of technology that delivers rich interfaces and multi-media has encouraged designers to make their sites busier, louder and ultimately, less usable.
In trying to buck this trend the example of Josef Müller Brockmann offers another route for web designers. Muller Brockmann was a commercial designer who exerted a very strong influence on the graphic design of the 1950s and 1960s. He was concerned with functional and objective design and his approach involved condensing design elements to focus on a core message within the context of a clean and clear visual aesthetic.
A key part of Müller Brockmann’s approach involved the use of the typographic grid. This involved dividing space up into a number of consistent horizontal and vertical units, each with consistent spacing between them. The grid is used to define the constant dimensions of the design space and elements are inserted precisely into it.
Müller Brockmann said that a grid system creates a “sense of compact planning, intelligibility and clarity, and suggests orderliness of design” (Grid systems in graphic design, 1981). The objective here is usability: information presented this way is not only read more quickly and easily, but is also more easily understood and retained in memory.
Grid-based design does tend to lead to systematic and logical designs that have an appealing visual consistency. The examples below show how a simple 8×5 grid can give rise to different page designs – the grid system is easy to work with and provides for a clean and well-organised aesthetic.
This disciplined approach to layout based on a grid is relevant to web design. Digital publishing presents a unique set of problems to a designer: a user has to view a page through an illuminated screen which can limit their potential for taking in visual information; the designer cannot guarantee the equipment or environment in which the design will be viewed, which makes more complex designs vulnerable to poor rendering.
The tools available to a web designer lend themselves to grid-based design. Block-based elements such as the <DIV> tag provide a means by which a web designer can organise a page into specific and exactly measured divisions. Consistency can be achieved by using CSS to implement a set of visual design rules across a site.
Useable web design should be consistent and unambiguous. A web designer should organise content to provide a user experience that is both accessible and visually appealing. In this context, a grid-based approach can be a useful tool.