Interactions Between the 3 Levels of Visual Design

"The Rage in Placid Lake" film poster

Representational: The photo representation of a man on a motorcycle next to a signpost provides the representational level in this advertisement for the film "The Rage in Placid Lake." It is the only photographic form of representation in the image, and because reality is the dominating visual experience (Dondis), the viewer's attention is drawn straight to it. This makes the image seem surreal and unrealistic, as if the man just happened to ride up and be photographed in the advertisement by mistake.

Abstract: The forms in the writing of the title are abstractions of the letters. The font is abstracted to invoke the feelings the actual words are meant to employ; the word "Rage" is scribbled more vigorously than the other letters. The words "Placid Lake" are more organized, looking perhaps like abstracted buildings. I believe the blurred shape in the background of the image is supposed to be the actual Placid Lake (in the film, Placid Lake is the name of the main character); it is an abstraction of the lake because it has no color or any other signifier that it is actually a lake at all. It is also an abstraction of the boy's name, an abstraction towards symbolism.

Symbolic: Symbol is used everywhere in the image. The representational forms are symbolic of the plot and characters in the film. The abstract elements are symbolic of certain meanings as well. The signpost may be a symbol of confusion, misdirection, or a life path. The letters in the image are symbols used in the English language. This has the impact of relaying direct meaning. Punctuation are symbols; the quotation marks around certain sentences in the image mean that those are what people have said about the film.

Anatomy of a Visual Message: Levels of Designed Visual Information

Free City logo

Abstraction: This is the logo for the brand Free City. Free City apparel frequently features writing on it, with just the bird on it for identification. As explained by Dondis, "the process of abstraction is one of distillation" (71). The image of the bird in the Free City logo is an abstraction of an actual bird, distilled down to the traits of a bird that we recognize. Multiple visual factors have been removed so only the essential characteristics remain; only enough of the detail remains for it to be just recognizable. This is an example of abstraction towards symbolism; the bird is meant to represent a bird, but it is also a symbol signifying the brand Free City.

"Jaws" movie poster

Representational: The movie poster for "Jaws" shows a representational image of a shark. It is a fairly realistic rendering based on human perception and visual experiences. It is not highly representational, however; it is unclear exactly what kind of shark it is, and it is most likely an exaggerated representation. It undoubtedly has certain individual traits that set it apart from other sharks, as it was created for film. Though a fairly realistic image, this is not a completely realistic 3-dimensional model, nor is it a photograph. It is, however, a highly realistic painting of a creature that is very clearly a shark. A photograph may have been more scary because it would actually be real, but in a time before photo editing, a painting was scarier because the size and menace of the shark could be exaggerated.

"Pi" movie poster

Symbolism: The movie poster for the film "Pi" includes the symbol for the number pi rather than a written title. It relies on the audience's knowledge of mathematical symbols to decipher the title of the film. It also assumes that because it is the only thing on the poster, a person could reasonably conclude that it is meant to be the title. The poster uses scale to differentiate the title from the line "faith in chaos." The symbol for pi is simple and universally acknowledged, making it the perfect symbol to use instead of a title. In case there is any confusion as to knowing that this is a movie poster and not just a random advertisement for a mathematical symbol, it says on it that it is a film, and lists the director.

Week 12- Visual Techniques

poster for the Moulin Rouge by Henri de Toulouse Lautrec

Irregularity
Fragmentation
Exaggeration
Spontaneity
Boldness
Activeness
Accent
Distortion
Juxtaposition

modern poster for the film "Moulin Rouge" by KO Creative

Balance
Symmetry
Unity
Stasis
Boldness
Accent
Diffusion

The first image is a poster created by Toulouse Lautrec to promote the Moulin Rouge nightclub. It is one of my favorite examples of visual design because it is all at once simple, entertaining, creative, and informative. The writing is irregular, with differences in scale making it dynamic. The figures in the image are fragmented, with different colors used. The colors are bold, and the female performed is accented. She is juxtaposed with the distorted man in the foreground and the exaggerated crowd in the background. The overall effect is of movement, business; there is a lot going on, and the poster is meant to make the viewer want to join in. The more modern poster, on the other hand, gives a sense of magic and mystery. It is perfectly balanced in positions and coloring. It is symmetrical, and the two figures appear as one. There is not much movement in the image; the dynamics comes from the boldness and accent of the colors and visual effects. The color is accentuated by the appearance of diffused lighting. Of course, Lautrec didn't have these effects in his day, but his poster was scandalous and exciting for the time period.

Week 11 CONTRAST

Obama poster, by Shepard Fairey (Obey)

This poster design exhibits good use of contrast in color and tone. The use of only three colors in the entire image and the use of creative shading give a heightened sense of light and dark in the image. This tonal contrast makes the image dynamic and interesting. The colors are clearly significant in the context of the content itself, as the poster is advertising the President of the United States. Though obviously not correct coloration, the context influences our perception of the colors to make them more normal. The viewer accepts the colors as realistic. The contrast in tone is not overly dramatic or shocking, so without the added colors in the image, it would just be a black and white drawing of Obama.

"The Deep End" film poster

This image is the movie poster for "The Deep End." Contrast in this poster is not optimal, and makes the poster boring and hard to understand. The color scheme makes images and words difficult to discern. The feature of this poster that stands out the most are the words at the top in yellow, which is certainly not the most significant aspect of the poster in term of content. Therefore, the pop out effect fails in this example. Shapes do not contribute to contrast in this example either. The image that takes up most of the poster is a face that is blurred, and the facial expression is vacant and unclear. There is nothing else on the poster to compare the image to, therefore no imagery contrast is possible. All the other elements of the poster are in the same colors, making the poster appear leveled and flat. The one possible redeeming quality is that the title of the movie is sideways on the side of the poster, but it is still on a vertical, paralleling other words on the poster.

Motion/Movement

http://backspace.com/notes/2003/04/design-against-the-war.php

This image is a poster for an organization for families who are opposed to the war and have relatives in the war. Implied motion in this image comes primarily from line style. Lines contribute to movement in 2D artwork. Artists add lines around things if they are supposed to look like they are in motion. In this image, for example, lines are shaky, giving the figures in the image a living quality. Diagonals, such as the woman's arm and the slight diagonal of the crutch in the man's hand also indicate motion. Even if the figures in the image are not meant to look like they are moving, the lines and direction in the image still give a sense of movement.

http://www.movieposter.com/poster/MPW-23966/300.html

This image is a promotional poster for the film "300." The film was revolutionary in its use of digital movement, and this comes across in the poster. Although the background is a flat, monochromatic surface, the overall effect is still dynamic. The font used for the "300" in the image is splattered at a slight diagonal across the image. The person in the image was probably moving while the picture was taken, but even just the expression on his face and the angle of his head and body indicate movement. The words "prepare for glory" are set at an angle and surrounded by more splatter. The apparent randomness of this splatter effect gives a sense of implied motion to the image. A viewer's knowledge of how splatter is created causes a feeling of speed and urgency to the poster.

Dimension/Depth/Space

http://www.collider.com/uploads/imageGallery/Waltz_with_Bashir/waltz_with_bashir_movie_poster.jpg

This image is the poster for the animated film "Waltz with Bashir." It depicts space and scale using two-dimensional imagery with bold lines, and using only tone to show dimension of objects. Size perception is done largely using the combined familiar size of men and relative size to show distance and space. The buildings on the right side of the image use relative height gong towards a vanishing point. The central man in the image blocks the vanishing point of the buildings, using overlap to show that he is closer in perspective. Some shadow convergence is used with the man farthest to the right. His shadow is cast on the surface of the water, giving an impression of dimensionality. The texture gradient of ripples in the water show the water's expanse and movement.

Tone and Color

This poster for the film "Moulin Rouge" uses tone and color to make a viewer want to see the movie. Tone is used in this image to blur certain areas and to draw attention to others. Color in this image is minimal; the poster would have nearly the same effect if it was in black in white because of its intense tonal contrast. There is little tonal background detail behind the woman in the image, yet her body and face are distinct. Lightness and shadows are significant in this image. Dondis states that tone is another way of describing light. A bright light appears to be shining on the woman from one angle, while her other side is in shadow. Only half of her face can be seen clearly. Tone here interacts with the basic element of direction. Light and shadow created by tone heighten the canted orientation of the image. The woman is at a slight diagonal, making the image at once unstable and provocative. The shadowy tone adds to this sensation.

Color in the poster is subtle and muted. The woman's face is most saturated area in the image. it presents some color, while the rest of the image has a blue undertone, making it seem neutral, passive, blurred. The dark red of her lips and the light orange of her hair stand out against her shocking white skin and the dark background. The hues of red in this image evoke emotion and interest, and are as provocative as the tonal contrasts. Color in the poster interacts with the basic element of the dot. The image is blurred so much so that dots are visible in areas where color fades to white, such as around the woman's eyes and in the background where blue changes to black. This style is reminiscent of the Pointilist artistic style mentioned by Dondis, in which dots are placed close together to create images, tone, and color.

Dondis Basic Elements- Web Design

http://www.originalplumbing.co m/

This example is using texture to create a visually stimulating web page title design. The "OP" title in the upper left corner uses the natural concrete texture from the image. The letters appear cut out from the image, also using the element of tone to create a perception of slight depth. Texture is interesting to the eye because it is tactile, the body responds to it. This site wants to engage the viewer in a tactile way. It is not trying to tiptoe around subjects, it want to be in your face. Though the colors are muted so as not to be obnoxious or flamboyant, the texture is stimulating.

http://www.indierockcafe.com/

This image uses color to create contrast. This website uses a simple background of black to make the content of the page appear bold. Color is also used in the site's title: indie rock cafe. The letters are alternated orange and black, colors that almost directly contrast according to established color models. This slight distortion and contrast makes the title strange to look at, even if the viewer is unsure why. Even though the font is ordinary and relatively small (especially compared to the logo in the site in my texture example), the color contrast makes it stand out.

http://themostcake.co.uk/

This image uses movement to engage a user. The page uses a monochromatic color scheme and little variation in front shape and size, but uses interactive motion to stimulate and and involve. When a user puts their cursor over one of the main images below the title, a description rolls upwards over the image, translucent so that the image can still partially be seen through it. Though movement is usually implied as a visual element, it is also useful as an interactive design technique. According to Dondis, it is a dominant visual force in the human experience. It can easily compensate for the other, more muted qualities of the website.

Design Success and Failure in Relation to Syntactical Guidelines

In my opinion, the website for XX Boys, a pin-up style site for transgender models, is a good example of web page design. The perception of this web page design is that it toes the line between masculine and feminine, which works perfectly towards the goal of the site. The background is feminine and the main color is pink, but the font is rough and most of the page is dominated by a masculine-looking guy. The image is dynamically balanced, which the title in the lower right, the logo in the upper left, and the boy's face dead center. The menus are off-center but they overlap in the middle to create balance and relative symmetry. Behind the boy is a diagonal, creating mild stress in the image, but works to highlight the words on the page. The viewer projects a horizontal base and is drawn to the words in the site navigation menu. The stark vertical lines in the background help balance the stress of the pink horizontal lines in the picture. The image is clearly sharpened on the image of the boy, giving the viewer a clear idea what the site is about: modeling. The title sort of works in positive/negative space. The font is pink with a white shadow that draws the viewer's attention to the words.


The image above is of a terrible website from some kind of religious group (found at http://www.dokimos.org/ajff/). Visiting the actual site, the viewer is stunned by a background that is not only jarring neon rainbow, but animated. The rainbow background scrolls to the right. A notification comes down from the top of the screen that says "click here" to save your eternal soul. The initial perception of the website is that it was designed by crazy people with no real goal besides somehow shocking the viewer so much that they follow whatever religion it is they are trying to advertise. The moving background is completely distracting and off-balance, making it almost impossible to retain any actual information from the page. Stress in the design is simple there, it does not really emphasize any one element of the web page. The page is certainly not level, and there is no attraction or grouping. Elements on the page seem to all be completely independent of one another. The background only becomes the negative object when the viewer's eyes are drawn to the black font in the center, the positive object. The title ("accept Jesus, forever forgiven") is almost the last thing one looks at because the bright orange 3D font makes it irritating to look at. The menu is almost impossible the read, and even harder to navigate. The negative and positive contrast is not visible enough. If the purpose of this site is to spread the word of their religion, they make it very hard and uncomfortable to try and learn more about it.

Visual vs. Symbolic Lanuage

Responses:
face hidden
crying? sleeping?
despair
shame
giving up
cold
hungry
messy penmanship
ambiguous ethnicity
strong build
monochromatic image
Starbucks cup- drinking or for change?

Symbols:
language- "very hungry," "please" (might say "please help"?)
Starbucks logo- America?
color- nearly everything is gray, depressing, downcast

A man is sitting at the side of a gray concrete-looking building. He looks like he could be in his 40's. His ethnicity is unclear, but his skin is sort of dark. He is built, not large or skinny, and looks pretty tall. His salt and pepper hair is cut very short, but he is not balding. He is wearing a bluish gray bomber-type padded jacket and dark jeans. He is not wearing a wedding ring or any other visible jewelry. He sitting with his knees drawn up and spread apart. He is clutching a sign in his arms. He holds the bottom of the sign in his left hand, and his right hand is crossed in front of the sign holding a white Starbucks coffee cup. His face is hidden behind the sign, he is hunched over resting his head on the sign. The sign is recycled cardboard and says, "very hungry," and underneath that, "please." It looks like the man is unemployed, possibly homeless, and desperate or ashamed.

Visual Thinking Research

I had my sister Nickie complete the visual puzzles (her puzzle is above). On the triangle puzzle, we had to count how many triangles made up a geometric shape. She took longer to finish hers than I did to finish mine, and she found 2 more triangles than I did. We were both many triangles short of the solution, which was 35. Nickie and I found that we used similar methods to find our solutions. We both visually traced the triangles using pattern recognition, specifically the "finding" function. She told me that she went around and around the shape in a circular pattern, outlining all the triangles she saw, thus utilizing the "categorizing" function.

I found that using a pen actually didn't help very much, as all the shapes eventually blended together and I couldn't remember which triangles I had already counted. I tried "matching" all the triangles that looked alike to me. I grouped them by similarity, rather than proximity as my sister seemed to do.

Above is my sister's solution to the spiral puzzle, where we had to see if we could tell which spiral was made up of two ropes. We both ended up finding the correct solution, the spiral on the right. My sister sort of cheated, against my urgent protests, and used the end of a pen to trace the ropes. She was basically using the "finding" technique in pattern-searching.

To solve this problem, I used a version of the "fill-in" pattern-finding technique. I tried to fill in the rope so that it would be easier to differentiate between rope and space, which is the main obstacle in solving this puzzle. I also used the "finding" technique, training my eyes to see ends of the rope. This process definitely took longer than my sister's, and it made my eyes hurt. After seeing the ends of the ropes in the middle of the spiral on the right, the solution seems obvious and I was surprised it took me so long to find it.

Feature Hierarchy and Visual Search

http://www.autostraddle.com/

I love the idea of designing for an online magazine. There are so many layout options that aren't always possible in print media. Autostraddle is one of my favorite online magazines. The title image is colored and sized perfectly so that it's visible without being distracting. The largest imagine is always what I look at first, usually 3 or 4 of the top stories for the day. Next, my attention goes to the site menu between the title and the top story. The site is exceptionally easy to navigate. There is enough on the home page to be captivating, and the menu is easy to find in black against colored dots. In my opinion, this website does a great job of being exciting without being overwhelming, as some online magazines can be.

Top-Down Visual Processing

http://www.google.com/

The Google interface is an ultimate example of goal-driven web design. It does a stellar job of directing a user's attention to a singular goal. People go to Google with a purpose. Almost the entire screen is dedicated to the one goal: searching. The design directs the eye to the name "Google" in bright colors in the center of the page. The search bar is directly under that, easily located because it is pretty much the only other object on the page. Users have only two main options when seeing the Google homepage, both options used for searching.
There is also eye movement and re-linking between actions and cognition required when using the Google homepage. When a user types on their search query, Google tries to guess what they are typing. The user's attention goes to the list with the goal of finding their query, then must return to their typing. When Google performs the search, the user has the further task of looking down the page and identifying which results match their query.