Skip to content
This repo contains all the code and assignments developed during the class open Visual Language attended during the fall 2018 term at ITP, NYU.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
week_1
week_2 sign_collection Nov 7, 2018
week_3
week_4 last commit Nov 28, 2018
week_5
week_6 add week 6 assignment Dec 12, 2018
.gitignore update gitignore adding *.ai and upload week 3 assignment Nov 14, 2018
README.md
blog.md

README.md

Visual Language Blog

by Guillermo Montecinos, NYU ITP Fall 2018

Week 1 - Design Analysis

For the design analysis is chose the cover of "The Man Machine", the 7th album of the German electronic band Kraftwerk (in German, Die Mensch-Maschine), released in 1978. Kraftwerk has been recognized for their retro-futuristic aesthetic developed in the mid 70's in a context of a post-war Germany -pulled by the two world antagonistic forces. They were part of the first generations using technology to make non-academic music and made the technology one of their motto.

"The Man Machine" cover was designed by the German artist Günther Fröhling and is strongly influenced by the Russian Suprematism because of the straight lines that define the system -which is rotated- and the dominant presence of the red and black within the composition. The cover consist in a picture of the four members of Kraftwerk standing in a stairs one ahead the other and looking to their left -the right side of the cover. The design palette of colors moves from red -for the background and the musicians shirts- to black -for text and the musicians ties- and covering also white for the word Kraftwerk, skin color for the musicians faces and gray for their pants.

The system used to design the cover -as said before- consists in an orthogonal and rotated grid which defines three main areas: the biggest one hosts the four musicians standing in the stairs, the second biggest space hosts the word Kraftwerk and the name of the album Die Menesch-Maschine and finally the third space perpendicularly displays the translation of the album name in Russian, English and French.

The system defines hierarchy of the elements within the composition. The main space also hosts the negative space of the cover which is corresponds to the red background of the picture and the red shirts of the four musicians. It's fair to ask if the clothes of the persons should be considered positive space because are wore by the main characters of the composition, but it's a design decision to make them fade with the background to remark the human-machine faces.

The designer seeks to bring our attention firstly to the robot-human faces -which are the main characters- but he did it with a playful counterposition of the contrasted red background and the black hair that contour the skin-colored faces. This is the first positive space.

After that, the designer decided to call our attention to the information displayed within the rotated system, written in black and white capital letters. Firstly the attention is attracted by the upper-left side of the cover in where the name Kraftwerk is written in a shiny white which clearly evokes the Suprematism before mentioned. In the same section the name of the cover the name of the album is displayed in a black and sharpened font -deliberately chosen to give the title a mechanic and technology aspect-, in which the "M" of "Menesch" is remarked by being double sized respecting the rest of the title. Clearly the use of color in the text seeks to remark in first place the name of the band and in second place the name of the album. Finally, the translation of the album title is displayed in three languages rotated 90 degrees respect the main text information of the cover, framing the main area of the composition.

Week 2 - Signage Research

For the 2nd week of class we were committed to go out, look for information systems and analyze their design effectiveness for communicate information to their objective audience. We were asked to pick two successful signs and tow unsuccessful ones.

The first two images corresponds to the two successful signs, whilst the second two are the unsuccessful ones I found in the street. The first one is the Trucks are not allowed sign, which clearly shows with a truck icon that those kind of vehicles cannot be parked in the area. In red are displayed the words are not which immediately calls the attention of the audience -in this case cars and trucks drivers. The picture was taken in the parking lot close to ITP on Broadway.

The second one is Walk Bikes on Path sign -picture taken in the Central Park- which shows a red biker and he/she's bike which are behind a red "prohibition" icon. This sign shows clearly that bikes can't bike in park's paths. The green background color is part of Central Park's information system and highlights the recreation context purpose of the facility.

The third one is a MTA planning work sign. For me this kind of signs are usually confusing because hold a lot of written content and don't use color as an information tool. Finally, the four sign -and the one I re-designed- is the Pedestrians look both ways before you cross I took also from the Central Park. This sign doesn't commit the aim of call attention of pedestrians and make then safety cross the street because the information is given in plain text and there is nothing that can make users realize they are in a situation of danger.

For re-designing this sign I though that the most important word of the phrase was Look, since you kept attention of pedestrians you can give them more information. For that purpose I decided to draw the word Look in the middle of the sign with a bigger font size than the rest of the text. As well I realized that while the sign is faced to the walk side there is no need to explicitly say Pedestrians, so I took it off.

Just as I took of the word Pedestrians I realized that as it was that important to induce people to look both ways, it can be powerful to reinforce it by adding a two-head arrow under the text. Finally, in order to make the sign more impressive to the audience I decided to add an alert ! icon in the top of the sign. In this way the sign flow is as follows: first the alert icon calls the attention of the pedestrian and then the big size word Look asks the user to look both sides before crossing which is reinforced with the arrow under the text.

Week 3 - Typography and Expression

For the third assignment of this class we were committed to work taking into account the typography and how it can add expression to a word.

Airline ticket re-design

First of all we were asked to re-design a flight ticket using a different typography in order to make it legible. For this purpose I used the typeface Roboto which was designed for the Android OS with the goal of make information legible in any device.

Considering the goal of this assignment I decided to use the rule of the thirds to compose the elements in the space. Also I decided that the audience of this design are the airline customers and the most important information was the gate number and seat number, as well as the flight number and departing time. So, considering the huge amount of information and the prioritized information I put on the left the costumer name and departure and destination airports. In the center of the ticket I wrote the information that is not important for the passenger as Docs, BCN, class and bags -which is important but is encoded so probably just the company agents can understand it. Finally, in the right part of the ticket -the one that can be cut- I tried to keep the same organization and font sizes than the left part.

Expressive words

For the second half of the assignment I decided to draw to words SOUND and SCREAM. For both of them I chose the typeface Myriad Pro, because it is Sans Serif -what I prefer for this purpose due to its readability. For the word sound I wanted to create the sensation of a wave being propagated through the space, that is why I copied many times the letter D and drown it in grayscale under the original D.

Finally, for the word scream I wanted to graphically represent a scream -like an onomatopoeia- so I increased the letter size as each letter was written to add tension to the word.

Week 4 - Color Theory

For this week we were asked to build a palette of color that represented ourselves and create 6 sketches using that palette. Following Katherine's suggestion I built my palette from the colors I consider characteristic of my Instagram account.

The palette used is composed by the following colors (HEX):

  • #000000
  • #788FAC
  • #5B8129
  • #C4B490
  • #FFFFFF

For the sketches design I took the chance of exploring the possibilities of the square shape, inspired in the work Metaesquema by Hélio Oiticica. I used p5.js to code sketches in where randomness was introduced to generate algorithmic designs.

Sketch 1: Random rotation and color saturation variation.

Sketch 2: Nested rects randomly colored.

Sketch 3: Color transparency and random color and x-y translation.

Sketch 4: Color transparency, random color, x-y translation and rotation.

Sketch 5: Variation of Sketch 4 with a fixed green hue.

Sketch 6: Color transparency, random color, x-y translation, rotation and rect size.

Week 5 - Composition

For the composition assignment we were committed to design the poster for the 2018 ITP Winter Show, in which we should represent ITP community. The community is composed by individuals, each one different from the other, individuals that mostly love electronics.

That's how I came with the -cliché- idea of representing the community with binary code. But to not be as cliché as it is I converted the description of ITP -published in it's website- to raw binary data which I used as a background for the 2018 Winter Show poster design.

Over that background I wrote the words "itp" and "winter show" following the thirds rule, and focusing the attention to the name of the program. Below that and towards the bottom-right side of the poster I decided to place the information of the event in Josef Sans Bold font over a white rect which enhanced the content.

Week 6 - Business Card

For the last week we were assigned to design a business card that represented ourselves as a brand. Consistently with further works I defined a palette with my favorite colors: black and white.

Attempting to bring my work to the iconography through which I represent myself I selected a random level curves pattern that I generated in Processing for a previous work. This pattern -originally black over a white background- was used as a center shape around which the composition was developed.

For the front of the card I chose a white background -accordingly with the original pattern design- in which I set my name at the top-left corner in two rows, one for the first name and one for the second name. The font sizes were defined in order to make both words the same width. Under that block I wrote "Creative Technologist", which is the description that identifies me the most. The typeface used for all the text was Myriad Pro Regular.

In a seek to make the card playful I used the diagonal principle of composition to set the random-shaped lines at the bottom-right area of the design, as a counterpoint of the name and title. Finally, at the very bottom-right side of the card I wrote my website "guillemontecinos.cl".

The back of the card is a negative of the front in which the white random shapes are placed over a black background.

You can’t perform that action at this time.