Beyond the Grid: With Grid Based Web Design

Grids can be a massive help when building websites. It provides both a visual structure for laying site elements out and a framework for its content. Think about all the different objects needed to make up a typical layout design. There’s text, images, videos, adverts plus all the standard elements like banners, navigation bars, footers etc. A grid is often the logical solution for making sense of the task at hand. It’s the simple way of creating a balanced and unified website.

We’ll start by deciding what a grid is (or can be). In general terms it’s a series of lines, rules and guides used within a layout where design elements should be placed or positioned. Potential grids can sometimes be simple and sometimes very detailed. Like any design aspect, the grid used should be determined by the aims of a website. Content is determined by factors such as site purpose, intended users, advertising requirements etc. It’s this content that should determine the shape and structure of the grid. So before starting to design, clarify the different types of content to be used.

Using the Grid

The aim should be to create something that looks logical, this isn’t simply abstract blocks. They’re should be a flow, a rhythm even movement to the layout. This approach should allow different images, blocks of text and other design elements to fit together as a sort of overview stage. A good grid should not only bring all of these elements together but create unity, making the separate and individual objects look comfortable together. It’s far better to use the same grid structure through the whole layout, subconsciously we prefer this order. Don’t exclude any potential ideas without considering what you hope to achieve from your layout. It may just be the solution you’re looking for.

Before worrying about specific grid dimensions, first concentrate on how you think this content would be best organised. This is best done by sketching out rough layouts that helping to generate ideas quickly. More exact dimensions can then be established from these initial design sketches. It helps you understand the general shape of your layout objects.

The most effective way at implementing the grid is by altering the width of the smallest possible grid unit. These individual grid units should be used to determine placement positions on the layout. Although some grids determine the size of objects it should be remembered that it’s placement, position and organisation that’s the goal of this technique. Above is an example of a basic undeveloped layout grid. In particular it establishes a three column layout purely through the block pattern created.

To get the best out of the grid, page objects should be multiples of a single grid unit. To go back to our basic example, we have a grid three units wide. This can be turned into a three column layout easily, but the header used will be the width of the three grid units (this is shown below).This really comes from practicality as much as good design practice. It would be unrealistic to expect all page elements to be the same size but when using the grid, rough yet deliberate sizes can be derived.

Changing object widths to suit grid units helps give dynamism to the design. It makes the grid look more interesting and far less formal while still maintaining order. To make your layout look even more interesting you can go further by playing with the balance of the layout itself. It can take some imagination from your part but remember the grid is only a guide. It should be flexible enough to allow for this type of experimentation. The overall goal isn’t to maintain something that looks like a grid (unless that’s what you want); it’s to build a website. The examples below show how further changes to the grid can achieve more developed and intricate layouts.

Sometimes it appears there more than one grid or structure in place, but this isn’t usually the case. The suspected grid unit may actually be made up of a series of much smaller ones. This allows even more flexibility and contrast in the way objects can be positioned.

Grids as a Design Style

A rigid grid structure reassures users; this visual familiarity helps them understand how the site’s content fits together. This may appear a very constrained way of designing but can often prove a valuable design tool. The grid unit will often define the literal size of layout objects. This gives a clear blueprint which the site can be built around.

The shape and line patterns created are visually appealing, making the layout as much a design feature as the content itself. The high levels of visual organisation should allow users to confidently navigate the layout providing a better experience for users.

Grids as a Design Structure

Although grids can be very apparent, where you can visually see boundaries, this isn’t always the case. Chances are you won’t notice a grid structure without looking carefully.

Some grids might only specify column widths or even just the space between objects. Being that some may be very detailed, it’s not really a design style; it’s more a design structure. Below is a simplified version of the grid used by NME.com. While in reality the grid structure has far more complex elements behind it, the model demonstrates how the basic grid structure is formed. It’s this initial recognition of shapes that give us the impression of order.

A good grid structure should help individual elements fit together comfortably; they should be in harmony with each other. Where grids really become useful is when organising varied content requirements. It gives us as designers, an opportunity to combine these often blocky objects into something with unity and purpose. Grids can be a very practical tool in site management terms also. First, project time (therefore money) is saved by having an established grid structure in place. Conforming to a grid not only maintains site unity but saves the designer having to come up with new layouts for each page.

News and magazine websites in particular, implement more complex grid structures. This isn’t only replicate a traditional paper format, but because it’s the most practical way of achieving a busy and diverse layout. Content is constantly changing and being updated. Using an established grid means the focus can be put on content production, knowing the display method is securely in place. Future changes, new pages and content can all be added quickly.

Grids as a User Interface

It’s important not to overlook how effective grids are at displaying and navigating large amounts of dynamic content. Many social, ecommerce and even portfolio sites find them the perfect solution for their search and browse scenarios.

This is mainly down to their ability to make the best use out of available space, but also because their flowing nature allows users to skim content quickly. Grids not only provide a grouping mechanism but create a clear boundary between different objects which is important in this type of situation.

Sure there are some terrible examples created for this purpose but if the attention to detail is put in; they can become invaluable interface feature. Highlighting the details in each grid object clearly should be the priority. Consider the important information needed and implement a single labelling structure in each grid object. They should all be formatted the same way as this established repetition allows users to browse quickly.

Other Useful Resources

Conclusion

Grids are flexible, they allow for the generation of fresh and new ideas. By their nature grids have many aesthetic benefits based around shape and lines. They can create balance, unity, order and harmony. Layouts aren’t limited by the grid structure; they’re limited by the lack of design imagination.

From a practicality standing they can speed up the overall design process by putting a structure in place. New content can be added easily without having to think how it will be accommodated. Even freshening up a design can be achieved much more easily when your content is already arranged in a grid.

What do you think of grid based layouts? Have you seen any interesting grid layouts? Or have you spotted any grids being used as a navigation feature? As always tell us what you think below.

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.