Disorder breeds confusion and frustration.
Use a grid layout to order the visual elements in the views that you design.
You should pretty much always use a grid layout when designing software views.
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.
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.
Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.
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.
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.
Grid Layout is central to JSF’s approach to page design and is supported by the core Grid Panel component.
The Options dialog from MS Outlook 2007 nicely demonstrates the power of grid-based design on a dialog level.
The primary example is from Yahoo Games and uses a fixed-width grid.
This example from Yahoo Pattern’s Library shows how the grid layout can be used to create variety within an overall, common grid structure.
This example shows the grid presented by Khoi Vinh and Mark Boulton at the SXSW 2007 Conference. There are some elements that break the grid, like the tab with “Featured/Entertainment/Sports/Life,” which breaks the horizontal grid, and the car pictures, which break the vertical ones.
This example shows the Infragistics Windows Forms grid bag layout manager that makes it easier to design grid layouts for the Windows Forms technology, which does not support it natively.
The grid layout is evident in the Microsoft Zune desktop player.
UX Magazine uses a very prominent blend of unit and column grid layout with CSS-based floating to adapt to browser size.
This is a classic, clear grid design from ZURB. Very clean.
As many ejourals, paginemediche.it is considered a grid-based layout, where each column contains a particular type of informations, according to the paradigma showed below: highlight, topics and tools.
Smashing Magazine, Designing with Grid-Based Approach
Patterns in Interaction Design, Grid Based Layout
Yahoo Design Pattern Library, Page Grids
Wikipedia, Grid (page layout)
Khoi Vinh and Mark Boulton, Grids Are Good