Uzoma's Blog

Introduction

In the now famous words of Paul Rand, “Design is relationships. Design is a relationship between form and content.” (Kroeger 2008 p. 18) This is a very simple but profound definition of design and a journey through the history of design shows that establishing and ordering that relationship have been at the core of a lot of the developmental strides taken in the generic field of design. In the drive for the continuous improvement, one of the manifestations of our pre-occupation with order has been the breakthrough and subsequent gradual improvement of the grid system.

This is also true of the web design discipline and over the years, the grid system has become one of the most notable tools in the toolbox of some of the best known professionals in the industry.

What is a Grid?

 “A design grid is a hidden system of guidelines, borders, and columns into which elements are placed and to which they are aligned. It’s a simple and surprisingly flexible system for providing a framework for the material being presented within a brochure, booklet, ad (singly or as part of a campaign) or throughout a website.” (Krause 2004 p. 93)

Grids have been in use for a very long time but the actual origin is not readily known. They however seem to have been the result of man’s incessant search for patterns and order. The likes of Vitruvius, Leonardo Fibonacci, and Leonardo da Vinci from bygone eras, were some of those who studied the order and proportional distribution of things in nature believing that an understanding of these would strengthen the creations of men. Their works, which include the Fibonacci Spiral and the Vitruvian Man, were inspired in large part by the science of their time and their observations of nature and these in turn have greatly influenced the development of modern art and design.

 

Figure 1.1 – A Fibonacci spiral and a cross section of the Chambared Nautilus’ spiral growth pattern. (Kimberly Elam 2001 p. 8)

Figure 1.2 – The Vitruvian Man drawing by Leonardo da Vinci, based on the correlations of ideal human proportions as described by the ancient Roman architect Vitruvius. (Leonardo da Vinci circa 1487)

Continuous improvement in the field of graphic design has led to the development of the modern grid system. The advent of the grid has been as much a solution for designers as it has been for the “consumers of design” because its primary purpose is to give order to a layout and bring visible demarcation between the different elements that make up a design therefore allowing for easy navigation through the well arranged “terrain”. Simply put, the grid gives clarity to the different structural elements of composition.

Solving these visual and organisational problems is a major part of what a designer does and the grid system is a very handy tool that helps to facilitate this.

Anatomy of a Grid

A grid is made up of clearly defined guides which are relative alignment parameters for distributing elements across a format. Every grid is closely related in composition and made up of basically the same parts, irrespective of the grid complexity.

 

Figure 2 – Anatomy of a grid.

The following definition of terminologies have been gleaned by combining outlines from literature written by Timothy Samara and Khoi Vinh who are both esteemed graphic designers.

A unit is the smallest vertical division of the page and is measured in width. The units on a grid are usually all of the same size. Calling it a vertical unit is just for extra clarity as some others have defined the unit in different terms. In general, we want to create units in multiples of three or four. Twelve is ideal, because it’s a multiple of three and four. A unit is usually too narrow to house textual content and you may need to combine two or more units to form a column, but that is purely dependent on the width of the unit which in itself is dependent on the designer.

A column is a group of units combined together to create a workable area for the presentation of content. Most text columns require two or more units to function properly. However, depending on the width of a unit, a single unit may be wide enough to be considered a column. The number and the size of columns on a grid are relative, completely dependent on the designer’s preference.

The baseline is the invisible line on which letter forms rest.

Flowlines are alignments that break the space into horizontal bands. The flowlines are actually the lines bordering the horizontal gutters.

Modules are individual units of space separated by regular intervals that, when repeated across the page format, create columns and rows. A module usually has the baseline running through it.

Spatial zones are groups of modules that form distinct fields. Each field can be assigned a specific display role in the layout of a page.

Gutters are the empty spaces between vertical units, columns, and module high rows. When columns include multiple units and spatial zones include multiple modules, the gutters in between are incorporated as part of the column or region. Traditional grids usually have the gutter as half the width of the margin.

Margins are the whitespaces (negative spaces) bordering the grid. They are traditionally twice the size of gutters.

Designing with Grids

Different grid types have been used in the past for different design purposes such as portraiture, poster design, magazine and newspaper design, user interfaces, web design, etc. The successful use of manuscript grids, baseline grids, column grids, etc. in print design was determined by the type of project and this should also apply to how grids are used in web design.

“Because web design is all about communicating visual information, understanding that people will see our designs in terms of relationships is crucial to becoming a more effective designer.” (Brandon Jones 2011) And because the grid system does a great job of facilitating element placements on the page, it has become an invaluable tool in the web design process, one any web design professional would do well to use.

The different grid systems (types) available right now make it very inaccurate for anyone to even suggest that grids make the work of creatives a bit predictable and boring. Predictable, yes; but this is so only within the context of a single, particular website. A level of predictability is often desirable or even “required” for a satisfactory user experience.

“Consistency and predictability are essential attributes of any well-designed information system. The design grids that underlie most well-designed paper publications are equally necessary in designing electronic documents and online publications, where the spatial relations among on-screen elements are constantly shifting in response to the user’s input and system activity. When used inappropriately or inconsistently, the typographic controls and graphics of web pages can create a confusing visual jumble, without apparent hierarchy of importance. Haphazardly mixed graphics and text decrease usability and legibility, just as they do in paper pages. A balanced and consistently implemented design scheme will increase users’ confidence in your site.” (Lynch and Horton 2008 p. 198)

 

Figure 3 — Even when the page grid is solid, good design depends on creating a hierarchy of contrast and viewer attention, so that a few focal areas of the page become entry points and the other page materials are clearly secondary. Without contrast management the design can look like many random elements competing for the reader’s attention. (Lynch and Horton 2008 p. 200)

A grid is not a strait jacket approach to design where everything must align to a rigid order without any possibility of “straying” from the established order. No. But while a grid does not enforce symmetry in its strictest form, it helps maintain harmony on the “canvas,” a harmony that is derived through the regularity of proportions. “Creating a structure of importance using size, shape and color is what gives a page impact and legibility to the reader.” (John O’Nolan 2010)

Words like mechanical, rigid, restrictive, predictable, etc. have all been used by different people to describe the negativity of the grid system. They say a grid retards the creativity and flexibility of a designer. Though popular in some quarters, this view can easily be shown up as erroneous by the simple diagram and quote below.

 

Figure 4 – From Paul Rand: conversations with students.

“The idea of the grid is that it gives you a system of order and still gives you plenty of variety. It is up to you when you want to switch…Sometimes you do this. Sometimes you do this. And you go on from there, you know this becomes this, then it becomes this. But the grid never changes. It is always the interior that changes.” Paul Rand (Kroeger 2008 p. 27)

Advantages of working with a grid system

1. Working with a grid system speeds up your workflow, making it fast and easy to achieve Positional Accuracy. Aligning elements on a “canvas” is almost taken for granted because of how easy it is to get it right with a grid.
2. By following a grid system, positional contrast is easier to achieve especially when all the content is known and readily available.
3. Grids make it easier to update a website with new content while maintaining consistency with the original plan or vision of a site.
4. With a grid, visual hierarchy is easier to implement as it becomes clearer which area of the grid will carry a stronger impact.
5. When the same grid runs on all the pages, the consistency with the placement of common elements makes for a more intuitive user experience.

User Experience Implications

The human mind always attempts to find a pattern and system of logic in everything, including visual design. Consistency is a key factor that helps a design achieve this with its users. Since a grid is a consistent system for element placements, “sophisticated layout structures offer more flexibility and enhance the visual experience of visitors. In fact, users can easier follow the consistency of the page (or site), while developers can update the layout in a well thought-out, consistent way.” (Vitaly Friedman 2007)

Closely related to this and loosely based on the Gestalt Principle of Closure, the user can better relate with well-planned white spaces since the invisible but definite grid framework is planted in the user’s sub consciousness.  Also, people have a priori understanding of how things work or at least an opinion of how it should work and many times, the best designs take these preconceptions into consideration and a well formed grid system is largely based upon this. With a grid that is well formed and implemented, users will easily perceive importance due to positional contrast and visual hierarchy.

Analyses

I have chosen a couple of conference sites to analyse their use of grids starting with the Build Conference 2011 site.

Build Conference

An Event Apart

Figure 6.1 – Index page of aneventapart.com

Home Page

The An Event Apart website appears to have employed an 8 unit grid. In the branding region of the page, the logo occupies the first column which is comprised of 2 units. The main menu items are placed after that being arranged loosely at 1 menu item per unit. The date, location, and call-to-action are place right next to each other at the bottom of the header image without necessarily attempting to follow the grid. The images detailing the different conference location and schedule details have been placed within a 4 column grid of 2 units per column. The small outward-pointing arrow on the right edge of that section tells us that there are even more location images available to be seen on the page. When these other images appear on the page, they stay aligned to the same 4 column grid as we see now.

Below these there are the gist about the An Event Apart Conference, An Event Apart News, and sponsorship credits. These are arranged into 3 columns of 3, 3, and 2 unit widths respectively.

The footer, which remains consistent on all pages, is basically made up of 2 columns of 2 and six units respectively.

Figure 6.2 – About page of aneventapart.com

About Page

The About page is not much different. The logo and the menu remain the same but the header image is different. The placements of the header image, along with the body of text directly below it, form a single 6 unit column. Below these, more gist about the conference and the conference hosts are arranged in 2 columns of 3 units each. The last 2 units on the right form a single column running downward from right under the navigation and this houses a quote from a conference attendee, the mailing list invitation, and the logos of associates and sponsors.

Figure 6.3 – Registration page of aneventapart.com

Registration Page

The registration page has a much different arrangement, having just 2 columns. The first column follows the 2 units housing the logo all the way down to the footer and contains only whitespace below the logo. The remaining 6 units form the second column containing information about all the conferences in the different locations along with information on savings and invitations to register (order a registration).

The grid used on the site is a very simple one and the implementation on different pages shows a willingness to be flexible without disrupting the consistency of the site. In my opinion, this is a very functional approach to designing with grids.

Conclusion

Generally, working with grids should be determined by purpose. All grids are functional but not all grids will function properly for every project. Part of the duty of the designer is to determine which grid will work for each project and how best to implement it.

The development and the implementation of grid systems such as Less Framework is a clear demonstration of the purpose of grids throughout the ages, which is problem solving. As technologies continue to evolve, more grid frameworks will probably be birthed to solve the problems that will be associated with them. The designers that will succeed are those who will learn to use grids, not as a rigid prison but as a well laid out playground where fun can be had and noteworthy moments can be experienced.

References

1. Michael Kroeger – Paul Rand: Conversations with Students (2008) Princeton Architectural Press
2. Jim Krause – Design Basics Index (2004)  David and Charles
3. Kimberly Elam – Geometry of Design: Studies in Proportion and Composition (2001) Princeton Architectural Press
4. Timothy Samara – Design Elements: A Graphic Style Manual; Understanding the Rules and Knowing When to Break Them (2007) Rockport Publishers, Inc.
5. Khoi Vinh – Ordering Disorder: Grid Principles for Web Design (2011) New Riders
6. Brandon Jones – Understanding Visual Hierarchy in Web Design (2011)
7. Patrick J. Lynch and Sarah Horton – Web Style Guide: Basic Design Principles for Creating Web Sites (2008) Yale University
8. John O’Nolan – Fully Understanding Contrast in Design (2010)
9. Vitaly Friedman – Designing With Grid-Based Approach (2007)
10. The Gestalt Principles