Interpretation By Design

Graphic Design Basics for Heritage Interpreters

Archive for April, 2009

808s or 808’s

kanye-album-cover1

I’ve really been enjoying Kanye West’s new album “808s & Heartbreak.” Kanye, as if I know him, has an interesting personal life, unique style, amazing creative prowess, and is never short of an opinion. This is remarkably similar to Paul and me, except for the interesting personal life, unique style, and creative prowess.

I’ve always been intrigued by album covers (which are now almost a thing of the past in the world of digital music). The concept of boiling down an entire album to one image that interprets the music on the album and communicates essential messages is the ultimate challenge to me as a designer. It’s much like designing a logo.

As I look at the virtual album cover of “808s & Heartbreak” in iTunes, something  doesn’t seem right to me. The color palette is nice and cool. The blue background contrasts with the deflated heart balloon. The color bar along the left margin adds an interesting element that complements the background.

The problem I’m having is the interaction between the numbers “808″ and the letter “s.” Why does this make me uncomfortable? I don’t think it’s the typeface. A clean, all-cap, sans serif that is unassuming and easy to read. So why do I have an undesirable urge to add an errant apostrophe between the last “8″ and lower-case “s”? Somewhere in my life my mind was programmed to think that there should be an apostrophe, space, or something between letters and numbers.

Even though I know better, the concept still challenges me. (I’m also one of those people who still spaces twice after a period.) The only difference between the two issues is that I know that my 9th-grade typing teacher programmed the double spacing concept into me.

Just in case you were wondering, an 808 is a beat machine from the early 1980s (note no apostrophe).  The 808 is predominately featured on all of the album’s (apostrophe to show ownership) tracks. I’m (apostrophe in a contraction to show missing letters) still lovin’ (apostrophe to illustrate how we pronounce loving in the South) the album.

Even though I want to put apostrophes after numbers as well as capital letters (like CDs or DVDs), I know that it’s wrong and I have to resist the urge. If you are interested in more information on typographic style, check out chapter 4 in Interpretation by Design or visit the National Park Service’s approach to style at http://www.nps.gov/hfc/pdf/hfc-style-guide-2007.pdf.

posted by Shea Lewis in Images, Logos, Typography, Writing and have Comments (4)

Get to Know a Typeface! Times New Roman

times-news-roman

At an Interpretation By Design workshop in Fort Collins last week, it seemed that the typeface Times New Roman kept coming up in conversation. This is largely because I kept saying things like, “Another funny thing about Times New Roman is that it was commissioned by a newspaper that wanted a unique typeface, and now it’s everywhere!”

Then I would laugh so hard that I would cry, and all the participants would sneak off to Pueblo Viejo for margaritas. Still, what an interesting typeface…

On October 3, 1932, the British newspaper The Times printed an issue with type set in a typeface designed specifically for that publication. Stanley Morison designed Times New Roman to conserve space and maximize legibility. It is more condensed than most serif typefaces, with an exaggerated amount of contrast between the thick strokes and thin strokes on each letterform.

The Times commissioned the creation of Times New Roman so that this standard bearer of a newspaper would have a unique typeface. Today, of course, it is available on just about every computer out there and can be found everywhere. It is sometimes used poorly (for instance, on flyers or as display type) and it is used appropriately in instances where legibility at a small size and economy of space are important (as in newsletters or brochures). There are countless variations of the typeface (some include “Times” in their names, like “Times Europa,” while others, like “Georgia,” are sneakier).

The point, of course, is that every typeface has a history and an intended purpose. If you’re choosing a typeface for an identity system or product, don’t just think about what it looks like. Think about what the talented individuals who designed your typeface had in mind for its use.

posted by Paul Caputo in Get to Know a Typeface!, Typography and have Comments (4)

Ask a Nerd: WPA Style

Dear Nerds,

I work as a supervisor at Glacier National Park and I’m looking into ways to advertise our interpretive programs. I want to go beyond the normal advertisements in gateway communities, using newspapers, flyers, etc.

My first idea is to use the WPA styled posters as a guideline to create my OWN posters for each of our programs. My problem is….I have no graphic designing experience. I am, however, a (relatively) talented artist. I’ve already sketched, traced, outlined and created a basic design for one of the interp. hikes.

What I would like to learn is how to create the WPA “block” styled designs. I’m planning on searching the internet for help on this too….so I can let you know any answers I come up with.

-Jamie

Jamie, this is a timely question. With the state of the economy and economic stimulus packages being distributed by the federal government as I type, projects such as the Federal Art Project (FAP), a section of the Works Projects Administration (WPA), of the 1930s are being reconsidered for employing artists today. In the 1930s, at the height of the Great Depression, the FAP employed artists that spawned the recognizable style to which you are referring.

see-america1

You are on to a great idea. I love the WPA style. The designers/artists of the FAP were great at capturing a sense of place on paper with ink. Your idea is a great way to promote programs with a product that visitors can relate their experience to prior to or after attending. Communicating your theme through the image or poster may be the most difficult part of the project.

I do have one caveat before we go any further. We are flirting in a dangerous design topic area, but I love flirting with danger.  On occasion, I have been known to eat pop rocks while drinking soda and go jogging in corduroy (I have short “husky” legs).  The WPA style is really less about design and more about art.  Design and art are related but are more like distant cousins than siblings. Living in the South, that’s an important distinction.  I am not an artist, but can appreciate the sophisticated design elements of this type of graphic art. You mention that you are an artist but lack design experience. Hopefully I can help you with the recreating your version of these successful design elements.

The WPA designers were highly skilled at refining basic design elements of complicated scenes to communicate the intended message.  I’m confident that you can reach your goal because this is no different than what interpreters do on a daily basis. Good interpreters take the information (scientific data, sophisticated messages, and complicated scenes) and transform it into a memorable experience that provokes.  Through an exceptional use of color, composition (laying out “the thing itself”), and type, their designs are timeless.

The WPA designers’ success is achieved by capturing key elements, keeping the message simple and avoiding distractions. That’s where you should begin.  Find the element of the park that you want to highlight and capture the colors that truly represent that element.  Glacier National Park should afford you plenty of opportunities. Carefully consider the colors you choose. The color palette needs to be simple and representative of the place. Most of the WPA posters are limited to 4 colors plus black and white.

Since you will be using these products to promote a program, you will want to focus on an image or “the thing itself” that is highlighted in the program theme. There are two ways you can accomplish capturing the image.  This can be done by scanning a painting (not a good option for me…ask my wife about the bathroom) or by creating an original illustration (possibly based on a photo) in Adobe Illustrator.

(There are also shareware programs out there that can transform your digital images into paint by number-type schemes that could shortcut this process for you if you don’t have Illustrator.  Search on www.tucows.com for options like Impression X.)

Remembering how these design pieces were created through silk screen printing is an important consideration in capturing the style.  Silk screening added an element of design through the process itself.  The layering of paint adds to the character of the works. Adobe Illustrator (AI) is very good at mimicking the silkscreen technique used by the FAP with a layer palate and a limited, well-chosen color scheme.  The secret is in  layering  the colors with the appropriate amount of minimal detail.

There are several WPA Naturalist Service posters on which you can study the layering technique. Check the Library of Congress website http://memory.loc.gov/ammem/wpaposters/wpahome.html where you can view archived copies of FAP products. You can also view National Park related WPA art as well as purchase prints, postcards, and stickers at www.rangerdoug.com.

national-parks1

The WPA composition is not that difficult to re-create.  The number of visual elements involved is very limited and key elements usually fall under the rule of thirds.  Effective use of this rule makes photos and graphics more interesting.  For more information on this rule and composition see chapter 4 in IBD.

To give you some ideas on composition there is a modern version of this style that has been highly successful for the national parks in the San Francisco area. Michael Schwab Studio has produced a beautiful collection of stylized promotional images of the bay area parks and historic sites. You can view the illustrations and Michael Schwab’s entire portfolio here www.michaelschwab.com/portfolio/posters/posters.html.  The scaled down, minimalist approach to represent a resource is achieved in a beautiful way.

I’m especially enamored with the illustration for Muir Woods.  If you have ever been there, you can see how well a sense of place is conveyed.  The Schwab Studio improved on the style of the WPA by placing more focus on the thing itself as well as refining the typography and message even further.

Type is the last component of the style.  The typography of the era is now recognizable as a style itself but was secondary in the composition to “the thing itself.”  The typefaces are almost exclusively sans serif with a few decorative fonts being used. The sans serif fonts are easy to read and add to the clean modern style, even though they were produced 75 years ago.  How’s that for being modern.  This should be an easy thing to replicate with your basic information of who, what, when, and where to disseminate.

As in most disciplines, there are no original ideas. Useing the WPA style to provoke visitors to attend your programs is a great use of design. Let us know how this progresses and send us your designs so we can post them and share them with the nerd herd.

posted by Shea Lewis in Ask a Nerd: Our Responses, Composition and have Comments (5)

Make My Logo Bigger

Effective communication is the result of collaboration, compromise, and creativity. Each of these factors can be irrevocably sabotaged by:

1. Prima dona designers
2. Micro-managing bosses or clients
3. Starbursts

Speaking as a prima dona, I feel this video, an oldie but a goodie, should be required viewing for any manager who works with designers. I recommend this video not just because it’s hilarious, but because every design issue it parodies is valid.

I particularly like that the website is www.whoneedsdesigners.com.

posted by Paul Caputo in Composition, Funny Signs and Videos, Graphic Design, Logos and have Comments (3)

Product Testing on Children

I have always been interested in emotional and intellectual responses to color. Being an untrained scientist and designer, I decided to conduct a peer-reviewed scientific study on which colors work well together well and why. Since my wife says that I’m childish and immature, my peers for the purpose of this study will be my 4- and 5-year-old daughters Anna and Gracie. The control will be my 19-month-old son William.

The concept of using my children for product testing is not a new one. They have excelled explored the thresholds of the interaction between skin and sharpies (a successful attempt at having as much ink on them as an unnamed uncle), as well as locating the specific level of toxicity in finger paint as it pertains to vomiting. Now, before you think I’m running some sort of design sweat shop, remember that no children were harmed during this study or any previous study. (This is not entirely true. Our physician states that some long-term effects may not surface for 10-12 years, when it may be revealed that they are as dorky as their father.)

The first step in this process was to locate a brand new box of 96 Crayola crayons. Nothing gets children excited like a brand new box of crayons. For my children, the smell of the fresh wax and the anticipation of breaking new crayons in half is intoxicating. (Again, no children were harmed during this study.) The next step was having them choose two colors that they thought matched well or, as Gracie paraphrased, “were beautiful together.” I had one rule: once a color was selected it could not be paired with another color. Here are the results:

Round 1

Gracie – Carnation Pink and Red

carnationpinkred

Anna – Mahogany and Gray

mahoganygray

William – Macaroni and Cheese and Purple

macaroniandcheese2violetpurple2

Round 2

Gracie - Granny Smith Apple and Sky Blue

grannysmithappleskyblue

Anna – Red Orange and Blue Green

redorangebluegreen

William – Macaroni and Cheese and Purple (yes, that’s the same choice as round 1, he’s persistent and didn’t understand the rules)

macaroniandcheesevioletpurple

I hope, at the least, that this study helped me develop a new way of looking at colors together and that I may be inspired to use combinations that not only function within the design but “were beautiful together.”

You can check out color swatches, histories, and names of all of your favorite Crayolas at www.crayola.com/colorcensus/history/. You can also learn more about how colors interact in chapter 4 of Interpretation by Design.

posted by Shea Lewis in Color and have Comments (2)

Ask a Nerd: Web Design in 500 Words or Fewer

The question below was submitted by “trainer304″ on our “Ask a Nerd!” link.

Hi Paul and Shea,

Loved the book. Great resource for those of us who are non-artistic types. I do have a question. Will you be addressing “good” web design in more depth on these pages? I am looking for guidance in layout, fonts for screen readability, colors that will not blind the on-line reader. I also would like like some guidance on creating “a look”. Some sites require a noble and majestic presentation and others are more kid-centric. How do you approach these different requirements?

Hello “trainer304″ (if that is your real name),

We will indeed be addressing web design on this site. (Note the new “Web Design” category in the links on the right.) We’ll share tips and techniques and sites that we like in future posts. Also, we will continue to find seamless ways to insert references to the World Champion Philadelphia Phillies into these posts. Here are some quick responses to your specific points of interest:

nyt-site

Fonts: Typically, you want to use sans serifs (as we do on this site) for maximum legibility online. This is different from what is typically recommended for print. Some websites use serifs successfully (like the New York Times, pictured above, which uses a serif typeface to evoke a classic newspaper look). If you have a specific reason to use a serif instead of a sans serif, use a large point size and loose leading (line spacing), as the New York Times does.

phillies-website

Colors: Tread carefully when using heavy concentrations of warm colors, especially red. Cool colors and neutral tones are easier on the eyes. Avoid high-contrast color palettes (such as complementary pairs like blue-orange or red-green). The site of the World Champion Philadelphia Phillies (hey, look what I did!) violates this rule for a reason: The team’s colors dictate the palette of the website (pictured above).

apple-site

Creating a tone: Start with a clean and legible composition (I think Apple’s site, above, is a great example of a clean and usable site; note the neutral colors, use of white space, and limited use of text). Then use carefully considered choices of images, typefaces, and colors to create a certain atmosphere. Kid-centric sites tend to rely on bright colors (primarily the primaries: red, blue, and yellow), round, friendly typefaces (not Comic Sans!), and cartoon-style illustrations (not clip art!). More sophisticated sites use subdued color palettes, classical typefaces, and elegant illustrations or photos.

havenworks

We always recommend looking at precedents. Most websites suffer from being too busy and a little overwhelming to new users. Bad sites (like the famously cluttered www.havenworks.com, pictured above) can demonstrate what not to do. And it’s not cheating to emulate good sites (for another example of a clean and easy-to-navigate site that includes a lot of information, I like the technology site www.cnet.com).

I invite the Nerd Herd to share some favorite sites in the comments below.

posted by Paul Caputo in Ask a Nerd: Our Responses, Composition, Web Design and have No Comments

Switch to our mobile site