Why
A grid offers a consistent approach for designers to position and align various elements on a page and create appropriate visual hierarchies such that the resulting layouts are visually pleasing and easy to use. Laying out and aligning page elements using grids not only makes the pages appear simpler and visually pleasing, but the consistent placement of components within the grid makes the application easier to navigate.
How
When using a grid, pages are divided into rows and columns, and grid lines are used to position and align web page elements. The grid of rows and columns itself may be established using the rule of thirds or using columnar grids that create units in multiples of threes (
Figure 12.9;
Baird, 2007;
Vinh and Boulton, 2007).
Once the grid is established, the next step is to position elements on the page that will be consistent throughout the application, such as logos, navigation (primary, secondary, and utility), headers, footers, and so forth. However, if content changes from one page to another, which may often be the case for web applications, it may be beneficial to position content within the grid first. The benefit of this approach is that after placing the most important content on the page, it should become pretty clear whether navigation should be placed at the top or on the sides (left or right). For example, if content demands horizontal space, such as reports or search results, positioning navigation at the top can free up horizontal space.
Unlike printed pages, which have a fixed width and height, web pages provide limited control for vertical content, especially with a varying amount of
page content occupying different amounts of vertical space. If the layout has to adapt to varying amounts of page content, maintain relative positions of elements within the page. A trivial example is the page footer, which could always appear after the page content no matter how much vertical space is needed by the page content.
CONSIDER USING THE GOLDEN RATIO
The
golden ratio, also known as
divine proportion, is the ratio between two segments such that the smaller (
bc) segment is to the larger segment (
ab) as the larger segment is to the sum of the two segments (
ac), or
bc/ab = ab/bc = 0.618 (
Figure 12.10;
Lidwell et al., 2003).
In general, layouts based on the golden ratio are considered to be aesthetically pleasing. Although the aesthetic superiority of designs based on golden ratios have limited evidence (
Markowsky, 1992), most designers consider them superior and base their grid layouts accordingly. Although designs shouldn't be forced to fit the golden ratio, it should be considered whenever possible (
Lidwell et al., 2003).
To use the golden ratio for a two-column, 770-pixel, fixed-width design—for example, multiply 770 pixels × 0.618. The result is approximately 475 pixels, which can be the main content column's width. The remaining width of 295 pixels (i.e., 770–495) can be used for the second column, which can be used for navigation or other secondary content (
Baird, 2007;
Clarke, 2007). The same approach also can be used for larger widths (
Figure 12.11).
ALIGN PAGE ELEMENTS ALONG GRID LINES
Align page elements along grid lines and with each other either vertically or horizontally. The objective is not only to create a minimal number of “invisible” grids on the page but also to do it in a way that reveals the structure of the page visually and makes it easy for users to understand and find different page elements. Creating effective alignment also helps lead a person through the design by associating related elements on the page (see the VISUAL HIERARCHY pattern that follows). Using alignment consistently on all pages within the web application improves the predictability of page elements within the design.
CREATE REUSABLE TEMPLATES
Once pages are laid out, they should be sliced into one or more page templates (depending on the number of page types) and used throughout the application. This ensures that designs work for the entire application and therefore prevents any guesswork on the developer's part as to how individual pages within the application should be designed.
Related design patterns
One of the important reasons for using the grid STRUCTURE pattern is to ensure that the resulting design leads to a logical and predictable organization, improves comprehension, and makes it easy for users to find desired information (VISUAL HIERARCHY).