…or “Why You Need a Graphic Designer”

The book’s title caught my eye instantly.  ”Visual Literacy”  Intriguing.  I took it home, and over the next few days, I learned just how blind I was to the art of visual communication. Completely illiterate.

The book begins with exercises: “By using four black squares of the same dimension, create a graphic image that best expresses the meanings of each of the following words:

order

increase

bold

congested

tension

playful

I gave it my best shot and then flipped the page, revealing sample answers from students at New York’s School of Visual Arts. Suddenly I realized just how illiterate I was.

I’ve since appreciated design more.  To further explore the importance of graphic design and visual communications, I dug up a few Exit Strategy NYC graphics.  I show our initial design attempts (done by yours truly).  At heart I’m a science/tech geek, so I’ll explain my inherently scientific thought process.  And then I show how a professional designer approached the same problem.

Exit Strategy Fans: enjoy this behind the scenes look!

Train Illustration.  How I approached the problem: Exit Strategy NYC shows subway riders which train door to use.  So each door needs an ‘on’ or ‘off’ state.  The MTA’s trains can be 10 cars, with 4 doors in each car.  That means 40 doors in a train.  We want the train to run vertically on the iPhone screen which is 460px high (it’s 480px minus 20px used by the time/battery/service strip at the top).  So dividing 460px by 40 doors means each door gets about 11px of space to indicate on or off.  With padding, there’s probably 5px of height for each door and 5px in between the doors.

Where I got stuck: 5px for a door isn’t large enough to stand out, even if it’s red and a few extra pixels wide.

How a graphic designer solved it: By making the train have a ‘slant’ to the side which increased the swatch of the door, allowing the red color to ‘pop’.  Also she made it 3D and beautiful.

Splash screen.  How I approached the problem: We wanted to communicate subway transit combined with the notion of exiting quickly. Inspired by an ‘exit’ sign, I attempted to overlay a transit like system on top of it. It’s hideous.

Where I got stuck: Everywhere! How could we possibly communicate something as intangible as “Which is the correct train door?” while keeping a transit theme.  Time to call in an expert.

How a graphic designer solved it: Sheer brilliance.  The zig-zag of the colored lines communicates subway lines.  These lines dump out at a subway door.  The ‘correct’ door is open with a silhouette of a running guy.  An arrow helps indicate that this is the right door. The entire image is done with bright and bold colors.

So if you’re wondering whether you really *need* that graphic designer — always lean towards ‘yes.’  They’ll bring a perspective to the product and the messaging that will pay for itself many times over.

Readers — have any embarrassing early design of your products you wish to share?

Possibly Related Posts:

• The Next Chapter: All Eyes on the Future (err, the past)
• The Friendslist Story [Chapter 5]
• The Friendslist Story [Chapter 4]
• The Friendslist Story [Chapter 3]
• FriendsList is dead (but we’re very much alive!)