Web / Typography Grid

overwhelmingly, columns dominate Web design grids. Once youve mastered the grid as a tool then its time to get creative with it. Work on establishing a visual rhythm in your design. Then you can step in and break the visual flow for effect. The techniques discussed in the next section present effective ways of getting creative with your columns in grid-based Web design.

Like skyscrapers in city centers,

Six

Creative Column Techniques

Layouts that have strong horizontal areas are being seen more often, especially on home pages. Horizontal Web design areas feel more creative because vertical designs are so common on the Web. Try using more rows in your designs. Or join areas of a column together to create a display space in your design. Rows can be used to break up the visual flow of a page. Each row you create gives a new opportunity for establishing new column areas with different sizes, numbers, and variety. Its possible to create pages on your site, or areas of your pages, that are heavily horizontal. Or join columns to form rows that add interesting areas to your layouts. Consider varying the number of columns in the rows you create. The gray horizontal row below is heavily emphasized. The use of repeating horizontal backgrounds helps to make predominately vertical layouts feel wide. Adding these spaces to your layouts will allow them to stand out. Horizontal areas in sites will slow the users progression through the page and create emphasis.

}}
One of the techniques in line with embracing some disorder is to break out of the boundaries youve established in your grid. Once youve established your order find ways for elements to move outside of it. Cross over the lines youve set up and break out of the visual flow of the page. In the article Thinking Outside the Grid Molly E. Holzschlag discusses concepts of creating compelling visual design that breaks the mold of the grid. Some of her examples show boundaries being escaped. This is an inspiring conceptual article that also discusses the complexities involved in coding designs that are less rigid. Pull-quotes are an example of a design element that presents an opportunity to break out of your established visual flow. The older version of Andy Rutledges Design View used interesting pull-quotes that broke the visual flow of the column. Doing this places greater emphasis on the pull-quotes than if they were kept within the content of the column. An abrupt change in the flow of the page will cause users to pause and notice the change in rhythm. This is true whether the pull-quote is kept within the column or moved outside the boundaries of its borders. Consider this the next time you use pull-quotes or if youre embedding an image within your column. As an image presents the same design opportunity.

EMBRACING DISHARMONY

Disharmony is, of course, the opposite of harmony. A grid is a harmonious instrument. Its goal is to achieve balance, symmetry, and order. So why would you want to bring imbalance to this order? Why break up this carefully constructed data structure? The answer is to add interest. Chaos is more interesting than order. A good murder mystery is infinitely more enjoyable than a story about taking a walk in the park. A partly broken grid is more interesting than a perfectly ordered grid. Besides who doesnt want to break the rules? Embrace some randomness, chaos, or discord and create a space for them to thrive within your designs.

UTILIZING ANGLES

JOINING FOR VARIETY

Its possible to set an entire grid on an angle. In the article Rule Four: Spacing Is Your Friend an angled grid design is reviewed. The example used in this article is for print design though. The use of an angled grid is unusual on the Web. Thats because the layout of text on the Web is horizontal, not slanted. You would likely use images to accomplish an angled piece of text. Flash would be another option. In both cases youre loosing the semantic goodness and ease of use of Cascading Style Sheets. The use of angles to occasionally break your grid will add visual interest. If you restrict the use of angles to images you wont lose any semantic or SEO benefits of the default horizontal text used in the Web.

ESCAPING BOUNDARIES

IMPULSE | 35

IMPULSE | 36