Since the dawn of time (or around 2600 BC if we are going to be accurate), humankind has been utilizing the grid structure to maintain order. No matter where you turn, the effects of the grid structure on modern society are easily discernible. The grid exists in our city structures, farms, buildings, games, newspapers and magazines, artwork, photographs, and of course, the internet.

The Indus Valley Civilization, located in Southeast Asia, is one of the earliest known civilizations to use the grid structure in the planning and design of its city. Artists to the likes of Leonardo DaVinci and Michelangelo used elaborate compositional grids to create their famous paintings like The Last Supper and the frescos in the Sistine Chapel. Artists and photographers to this day, use compositional elements such as the rule of thirds, the golden spiral, and full grid patterns to create works of art. Modern artists, such as Piet Mondrian with his painting Broadway Boogie Woogie, used only straight lines and patterns to create artistic representations of the grid structure. Other artists have decided to completely break the bounds of the grid, as seen in Jackson Pollock’s abstract expressionist paintings.

But What Does It Mean?

At this point, you may be wondering what this has to do with modern web design? The answer is quite simple… many modern websites utilize a grid structure in their design. According to the World Wide Web Consortium (W3C), “[the grid] provides a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors.” As the complexity of websites and use of different web browsing devices has increased, the grid has allowed websites to be more adaptable while maintaining functionality. As more devices of varying formats and sizes are released, adaptability is more important than ever. The grid has become the foundation of which make this possible.

A Fine Example

The grid design has become commonplace in store shopping websites. The ability to organize and highlight products in an adaptable format is essential to the shopping experience. One of my favorite shopping sites for ease of use and clean design is Target. The landing page of the website has a red header that matches the company’s branding, along with the notorious target icon in the upper-left corner. There is a simple navigation menu, with each category having a drop-down menu upon clicking. A search box is on the right side of the header, with “sign-in” and a “shopping cart” icon to the right corner. Directly below the store icon, is the currently selected store information, which opens to display the current store information and other stores nearby. There is additional links under the search bar, which are a gray font that matches the rest of the font in the product descriptions throughout the rest of the main page. There is hints of Target red used for product prices, buttons, icons, and backgrounds. There is an effective use of whitespace maintaining a clean design that matches the aesthetic of the physical target stores. Each category of products has a theme, ie: orange backgrounds for Halloween that is easily discernible in the navigation of the site. Every link underlines on hover, maintaining consistent and predictable navigation throughout the site. I truly feel that the Target site uses the grid design effectively and consistently, without being overly boring.

Breaking The Grid

When there is a trend that has become an established norm, you can always count on someone to “break the rules”. Like Jackson Pollock, web designers have found ways to break the grid structure, while maintaining an aesthetic that still makes sense and creates a pleasant user experience. In my research for this assignment, I came across the website for Skyline Films. At first glance, the website seems simple enough. The background appears to be an off-center grid structure on a dark theme. There is a navigation menu in the upper-right corner, and links in each of the other corners of the page. At the bottom-center of the page, I noticed text that states “Hold&Drag“. This is where the interactive experience begins, and the grid structure virtually disappears. As the user scrolls through the movie descriptions, floating text, images, and video clips glide across the screen. As you continue to scroll, images begin to get larger and smaller, text floats over the screen, often overlapping with the videos and images beneath, creating seemingly infinite layouts that stimulate the senses with an immersive 3D experience.

What Are They Thinking?

It has been a number of years since I have worked in the automotive parts industry, but I do shop for automobile parts online and physical stores rather often. I used to work for A&A Auto Stores, and the company was renowned for its unprecedented aftermarket performance parts availability. Originally founded by NHRA driver Joe Amato, the chain was known for having go-fast parts that you could get the same day at any of its stores. When accessing the company’s website, I am greeted with a bland design that shows none of the character or heritage the company was founded on. The site navigation is all over the place, and there is seemingly no design theme followed throughout the site. The background image is a gradient from dark gray at the top of the page, to light gray at the bottom with a small amount of white space at the sides for smaller screens. When maximized on larger screens, the background is solid white. The header and footer boxes are dark gray with light gray text. The navigation menu in the header is a cluster of text links. Two of the links underline on hover, while the remainder have a pointer change on hover. Each company-created sales banner uses a different font style, color, and size. Some fonts have a white outline on a white gradient background, making the text even more difficult to read. In another instance, there is bright yellow text on a bright red background. Even with all of the navigational and design issues on the website, the stores were known for their knowledgeable staff and customer service. When trying to locate a store or a phone number, I initially saw no mention of there even being physical store locations. To locate a store, I had to navigate to the footer of the website, in the third row of links to even find a store locator. If I was a new customer, I would have never known that this was a parts store chain and certainly would not visit one of the locations by visiting the website.

When used effectively, the grid makes it possible to create adaptable, organized content that can make for an enjoyable user experience. Depending on the content and user experience, it can be exciting to break the grid as well!