Luptin's Grid: Burberry Brochure

The use of grids is important for the development of publication layouts. While grids help to maintain a clean and organized arrangement for both visuals and texts, they are also important in maintaining the arrangement of just images as well. An example of the use of a grid system in such a manner is the online brochure for Burberry. It seems to use the modular grid system, which can "govern the placement and cropping of pictures" (151).

Using the grid system helps to determine the hierarchy of the photographs. The dominant visual that the designers wanted the viewer to focus on is the largest photograph, which is on the bottom left. It is only obvious that the designers would have chosen this photograph as the dominant one because not only does it show the Burberry outfit, it also features all the characters in the photo shoot. The second dominant visual is the photograph on the top right. It features just the three male models, and most of their Burberry outfits are shown. The third dominant visual is the one of the bottom right, which is slightly and almost un-noticeably bigger than the two visuals on the top left. It shows the face of the female model, who is covering the face of the bottom model. Although the majority of their outfits are hidden, the Burberry plaid design is still included in the visual. The top two visuals on the left do not have to do with Burberry, but are still connected to the photo shoot because they are parts of the scenery. The grid system is, therefore, used in a way to clearly define the hierarchy of the visuals and make it known to the viewers that such images are more important than others.

These images do not have to stay confined within only one module. The visuals can occupy more than one of the modules, and clearly obvious examples of such are the most dominant and the second-most dominant photographs.

The grid system helped to keep this online brochure organized and simple. If the photographs had been all over the place, the viewer would not have known where to look. Instead, he or she would have been bombarded with several images that may not have made sense when placed together without organization. Placing the visuals in this particular grid system helped to relate all the visuals together while successfully placing emphasis on the more important photographs. The grid system definitely helped to create a layout for this online brochure that did not overwhelm the viewers.

Grids?

A site that I frequent and is actually my homepage is SportsIllustrated.com. It has a lot of good articles and keeps me updated on all the scores for that day's game. Looking at the screen shots, there is a lot going on and there are many different sections yet I know exactly where I am going depending on what I'm looking for. To me, that says there must be some kind of good grid on the site. However, looking at the site I am unable to easily identify one grid. As soon as I find one, there will be a category that overlaps what I thought was a grid gutter. Specifically, if I had to discern the sites grid, because there definitely is one, it would have to be some multiple of five. The right side of the site at least appears to me to be 2/5 of the site with the left being 3/5. But like I said, just when you identify that the SI Writers section seemingly overlaps that column.

I think what the sites grid does the best is its consistency. From day to day, I always know where I'm going to find which type of information. For the user that frequents the site, the consistency allows organization in the same way that an easily discernible grid would. What you can see though is how the different sections/categories act as modules to organize the information. This in itself creates a grid or template that I think works very well even if to the everyday user the grid is unnoticeable, which actually could be a good thing.

Lupton III: Grid

An example of a grid system used on the web is CNN's new website. If you would like to get a better look at how they implement a grid system visit http://www.cnn.com

After reading Lupton's section on grids the system that CNN appears to be using is a multi-column grid. A multi-column grid has a complex hierarchy that integrates text and illustrations. CNN also creates zones for different kinds of content. A modular grid appears to be in place as well. There are consistent horizontal divisions from top to bottom and vertical divisions from left to right.

For the most part their website is effective as it is easy to navigate and engages the reader. I visit CNN's website every day and have to say that I like the new design better. The website prior had one large photo with the most important story to the left of the page. The rest of the information just seemed to fall to the wayside. Now CNN offers more stories at the top of the page by implementing three sections of breaking or important news. There is still a system of hierarchy as less pressing information is found the closer you get toward the bottom of the page.

A horizontal bar labeled "Editor's choice" engages the reader by encouraging you to read through the "top pics" or watch videos. Below the editor's choices are 12 boxes that use a modular grid system. Pretty basic without any pictures. Hierarchy is implemented by breaking up the information by topic and links are given for each story.

Lupton III: Grid (Starter Post)

In the last section of the Lupton's "Thinking With Type" she describes grids and their importance to all forms of graphic design, whether they be print or web based.

"For graphic designers, grids are carefully honed intellectual devices, infused with ideology and ambition, and they are the inescapable mesh that filters at some level of resolution, nearly every system of writing and reproduction." (113)

Grids certainly do guide design, whether it is in the making or breaking of the grid. Magazines and newspapers thrive on a grid system in order to create consistent environments that are functional and reproducible. Some have challenged this layout. We'll at a few slides from David Carson in a few weeks (click name to watch a video) and his design for "Raygun" magazine from the 1990's and you'll see how he broke the grid. But even in breaking the grid a system of order is created, that although not traditional in a linear sense, still can feel very natural and organized.

Lupton goes on to discuss the power of grids in magazine and print design and the evolution of the grid in web design through tables and Cascading Style Sheets and the more free form environment afforded by the use of Flash. Which leads us to your objective, should you choose to accept it...

Find an example of a grid system being used in print or on the web. You can select from magazines, web sites or newspapers. Discuss the grid system in place. How well do the designs work within the boundaries, or even by breaking boundaries of the grid? Our minds are trained to see and be comfortable with order. We organize the second we look at anything because of those Gestalt principles and our craving for the whole. How does the grid in your example aid the reader or user? Does it engage them with its structure or lack thereof? Does it cause tension, either positive or negative?

Attach screen shots, links or images in order to help illustrate your example.

Screen capture on a MAC:
Apple Key + Shift + 3

Screen capture on a PC:
Hit the "Print Screen" button (usually found on the top right of the keyboard).