Join Sean Adams for an in-depth discussion in this video Grid variations, part of Foundations of Layout and Composition.
Finding the right grid for the content is like dating. You need to look around, try a few out, let some go and commit to one. And, like the dating world, there are different types. One grid is just right for scholarly text, but not right for a dance club's website. Classic book grids are often the simplest one column grids. In this instance, the size of the column is defined not by the size of the book but by the amount of copy that fits on one line.
A good rule of thumb is to make the column no wider than 52 characters, or 2 alphabets which is easier to remember. Any longer and the reader will give up. Corporate publications often use a multi-column grid structure. This allows more flexibility with content and may be more varied than a fiction novel. Magazines usually use several grids within a single issue. One grid is used for the main feature story. And, another for the monthly departments. A magazine with a rigid grid structure and no variation will feel much more like an annual report.
Imagine Us magazine, designed in the same corporate style as an annual report for your local bank. It would be clean and consistent, but dull as a box of hammers. Information graphics work best with more complex grids. This may involve columns of different lengths, or specific zones for information. It's a good way to organize dents and hard to understand information. This also helps the viewer find the content they want. Newspapers have grids that are designed to accommodate information that changes daily.
They are structured to provide the reader with several ways to access the content. I can scan only for the headlines, or the images and get a quick sense of the news, or I can read the smaller copy for more detail. The grid here defines what kind of information is where. The rules for website design are always in flux, but the way we find information remains constant. And the grid structure is just as useful here as in a book. When I design a grid for a website, I use margins, columns and hang lines.
I lay out the content to aid the viewers understanding. But I work with square proportions, which translate better in a square pixel environment. Recognizing specific grid types is an essential skill that enlarges your visual vocabulary. The next time you look at a book, poster or website that you like, find the underlined grid structure, it's like breaking a code and seeing how the designer thought.
- What makes a successful layout?
- Layout elements: shape, line, color, texture, type, and space
- Using balance and tension to create a dynamic layout
- Adding drama with contrast and scale
- Working with proportions: golden section, rule of thirds, etc.
- Creating the right grid for your design
- Choosing simplicity or excess
- Adding an element of surprise
- Making images and typography work together