The grid editorial design

THE

GRID A book about great typographic design

Manny Quintero 1

GRID BASED

DE SIGN

“A page without a grid is a usability nightmare. On the other hand, a grid that has creatively overlapping, escaping, or energizing columns leads to a more enjoyable user experience. Discovering or planning areas of the design that will have some freedom will lead to more interesting and appealing design solutions�

By Sean Hodge

24 Smashing Magazine

Six Creative Column Techniques DOWN TO BUSINESS Grid systems bring visual structure and balance to site design. As a tool grids are useful for organizing and presenting information. Used properly, they can enhance the user experience by creating predictable patterns for users to follow. From designer’s point of view they allow for an organized methodology for planning systematic layouts.

WHAT IS GRID-BASED DESIGN? Grids are structure imposed on chaos. They are a harmonious and reliable system for presenting information. Grids offer an effective design approach for site layouts and assist in communicating site’s main messages clearly to the end user. Its important to know your tools before trying to get creative with them.

This means you should study the grid and understand how to successfully use it to create your site layouts.

Learn to achieve balance, symmetry, and place emphasis on important content all through the use of the grid.

1 EMBRACING DISHARMONY “Jackson Pollock’s splattered paint is more stimulating than a wall without it.”

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 partly broken grid is more interesting than a perfectly ordered grid. Besides who doesn’t want to break the rules?

Manny Quintero 25

2 JOINING FOR VARIETY 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.

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 joi n columns to form rows that add interesting areas to your layouts.

“Pullquotes present an opportunity to break out of your established visual flow.”

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 user’s progression through the page and create emphasis.

3 UTILIZING ANGLES It’s 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. That’s 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 you’re 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 won’t lose any semantic or SEO benefits of the default horizontal text used in the Web.

4 ESCAPING BOUNDARIES One of the techniques in line with embracing some disorder is to break out of the boundaries you’ve established in your grid. Once you’ve established your order find ways for elements to move outside of it. 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

26 Smashing Magazine

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 Rutledge’s 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.

Compare the old version to the newer site design below. The new design places pull-quotes within the boundaries of the content column. This is a less creative and more conservative solution. Though in either case the pull-quote creates a noticeable change in the visual flow of the column.

5 ILLUSTRATING AREAS Illustrations and the use of design elements allow for overlapping and breaking out of the structure you’ve created in your grid. They can be used to add some areas of creative disorder to counterbalance the rigidity of the grid.

The movement of the design elements within the illustration creates a different visual rhythm that acts in opposition to the order of the grid. There is balance in the design of these opposing forces.

“There are some basic design principles to consider when looking to energize space within your grid.”

6 ENERGIZING SPACES There are some basic design principles to consider when looking to energize space within your grid.

Concepts such as asymmetrical balance, proximity, and repetition are discussed in the article The Principles of Beautiful Web Design by Jason Beaird.

These principles are at work in the portfolio design of Issara Willenskomer, shown below. Jason Beaird has this to say about asymmetrical balance,”Rather than having mirror images on either side of the layout, asymmetrical balance involves objects of

Manny Quintero 27

differing size, shape, tone, or placement. These objects are arranged so that, despite their differences, they equalize the weight of the page.”

Mathematical precision is abandoned and a grid based on an artist’s intuition and eye for design is used to fill this creative space. The balance achieved here is not based on rigid structure alone, but rather is achieved through the equalizing weight of asymmetrical balance. Each portfolio piece repeats a structure of similar size and weight of presentation on the page.

CONCLUSION There are multiple techniques to add interest to your grid.

Certainly you should first understand how to use the grid effectively. Then work on escaping some of this rigid structure and create some free flowing spaces within your design. Or break the established flow and focus attention on a particular element.

Utilize concepts such as disharmony, asymmetrical balance, and ordered chaos to bring areas of your site’s grid designs to life □

THE

GRID