Devious Design

It’s time for some color analysis. I’m not going to chat about color theory (you can learn that here) or different palettes or patterns (if you’d like some of those, check out this spiffy blog) — I’d just like to offer another perspective on how color plays a part in perception and how that’s always applicable to design.

We all know that people infer different meanings and emotions from different colors. Red = angry/stop/love, blue = calm/sad/water, green = money/go/natural, yellow = happy/caution/cowardice, black = evil/death/classic, and so forth. Because of this, it becomes very important how you use colors in your artistic or professional creations.

For example, you may notice that places like Panera and Starbucks color their walls and promotional materials in warm shades of yellow and orange, often accompanied by a muted shade of green. They make customers feel cozy and comfortable and hungry. Places like schools and hospitals are often white or a light tan to look clean and to keep people focused. Other places like artsy bars or music venues can paint their walls black to appear upscale or sophisticated.

On the contrary, improper use of color can give people the wrong message. You wouldn’t want to paint your hospital blood red or black, which would imply sickness and death. You probably wouldn’t want to paint your law office lime green and pink because no one would take you seriously as a lawyer since your office would wind up looking like a day care.

The same concepts apply to your Web site. Bright colors improperly used will look childish, and on a light-colored background they will be hard to read. Very dark colors are hard to use on Web sites because cheap monitors have a hard time displaying them, so any different values will look much darker than you, as designer, initially envisioned. Take this very blog, for example — it looks lovely on my Mac, but when I look at it on other computers, I sometimes have a really hard time reading the text. Be expecting a new theme sometime soon. Part of the reason Facebook outlived MySpace is because it looks cleaner and more professional. MySpace signed its own death certificate by allowing users to redesign their own pages, bringing in all sorts of misused colors and images and flaming logos and animated gifs. Ew. For Web sites, it’s probably best just to stick with a white background, dark text (shades of grey are great), and an accent color or two that fit your image — your site will be clean easy to read. Dark backgrounds are a good way to go for things like galleries or portfolios so your work is what stands out as the most striking thing on the page.

One group that has really mastered their use of color is the movie industry. Movie producers know what they’re doing when it comes to color. Directors like Guierrmo Del Toro sketch out full books of how they want to use colors in their films – different shades for different scenes, bright, over-saturated colors to show good memories, dark to show fear and suspense. Some shoot entire films with different filters to make their movies look moodier. For example, the “Underworld” films have a blue filter applied to almost every scene, which makes the film seem darker and more dramatic. Some may think this is cheesy, but it works. Other movies like “Man on Fire” is very yellow. All of Baz Lurhman’s big films like “Romeo and Juliet” and “Moulin Rouge” are overly bright, giving the whole picture a very whimsical feel.

So please, think about colors before you use them, and make sure your product is readable. Thanks!

When you start a design project, your most necessary thing is a concept, an idea – inspiration. As long as you have a solid concept, you have a really good chance that your final product will be successful.

I’ll explain with some background:

Many times you hear people suggest starting an assigned project really early to get ahead. That has never worked for me. Not once.*  Any time I attempt to get a head start on a design project, I fail miserably because I get attached to my first attempt, which undoubtedly won’t work once all the necessary content – stories, photos, graphics, etc. – come in. And if you have a big client, you will probably have an excess of additional content and requests for changes arriving later – or much later – than you’d like. (Usually, the fatal flaw in my first attempt is that I try to work with what I have rather than what I may or may not eventually receive. It’s just as frustrating to have to redesign something because you never received enough content.)

It is extremely stressful to have to go back and make significant layout changes late in the game. This is where your concept development comes into play. If you have a simple, flexible, developed concept, on-deadline work will be much easier to build – and hopefully your final product will be more cohesive and visually stunning.

An example of simple concept development:

Goal: 2-page newspaper spread on campus safety
Initial visual inspiration: Caution tape and the little criminal dude on neighborhood watch signs
Colors that go with that imagery: Yellow and black
What else is yellow/black/criminal? The Watchmen comics

BAM – now you know the look to persue. From there you develop further.

What kind of fonts would fit with that theme?
Well, it should look gothic, like a metropolitan city at night – skyscrapers, streets, taxis. Maybe think comic books ­– Batman, Watchmen, V for Vendetta, Sin City. So, let’s try Franklin Gothic or some other sans-serif font, preferably with both a condensed and a extra bold version, like Univers.

How are you going to get it to look as dark as you think it should?
Reverse the type.

What if we don’t have photos or illustrations?
Resurrect the little neighborhood watch dude! And make him big so he becomes a design element rather than a goofy decoration. (It’s fun to experiement with scale.)

Now what do you do?
Open your InDesign document. You already know it’s going to have a black background, yellow text and an ultra-condensed gothic-style font. Having these basics figured out gives you all the flexibility you need to quickly create a cohesive design. Now all you have to do is tedious work – waiting for your content, placing it, lining things up and tweaking it until everything fits comfortably – but the cool, conceptual part was done before you even started.

And here it is:

All you needed was some inspiration.

* Let me clarify: Working ahead has never worked for a layout in a design project that I was developing for other people and waiting for content. It generally works brilliantly for other endeavors.

Today I’m going to discuss how to approach design – and not just print design or Web design – but design in general.

Step 1: Realize that good design practices are applicable everywhere and for every project you’ll ever attempt to do.

This includes writing papers, designing Web sites/books/pamphlets/posters/newspapers/signage/packaging, programming software, writing music, decorating rooms, organizing cities/groups/folders/libraries, editing video – everything.

Step 2: Know that most of the following steps are mainly a refinement and understanding of normal human tendencies.

We all do it – at least a little bit.

Step 3: Know where you want to go.

Decide what you ideally want the final result to be. Just get a basic idea and then stop fantasizing about it and do it. Don’t get hung up on the final goal, but always keep it in the back of your mind.

Step 4: Start with something really simple and plan.

A masterful painting of the human form starts with simple shapes and grows into something more precise. A symphony starts with a basic melody or chord progression that sets the theme. An orchestra starts with just one instrument. A skyscrapers starts with a foundation. A thesis starts with an outline. A design starts with a line. You get the picture.

You have to have a solid structure at the beginning or else the whole project will collapse later – maybe not right away – but later. Or at least you’ll be setting yourself up for a lot more work if you don’t put in enough effort at beginning. And whatever it is, make sure you like it. It’s no fun to work with something you’re unhappy with.

To do this, develop some structure. Use a grid. Make a flow chart. Write an outline. Set the tempo. Whatever. Give yourself some sort of boundaries to work within. And, especially for graphic design work, remember to set up your documents correctly. This is important.

Step 5: Make sure the results from steps 3 and 4 fit together.

If you can imagine your initial structure or foundation eventually developing into the final result you’d like, you’re on the right track. If not, modify one or the other until you can. Either fix your foundation or rethink what you want the final result to be.

Step 6: Find some style.

Develop a voice, a mood, a color scheme, a theme – and stick with it. Be consistent and make sure everything works together. If it doesn’t, figure out why and fix it. If you can’t figure it out, ask for a second (or third, fourth, ect.) opinion. Then fix it.

Step 7: Mess around.

Try different things. Be creative. Mix things up. Rearrange.

If you don’t like something you’ve done, work with it until you do. Once you like something you’ve come up with, rework it until you like it more.

At this point, you may want to reevaluate your final vision. Or maybe you want to start over completely. Both are fine.

Step 8: See where it goes and finish a draft.

Take whatever you’ve done so far and take it to the end. Finish the paper, article, song, site, video etc., with the style you’ve developed. Compare this version to what you wanted as the final product and decide if you’re happy with it.

Step 9: Tweak, polish, proof – attack.

Fix everything. If something seems awkward, keep working on it until it doesn’t. Or delete that part – sometimes it’s better to just get rid of it. Don’t settle if you don’t like something. If you really don’t like it (and have the time), start over.

Step 10: Bask in the glow of your finished product.

Enjoy being finished and stop thinking about it.

Tips and tricks:

1. Keep it balanced.
2. Make sure things line up.
3. Be organized.
4. Keep it clean.
5. Spell things correctly.
6. Use your resources.
7. Make it easy on your readers/visitors/listeners/etc. Give them what they expect. Don’t try to be overly creative or trick people – it won’t win you any points.
8. Don’t be gimmicky.
9. If it feels awkward/wrong, it probably is.
10. Make sure transitions/seams are smooth.
11. It should flow.
12. Be aware of things that make your work seem less professional: slang, typefaces like Comic Sans or Papyrus, outdated material or methods, too many sus4s, bad production quality, etc. Basically anything that seems cheesy, overused or outdated.
13. Gear your work toward its intended audience.
14. Ask for advice and consider it.

I love the band Tool – I just need to throw that out there. They’re angry, witty, heavy, artistic and legitimately good musicians. And they have awesome album artwork. For example, their last two albums, 10,000 Days and Lateralus, featured Alex Grey‘s work, and before that, Aenima featured the work of Cam de Leon. But the coolest part about all of their more recent albums is the packaging, because, honestly, cool packaging is the only reason I’ll buy a CD. If  it has boring packaging I’ll find another means to satisfy my music fix. So kudos to Adam Jones for being the coolest guitarist/art director/special effects guy ever.

The packaging for 10,000 Days is very cool, with stereoscopic lenses so you can see all the artwork in 3D. Aenima has a lenticular cover, so the images change as you move the case around. Plus this album is great anyway. Good for driving during rush hour.

Here are a few more of my favorite album artwork:

1. Nine Inch Nails – Year Zero
I’m actually not a huge fan of the cover – it strikes me as boring and forgettable (in fact, I had Google it to remember what the cover even looked like – it’s the disk itself that’s the cool part. You open the CD and it’s black, but after it warms up a bit while it’s playing, you pop it out and suddenly it’s white. It’s an interesting idea, I just wish the rest of the packaging matched it in coolness.

2. The Beatles – Revolver
I love this album. And the artwork. Klaus Voormann. I love line drawings. That and the additional collage bits work very well together, and it’s a style that’s been repeated quite a bit since 1966 when Revolver was released, both with parodies and legitimate tributes, a few of which can be found here: http://www.amiright.com/album-covers/beatles-revolver-parodies/.

3. Radiohead – In Rainbows
This is another album with fun packaging. It was originally released with a “name your own price” digital download, and then the hard copy was released in January 2008. Stanley Donwood designed the artwork, and I love the unconventional typography and use of color. Plus it came with a bunch of stickers so you can design it yourself – at least a bit.

That’s all I have for now, and I still haven’t figured out how to get my images to show up. (Help!)

Later I’ll chat about these, my honorable mentions for best album art:

Thom Yorke – The Eraser
Explosions In The Sky – The Earth Is Not A Cold Dead Place
Norah Jones – Not Too Late
Deftones – White Pony
Radiohead – Hail To The Thief
Bright Eyes – Casadaga

And tune in next time for: Spiffy logo designs