Grid Layout

Example of the Grid Layout UX pattern.

Problem

Disorder breeds confusion and frustration.

Solution

Use a grid layout to order the visual elements in the views that you design.

Context

You should pretty much always use a grid layout when designing software views.

Rationale

Despite the sound of its name, the grid system for layout is very flexible and can accommodate almost any visual design. Grid does not mean “boxy” but rather that elements are laid out in a consistent and ordered fashion.

A grid layout provides a visual structure, a systematic and consistent frame for placing things on a view. It provides visual rhythm, a sense of ordered wholeness, and makes it easier for people to digest the information being presented; not using a grid creates a sense of disorder, randomness, and is more or less unsettling, making a view seem messy or unprofessional. Using a consistent grid structure across all views in a site or application can reinforce that sense of order, unity, and consistency. Even with minimalist styling in terms of colors and fonts, effective use of the grid can significantly contribute to a positive aesthetic experience.

In short, using grid layout can make your design both more usable and more desirable.

Implementation

If possible, let your content drive the grid layout that you choose. Get an understanding of the different elements to be displayed and their relative importance to each other, including ancillary elements such as Global Navigation, ads, logos, etc. These, along with target form factor, can provide a good starting point for designing your grid. You can lay these out and try to find different grids that work well with them as constraints.

While it was perhaps more common in print media to create a grid based on units (building blocks based on x-y dimensions), on the Web and in adaptive desktop UIs, using column-based grids is more common because they allow for theoretically infinite vertical space for variable content and more easily accommodate user-based changes such as changing the font size or the window dimensions for the software. This doesn’t mean you can’t use unit-based grids, but it can be more challenging depending on your target medium.

There is no one-size fits all solution for grid layout. A simplistic solution that many use for the Web is to use basic header and footer areas with multicolumn central/content area, usually with 2-4 columns. If you go this route, you need to also consider vertical alignment holistically (not just within the sections), i.e., the header and footer elements should not be out of whack with the columns in the center. You should consider thinking about the ratios of sections in your design. There are well known guides to ratios such as the Golden Section and the Rule of Thirds, and designing with ratios will better enable you to create a fluid layout that can adapt to user and device-based changes.

You will want to try different grids to see what works best for the elements in your design and across the various layouts for your application or site to find one that provides the right proportions, flexibility, and consistency. Once you find one that seems to work, stick with it. You can use tricks like, if you’re using HTML and CSS, setting an image of your grid as the background for the page body and aligning elements visually based on that. Other technologies such as WPF and Silverlight have top-level Grid layout options that can be used, and often visual design tools will provide both persistent and contextual grid lines to help you align things on a grid.

It is worth pointing out that grid layout is a tool and not an unbreakable rule. Just be sure that you deviate from it consciously and with good reason.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Grid Layout pattern can be implemented using the ASP.NET WebPanel control in combination with HTML tables or by applying CSS styles to generate the desired layout. Check out the samples browser to see it in action.

Windows Forms

You can use the NetAdvantage for Windows Forms control WinGridBagLayoutPanel to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called Layout Managers to see it in action.

JavaServer Faces

Grid Layout is central to JSF’s approach to page design and is supported by the core Grid Panel component.

Examples

The Options dialog from MS Outlook 2007 nicely demonstrates the power of grid-based design on a dialog level.

http://quince.infragistics.com/11gn