Visual Techniques

Image taken from: Containerlist

This illustration by Milton Glaser incorporates many visual techniques, such as:
Boldness
Instability
Exaggeration
Distortion
Spontaneity
Intricacy
Sharpness
Activness

 

Image taken from: Pinterest.com

Above is an illustration by the artist Noma Bar that incorporates the following visual techniques:

Subtlety

Juxatposition

Simplicity

Balance

Understatement

Economy

Symmetry

Opacity

Sharpness

Accent

When I look at these two pieces of graphic design, the differences between them are quite striking. The illustration by Milton Glaser is full of vibrant colors, activity, and details, denoting a fun and playful picture of a performing band. The combination of visual techniques at play are all working together to enhance the sensation of activity, and to give the appearance of what it is like to visit a live music performance. In contrast, the illustration by Noma Bar is very somber and simplistic. By simply dividing the number eleven by merely using two colors he conjures the likeness of the World Trade Center, and by adding the silhouette of a falling man he further accentuates this perception. This illustration is using simple means to create a message that most people can relate to. The two illustration are quite different, in fact they are almost each others perfect opposites.

Contrast

The LP cover for the album Remain in Light by the Talking Heads, was designed by Tibor Kalman, and is a great example of how to use contrast in design. Most obvious is the contrast in color, as he covered the band members faces in red pixelated paint. Aside from using a contrasting color, he also makes a clear break with convention he used very poor refinement in covering the faces up, creating even more contrast in the way of form. Not only did Kalman make a statement with the remarkable contrast between the faces and the colors, he also manipulated the typeface to make it stand out more. He did so by inverting the A:s in the band name. But with the already stark contrast in color and form, the change in the typeface is not as obvious.

Wine labels are important communicators and greatly influence the buyer as to what wine bottle to buy. That is why it is important for the wine maker to have a label that stands out and has received proper consideration in its design elements. This label for the wine Aquinas however, has not received much of this consideration as it in fact seeks to create harmony in its design. The name in the top is perfectly balanced by the text box in the bottom and it uses only the slightest of contrasting queues in the color scheme to highlight the name and grape variety. Chances are that a customer at a wine shop will not spend much time contemplating this wine bottle for purchase as it fails to communicate its excellence to the consumer. It may be true that the intent is to give a distinguished and elegant appearance, communicating a sophisticated wine, but if this was the intent, then the design should have at least used some embellishments to make it communicate this message better. As it stands it merely gives a bland and dull impression without any strong contrasting attributes to make it stand out more and give it a sense of identity.

Design in Motion

 Implied Movement

 http://www.coroflot.com/Fumi1223/Graphic-Art-and-Design

Graphic Design for print rarely has actual moving parts. However we do make assumptions of movement in the design, based on our previous experience and knowledge, as well as our own desires to interpret what we see. So when looking at the above illustration by famous designer Tibor Kalman, it is hard to disregard the apparent directionality and movement of the diagonal lines that along with the illustration of an umbrella implies that it is raining. Since rain is a common phenomenon and part of everyone's life this message is easy to deduce. Of course, nothing is actually moving in the design, and what we see are merely lines and shapes that we interpret based on our knowledge of the world. Not only is our knowledge of the world part of why we understand the design, our desire to make sense of what we see also helps to interpret the illustration. If a person with no experience of rain or umbrellas would watch this poster, they might have a hard time to see falling rain, but their desire to understand the image would most likely allow them to see a different meaning of movement.

http://www.colorsmagazine.com/magazine/10

 Tibor Kalman was also the chief editor for the magazine Colors, where he was responsible for an abundance of interesting and controversial designs. On the cover to this issue we see street kids from Rio de Janeiro who are surfing on the top of a speeding train. The speed and directionality in this picture is clearly visible by watching the hair and clothing of the boys. Their hair is blown back by the draft that the train causes, and their clothing is blowing in the wind. They are also leaning into the wind as to not fall over, bracing to stay on the train. With the one point perspective in the shot, all lines are converging in the center, giving the photograph a sense of direction. The surrounding landscape is obscured in a blur as the camera fails to focus on it, due to the speed of the train, adding an additional sense of speed and motion to the picture.

Depth in Graphic Design

For the cover of Beck's album, The Information, the cover of the CD cover was left empty and inside the sleeve were a bunch of stickers. The idea was that the listener could then create his own CD cover based on  his or her feelings about the CD. This creates some interesting results as for as depth and scale is concerned. Mainly because of the overlapping stickers that through their juxtaposition creates the since of depth withing the design. Some of the stickers also creates a sense of depth based on their use of linear perspective as seen in the rectangular structures above, as well as the converging lines of the escalator below. The relative size and familiar size of objects represented on the stickers, also create interesting markers for depth and size, as seen above with the big silhouette of the artist Beck compared to the abstracted renderings of buildings and trees, as well as clouds. This cover was conceptualized by the company Big Active.

Tone and Color in User Interface

This user interface was designed by F. Hugh and uploaded to deviantart.com. The designer has made good use of both tone and color in this rendering of a user interface for an android phone.

How tone is operating

In this design the background and menu bars are heavily depending on the different tones of a black and grey gradient. The use of tone helps to create a clean and undisturbed surface that makes for a harmonious backdrop, free from distractions. It also creates a dynamic and almost three dimensional effect that gives the screen depth as well as texture. The tonal use in the menu bars further enhances this feeling.

How tone is interacting with the dot

In this rendering of the background the tone is integrated in a mesh pattern made up of small dots. This creates an interesting texture that resembles a metallic surface perforated by tiny dots. The dot is also used as a navigation tool to orient the user as to which page of the interface is active, as well as how many pages there are.

How color is operating

Color in this design is used to highlight the different icons on the screen. By using color these icons are differentiated from each other which effectively guides the eye to the desired application. As the background is so devoid of color the use of color becomes very obvious and makes the applications stand out.

How color is interacting with shape

The interaction between color and shape is very successful in structuring and differentiating the different icons in the display. The primary shape for this being the square that effectively creates a symmetrical grid in which color serves to orient the user. Other shapes that interact with color is the rectangular battery symbol that with its green color communicates the battery level in a intuitive way.

Visual Communication and Basic Elements

 

 Basic elements are everywhere, as is evident by their basic nature. Here I am taking a closer look at three of these basic elements, starting with tone. This Rolling Stone magazine cover won the Cover of the Year award, maybe partly because of the use of shading, by probably more due to the fact that no text has been added on top of the president, leaving a very clean and harmonious image. This feeling of harmony and calm is achieved by tone as the photographer used lighting to create shadows, complimenting his subjects features and give the photograph depth. The use of tone also enhances the colors in the picture and gives the subject a more vibrant appearance. The background is also using tone to frame the subject in a soothing and light environment.

  

Other basic elements that are commonly used in visual communication is lines. Here we see examples of many kinds of lines, some in the form of text at an angle, and others as part of the photographs. These lines give the sensation of movement and action as their extreme directions and wild expressions break the traditional horizontal patterns commonly associated with printed text. There is a break from tradition that highlights the lines and creates new associations. The photographs are also vital in expressing lines as the extreme movements expressed in the pictures become attention grabbers and come off as odd compared to ordinary body language.

The most basic of basic elements is arguably the dot. Especially in half tone print as pictures are made up of thousands of tiny dots that together create tone and color. In this graphic the dot has also been used to create the font, by combining many small dots into a coherent image. Dots are truly abundant in visual communication and can be found as tiny elements in the pictures above, as well as in bigger constellations, like in the font. They are also used in the photo editing of the collage seen above, as the designer uses them to create splines that creates mathematical curves, vital for the editing of images.

Analyzes of Visual Thinking

Me and my wife sat down with these visual puzzles trying to come to terms with how to solve them. We both had different approaches to the problems in these dynamic structures it turned out. My technique was that of pattern seeking as I reviewed the figures, trying to find the logic using visual reasoning. When I thought that I had grasped the idea of the figure I proceeded to doing the drawing, which proved successful on the first try.

My wife on the other hand, used visual induction to try to predict her next move as she made her way through the drawing. She also made spatial analogies to deduce what the rest of her drawing would look like after a certain section had been sketched out. If she then found herself lacking, she would stop and reevaluate her progress, as seen in the photo to the left (above).

Hierarchy in Design

In this book cover for A Clockwork Orange, David Pelham has managed to distill the main character of the book into an abstracted silhouette of a man with one eye covered in makeup (Friedman). The bright colors combined with the different shapes all work to direct the preattentive channels in the brain to focus on the eye, a symbol for the main character and significant for the aesthetic of the story. The unnatural roundness of the eye breaks from the outline of a man and conflicts with our image of how a person should look like, making it stand out. The fact that the eye is also slightly off center in the frame makes it break the balance of the composition which brings it even more to attention. The white of the eye stands in high contrast to the black eyeliner as well as the vibrant background colors. After focusing on the eye, the viewer is lead to observe the figure as a whole, and especially the bowler hat stands out with its dark black contrasting the red background. Then, at the top of the book cover, the title draws attention to itself with the use of yellow lettering on a red background. These are the main attributes in guiding the eye. After these features have been observed the viewer can start scanning the rest of the frame, finding aspects like the logo for Penguin Publishing in the upper corner, or what the person in the picture is wearing.




Friedman, Vitaly. "Excellent Book Covers and Paperbacks | Smashing Magazine." Smashing Magazine. N.p., 14 Apr. 2008. Web. 18 Oct. 2012.

Top Down Approach

The legendary Paul Rand, who is famous for his work at IBM, and a master of of the play on negative and positive space, is the source behind this ad. He masterfully grabs attention by his use of colors and bold illustrations to create an image that sticks out. The representation of a person holding binoculars is instantaneously recognizable, as are the shapes of a car and a roadway. These images evokes the notion that the person is on the look out and that traffic might have something to do with it. Since it is a very simplistic illustration with use of only four colors, there is not much distraction from the main illustration, and focus can be put on a top down approach to interpreting the message. By scanning the ad further, the message becomes clear as the headline explains the illustration further. As the eyes travel from the illustration, the brain struggles to solve the riddle it has produced, and as the headline explains the idea further, the riddle can be solved, and the observer can find satisfaction in understanding the message.

Good vs Bad Vis Com

In this example for the bikenyc campaign, the message is to leave the car at home and take your bike instead. To enhance this message the design been sharpened by tilting the text and giving it texture as if it was part of the pavement. I breaks away from the traditionally balanced and leveled properties of text, and creates an integrated, active visual within the photograph. This integration between the text and the road really works well to illustrate to the viewer that bikers belong on the streets. The birds eye perspective and the yellow taxis also work well to illustrate New York and gives the ad that recognizable and attention grabbing quality that is so important.

Here is an example from the New York State Department of Motor Vehicles where the visual syntax does not work well to communicate the message. The main message regarding Point Insurance Reduction Program as been transposed on top of the "&" symbol, obscuring the text and making it illegible. But the fact that this text is also placed to the left, and off center while there is still a lot of space toward the middle, makes the placing quite ambiguous and confusing. It offsets the balance in the  ad and creates disharmony in a bad way. The addition of the photograph to the right in the ad has not been incorporated into the rest of the ad in a satisfying way, causing uncertainty as to how it fits in to the rest of the ad. It also offsets the balance and creates an illusion that the headline "NYS DMV" is not centered. 

Symbol of the Economy

The photo I have posted is of a man in his 30's. He has short dark hair, a short beard and mustache, and he is wearing a block long sleeved shirt with no collar. The picture is in black and white and shows the man from his shoulders up. His hair comes down in a widows peak and his eyes and mouth are squeezed shut as if he expecting something painful to happen. He is positioned off center to the right in the frame and he is holding up his right hand in which he is holding a camera with a big zoom lens. The lens is pointed towards his temple and his thumb is positioned on the trigger. In the bottom of the picture there is a text saying "How To Survive a Down Economy As A Photographer".

When I look at this picture I get the sense that this man is at the end of his rope and is about to stage a suicide. But since a camera is being used instead of a gun the message is not that grim. Instead it in a humorous way is trying to make light of the fact that there is no way to overcome the bad economy, which at first makes me laugh. However, the economy is no laughing matter, but sometimes that is all one can do, otherwise one would go insane. So although the photo is trying to be funny, it also makes me think about the hardships many people face in tough times, and the ways they cope with these struggles. Even though my first reaction is to smile at the photo, I also feel empathy with the person in the picture.

• The text that reads "How To Survive a Down Economy As A Photographer" is a symbol for the meaning of those words, namely denoting: This is a guide for how someone who works in photography can sustain himself when the financial situation is bad. The way these words interact with the photograph also creates a sense of irony or sarcasm, since the subject in the picture supposedly is trying to kill himself with his camera.
• The way the person is holding the camera to his temple symbolizes the action of suicide by shooting a gun to the head. This gesture has become universal for suicide as people might mimic this by putting a finger to the temple to symbolize a gun, but in this case the finger has been replaced by the camera lens.

The absence of color gives the photo a more serious attribute, resembling a picture in a newspaper or a documentary. This denotes the severity of the actions taken by the man in the picture. The absence of color also denotes that there is little to feel good about in the situation, as color is generally used to describe happy occasions. Aside from that, there is also the use of the close up in a landscape oriented photo which places the man two thirds of the way to the right in the frame. With the addition of the hand and camera in the left part of the frame, the photo finds balance between these two elements. The camera is also pointing straight to the man's head, making your eyes travel to the expression on his face. As the eyes keep scanning the photo they go from the face to the camera and then end up at the negative text in the lower right hand corner. This aspect of the composition further enhances the impressions described above.

Three levels of meaning

In this rendering of a poster for the movie "The Spirit", an art school student from the Art Institute of California - San Diego did a great job in combining elements from bot representational, abstractions, and symbols to create an effective means of communicating the essence of this movie.

First of all the use of the city skyline works well to convey the big city scenery in which this story unfolds. Although the skyline has been slightly abstracted through photo manipulation it still clearly communicates in what environment this movie is taking place. Without it the poster would be more arbitrary and less distinct. But this representational image is not the main focus of this poster. It also becomes enhanced what seen in relationship with the abstracted form of a man and the symbolic use of text and logotype to create a cohesive expression of danger and action.

The main focus is given to the abstracted silhouette of a man in a trench coat, hat, and red tie. This abstracted visual of a man takes center stage and instantly communicates a sense of mystique and danger. The folded up collar and lack of pupils in the eyes gives a sense of covert affairs and cruel intentions. The man also communicates a sense of daring and boldness, especially with the red tie that is easily recognizable as a trade mark for this shadowy figure, and he is flying his colors bravely. Furthermore, the poster is laid out much like a wanted poster, giving the impression that we are dealing with some sort of crime or vigilantism. Something that is further explained by the symbols of the poster, and given a setting by the representation of the city.

To further enhance the meaning of the poster, there are also symbols to explain its meaning further. The use of letters to form words like "warning" and "this city is protected by" in capital letters further explains the meaning of the poster and also uses a play on words for a Wanted poster. The explanation for who this movie is about is given by the logotype for The Spirit, which for someone who is familiar with the comic book by Frank Miller would instantly recognize. This logotype, combined with the use of the abstracted red tie and the skyline of the city sends a clear message of what this movie is about, and who it is intended for.

Representing, Abstract, Symbols

Here we can see the logotype and brand for the Artwood guitar by Ibanez. The design of the elements that symbolizes this information is in the form of type that has been inlaid into the head of the guitar. The word Ibanez has been treated with a specific font that has become the trademark for this particular brand of guitar and has a bold cursive appearance to it, that is easily recognizable for someone who is familiar with the roman alphabet. Below this logotype is the symbol for the specific model of guitar in the form of the letters A and W intertwined in a artful manner, with the purpose of denoting the Artwood insignia. This information is not as easily obtained as it requires a deeper knowledge of guitars and the significance of the symbol in question. Both of these examples of symbolism have been reduced to a simplistic form that is intended to effectively convey their message and meaning.

On the body of the same guitar we find this pick guard that is meant to protect the wooden body of the guitar from scratches. More abstract in its appearance, it bears no direct resemblance of anything obvious. Its form is in a sense derived from its purpose, and allowed an artistic representation in its curvature and color pattern. The intention for the shape and color of the pick guard is to artfully blend with the aesthetic of the guitar and to provide a tasteful contrast to the spruce top of the guitar. The marbled pattern gives the plastic pick guard a texture and style that breaks from the plain surface of the guitar and brings to mind a resemblance of molten lava.

The guitar itself is a carefully handcrafted piece of equipment that is designed for acoustic performance while also being pleasing to the eye. This guitar is the product of a long tradition of creating musical instruments and has been perfected over many years to combine the right materials and shapes that best suit its purpose. The designer of this guitar has also allowed himself to add his artistic touch to the guitar by having a Tree of Life made out of abalone in the neck of the guitar and in the rosette around the sound hole. The use of gilded tuners and a shiny finish also serve to enhance the aesthetic appeal of the guitar. The guitar is made out of mostly mahogany and spruce, which are not only pleasing to the eye, but also serve to enhance the sound quality of the instrument.