We need the grid. But we also shouldn’t feel trapped by it. Structure goes far beyond a simple horizontal and vertically based grid, so it’s important to understand other patterns so we don’t get caught up in either using the same structure in everything we create or not using one at all.
According to Leborg, there are three basic characteristics of structure.
- Placing objects in relation to one another will establish a structure.
- We can only describe a structure if we are able to recognize its pattern.
- A structure that does not have visible structure lines is called abstract.1
Let’s unpack these.
The first characteristic is the most basic. Nearly everything we will design will have more than one visual element involved in its composition, so there will be an intrinsic structure simply because we are placing multiple elements within the same setting.
The second is more complicated because there are so many patterns a structure can follow, and Leborg outlines several of these in this chapter, including:
- Formal structures, which is when elements are arranged evenly in a composition. Formal structures follow most closely an evenly spaced and perpendicular grid. Common formal structures include:
- Gradation, which is incredibly similar to a basic grid structure, except the structure changes in size and form in even increments.
- Radiation, which is a repetitive structure in which elements are positioned around a common center.
- Informal structures, which is when objects are arranged irregularly or do not follow straight structural lines.
The third characteristic is also quite simple. In most of our work, the structure we employ will be abstract because we do not make the lines that make up our structure visible. This invisibility does not give us the freedom to ignore structural arrangements, however, because it is critical that we put care into how we arrange our compositions. It merely requires that we understand how the basics of structure are critical to the visual success of our work, even though structure is almost always an invisible element.
When I think of structure in design, specifically the grid system, it’s hard not to immediately think of the International Typographic (Swiss) Style. Highly prevalent in the 1950s in Switzerland, Swiss design focused heavily on objectivity, cleanliness, and readability. As such, formal structures – mainly the grid system – were used to visually organize nearly all work from this period. The strength of the grid during this period in design history has had incredible implications for design since then. In an article from Smashing Magazine2 written by Diogo Terror, the structure in Swiss design is examined and applied specifically to web design.
Terror examines several elements of Swiss structure that relate to the structures Leborg discusses in Visual Grammar. Most important, of course, is the grid. He explains that the grids used during the Swiss movement were incredibly rigid, but much more coherent than previous organizational structures. Terror also explores the idea that this kind of formal structure didn’t just exist visually, but was also very content-driven. Information was specifically arranged within a structure in order to make it as coherent and readable as possible. This kind of thinking is critical because if information-based design isn’t organized well, what’s the point of just trying to make it look good? Content should drive structure, just as structure should set the stage for content.
Though I didn’t focus too much on how Swiss design is implemented into current web design, I was glad that Terror commented on how it’s important to examine Swiss design simply because it’s organized so well. Even though we live in a time in which there is so much freedom in how we choose to design and structures are often looser than they were in Swiss design, it would be neglectful to ignore the benefits of structurally based design. Because while structures can seem limiting, I would argue they actually give us more potential for successful design.
1Directly quoted from page 18 of Visual Grammar.
2Article can be found here: http://www.smashingmagazine.com/2009/07/17/lessons-from-swiss-style-graphic-design/