Visual Language Postcards Assignment

Part 1:  Poster Composition

Poster v1 Poster v2 Poster v3

Part 2: ITP Show Postcard draft

This design is a total shot in the dark. I wanted the initial grab to be simple and reflect the physicality of attending an ITP show; the playfulness. The image here is just a stock, I’m hoping over the next week to replace it with an ITP- specific image. I also, however, wanted there to be some depth; to describe the more intimate nature of the shows. Inspired by Danny Rozin’s mirror, I thought each pixel of the larger image could be made of the letters forming a variety of descriptive words about the show..

The code to generate the text-based background is on GitHub

It’s a sign.

New York is a spectrum of signage, from aesthetic, informative, and concise information delivery systems to the most confusing array of seemingly random assortments of words and icons (the NYC street parking signs come into mind).

A short walk around the Village garners a number of examples from across this spectrum.

Blue poster with black text. Slightly crumpled

From within our own walls at ITP comes my first example; an advertisement for a class. I have blurred out names and the QR code for privacy.

The most striking aspect of this poster in its current state is how crumpled it is. Of course, once you release your poster into the ‘wild’ there’s not much you can do to protect it from such cruel acts of vandalism (intentional or otherwise), but I do think that it is important to consider the physical space(s) your poster will be, not just the content of the poster itself.

In this case, the poster is pasted haphazardly in a corridor that many people walk through, and on an electrical box that may require access. The placement itself is questionable as the poster may be subject to people brushing by in a rush, or people moving it to access the electrical box.

In addition, the untidy, ripped electrical tape that has been used to secure the poster does no favours. Perhaps this is a stretch, but there’s a concept in social behaviour known as the Broken Window Theory. Distilled down to its usefulness in this case, the theory suggests that visible minor problems encourage, or at least don’t discourage, more serious problems. I propose that in the case of the above poster the haphazard and untidy placement of the poster made it seem less of a problem once the poster was accidentally (or intentionally) crumpled.

In essence: the unintentional crumpled paper fits the aesthetic of the original ripped tape. Perhaps if the poster was more neatly placed, a passer-by would have more incentive to ‘fix’ the placement if they walk by and accidentally displace it.

The environment of the poster is not the only concern that I have with it. The design itself is, undiplomatically speaking, boring.  Three paragraphs of black text on blue paper. There are no graphic elements to catch attention, there is no information hierarchy save the top-down nature of prose, and frankly if the poster were not so crumpled I probably would have passed it by completely oblivious.

The only design element that I can vaguely comment positively on is the choice of yellow tape with blue paper. The hint of yellow does complement the blue background. That said, with such little thought put into the rest of the design I would not be surprised if this was nothing more than a happy accident.

Venturing outside we soon come upon another example of ‘bad’ design, or rather design that does not do well in capturing attention and conveying information clearly.

I do not yet have much experience with the NYC bus system. This bus stop signage is certainly not beginner-friendly. Perhaps there is some logic to this system that makes sense to transit veterans, but it is obscure to me.

What is clear to me, to be fair, is that the M101, M102, and M103 busses stop here. What is less clear is why “East Village” and “City Hall” are labelled with different colour codes. I assume they are the end point of each bus line, but that is not explicit.

What is far less clear is the sign on the top. There is an arrow pointing towards the street, perhaps indicating the boarding side (which seems redundant given the placement of the sign), an accessibility icon on the other side of the bus (does that mean the accessible entrance is on the left?), and a large red banner indicating “No Standing“. Does that mean no standing at the bus stop? That seems confusing since it’s a bus stop. Perhaps the message is for cars? That is not made clear.

A design that I take a little more kindly to, even if I think the message is off-putting, is this no cycling/skateboarding sign.

It is simple and conveys its message. It understands its environmental context – that it must quickly convey clear instructions to many rushing people.  Perhaps the text is a little redundant given the icons, but the case could be made that the icons are there to catch the attention of passers-by, and the text clarifies the message.

Certainly the aesthetics could use some work; there seem to be three different typeface-spacings on such a short sign. But at the very least this sign conveys its message clearly.

Finally, I came across this instructional sign on the ubiquitous Citibike. I have never used Citibike, but I found these instructions far more clear and beginner-friendly compared to the bus sign I mentioned above.

There are clear, concise instructions central on the dock, with extra information supported by consistent icons to the sides.

On the bike itself is one key piece of information, supported by an easy to understand graphic.

Analysis of Olly Moss Harry Potter cover

A large man and small boy hold hands while looking up at a looming castle

I have chosen to review the first in a series of covers designed by Olly Moss for the release of digital Harry Potter books.

The single typeface used seems to be a custom font that emulates a neat paintbrush, sans serif, with regular lines.

Harry Potter cover with a breakdown of colours used

The colour palette consists of 3 main colours; orange, yellow, and blue – which are complimentary colours. The shades of each colour vary a bit, but I have displayed the 5 most consistent shades in the top left of the image above. I find it interesting that the image is for the release of digital book versions, but the colour tones and brushed style are so reminiscent of physical paper.

Harry Potter cover image with red lines depicting margins

The cover has clear margins, with a little paintbrush spill that ties in to the overall style of the image and adds a bit of a dynamic feel, as if the image is spilling out of its bounds, perhaps into the real world.

Harry Potter cover image with demarcated grid overlay

Although there is not a clearly delineated grid, the image seems to have four distinct rectangular layers, each containing a single important feature of the image. Further explanation is embedded in the image above.

Harry Potter cover with a grid of thirds overlay

The image has clearly been designed with the rule of thirds at least in mind. When a ‘grid of thirds’ is laid over the image, three important key features are revealed:

Firstly, the imposing castle in the image is situated along the top right point of interest, immediately catching the viewer’s eye.

Secondly, the characters central to both the cover and the story are placed along the horizontal lower third.

Thirdly, almost as a bonus, the mountain peak in the background could be lost in obscurity, but its placement on the top left point of interest draws it back into the image, creating a little bit of extra detail right where it needs to be.

Harry Potter cover image with red lines depicting diagonal features

In addition to all of the above, the artist makes very astute use of diagonal lines, drawing the viewer’s eye from one feature to the next in such a way that their eye never needs to skip over empty or dull parts of the image.

Two striking parallel lines (indicated in bold above) slash across the image, replacing the need for a grid by separating the three key features: the castle, the characters, and the copy.

Almost perpendicular to those lines is a central diagonal line. This line connects the castle in the top right to the central characters near the bottom, demarcated by a well detailed and exquisitely shaded cliff.

Additional diagonals are revealed in the details; the line of boats heading towards the bridge, the orthographic structure of the castle.

All of these large and small diagonal lines serve to draw the viewer’s eye across the image, telling an entire story in a single frame.