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.

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.