Visual Language – Week 6: Logos

7 weeks seemed long for someone who struggled to learn a new language from completely nothing to at least something; but 7 weeks also seemed short for someone who was amazed at how far he had come in the visual language world when looking back. Thanks to Professor Su Hyun Kim, it is the first time I realized that the speaking the language of the eye is so much fun and meaningful.

For our final week’s project, we were asked to design a business card for ourselves. For me, I made two sets of cards using a logo which represents my personality and resonates with the culture I was born in. And here they are:

 

Ideation

It sounded simple to just design a logo and put it onto a card. But to create a logo from scratch and make it really speak could take some head-aching hours.

I started from looking into elements that are unique about me, and have a deep connection to who I am. I’d thought of my face, my instrument, my favorite foods, my top ten movies and books.. But given the limited space on a small card, it turned out that a simple but convincing piece of element works the best. So I turned to using my name (Yuguang, or 宇光 in Chinese, which basically means the universe and the light) and created drawings based on its meaning.

 

Later, I realized that instead of drawing my own little pictures for each characters, the characters themselves have a figurative nature. They have gone through multiple iterations since B.C. 1600, and they actually evolved from figures people draw in describing their world. What’s shown below is the evolving history of the Chinese character of “light”.

I looked through these versions and eventually landed on the earliest and most primitive version – the Bone-Script Characters, the first one on the left.

 

Building Process

Based on the chosen character, I turned it into a logo, and simplified it so that it could possibly fit into a business card’s context.

What followed next were the topics we’ve learned: Typeface, Color and Composition. I tried several combinations of typefaces, palette and composition, and narrowed the results to two sets.

The hardest part was to find a typeface that somehow worked well with the logo, and a composition that could strike a balance between my name on the card and the logo. I reduced the colors on the first combination, and adjusted the composition and the orientation in the second to give the eye a better focus.

And here are the final designs:

 

 

Visual Language – Week 5: Composition under PCOMP Theme

This week’s VL work is by far the most difficult one for me -not because composition is particularly hard, but because that I need need to come up with a holistic design with all the design principles we’ve learned so far working together. It is also the first time I genuinely realized how much it takes to give birth to a seemingly simple but beautiful piece of visual arts.

Below is my design for the ITP Winter Show 2018:

And now I’ll explain how it is made 😀

 

ITP Winter Show Poster

—-Version 1—-

In my first attempt, I began at conceiving how should I respond to the creative brief which says “we are hoping to see a more humanistic view of ITP – not just breadboards, hamburgers and LEDs”.

It was Oct 6, a Saturday morning, and also the date of NYC Comic Con. I was sitting at the ITP Shop located at 4th floor of Tisch, surrounded by cardboard, wires, wrenches, resistors, and the humming of laser cutting machines. While regretting that I should have bought the Comic Con tickets before they were sold out, an idea popped – how about turning the electronic circuit parts , the least “humanistic objects” around us, into human form? Even though I couldn’t go to the actual Comic Con, I could make a Comic Con of my own! With what I had in hand, I came up with these –  a wired & sensor version of Spider Man and an Iron Man.

Okay, I know they look kind of silly.. But at least they made Winner (a friend and classmate from ITP) laughed! And once I finished, I realized that I was merely trying to replicate the form of an existing figure. It was fun during the process, but as a visual design, it was not convincing, and it did not convey a story. I tried to make it better by destroying Iron Man and giving Spider Man some context, like this:

Still, not very convincing. I couldn’t explain why would Spider Man was dangling outside someone else’s terrace. Recalling what Christoph Niemann did in humanizing the objects, I thought I could take further advantage of the physical shapes of the circuit parts themselves, rather than just making them “look like” human. So I came up with these:

I turned to Winnie for opinions, and she told me that they were better and more interesting. But unless we were design for a Tech-Kitchen Conference, or a Cyber-punk Tennis Tournament, simply taking advantage of the physical forms of an object is not enough for my task. After all, I am designing for the ITP Winter Show!

And that was when I realized, I should have a guiding theme, or a story, in mind at the first place, before I actually stared working on the design. The message we are trying to convey should be the most important thing. And this gave me inspirations for my version 2 design.

—-Version 2—-

Considering what expresses a Winter feeling, I came up with an idea to team up my little FSR (Force Sensitive Resistor) guy with a snowman. After several experiments, I found that I could incorporate the poster design from Totoro, a famous Japanese animation movie,  to my story. After playing with more wires, I had the following draft:

Now finally, I thought, I was on the right track. So I followed this idea, and tried to make the composition better. I also moved it onto a black surface (so that the white wires would stand out) and provided it with abundant lighting.

Here what the second version eventually looks like:

At this point, I thought I might have finished my work. It should be telling a story; it was using the Rule of Thirds and scaling in the composition; and it the red LED nose should be able to give the eye a focus at the beginning. But, something seemed like missing.. I talked to Winner again, and she gave her feedback – It was a story, but quite inclusive. The characters in image live in their own world, and there were no conversations happening between the FSR guy, and me. So I decided to make a third attempt.

—-Version 3—-

With this “tech-and-human conversation” concept in mind, I suddenly feel that things could be a lot easier. I mean, making wire arts was fun, but it took a pain in the back and neck in order to carefully aligning the wires well together with shaky hand movements. Now, all I need to do is put human – myself – into the story! Like this:

Winnie also told me that the breadboard reminded her of a checkerboard. So I make some chess pieces with wires as well:

After some editing on Photoshop, they became two simple but more compelling posters. And I chose the first one as my final work.

 

Reflections on both VL and PCOMP

It took me four days to complete the poster design from scratch to finish. And you know what, the last attempt only took less than 3 hours! I think this gave a huge lesson in that designing visual graphics should follow the same “Fail Often, Fail Fast” guidelines just as coding or compiling a physical project. Since the actual execution of visual design could take much less time than writing codes or building circuits (since there are less debugging activities involved), it is very tempting to just rush to execution part first without much thorough thinking. And this could be detrimental to a visual design! Winnie also told me that it’s not uncommon that it takes a visual artist 10 hours to think and plan an idea, and only 10 minutes to execute it. Now I know what it means.

Another experience I gain was about PCOMP. During my making process of these posters, I was constantly asked whether I was working on a PCOMP project. And after hearing my “no” answer, they were surprised.  I think this somewhat reveals a certain degree of negligence of people, including myself, in the visual aspect of the circuits we’re using and building everyday. Indeed, they’re generally produced to serve a particular function – to digitize the physical world, to help lift an robotic arm, or to play a lovely melody upon a touch, but we should not forget that they, as physical objects, have a visual property, and we can take advantage of this as well in expressing ourselves.

 

Composition Exercises

And finally, these are my composition exercises.

 

 

ICM & Visual Language – Week 4: “Palette of Me” Image Editor

This week we were asked to pick a palette of our own for the Visual Language class, and try to use functions and objects to draw a sketch with P5.js. I combined my works of both and made an image editor that can assign a 5-color palette to any given image. To begin with, I’ll start with the palette I’ve chosen.

Palette of Me
On a lovely Sunday afternoon of tons of sunshine, I wandered around the Rubin Museum of Arts with a friend and bumped into some magnificent pieces of Himalayan arts. As someone previously having some but not much exposure to Tibetan and Hindu culture, it was quite a fascinating and eye-opening visit.  Here are just a few examples of the beautiful pieces:
My favorite among them is this smiling deity portrait shown below, which in my opinion, skillfully stroke a balances between peacefulness and holiness. The color palette used here is classic in Himalayan arts: black, red, and orange with two complementary shades of brownish green.

Predictably, you might think that I would choose my palette based on this timeless combination. Well, I did plan to do that… BUT! As it is such a recurring theme in Himalayan arts, I decided to pick something completely different – colors that are nowhere possible to show up in any Himalayan pieces in the reality. After a few experiments, I finally came up with the following purple-based palette with a flashy green highlight.

Now that I have a palette, I would need an image editor to help me automatically transform photographs I love into this anti-classic theme. So I made my own editor to do the works.

P5 Image Editor

The idea of this editor is basically to compare the source image’s color, pixel by pixel, to each color in the palette. The color distance algorithms can be used to determine which palette color is “closest” to a given image color. After that, the editor will replace the color of a source image’s pixel with its closest color in the palette.  Tow color distance calculation algorithms are used in my editor – Euclidean, and CIE76. Here is the URL to my editor: YG’s 5-Color Palette Image Editor.

Final Works

Here are the final six compositions of my palette.  They are famous graffiti walls I visited in six different cities across the world: Guangzhou, Hongkong, Shanghai, Beijing,  Penang, and New York.

—- “Paletted Walls” —-

Added a bonus yellow:

Visual Language – Week 3: Typography

There are two tasks in this week:

1. Redesign an airline boarding pass
2. Create three expressive words

 

Resign the Boarding Pass

The given boarding pass shown above looks confusing and unreadable due to the following reasons:

1. The hierarchy of this boarding pass is a mess. The only thing we can clearly identify is the Seat and Zone information, which is outlined in a box. The bold, larger sized “DOCS-OK” text also stands out, but it doesn’t help in guiding a passenger to board his/her desired flight. Other than these, everything else appears to have the same weight. So identifying a particular piece of information seems pretty hard.

2. The typefaces are used inappropriately.
It is obvious that most of the Ten Type Commandments are violated: Texts are neither left-justified or aligning to one axis; Changes in weights is small and do not create a contrast; There appears to be at least 4 point sizes with little contrast; Information is not grouped and runs all over; And finally, the integrity of the typefaces seems to be broken

 

Here’s what I did to fix it:

1. Reconsidering the most important message a passenger needs to know in order to board the flight, and assign them the first priority visually
2. Build contrast between information using adequate weight and point size variance
3. Align and group information so that relevant things stay together
4. Create a balance between the graphic elements and text elements by adjusting their relative size and position

 

Three Expressive Words!

Since I began school at ITP, I was forced to pick up cooking since meal prices at NYC is intimidating. So, I chose three cooking verbs that I use most frequently to keep both myself and my wallet healthy. Here they are!

—-Slice—-

—-Fry—-

—-Scramble—-

 

Visual Language – Week 2: Signage

The assignment of this week is:

  1. Go outside and photograph 2 examples of unsuccessful signages and 2 examples of signages you like and post all 4 images to your blog.
  2. Choose one of your unsuccessful signs and redesign it.

And here’re my findings around Downtown Brooklyn.

 

Good Signages

—-1—-

The first good signage I found is a combination of signs at a construction site. They express warnings in an efficient way by placing the icons and text messages side by side, and assign colors that correspond to the context of the message.So at a first glance, we’ll know what is allowed, what is prohibited, and what we should do.

Less successful construction signs, in contract, don’t take advantage of the power of icons and images. In the above examples, the alerting “Danger” texts are given to express a feeling of warning. But we have to look closer to check the content of the supplementary texts to figure
out exactly what is dangerous here.

—-2—-

The second good signage is the instruction sign for traffic lights. I think it’s good because:
1. the images are intuitive and easy to understand;
2. the images used are consistent with the actual traffic lights
3. the three instructions are aligned in an order corresponding to the changing order of the lights;
4. the instructions begins from the Walk instruction, which is usually the most desirable action a pedestrian wants to take in crossing the road.

 

Unsuccessful Signages

—-1—-

The first unsuccessful design I found are those on a Chase ATM. It has a bulky touch screen and it looks fancy and techie. Yet as someone who has never used a Chase ATM and wants to make a deposit or withdrawal, it really took me a while to figure out what I should do first until I eventually spotted the card insertor. The touch screen is not helping because it displays a commercial. The blue LEDs highlighting the “Check In” function distracted me and made things even a little worse.

In contrast, another older type ATM I randomly ran into has a prominent instruction plate that captures my attention immediately. The images in the plate for each separate ATM function are consistent with the images of individual functions, and their arrangement mostly aligns with the
spatial layout of the individual functions on the machine. Indeed, it might have less functionality than the Chase ATM; but my mental burden of using it is a lot less than that of Chase’s.

—-2—-

The second not-that-successful design, in my opinion, was the signage for fire connections of Brooklyn Point. The instruction message of a connection is comprised of three parts: the type of the connection (sprinkler, standpipe, and combination of both), its applicable address, and
its applicable floors). It seems that there’s a correlation between the type and the color of connection, but it still takes a while for me understand. And also, the text messages have the same typeface and font color, and they are piling up upon each other, making it somewhat hard to identify the specific information I’m looking for. I tried to come up wit a better design below.

 

Redesign of the Fire Connection Signage

Due to time constraints, I was not able to make a complete and polished redesign. But here’s my hand sketch:

1. Separate the three types of information
2. Incorporate images to make it more intuitive
3. Align the colors of the connection to the color of the texts

Visual Language – Week 1: Design Analysis

This week’s work is to choose a design I like and analyze its adherence to the principles of design. My choice is the Grandmaster movie poster.

 

Introduction

This movie is directed and written by Wong Kar-wai, a Hong Kong filmmaker “internationally renowned as an auteur for his visually unique, highly stylized work”[1], and also, his fragmented narratives and relentless delays. Came out in 2013, the Grandmaster movie was nominated for Best Cinematography and Best Costume Design at the 86th Academy Awards, and it was the winner of Best Film of the 33rd Hong Kong Film Awards.

In 130 minutes, the movie depicts the life of the Wing Chun grandmaster – Ip Man. Rather than an action-heavy kung fu production, this film is more like a narrative poem that delineates the relationships between Ip and the people around him. In the center of these relationships is the one with Gong Er, the daughter of a martial arts grandmaster from northern China – they’re friends, rivals, teacher & student, and perhaps, lovers for a brief moment. In a sense, it’s complicate. And this is what the poster effectively communicates.

 

Underlying System

The poster is divided into three sections: the title, the main art, and the bottom footer with names of actors, actresses, producers, etc. The proportion of the main art is approximately two times of the title and footer, which gives a stress on the intermingling, complex relationship between Ip and Gong. It’s worth noting that the main art seems to be balanced both vertically and horizontally – vertically, there are two lines of text, one at the top, the other at the bottom; horizontally, the two figures are standing face-to-face in symmetric positions in front of a symmetric gate, while the weight of the text at the top left is somewhat counter-balanced by the trees in the back, located at the upper right corner of the main art.

 

Hierarchy

The main art is eye-catching and comes as the most important thing in the poster by being the biggest and one-and-only bright element among the entire dark background (which works sort of like casting a spotlight onto a fight scene on a theater stage). The title section with large fonts comes next, while the footer text section remains small and low-key at the bottom.

 

Typefaces

—-  Top —-

 

—- Middle —-

—- Bottom —-

It seems that three typefaces are used: the Elan family, the Poster Sans Bold and the Bee One. The Elan family and the Poster Sans Bold are the two major fonts in the design, while the Bee One is complimentary and used for the less important description texts at the bottom.

 

Color

This is a design relying solely on gray scale – five major shades are used. The black color sets the basic tone of the poster and it gives an outline to the primary figures; the dark gray depicts facial details of the two characters; the medium gray is used for title fonts; the lighter gray lays a serene backdrop (e.g. the looming mountains and the trees) to contrast with the rattling fight scene; and finally, white as the source of light.

I think this gray-scale setup rhymes with the overall tonality of the movie: Ip’s life-long struggle and fight for recognition and identity, and Gong’s tragic fate (who was injured terribly in another fight, then turned to opium, and died shortly after). In an age of political turmoil and drastic societal changes, the destiny of even the most powerful martial artists remained highly fragile. Looking back, the history was heavy and dark; Ip and Gong, nonetheless, kept fighting for their bright ideals – that’s my interpretation of this visual design.


[1] https://en.wikipedia.org/wiki/Wong_Kar-wai