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)