Grid Introduction for UX Designers

Glacier Bay Park

On the fourth night of our Alaskan cruise, I received a welcome surprise by our cabin door: a US National Park Service (NPS) map. We were about to sail into Glacier Bay National Park the following day and the map was to serve as a preview. Despite having never been on a cruise, much less traveling in Alaska, there was something familiar and comforting in this brochure.

As much as it was a look forward, it was also a look backward – a reminder of my other visits to US National Parks. All of their publications follow a specific visual design pattern: the Unigrid. At the simplest level, most people may recognize the black bar running across the top with bold white lettering. However, the structure runs deeper than that. There is a systematic placement of information along a set of guides that creates an orderly appearance and drives consistency.

A grid is something that my engineering and science-driven mindset can relate-to. I may not have the artistic skills of a graphic designer, but I can align things to a set of imaginary lines! Any time design can be reduced to math, I’m all-in. If you are in the same “boat” or would like to learn more, read on.

Example Unigrid Brochures

The Unigrid

In 1977, designer Massimo Vignelli created the “Unigrid system.” Since then, this has been the basis for most publications published by the NPS in collaboration with their Harpers Ferry Center. The two most commonly cited reasons for the development of the Unigrid are:

1) Identification. Prior to 1977, there was a hodgepodge of various design efforts. Each park would have a different look-and-feel for its maps. The Unigrid brought consistency and helps visitors have that pleasurable sense of deja-vu I experienced.

2) Cost Savings. That hodgepodge drove independent design activities and a recreation of the wheel each time. Coupled with the cost of printing and paper, there was a desire to create more efficiency in this process.

The book Typographic Design: Form and Communication describes many of the specific components of the Unigrid system, such as:

  • Size: Originally based on a paper size of 965 x 1270mm
  • Folds: Resulting in 12 individual panels
  • Grid modules: 12 columns with specific spacing
  • Font: Helvetica, with specific sizes corresponding to different information elements
  • Band: The large black bar which covers the full top on both sides.

These items and more highlight the fact that the Unigrid is more than just a grid, but a whole system of elements that must work together. Mullet and Sano’s book Designing Visual Interfaces (out-of-print, but great reference for UI visual design), call this a Program. They add: “Programs are based on repeated sizes and proportions (module) or upon forms and ideas (theme) that bring regularity and structure to the user experience. The controlled variation seen in a well-designed program provides the flexibility needed for innovation while maintaining the integrity of a coherent aesthetic experience.”

While the visual design is the topic of this article, UX designers will be interested to learn the process used to create the brochure content follows many of our best practices. For reference, the NPS has published a report explaining the redesign of the same Glacier Bay map I received.

Their design team began by spending time aboard a cruise ship and speaking with park rangers to learn about their experiences. They observed typical passengers are older and would need larger type. They also brought a prototype/draft map and sought feedback during development. The final product was crafted to ensure the “information density balances the need to keep the map as uncluttered as possible.” Their map did not even need a legend because they picked color schemes that readers “intuitively associate” with the terrain seen around them.

NPS Digital Offerings

Perhaps the most impressive fact is the longevity of the Unigrid. It remains still relevant today almost 36 years after its creation (as of this writing). Of course, it is still in use in the printed publications. And now, there are elements of it recognizable in digital products. On the NPS web sites and mobile apps, you can see the familiar black bar in use as well as some of the typography.

Grid Benefits

At my first job after graduation, I was fortunate to be teamed up with a talented graphic designer. Initially, I would create a mock-up of a software user interface and send it to him to review. He would point out that some of my widgets were not aligned perfectly – about a pixel off. “How are you seeing that?!?” I would question. But, after he went through and did some fine-tuning, the UI just felt… better.

My human factors education had failed me. The human eye is perfectly capable of resolving a pixel difference in alignment on most screens. That iOS Grid Alignmentmisalignment may not be actively noticed when the user is occupied with their task. Regardless, the brain subconsciously senses the overall gestalt of the image.

I previously wrote about the importance of cleanliness in visual design. Your brain is making snap judgements in fractions of a second. A design that does not seem attractive and well-put-together can make a product or site seem less usable and less trustworthy. I believe this is an important lesson not just for the UI’s we create, but all professional material like reports or presentations.

Grid Usage (Oversimplified!)

Obviously, I am not suggesting the use of the Unigrid for your projects. But, I do want to provide a few ideas – again for the engineers and scientists in the audience who may be unfamiliar with the topic.

Step 1: Get One.

My hope is that you are fortunate enough to work with a visual designer and can leverage their grid system as a starting point. If not, you may be able to find one with a simple Google search, especially systems for web design projects. The 960 Grid System is very popular, and is based on a page Grid Over This Blogwidth of … wait for it … 960 pixels. Most have templates that you can download and use in your favorite toolkit like Photoshop.

I discovered that the framework I purchased for this blog utilizes the freely available 978 Grid System. It contains 12 columns that are 54 pixels wide with a 30 pixel gutter/gap between them. This information was a great help when creating graphics for the page. I try to make all of my images span the exact width of multiple columns (i.e., small images span two columns and are 54+54+30 = 138 pixels wide) for an orderly appearance.

If you wish to create your own, there are resources available. Articles written by Andrew Maher or Mark Boulton provide clear introductions. For print or report designs, even without a thorough understanding of the theory, you could probably get yourself 80% of the way there by 5 Column Gridplacing guidelines at equally spaced intervals with small gutters/gaps between them. However, accessing this feature is somewhat buried in the latest PowerPoint version (from the Home, select the Arrange, then Align, then Grid Settings and enable “Drawing guides on the screen).

Step 2: Use One.

The advantage of available grid systems for the web is that they come with CSS that makes it easy for developers. For example, there are tools that will automatically output a CSS file after simply dialing in the grid dimensions you prefer.

From a design standpoint, I see three common-sense tips to use when working with the grid:

1) Align text to a column edge. The Non-Designer’s Design Book suggests, “nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page … Even when elements are physically separated from each other, if they are aligned there is an invisible line that connects them, both in your eye and in your mind.” The grid helps you create that invisible line.

You have flexibility whether to use left or right alignment. The important thing is that there is consistency with some other element. If you are designing a web form with associated labels and fields, there are many published reports and form guidelines which can help you decide which alignment best meets the needs of your user.

Lastly, be careful when using some tools like PowerPoint. Sometimes individual text boxes have an internal margin. This will push the text away from your guideline. The easiest solution is to set the internal margin to zero and align the textbox exactly on the grid.

2) Stretch or crop images to exactly fill columns. Again, after spending time with visual designers, I noticed they used this trick often. Because images are typically solid objects, they carry a lot of visual weight and really help create that invisible grid for the user.

The goal here, as I implied above, is to fill the column(s) from edge-to-edge. The image may span one or multiple columns. In order to do this, you may need to find a different cropping of the image or stretch it slightly so that it fits the space allocated within your grids.

Grid Alignment Examples

3) Use the same grid on each page. This is the key to achieving the two main benefits of the grid system. First, reusing the same grid is a time-savings – it prevents you from having to recreate a completely new layout on each page. Second, it helps build consistency and constancy. Similar objects (like menus, etc) will always be in the same location. And, objects will not appear to “jump” around between pages.

Across multiple pages, you should also consider using consistent objects within the grid sections – thus creating the system or program. For example, on web design, it is very common to always place the menu or navigation in the same area. The formatting of those objects should also remain the same. You would want the body text, headings, or captions to each have their own font size or style. CSS easily enables this on web design.

Further Reading

The web is full of resources to help further understand grid systems.
SmashingMagazine provides a great collection of many articles on the topic.
Tutorial9 gives step-by-step instructions on using Photoshop and the 960 grid.
SixRevisions has a great introduction to both grid use and leveraging CSS.

Thanks for Visiting

NPS Ranger BoatFirst, thank you for visiting this page, I hope you found it interesting. Second, I wish to send my thanks to the NPS Park Rangers for visiting our cruise ship in what I find a most unusual commute. Upon entry into Glacier Bay, a group will take a small boat from their park station and travel alongside the larger vessel at eight knots then, the designated rangers will climb a rope ladder and enter through a cargo hatch. After a day spent with passengers, they depart reversing the same method. I don’t know whether to be scared for them or jealous.

Comments (5) Add yours ↓
  1. Carlo

    Hi there,
    you might want to check also http://www.thegoldengrid.com for a complete grid that addresses vertical alignment too.

    Carlo

    February 18, 2013 Reply
    • Brandon Satanek

      Carlo, thanks, that’s a good reference. I’m fascinated by the fact “thegoldengrid” seems to be built off of the golden ratio/section. Anytime math and aesthetics are linked, I get really curious to learn more. I often hear conflicting reports whether people actually perceive ‘golden’ proportions truly as more attractive. When studied empirically, researchers had difficulty proving the effect – of course, maybe the experiments were flawed. Of course, it is hard to disprove the fact that golden proportions often show up in nature and art.

      February 18, 2013 Reply
      • Terry

        I read this post with fascination about the grid since I have been obsessed about aligning elements in the digital space for most of my career. I liked it when you said that anything that can be linked to math is of interest to you because of your engineering background. I enjoyed your posts about UX in general. Thank you.

        March 28, 2013 Reply
        • Brandon Satanek

          Hi Terry. Thank you so much for your kind feedback – that’s a nice way to end the week! Good luck with your alignment obsession :-)

          March 28, 2013 Reply

Your Comment