VISUAL LANGUAGE 6: LOGO & BRAND DESIGN

Assignment

Design a business card for yourself or your business. Consider typography and layout carefully as well as the logo design you developed last week.

I really like ascii-art, which is based on arcane computer graphics that simulated logo-designs with letters in the terminal of computers. It has an early 80s hacker aesthetics, which I thought could translate one of my core values as an artist well to a business card: honesty. I wanna create honest art. Not just something aesthetically pleasing. It should be as honest as possible. The lack of computational power forced early hackers to use minimalist design in their graphics. There is a subtle beauty in this approach that resonates with me.

687474703a2f2f68642e6d6b737761702e6e65742f73686172652f72656469732d6a515737702f72656469732d594d764d342e706e67.png

Then I thought why we still need business cards, what is their purpose in a digital world? I guess it is the object itself, its physicality and weight. So I chose acrylic as my material. It is solid, has a great hand-feel and a weight that demands attention. I hope that this will persuade people to keep it - rather than throw it away after taking a picture of it (which is what I usually do with the cards). 

I used an ascii-generator which translates a word into ascii-letters. It features different fonts that are all composed of letters and symbols. 

I decided to just feature my website on the business-card - all the other modes of contact are on there anyway. It is "ouiouioui.space", so the front of the card would say "ouiouioui", when you turn it around you could read ".space". 

I took the ascii-font from the generator, imported it to Illustrator and lasercut/edged the cards with 1.8 mm thick white translucent cast acrylic. 

Screen Shot 2017-10-19 at 7.25.32 PM.png
bcard_web.png

I used different colored permanent markers and acrylic spray paint to color the etched font - regular acrylic paint turned out not to attach too well to the etchings.

IMG_1995.JPG
IMG_2005.JPG
IMG_2009.JPG
IMG_2007.JPG
IMG_2008.JPG
IMG_2016.JPG
IMG_2017.JPG
IMG_2019.JPG
IMG_2020.JPG
IMG_2021.JPG
IMG_2024.JPG
IMG_2026.JPG

I am pretty happy with the results - I decided not to go for etching cardboard, the acrylic version turned out better than expected. I think it adds a certain value to the card - hopefully people will keep it! 

VISUAL LANGUAGE 5: COMPOSITION

Create a postcard for the ITP show

For next week please create a card/poster for the ITP show. Think hard about the story you are trying to tell about ITP. Make your card more than simply a statement of the details about the show. The slides from this week’s class may help you think about a compositional strategy.

You can use illustration, color blocks, icons, photography–whatever you feel captures the spirit of ITP and will entice people to attend.
The faculty are interested in a card that communicates the human aspect of ITP.

I wanted to illustrate the intersection between the human body and technology: We are the interface. Technology is augmenting our abilities to interact with our environment. Our senses are connected with machines, this connection helps us to gain new perspectives and understand our world better. 

I focused on two body elements: skin and hands. Our skin covers all of our body, we cannot control its sensory reach but feel our environment and understand space. Our hands reach out to our environment in a controlled way and add another dimension to our understanding of the world: time. 

arm_itp_3.png

At ITP we explore space and time in relationship to our bodies every day with the help of technology. 

I roughly stuck to the rule of thirds in my composition. The colors should add some depth (darker green / turquoise) and highlight the important aspects: the bright yellow wires connect human and machine, the message is glowing in white underneath the skin. The real image of the arm in the background is visible in a very muted and subtle way - its size has already enough weight in the composition. The attention of the viewer is drawn to the the wires and the header, a minimalistic setup minimizes distractions.  

To get to the final result above I watched Illustrator tutorials on clipping masks & neon glow. I went through many iterations, playing with the overall looks: more edge, less edge, color variations, different background images of arm and hand, different hand-drawn objects. I finally decided for the arm and hand in combination as it looked more powerful than just the arm.

Webp.net-gifmaker (1).gif

VISUAL LANGUAGE 4: COLOR THEORY

Choose your palette that represents you (at least five colors). Make six compositions within a square and post them on your Instagram and to your blog. You can create compositions by using pure shape forms, abstract shapes or you can manipulate existing photographs. In the end, the six compositions should have a distinct color palette of you.

  • Colors can be the same hue but different saturation or brightness

  • Use the same palette for all six compositions

  • Work within a square

Be bold and imaginative with the ways you create and compose your palette.

 

I like bold graphic design that shows color and edge. The tension between colors that are a bit off according to color conventions is inspirational for me. I am influenced by Italian modernism, Russian suprematism, cubism, surrealism, 90s techno/rave/jungle movement aesthetics and the return of the latter in recent graphic design work: Lots of neon, bright colors, high contrasts, early computer / internet graphics, flashlight analog photography. I was growing up in the countryside where cheap looking design and broken, careless aesthetics were prevalent. The city and a cleaner, more subtle style was far away.

Here a few samples that influenced me in one way or another.

 Kasimir Malevich "Peasant in a Field"

Kasimir Malevich "Peasant in a Field"

 (album cover for Soundtrack to Mark Leckey's Video Installation "Fiorucci Made Me Hardcore")

(album cover for Soundtrack to Mark Leckey's Video Installation "Fiorucci Made Me Hardcore")

 
 Basic Rhythm - The Basics (album cover)

Basic Rhythm - The Basics (album cover)

 Jean-Michel Basquiat "Ernok"

Jean-Michel Basquiat "Ernok"

 early 90s UK rave flyer

early 90s UK rave flyer

 Jamie XX - Far Nearer (album cover)

Jamie XX - Far Nearer (album cover)

 Ata Kak - Obaa Sima (Re-Release / Awesome Tapes from Africa)

Ata Kak - Obaa Sima (Re-Release / Awesome Tapes from Africa)

 Superpaper Magazine (Bureau Mirko Borsche)

Superpaper Magazine (Bureau Mirko Borsche)

 Color Studies

Color Studies

 
palette_vis_lang.png

 

For the first iteration of color studies I used a very basic palette with bold colors, edgy contrasts and smooth gradients to create an energetic palette that oscillates between aggressive solidity and artificial airiness. Red and yellow are dominant. This is underlined by contrasting strong geometric shapes with free curves. 

 
vis_lang3.png
 
vis_lang2.png
 
vis_lang_4.png
 
vis_lang6.png
 
vis_lang_1.png
 
vis_lang4.png
 

As an experiment I used a more subtle and less saturated palette that resonated with me as well and applied it to one of the existing compositions. `

vis_lang4_alt1.png

This invoked a more nostalgic and warmer retro-feel. I liked the looks but finally chose to keep the bolder, more saturated color choice from before. I experimented as well with eliminating gradients and sticking to solid colors only.

 
vis_lang4_alt.png
 
vis_lang2_alt.png
 
vis_lang3_alt.png
 
 
vis_lang6_alt.png

 

 

VISUAL LANGUAGE 3: TYPOGRAPHY & EXPRESSION

There are two parts to this week’s assignment. 
  • Redesign a airline boarding pass. If you are comfortable with or want to challenge yourself with Illustrator, download the .eps file and open it in Illustrator. Come to next week’s class with a printed copy of your boarding pass as well as a digital copy posted to your blog.
  • Create 3 expressive words. An expressive word is one that manipulates the word’s letterforms to communicate the meaning of the word. 

Part 1: Airline Boarding Pass Redesign

I redesigned the boarding pass keeping the customers attention  on the three main components: gate number, boarding time and seat number. That is pretty much all you need to focus on if things go well and the gate is not changed last minute.  I used a frame around those elements and bold letters to achieve this. In case the gate gets changed, the flight number is highlighted on top to help navigating to the updated gate number. The arrows should emphasize the flow of action involved in taking a flight. Go to gate, board the plane at a certain time and sit down. I kept everything pretty simple and conservative, as this ticket should appeal to a very diverse user group and would be printed with a low resolution.

Fonts used: Helvetica Bold, Helvetica Light, Helvetica Light Oblique.

plane-ticket-redesign.png

Part 2: Expressive Words

I chose the three words "void", "pan" and "loan". I liked the boldness of common associations with the words "void" and "loan". "Pan" was probably a random choice as I saw a pan in our kitchen and thought of visualizing the typical shape of a pan with the letter "p". I used illustrator for creating these expressive words.

word-vis1.png
 
word-vis2.png
 
word-vis3.png

VISUAL LANGUAGE 2: SIGNAGE RESEARCH

Assignment

Go outside and photograph 2 examples of unsuccessful signages and 2 examples of signages you like and post all 4 images to your blog.

Choose one of your unsuccessful signs and redesign it. Write a blog post about your thought process with the final outcome in the end. Add any initial hand sketches, research, upfront work you did to come up with your final design.

I chose the signage on trash cans and of a LEGO store in the Flatiron district as examples for successful signage. Both functional, one indicating and explaining the  municipal service of garbage collection and recycling, the other representing a well-known brand for a popular toy for children. They both offer a clean and minimalistic design aesthetic that is not only functional but as well visually appealing. 

IMG_1535.JPG
IMG_1532.JPG

While walking around this popular area I noticed an old ad for cigarettes in one of the kiosks - I really liked the intense colors and the flat design. 

IMG_1543.JPG

I found two interesting examples where the design might be questionable and misleading. The first one is close to Washington park (where lots of dogs stroll around...) and is wrong on many levels.

IMG_1650.JPG

What can I really eat there? What are "Papaya Dogs"? Will I get quality food? Those are questions that might remain unanswered - unless I give it a try and get some food there. I won't. 

The dog theme was following my stroll around Washington Park. At the park entry, I discovered a small indicator that dogs have to be kept on a leash. It is so small and hidden among other signs that nobody notices it.

IMG_1651.JPG

Within the park are other signs that state in a sentence that dogs should always be kept on a leash.

IMG_1649.JPG

Why is it kept in text? Human brains can process images faster. So I thought of visualizing this text. I had the idea to not create a sign but a little sculpture that would be placed in the park as a literal reminder of keeping dogs on a leash. 

IMG_1652.JPG

I started with a few sketches, then moved on to Illustrator to create vector graphics. It took me a while as my Illustrator skills are still pretty limited. But I overcame a few hurdles with the help of fellow ITP students.

Screen Shot 2017-09-21 at 3.28.49 PM.png
Screen Shot 2017-09-21 at 4.11.16 PM.png
Screen Shot 2017-09-22 at 10.54.10 AM.png
Screen Shot 2017-09-22 at 11.52.36 AM.png

I kept the colors in the same muted brown as the original signs for NY parks. White reflective highlights emphasize the leash. The thumbs up gesture should positively reinforce correct behavior.

After looking a while at the thumbs up gesture I decided to iterate as well a more subtle approach. Am still not sure which one might be more effective.

Screen Shot 2017-09-22 at 12.22.10 PM.png

Ideally the material would be a solid metal that stands by itself with drills in the ground.  

 (background image by  wikipedia )

(background image by wikipedia)

VISUAL LANGUAGE 1: GRAPHIC DESIGN ANALYSIS

Assignment

Choose a design you like.  You can choose a book cover, poster, packaging or any form of graphic design. Post an image of the design to your blog and, in a series of graphic overlays, analyze its adherence to the principles of design. Identify the underlying system and the hierarchy of elements within that system. Notice the negative/positive space composition. Identify the number and variation of typefaces and the variety represented within a single type family. Look at the palette and identify the color system.

I chose the cover of the 2017 EP "The Garden" of the Berlin-based Australian singer, multi-instrumentalist and artist Carla Dal Forno.

The design is constructed in a strict, minimalistic and brutalist manner that reminds the viewer with its threatening emptiness of Pittura metafisica, the Italian metaphysical art movement of the early 20th century. It is reduced to three essentials, one image dominating the upper left two thirds of the cover while the lower right third contains the title of the EP / Name of the artist - most of the space is taken up by a solid colored, earthy orange background. This reduction to three main elements fulfills the principles of clarity and simplicity.

carla cover elements.jpg

 

The organizational principle hints at the rule of thirds. The central photo/image is within the upper two thirds of the grid with a non-proportional tendency towards the bottom of the piece. 

 The yellow lines indicate the ideal position of the rule of thirds in an overlay on the cover.

The yellow lines indicate the ideal position of the rule of thirds in an overlay on the cover.

The text in the lower right third shows irregular positional tendencies to the left of the piece. On the imaginary vertical rule of thirds line the space occupied by the first letters of the Artist's name overlap with the space claimed by the image. It is caused by the positioning the text elements centered underneath each other This evokes the feeling of a cramped, distorted and even violent space that text and image have to share - the text block in itself is balanced.

Looking closer at the text, the distance caused by the empty line between "The Garden" and "by" appears too big compared to the distance between second and third line. It is not immediately visible but subconsciously unsettling.

Something is wrong in this bland and uncomfortable world of Carla Dal Forno. 

These structural irregularities, the feeling that the proportions are in a very subtle way "off", irritate the eye of the viewer. She tries to rest her glance on the blue wall which is part of a photo that is highlighted by a negative space of a black, thick frame: plants that are half-cut out of the frame and positioned too low, the same tendency to the bottom adds extra weight and dread to the composition. the focus of the whole record cover is on a slightly off-color baby-blue wall that is blank. The wall is the sky of this strange garden, it is the heart of the composition - but it is empty. There is nothing to see. It is flat and offers no horizon or spacial dimensionality. A little fracture in the wall, visible in the upper right corner reminds us of the impermanence of this brutalist Eden: two plants, maybe referring to Adam and Eve are far away from each other and barely part of this paradise anymore. Carla Dal Forno is positioned clearly outside of this garden as its distant curator. This separation between creation and creator is emphasized as well by the distance of the text parts from each other in the lower right part of the composition. "The Garden" is positioned too far from "by Carla Dal Forno". Two main themes emerge from this composition of the design and reflect the overall concept of the album:

separation and void

The negative space is represented by the frame around the image and its surroundings. The piece asks its user where to place the negative space - as negative space is dominating the entire composition. Even within the image, negative space is dominant, as the garden is essentially a garden in absence that is visualized by the two cut out plants and the blank wall in between. Image frame and font colors in black only underline this element of absence and hint at 60s minimalist design principles: Functionality is both tool and aesthetics.  

carladalforno-thegarden-packshot-1024x1024 (1).jpg
Screen Shot 2017-09-13 at 9.56.06 PM.png

The colors are muted and dominated by an earthy orange called "flame". Here the golden ratio / divine rule is apparent, 63 % of the image is covered by it. This color stands in opposition to the fading blue of eden and the negative space. A hint to the flames of hell vs the cool breeze of the heavens. The home region of the artist, Australia, is represented in two colors: "Ayers Rock" and "Onahau". While the latter one stands for a bay in northern New Zealand, "Ayers Rock" refers to the iconic natural landmark that is symbolic for Australia and its people. The piece can be reduced to three main colors: orange, bright-blue and black. They are used in a consistent manner throughout the piece, only the green of the plants in the photo, here a "greenish grey", is an exception.

Clarity, consistency and simplicity are reflected as well by the choice of using only one font. According to the myfonts-analysis it seems to be a version of the Adelle Sans typeface in the weight version "light". This is in a way surprising as this version of Adelle is considered a webfont, whereas the album cover can be as well a physically printed object. No variations within the type-family are used. Main title and artist name are written in capital letters and as mentioned earlier, all text elements are centered within the block - clarity and consistency again.

As a summary, a common set of design principles is applied in this image. The slight deviations from the norm accent the unsettling nature of the piece intentionally: Its main topics, separation and void, are enhanced by the design in a very subtle and intelligent way.