The Grid is Not Your Enemy

Some of our readers know already that we had a little incident this month where a post went viral and crashed our server. (Though many readers thought the message that appeared on our site for two days, “403 Forbidden: You don’t have permission to access / on this server,” was Shea’s finest work yet.) My one-post suspension imposed by the IBD commissioner is over, so it’s time to move on.

One of the promises we made to our new web host—ServInt Managed Hosting Services—was that our next few posts would get practically no hits at all. So this week I’m writing about the grid!

Friend of IBD Kelly Farrell recently sent me an email with the subject, “This page has a problem.” The body of the message contained only this link: www.thegridsystem.org. Any time Kelly sends me a link, even if it looks like spam, I know it’s going to be fun. I clicked right away.

I realized quickly that Kelly felt that the site’s problem might be that it was a little rigid, for lack of a better word. Arranged in a strict grid, the page contained many, many links to articles and resources related to—you guessed it—using grids in graphic design. (No mention of baseball, so far as I could tell.) At the top of the page was this quote from famed 20th-century Swiss typographer Josef Müller-Brockmann:

The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.

I was smitten.

Good graphic design requires restraint in terms of choosing a specific color palette or a limited number of typefaces within a composition or system. It also requires a system to guide where and how to place design elements. Using a grid is where it can be hardest for beginning designers to restrict themselves.

Whenever a new designer asks us to review a project, almost always, the first thing that jumps out is a lack of an underlying structure. (Also clip art.) In all of our training, writing, and relationship-advice call-in radio shows, we encourage designers to use a grid to guide placement of type and images.

Some people react against the idea of a grid because it sounds like what the IRS might use to create tax forms. If you’re one of those people, you can call it by its much sexier name, The International Typographic Style. With a name like that, you can bet that if James Bond were a typographer, he’d use it.

We discuss the grid in Interpretation By Design (the book)—complete with a nifty diagram of how to create one on pages 50 and 51. But the classic text on the subject is Müller-Brockmann’s 1961 Grid Systems in Graphic Design, which features the book’s grid right on the cover of the book. (Someone should steal that idea.)

There are other systems and philosophies that guide composition, but we encourage new designers to use the grid because of its visual cleanliness and relative ease of use. (You can start with a simple grid and work your way up to creating more complicated, versatile ones.) The grid reduces visual clutter and helps create hierarchy, but it can also be used creatively to create dynamic compositions.

Müller-Brockmann was well-know for his concert posters for Zurich’s Tonhalle Orchestra (among much else). He created dynamic compositions not only within the context of a grid, but using the same grid for each one. You can see by looking at the posters above side by side how “beethoven” on the left falls on the same horizontal axis as “der Film” on the right. If you were to lay these posters on top of one another, you would see that the small type on each poster falls on the same vertical axis.

This is the same sort of system we recommend for series of exhibits or panels at interpretive sites. Using the same grid throughout a series of related compositions creates a visual consistency that ties them together, whether it’s five panels along a trail, a multiple-page publication, a series of publications, or a family of websites.

I admit, the word grid does not conjure up positive associations. It sounds rigid and uncreative, the designer’s logical Mr. Spock to the artist’s dreamy Captain Kirk. And when it’s enforced to its extreme, it makes Kelly Farrell send us links to websites that make designers look anal-retentive.

So don’t think of the grid as a grid—restrictive, severe, constricting. Think of it as a framework, the steel structure that supports the architecture of your composition. Or think of it simply as a system, a way to bring order to chaos. To paraphrase Josef Müller-Brockmann, think of it as an aid that will help you flesh out your personal design style.

So the next time you’re designing a publication, exhibit, website, or even some sort of flowchart, I hope you’ll use a grid to guide your composition. It may even land you on Katie Couric’s Twitter page.

Good Flag, Bad Flag

I recently received a 1,019-word email from Friend of IBD Howard Aprill on the subject of flag design. Howard does this sort of thing because he blames us for the fact that he now notices design stuff and reads blogs, and he wants to get back at us for wasting his time.

I received Howard’s email about a month ago and I just finished reading it, so I thought I’d share parts of it with you. Evidently, Howard stumbled across a website for the North American Vexillological Association (NAVA), which I was disappointed to learn has nothing to do with making people angry. Turns out, according to the organization’s website, vexillology is “the scientific and scholarly study of flag history and symbolism.”

NAVA’s website (which, ironically, is a jumbled mess, full of boxes and centered type) links to a pdf of a brochure called “Good Flag, Bad Flag: How to Design a Great Flag.” The brochure contains this sage advice, with Howard’s comments in parentheses:

  1. Keep it simple. (Duh.)
  2. Use meaningful symbolism. (Double duh.)
  3. Use 2–3 basic colors. (Makes sense to me but I’m interested in your thoughts on this.)
  4. No lettering or seals. (Apparently this is the Comic Sans equivalent of the flag world.)
  5. Be distinctive or be related.

.
These points are consistent with the advice graphic designers and interpreters offer—essentially, keep it clean, use a defined color palette, and above all be meaningful. (Though I would argue, related to point #4, that it would be okay for an organization devoted to the conservation and understanding of sea mammals to use a seal in its design.)

Even better than NAVA’s five design principles, NAVA’s website features a link to the results of a 2004 survey that ranks the design of flags from 150 U.S. cities. The ratings go from #1, Washington, DC (on the left, above) to #150, Pocatello, Idaho, where they are as proud of their mountains as they are their Microsoft WordArt.

Howard’s hometown of Milwaukee ranks 147th on the list. While he recognizes that the flag, designed in the 1950s, violates all stated and most unwritten rules of design (and a couple international laws related to the Geneva Convention), Howard offers this impassioned defense:

I think it’s a time capsule that captures the essence of post World War II Milwaukee. You notice that it’s busy filled with LOTS of things. Well that’s how folks felt about their town. The gear represents industry (at one time we actually MADE things in this town), the Native American head represents our original inhabitants, the ship represents the busy port, the golden barley stalk on the left represents our beer brewing industry. It even features the old County Stadium for the Milwaukee Braves. You have to understand, the Braves moved here from Boston in 1953 and this town was INSANELY proud to get a big league team.

I told Howard that I hope Milwaukee gets a big-league baseball team again some day.

The NAVA flag brochure says, “All rules have exceptions…but depart from these five principles only with caution and purpose.” The brochure holds up the Colorado state flag (pictured at the top of the post) as an example of a successful departure. It violates the rule of not using type in a flag, but does so elegantly and simply. I’d say that while the folks in Milwaukee departed from the rules with purpose, they also did so with reckless abandon.

Ultimately, flag design and interpretive design have a lot in common, in that they strive to be impactful, accessible, and meaningful. Because he makes the point far better than I could, I leave you with this thought from Howard:

In my opinion the challenges and components of flag design are very related to what we do in interpretation—trying to give relevance and meaning, building connections, tangibles (a piece of cloth) vs. intangibles (love of country, sacrifice, etc). We’ve all seen good flags and bad flags, just like we’ve all seen good interpretive panels and bad interpretive panels. I dare say there are things we can take away from the study of vexillology and apply to interpretation.

A Moment, Captured

The top four moments in my life—and I am careful not to rank these in any particular order—are my wedding day, the birth of each of my two children, and the final pitch of the 2008 World Series. For each of these moments, there is an emblematic photograph—an official wedding portrait by a river in the Colorado mountains almost 10 years ago, hospital-sanctioned portraits of the grotesque, misshapen heads of my newborn children (they’re much cuter now), and Phillies pitcher Brad Lidge on his knees at Citizen’s Bank Park in Philadelphia with his hands raised to the heavens as a city celebrates around him.

Really good photographs are like interpretive presentations. They capture our interest, tell an engaging story, and invite us to investigate further. My Japanese friend Masanori Shintani recently shared the above photograph of his daughter Aina with me. At first, it looked like a nice vacation photo, and the idyllic location—El Nido beach in the Philippines—is certainly somewhere I’d like to go. My interest was captured by the composition—the rule of thirds has been used effectively, the calming blue-green color palette is punctuated with bright warm colors—and the story it tells, of a gleeful child running along the beach, is uplifting. But it was the further investigation that turned the meaning of this image on its head (so to speak).

You don’t have to look long before you realize that there’s a rope that attaches the small blue and white boat in the image to some unseen anchor on the shore. Aina, running at full speed, has cleared the rope with her right foot, but her left foot is planted perilously in the sand underneath it. The way Masa tells the story, a split second after this photograph was taken, his daughter face-planted in the sand. (He laments not having an “after” picture, but his daddy mode kicked in and he ran to tend to his daughter.)

Suddenly, as I was looking at it, this image went from being a nice vacation photo to being packed with the energy of the moment to come. It stands on the razor-thin precipice between the glee of a playing child and the thump of a face on wet sand. It’s filled with conflict—you can practically feel the tropical breeze and the lulling motion of the anchored boats, but there’s a visceral reaction to the realization that this happy moment will end with a wet slap.

The real power of the image isn’t revealed until you discover the story behind it.

Unfortunately, photography can be used to disguise truths rather than reveal them. A story on CNN, ‘The sexy lady’ and other hotel photo tricks, shows how hotels use unscrupulous photography (and Photoshop) techniques and unrealistic-looking models to lure travelers. For some reason, I am on the email list for the Luxor hotel in Las Vegas, which uses the attractive model technique to advertise its pool. My own experience is that the Luxor pool feels more like a Tony Siragusa family reunion than the natural habitat for exotic models.

I am usually distrustful of photographs, if for no other reason than that people tell me that I look like Clay Aiken in my photo on the back of IBD (the book), and I know for a fact that I look like a cross between Ted Koppel and Howdy Doody. (Besides, I look nothing like Clay Aiken; he’s wearing a suit, and he parts his hair on the other side of his head.)

However, photographs can be powerful interpretive tools, used to create impact and emotional connections. And like all forms of communication, any photograph that draws viewers in and communicates on multiple levels, as the photo of Aina above did with me, can be considered successful.

Just be sure you’re using photography for good rather than evil.

Vampires, Ducks, and Free Food

I try to break out of my comfort zones from time to time. I have never been a fan of horror movies because they are scary. For the longest time I was under the impression that my wife shared that same opinion. Some time ago when she became enthralled with the Twilight series of books (that were later turned into movies) about vampires and werewolves, I was surprised. Just to display my love for her (and to display that I’m not afraid of my own shadow) I decided that I would show her that I was interested in something that she was interested in and break out of my comfort zone about scary movies.

Yes, I now have seen all three of the Twilight movies and now know they are less about scary vampires and werewolves and much more about guys who sparkle in the sunlight. While watching these movies (trying to find the positives and doing anything to distract me from the bad acting) I found myself listening for non-native bird calls (used as background noises) and focusing on the beautiful landscape of the Pacific Northwest, the setting of the books/movies. There is something special about Oregon and Washington. The movies also remind me of living in Idaho and leave me hoping for a return trip to those areas (regardless of the recent inhabitants of men without shirts).

The University of Oregon has been in the sports spotlight over the last few weeks as well. The Ducks faced the University of Auburn Tigers in the NCAA National Championship (which is a ridiculous title for a meaningless end to a sport, but that rant is for another post). Since baseball has yet to start, I watched the football game. I knew Auburn would win so I pulled for the underdogs in what was a great game. While watching the game I couldn’t ignore the new color palette used in the uniforms of the Ducks.

For several years Oregon has been breaking comfort zones and tradition in the realm of collegiate football uniforms and now their new area’s basketball court. In every single game this season the Ducks had a different uniform. The highlighter yellow socks and shoes in the national championship game were simply distracting.

According to GoDucks.com, “All told, Oregon will have 80 different combinations (jersey/pant/helmet) at their disposal.”  The uniforms do feature the latest technology offered by Nike that avoid collecting moisture, are lighter, and work with specific pieces of well-designed pads.

Clark/AP Image

The basketball Ducks have a new arena and basketball court. Keeping the tradition of breaking the mold their court is like none other. In this instance the designers took inspiration from the Pacific Northwest’s landscape and replicated the dense forest on the court itself. I like the idea but the application is strange. At the very least this court takes pressure off of Boise State University’s “Smurf turf” (a blue and orange, artificial turf football field and the most distracting sports related field/court). Again Nike, was deeply connected with the arena and court design.

In an article in the New York Daily News, Seth Davis (CBS college basketball analyst) was quoted saying “I frankly do not understand why a school of Oregon’s caliber thought it necessary to design a court that is so garish, to me it means they don’t think they are good enough to get our attention by winning basketball games, do they need another gimmick.” I couldn’t agree more.

There is something to say about tradition as well as new technology or ideas in this court (sorry, pun intended) as well as the field of interpretation (again apology, intended). To me this is the equivalent of the free food offer to get visitors to programs. Don’t get me wrong, food can be an effective tool in programming but shouldn’t cheapen the real product you are offering. I’m not sure at what point you do something for change itself, to be shocking, or sell jerseys, that you sacrifice credibility of your product (even if you are in the national championship game). If no one takes you seriously, how effective are you at getting your intended message out.

Yes, I know there are two more Twilight movies to come and I can’t wait (to spend the time with my wife).

Accepting Limitations

My wife Sheila usually reads these posts before they go live. She always makes some useful comment along the lines of, “People actually read this?” or “Why would somebody read this?” (I’m paraphrasing. Sheila uses a lot of profanity, so quoting her directly in a professional blog is nearly impossible.) She read the post below and summed it up with, “When I read it a second time and skipped over all of the [expletive deleted] baseball stuff, I [expletive deleted] liked it.”

So, in order to make this post accessible to the baseball-impaired, I have set all comments related to baseball in red. If you are like my wife (potty mouth!), then you’ll want to skip those parts. If, like most of our readers, you are here exclusively for comments about baseball, then you’ll want to read only those parts. Here goes:

I try to be a fun guy. I socialize. I tell stupid jokes. I play softball. But at two recent Interpretation By Design workshops for interpreters new to graphic design, I found myself saying something that makes me feel like a boring curmudgeon: “Stop centering everything!” Okay, that actually wasn’t it. Here’s what I really said:

Being a good graphic designer means restricting yourself. (Not physically, of course. That would make it hard to work the mouse.)

Sometimes accepting limitations means accepting that you don’t have the skills or ability to do something—like an American League manager trying to manage a baseball game in a National League park (“What is this bunt thing people keep talking about? You mean my players have to play offense and defense?”). That’s not what I’m talking about. And I don’t mean restrictions like the countless obstacles to me becoming People magazine’s sexiest man alive in 2011.

I’m thinking about limitations as a positive—the decisions designers make to reduce visual clutter.

One of the most important things to learn about graphic design is how and why to impose restrictions on the decision-making process. Much like interpreters have to learn not to tell visitors everything they know about a certain subject in a half-hour program, designers have to learn not to use every font in the pull-down menu or every color in the color wheel. Only after learning how to impose these limitations on their work can designers learn to effectively break the rules. (Like an American League manager trying to make a double switch: They don’t have to do it, but they should at least know what it is.)

Two weeks ago, Friend of IBD Uber IBD Reader Jeff Miller, CIT, CIG, asked in a comment what we considered the five most successful logos ever. While I didn’t answer the question exactly, I responded that the most successful logos are so simple they seem obvious. The Nike swoosh springs to mind, and Coca-Cola’s white script on a red background fizzes in my brain. Many other examples of great visual communication are extremely simple. The classic, self-effacing Volkswagen Beetle ads from the 1960s and ’70s (like the one pictured at the top of this post) made use of a consistent, uncomplicated composition and plenty of white space. Saul Bass’s iconic movie title sequences (like the one for Psycho above) feature lineart imagery and simple color palettes.

These simple designs did not happen by accident, and creating them was not easy. (You know what is easy? Handing an American League umpire a lineup of 10 guys, then hitting the buffet in the locker room for five hours while your baseball team plays a game that barely even needs a manager.) The examples above are all instances where designers committed to a set of restrictions in the name of establishing a consistent look and an identity. To create powerful yet simple visual communication like the examples mentioned above requires an understanding of nuance and detail—much like managing a National League baseball team.

For interpreters, design decisions should reinforce the interpretive themes of your site or organization. Is your typeface classical or modern? And how does that relate to your theme? Are you using photos or illustrations? Is your color palette bold or subtle? And when you put it all together, are your most important visual elements—that top level of visual hierarchy—the ones that really drive the message home?

One of my favorite authors, Douglas Adams, once said, “Writing is easy. You only need to stare at a piece of blank paper until your forehead bleeds.” Well, graphic design might be the opposite. Sometimes, once you get everything on the page, the hard part starts—deciding what should stay and what should go. And the first things to go (aside from the designated hitter rule) should be those elements that violate the limitations you set up when you started the design process.

Wordle Word Clouds: So This Is Fun

Last week, NAI Executive Director Tim Merriman came into my office and said, “Paul, come here.” In my mind, this conversation almost always ends with, “You’ve screwed up one too many times and now you’re fired.” In reality, Tim hardly ever fires me. In this particular instance, he wanted to show me a website he had learned about called Wordle.

Wordle generates word clouds based on text that the user enters. Tim was impressed with the potential use this tool has for social marketing or qualitative research, whereas my thought was, “Neat!” (Note added October 15, 2010: Tim wrote a serious, grown-up post about word clouds on the NAI Blog.)

After learning about the site from Tim, I went to Wordle and entered all of the text from my September 21, 2009, post about the Phillies typeface, Scriptwurst. The reason I chose this post is that roughly 98 percent of the hits we get on this site are from people looking to download the Phillies font Scriptwurst, which they cannot do because it’s custom designed and proprietary. But every time I write “Phillies font” or “download Scriptwurst,” we’re likely to get a few more hits, and we’re obsessed with numbers so I’ll try to do that a few more times.

Wordle allows users to select from a handful of fonts (most of which I had never heard of) and control settings related to orientation, composition, and color. The example above uses the typeface Powell Antique, a color palette called Heat, and a typographic orientation of mixed horizontal and vertical. You’ll notice that the largest words are those repeated most often in the post, namely “Phillies typeface.” (Hello Google searchers!)

This composition is set in the typeface Loved By the King in a color palette called Milk Paints. The composition mode is set to “Any Which Way.” Given my aversion to handwriting fonts and my affection for the grid, it was difficult for me, emotionally, to include the above in this post. But notice the way the words “Phillies Typeface Scriptwurst” jump out. (Cha-ching!)

This one is set entirely horizontally in the typeface Vigo and the color palette Kindled.

And finally, this one is set in the typeface ChunkFive with a color palette called Organic Carrot. I notice as I write this that naming typefaces and color palettes can be a little like naming indie bands—the weirder the better.

There are limitations to Wordle. For instance, you cannot tweak the word list once you’ve created a cloud that you like, nor can you force the word cloud to fill a specific shape. However, you can create custom color palettes, and most importantly, you can create a vector-based pdf of your word cloud, which can be edited in a program like Adobe Illustrator. (To do this, click the print button, then print to a pdf.) The advantage to this is not only that you can use the pdf for high-end printing purposes, but you can also edit it or use it as part of a larger composition. You could even tweak your word cloud to include multiple typefaces—like the Philles typeface Scriptwurst, if you can find a place to download it.

Also, the site states explicitly that any composition you create is yours and can be used for any purpose, so if you’re creating T-shirts or posters or other sales items, there’s no need to worry about copyright issues.

I recently became aware that a post I wrote last November about an online color scheme designer led to many wasted hours that could have otherwise been used productively. One reader spent three days spinning the color wheel round and round on her computer screen nonstop until she passed out from exhaustion and was hospitalized with dehydration. I can only hope that this Wordle post will have the same effect.

I hope you’ll check out Wordle and create compositions meaningful to your own organization. And don’t worry about those financial reports your boss has been waiting for since last week. You have word clouds to create.