Grids provide visual and functional order to a website’s content. To engage with an audience, content must be arranged in a theme consistent with the website’s purpose, attractive to the site’s intended audience, and organized in a way that invites the user to interact with various elements of the site’s internal and external content. A site with poor composition and organization, a lack of intuitive elements, or visually displeasing elements such as imbalance or gross color contrast, can make finding relevant search results difficult. This is not to say, however, that everything must be organized in neat and tidy columns and rows. When done well, breaking the grid can be more engaging for the audience. An examination of three designs by three different companies reviews traditional grids done well, grids broken by design, and a poor yet excessively designed attempt.

Successful Grid Design by Heller Gallery

Heller Gallery exhibits glass sculpture collections from a variety of artists. Each exhibit interacts with the space around it, such as the light reflecting off of opaque shapes or refracting in semi-opaque or translucent pieces. The colors can be very complex, or the have no color at all. Each block containing a piece of art is it’s own showcase, meant to highlight the visual arrangement of a single piece or group of objects within the piece.

Since the artists are all so diverse in their choice of subjects, colors, opacity, shapes, and so on, it seems the website designer chose to keep the area in which they are displayed very clean, organized, and standard. This help to keep the work as the main focal point, without any one particular piece standing out or being obscure due to it’s placement on the page.

The style is very modern, and the blocks containing the images are all identical in size. There are no colors other than that which is part of the piece or it’s exhibit area. The viewer is able to see all of the pieces from every artist without any one piece creating a focal point due to the styling of the site and it’s consistency in displaying the work.

The design is successful in that it’s modern, organized, clean, minimal, and utilitarian look/feel for the viewer draws the viewer to the work. The Lato font, typically at 11px for both headers and paragraph text, does well to contribute to the minimalist feel.  The designers wanted the site to feel like the brick and mortar gallery, with either white or gray areas that do not detract from the artwork.

Breaking the Grid, by Burning Man

Burning Man’s landing page contains a background image of past festival events, with distorted coloring almost like an oil slick, that remains fixed as the viewer scrolls down the page. Beneath that, a quadrant of images and text offer news for the next event, as well as donations to support the project. These elements all culminate into a visual representation of the Burning Man Project, it’s events, and it’s call to action from the audience. This container overlaps the background in order to draw the reader in a vertical, downward viewing path.

Below the fold, there are 6 images with text for additional resources or information. Since they are all sized consistently and arranged in a standard pattern, no one option stands out from the rest, allowing the viewer to peruse over all of the information and choose what he/she is interested in learning.

Finally, in the bottom section of the landing page, a much more subdued section to subscribe to or share information contains a light gray background, with moderately darker gray text.

The entire page is constructed in a way that draws the viewer to the bottom of the page by decreasing widths of content and imagery, until you reach the footer area. It starts with one row in the first container, two columns and two rows in the second container, three columns two rows in the third container, and one row with five columns in the last contained. The intent for this is not clear. The first container is the largest, the second container is the second largest in terms of image and content size, and so on. The text is sans-serif, that changes color in each container in order to better contrast against the background.

The intent of the designer seems to be limited to taking the viewer through the content is a sequential, vertical manner. There is little emphasis on any one item over another within the same container. The designer is most likely hoping that this will force the viewer to look at all the content before moving to a new section.

Poorly Arranged, Disordered, Use of White Space in the Grid by Freeze Thaw

Freeze Thaw is a small, local bike shop well known it the State College community. The page primarily is composed of black, orange, and green colors.  There are at least 3 different fonts being used, from Arial/Helvetica to Sante-Fe, and some other more niche font.

The black and white contrast and font changes for backgrounds and text are meant to provide some sort of contrast for the viewer – however, it is more jarring and difficult to read through and find what you are looking for.

The containers vary in height and width, and spacing between columns and rows are inconsistent. One large text box appears to be an embedded google or excel spread sheet, with links to what appears to be vendor websites.

The design is not successful due to the disorganized arrangement of the grids, as well as the jarring and off-putting effects of black space against white. The unused space does not contribute to the aesthetics of the content arrangement – the viewer is not brought to any specific focal point, but rather the content causes the viewer to dart around searching for information.

 

In summation, the designer’s decision to go with a traditional grid layout or a broken grid arrangement depends largely on the site’s content and audience. With either choice, the fundamental rule is that the design must executed well in order to attract and engage any audience.