Visual Language: “Business Card”

What I learned this week:

  1. It is hard to make a business card when you don’t know what business you are in.
  2. Illustrator is an equally powerful and difficult piece of software.
  3. Styles are a lot easier to copy / steal / borrow than to create from scratch.

I began the task of making my ‘business’ card by writing out a number of my more endearing professional qualities — character traits and interpersonal skills which have felt valuable to me as a creative team member.  With this list on paper, however, I realized that I didn’t have a good process of turning this list into something visual. How do I visually represent any of a number of complex soft and hard skills which feel employable? Do I really want to represent ‘employability’ with my business card or something else entirely? I have managed to stay employed for the past five years without a business card, so what purpose might it serve in this next phase of my life: professionally or personally?

After some thought, I realized that I wanted something silly and clever — personality traits which I don’t often show in my resume, website, or when first meeting someone. Eventually, I came up with the following:

 

ITP Winter Show Postcard Design

I started with a relatively simple idea for the design of the upcoming ITP Winter Show’s postcard: several students working together at a white board covered with their designs for said postcard.  Despite that the photo’s composition came out relatively well, it proved to be lacking in a couple of key ways: the images on the whiteboard were unrecognizable, and there were several distracting elements in the frame.  Because of this, I decided to pull the students from the image and alter the background.

 

At first, I tried to reuse the whiteboard images in the background, and ended up quite liking how the sketchy hand-drawn background played against the photo’s realism.

Of course I had to try the opposite as well (using only the background, and the students in negative space):

Below are some variations on these ideas:

 

My two (final) images are below.  I’m not frankly sure which works better, color-wise, but I did try to incorporate NYU’s particular purple:

Helicopter Game

It was during an incredibly off-topic venture onto the internet of 2002 during a middle school math class that I first remember seeing the “helicopter game” — a game in which players control a helicopter’s lift as the game side-scrolls through a cave of sorts, replete with stalactites and stalagmites (which the player must avoid at all costs).  A cursory google search did not reveal the original, but I have attempted to recreate the original in P5.js.

I started by defining two classes for the main gameplay elements: Heli(copter) and Wall. Heli(copter) proved to be rather simple, with the only non-obvious function being one which returned true if the helicopter was inside of one of the walls.  The helicopter experiences ‘gravity’ in the form of a downward acceleration which the player must counteract with the spacebar.  The Wall class was slightly more complex in that it needed to side-scroll the game along.  Each Wall object also had a function which returned true if it had left the screen, which allowed me to cull these objects from the wall list in the main sketch.js of the program.  Finally, the main sketch.js contained the core functionality of the program, including the controls and gamestates (isFirstGo and gameOver).

As each element I added to the program required changes and re-organization of the previous elements, the importance of physical code organization: white space and proper commenting, as well as logical code organization: which functions are contained within which other functions or objects or on their own, became readily apparent.  To abstract away complexity with classes and functions requires that they are truly independent.  I often found interconnections I didn’t realize existed because I failed to restate a stylistic function (rectMode or fill, etc.)  in each display function.

Below is my sketch.js code, with questions at the top.  The full code can be found here at the P5 editor.

 

 

 

Visual Language: Colors

I began this weeks assignment where I begin most visual projects, at the Library of Congress online photos and prints collection. I often look to this resource when I want to emulate some aspect of a graphic style (Works Progress Association posters, turn-of-the-century carnival or theater posters, etc.), but find it generally inspiring for its collection of documentary photos of life in 20th Century America. Among these photos are well known and powerful photos (Dorothea Lange’s Migrant Mother), as well as many thousands of lesser known (and frankly less interesting) photos commissioned by various government agencies for various documentary reasons.

To create a personal color palette, I searched this archive not by content but by medium: Kodachrome — a film known for its vibrant over-saturated palette. Something about this film, “give[s] us those nice bright colors…the greens of summers,” according to Paul Simon, and I’m inclined to agree. Although there is an aspect of unreality in how the film renders a slightly enhanced color palette, it also seems to do the majesty of the natural world justice.

What follows are four (highly unscientific) color palettes as drawn from photos.  The first two photos are Kodachrome shots from the Library of Congress.  The third is a shot of a coast guard helicopter and the fourth is from one of Jean Painlevé’s remarkable documentary films.

   

Each of these color palettes contains a limited range of earth-tones (or sea-tones, in the case of the third and fourth) and an accent color which sets them off.  So while they each use five distinct colors (as the assignment dictated) — and their source photos contain many dozens more — the range of colors tends to feel quite natural.

For the second part of the assignment, I chose to work with the palette from the fourth photo (the Jean Painlevé film about shrimp):

 

Boarding Pass (Typography)

For this week’s visual language assignment, we’re attempting to take a notably poor example of typographic design — an airline ticket — and redesign it with clarity in mind. This required an approach which understands and respects a hierarchy of information importance, especially as it can be manifest with typographic tools: varying font weights and grouping like things together.

We began with the following:

 

My first step was to suss out which information was most important to the passenger, and which to an airline representative or TSA agent.  Among the former was: flight number, date, boarding and departure time, gate, origin and destination.  Among the latter was the TSA Pre-check status and information about the plane.  Some information — such as the number of bags, and the airline applied in equal measure to both parties.  So, with this division in mind, I began to place the text on the ticket.  What I soon realized is that the poor legibility of the original ticket was at least somewhat due to the fact that unrelated pieces of text (flight number, date, class, origin, and departure time in the first line) were often on the same horizontal line with no division between them.  So, I decided to split the ticket once vertically and once horizontally, creating three separate sections.  All of the information most important to the passenger could then be laid out in a legible, left-to-right fashion in the left section.  On the right could go the origin and destination (information likely less important to a passenger who knew where they were going) as well as the information important to an airline representative or TSA agent.

Within the left-side, I decided not to make any hierarchy of information because all of the information is vital to a passenger, and any attempt to prioritize flight number over gate or departure time would result in an equally confusion final product.

Visual Language: Signage

For our second Visual Language class, we looked at signage and wayfinding systems — systems which constitute such an essential and ubiquitous part of our designed world that their effectiveness in conveying information can be considered a public interest.  As pedestrians we use and depend upon these visual markers dozens of times within a single commute for directions.   And as drivers we look to them to convey essential right-of-way information and rules of the road within seconds.  In addition to quality of life improvements (ease of transit, less time spent struggling to understand a cluttered sign, etc.), well designed signage and wayfinding systems can increase public safety and save lives.

That said, taking a step back to consider the signs in my home city was difficult.  As masters of pattern recognition, we (humans) can absorb information from the worst of sources when we are given a large enough sample and time to understand it.  The hours I’ve spent over the years squinting at MTA weekend updates means I can quickly and easily find information relevant to my commute.  It does not mean the sign is well designed.  Actively considering those signs which fail to effectively convey information means un-learning the pattern-recognition which allows us to glean information from them and look at the sign’s visual design anew.

Below are some examples of effective signage:

Art Studios near Tisch:

I like this sign for a couple of reasons: the font coloring matches the wall color and the lettering appears integral to the lintel, rather than an appendage.  Leave it to an art studio to have a well designed sign.

 

Above is an example of two organizations using the same sign style.  UBREAKIFIX is a phone repair shop near Tisch.  CITYMD (photo from their website) is a walk-in urgent care clinic.  I would argue that UBREAKIFIX is not using the style particularly well, but it works for CITYMD.

And some examples of bad signage:

This sign is organized alphabetically (except when it isn’t).  Perhaps the information would be more easily read as part of a map which highlighted rerouted trains and skipped stations.

Sign content:

The sign’s text reads:

CAUTION
Passengers Only
Hold Handrail
Attend Children
Avoid Sides
No Open Strollers

Along with this text are two separate icons:

  1. One is clearly a baby in a stroller circumscribed by the universal red circle with a red slash through it — indicating that strollers are not allowed.  A side note: I assume by “open stroller” and “closed stroller” they are referring to whether it is collapsed, but there is some ambiguity there.
  2. The second icon is of a mother holding the hand of her child on the escalator with no fewer than four items of particular interest circled in red for extra attention: the two lower sides of the escalator (which one should avoid), the handrail (which one should hold), and the mother’s hand holding the child’s hand. Although how one might hold the handrail while avoiding the sides of the escalator is unclear to me, the main problem with this sign is that it required several minutes of my time to unpack and is intended for an audience that will see it for no more than a few seconds at best.
    In short, this sign fails in that it tries to highlight entirely too much information.  The result is that no one pays attention to it.

Sign placement:

The signs (two nearly identical ones with slightly different graphics) are placed beneath the handrail on one side of the escalator.  On a quick glance, it is unclear if they are intended to be complementary or one was intended to replace the other.  In any case, as people are always walking past that area, it is very difficult to read.

My Re-design:

I wanted to focus on redesigning this sign with one idea in mind — how to improve safety on escalators.  Most people who ride the subway daily know how to ride an escalator, and proper escalator etiquette (stand right, walk left).  Those who don’t — tourists who may not speak English, for instance — wouldn’t have been helped by the original sign.  So, my first choice was to move the sign from its current position on the handrail to somewhere everyone could see: on the floor in front of the escalator.

That done, I wanted to use this relatively larger area to get one message across to increase safety: stand right, walk left.  Below are some of the preliminary sketches I made with this in mind.

Finally, I chose the footprint design which I felt told the most information in the most universal way.

And mocked it up on an image of the new escalator in the bowery station:

(Photo from http://www.boweryboogie.com/content/uploads/2014/02/bowery-escalator-620×465.jpg)

 

Design Analysis: IBM Safety Poster

A few years ago, I stumbled across a series of reference manuals in my uncle’s (electronics /computer) workshop that had been published by IBM. These manuals (for BASIC, DOS and the like) were housed in small cloth-bound binders which were themselves housed in cloth-bound hard dust-cases.  On these outer cases was printed the IBM logo and various bits of information about the version of BASIC, DOS, etc. that it supported:

IBM Refence Manuals

http://www.vintage-computer.com/

What struck me most about these manuals was nothing to do with the (unbelievably dense) technical content, but the care that had obviously been put into their construction and visual design.  A far cry from the poorly formatted PDFs of Terms & Conditions / liability information to be found with nearly any physical or digital product today, these reference manuals were meant to accompany and be constant companion to whomever was using BASIC, DOS, etc.

So for the first assignment in our course on Visual Language, I chose to analyze the design of another piece of IBM design, an internal safety poster created by Ken White in 1969.

https://www.loc.gov/item/2015646138/

This poster was published internally at IBM along with several others created by Ken White in the late 1960’s, several of which are available on my very favorite government website: the photo gallery at the Library of Congress (https://www.loc.gov/search/?fa=contributor%3Awhite%2C+ken). Many of these early “motivational posters” were part of an internal campaign at IBM to promote innovative thinking: (https://www.cooperhewitt.org/2014/05/23/a-bright-idea/).  This particular poster is not about innovation, but a very simple and important message: Wear Safety Shoes.

This poster presents a black background with the IBM logo on the upper-left hand corner. Occupying the bottom half of the page is a photo of a plaster-cast foot on which is written, “Wear Safety Shoes.” I appreciate two things most of all about the poster: the fact that it mixes photography with graphic design, and the fact that the message of the poster is written on the cast rather than anywhere else on the poster.

This poster adheres strictly to the principles of design as set out in class — clarity, consistency and simplicity — in its clear and simple message (“Wear Safety Shoes”) and the fact that it fits within the larger aesthetic of these internal IBM posters specifically and IBM Corporation design generally.

Examples of other IBM Posters from 1960s-1970s.

Use of color, grid, and typography:

Color: Although the other posters in this series use color in interesting ways, I suspect the choice to leave this photo in black and white was dictated by the content: a white plaster cast.  Adding unnecessary color would be an indulgence and take away from the message.

Grid: The poster is sparse, with only two elements taking up space: the IBM logo far in the upper-left hand corner and the photo of the cast foot taking up the lower half of the image. The placement of the cast in relation to the poster as a whole would feel somewhat unbalanced were it not that it follows the story.  Because the foot is oriented sole-out, rather than in a standing position, we assume the owner of the foot is sitting — perhaps in a wheelchair — and holding their leg out.  The orientation and placement of the foot follows the story-line it is trying to tell: if you fail to wear safety shoes, you will end up injured.

Typography: There are two typefaces in the image. The IBM logo is cast in the “City” font as specified by Paul Rand who lead their design team to later adapt this logo into the more iconic striped logo (https://qz.com/461040/how-to-design-an-enduring-logo-lessons-from-ibm-and-paul-rand/). The second font is not a font at all, but a handwritten message on the cast in a neat non-cursive handwriting: “Wear Safety Shoes.” Because the photo of the cast is superimposed over the rest of the poster, it runs the risk of feeling very separate from the message of the poster. By putting the message of the poster directly on the cast, it brings the two elements (poster and photo) together nicely, rather than simply presenting the photo as an example of a workplace accident.  Also, by placing the message on the cast, it adds an element of humor to the otherwise pretty banal topic of workplace safety gear: we are imagining someone actually writing “wear safety shoes” on the cast of someone who has recently broken their foot in an industrial accident — an incredibly insensitive but nevertheless humorous thing to do.