Interactions Between the 3 Levels

 

This is an image of a mood board for web design that incorporates all 3 levels.

REPRESENTATIONAL:

The mood board shows images of actual objects in real life. The items shown under "profile images" are considered representational as they are direct objects that you would see in person. They are direct reporting of a large amount of details. The representational "profile images" help a person in terms of simply being used as a visual aid. As we are all visual beings, perusing through a website creates more interest if we see such images. They relate to the other levels as they can be abstracted into simpler terms or even distilled to a symbol. 

ABSTRACT:

The "background" of a website can be considered abstract. Various designs for a background can be distilled into simple and basic elements, such as geometric patterns. Without the abstract aspect applied, the background can be either be too distracting or too plain. Sometimes abstract items in an image displayed on a page are just simpler forms of the representational. They keep out unnecessary details and keep the important details in, which is usually what a viewer would like to see when viewing a website.

SYMBOLIC:

The "style ideas" of a website can be considered symbolic. The letters we read that form words are quite symbolic since they are used as a source of communication. Also, icons that are displayed on a page signify some sort of meaning. They generally will use representational information to communicate that meaning or message.

Representational, Abstract, & Symbol

     This image is of a jewelry holder designed in the form of a turtle. The jewelry holder is an example of the representational due its recognizable form of an animal, the turtle. Based on our experiences we have seen what turtles look like, therefore making this image easy to distinguish such an animal. As the representational depicts an image containing a lot of detail, we are able to see here the distinct features of what we know makes a turtle. The representational turtle form is used both as an expressive and functional design. Its functional purpose is to hold jewelry while its expressive purpose is to look aesthetically appealing.

     This is an image of a landscape viewed from possibly a window. The landscape art is an example of the abstract because it has taken all the details from the representational and simplified it. The simplification is much like distillation in which all the unnecessary details were taken out to emphasize the important features. Here we see the sun and the surface area of the land. The abstract has broken the image down into the basic elements. Here we can see the basic elements of shape, line, color, and direction. Therefore we can see the abstract understructure of the landscape. We see the composition compared to the detailed representational.

 

 

     This is an image of a well-known symbol, the peace sign.  The peace sign is seen as symbolic as it is both simplified and abstracted in order to conveniently get the message out towards the viewers. The peace sign in its basic structure is shaped as a circle. Generally shapes come associated with an attached meaning. Here a circle is a sign of protection, warmth, and endlessness which fits accordingly to the idea of peace. It is also seen as an iconic symbol as it comes with a certain amount of cultural history. It actually consists of the letters "N" and "D", meaning nuclear disarmament. As far as cultural history goes, the peace sign originated with the British nuclear disarmament movement.

Visual Techniques

-Transparency
-Economy
-Stasis
-Simplicity
-Consistency
-Subtlety

-Active

-Variation

-Intricacy

-Spontaneity

-Boldness

-Opacity

     As I am interested in the field of graphic design, there are various visual techniques that can be utilized in getting a message out towards the audience. These two images portray a similarity in the sense that they are both trying to reach out towards their target audience, yet they have quite contrasting visual techniques to do so. In the first poster image, we see a use of transparency with the blue and red circles in the middle. This contrasts with the second image in which it contains opacity with its many objects overlapping one another on top of the woman's head. Simplicity and economy is evident in the first image because it is frugal with its use of elements. The same font is being used throughout the entire poster and the use of intricate design is nonexistent, unlike the second image which contains a variety of decoratives. The first poster image lacks a sense of movement, a technique that is found within the second image. The colorful rainbows and musical notes both shoot out in varying directions to indicate such movement. While the first poster is subtle with its design, the second is more bold and spontaneous which is likely to grab more attention from its viewers. In conclusion, while each image contains opposing techniques, they are share a common concept of utilizing visual techniques that adapt to a certain theme or idea. The first poster is trying to get people to attend an event that may not be as flashy as a "musical engima" that is being expressed in the second image.

Week 11 Contrast

 

     As I am interested in graphic design, I found this well-known iPod ad to be a good example of contrast. This image represents a contrast of color to tone. The black silhouette of the woman, the white iPod, and the pink background all contrast with each other. Although you would think that the pink colored background is what provides a pop-out effect in comparison to the black and white of the woman and iPod, it is actually the iPod that pops out in this ad. The white iPod and earphones stand out against the silhouette and pink background. This technique is used so that the viewers can focus their attention on the iPod, therefore making it successful in luring consumers to buying the product. If they had shown the actual woman instead of her silhouette and a busy patterned background instead of a simple colored one, the ad wouldn't have been as effective.

     This image was quite difficult to decipher at first. In the center, the phrase "Bad Vibes" is set out in yellow coloring. It appears that the designer was attempting to use contrast in color. Yellow shades of the phrase "Bad Vibes" was supposed to be used as a pop-effect compared to the rest of the design, which is set in orange, red, and pink shades. This did not really work since the designer utilized all warm colors. Because of that, everything in this image looks so similar that it would be easy to miss the "Bad Vibes" if one were to quickly take a glance. Perhaps if the designer had used cool colors, such as blue or green, to go against the warm colors, it would've made the pop-out effect of the phrase more evident and sharpened the visual statement.

Implied Motion In Design

     In a photo, an action or movement can be frozen in time. But when it comes to graphic design, the designer can create a concept of trickery to lead the viewers to assume something that actually isn't happening. In this photo, we see an implied motion of expectation. The person is holding out his hands to catch the pieces of paper. They appear to be floating in air with such perfect positioning without any blurred movement (The truth is they were held by pieces of string that were edited out in the finishing product). Yet it is common sense to know that they will fall into the individual's hands due to gravity. This motion of motion of expectation is relevant to the direction of horizontal-vertical.

 

     When it comes to web design or print, the designer wants to create something that will catch the viewer's eye. In this image, the design structure is set on a diagonal position. In terms of direction, diagonals represent stress and change. As we are accustomed to balance and harmony, this can throw off and grab the attention of the viewers. This diagonal design shows implied motion in the sense that it leads to the viewer to assume that the structure will slide downwards. Also, the font in the word "Motion" show a form of movement as well. The way that both letter "O"'s are positioned give off a wavy appearance. This wave gives off a continuous sense of movement.

Dimension/Depth/Space

 

      In graphic design, there are various depth cues that can be found within an image. Here, you can find an overlap. In an overlap, the object that covers another object is perceived as the one closest to the viewer. The interposition of the two left individuals standing in front of the buildings show that they are within closer proximity than the buildings. You can also find relative size in the individuals. The person on the right is bigger in size, therefore taking up a bigger field of view. This gives the impression that this person is standing closer to the viewer in comparison to the other two individuals who are taking up a smaller field of view. Lastly, you can find relative height. This depth cue gives the illusion of distance between objects. Here, the buildings are placed above the horizontal line, making the individuals look as if they are far away. The same is said vice versa in which the individuals that are placed below the horizontal line make the buildings look as if they are far away.

image citation: "http://www.pirsquared.com/"

Tone and Color

     

      Because I am interested in graphic design, I chose this typography artwork that contains both tone and color. Here, tone creates perception. The usage of tonal range shows shadowing around the edges on the right side of face, almost indicating that there is a light source coming from the top-left side of the image. Therefore shadow can indicate the positioning of an object. It is also evident in her sunglasses which happens to be facing downwards. The tonal range also adds more details to the woman's appearance. Here, it distinguishes the shape of her nose and eyes. Tone has a relationship with dimension. The variation in lightness and darkness that you see in the woman's face makes her seem more real by making her facial features pop out, such as her nose and eyebrow bone structure. If it weren't for tone, there probably would be no dimension, making the woman appear to look more cartoon-like instead of an actual person. Therefore tone is necessary in order to create the visual effect of a 3-dimensional illusion on a 2-dimensional medium.

    Color is used as a pop-out effect in this artwork. As humans are naturally drawn to things that catch attention, the color purple is used to catch the viewer's attention onto the woman's appearance. Color may also be used to convey emotion or come attached with a meaning. Although emotion and meaning can vary from person to person, it will still convey some sort of interpretation. For me, when I see the color purple on this image, I interpret it as expressing a sense of fashion. And that is due to the fact that the purple is visible in her makeup (eyeshadow & lipstick), her nails, and sunglasses. Color has a relationship with tone. Although color is not necessary in getting a message out as tone can do the job by itself, color does fulfill the decorative aspect of tone. Here, the color purple builds a richer visual effect to draw a viewer's attention. The varied shades found in color creates more tonal options for a user to add in a design compared to just grey tonal range.

Web Design

 

TEXTURE:   Texture is generally a substitute for the sense of touch. In web design, its purpose is usually to get attention and be visually appealing to the viewer. In this image, texture is evident in the background of the page (wooden floorboard appearance) and within the templates (aged paper look). Even though viewers can not touch the wooden floorboards or the paper, it gives the illusion that they almost can do so. This creates a sense of realism and adds more depth to an otherwise bland, 2D website. Texture can also add to the overall theme of a website. Here, the combination of the wooden layout in the background and the aged paper appearance within the templates project a sort of "Old Western" feel. There are endless styles of this element that can give more variation to appearances. Hence, texture has a lot to do with aesthetics when it comes to web design.

DIRECTION:   In web design, direction provides a sense of navigation or guidance. In this image, the element of direction is found within the way the content is laid out. The positioning of content is formed in the visual direction of horizontal-vertical. The text is presented in a way for the viewer to read topics from top to bottom (vertical), while the photos at the bottom and the navigation links at the top are scanned from left to right (horizontal). Not only does this create a visual rhythm, but the horizontal-vertical direction is associated with the idea of stability, which is quite fitting with web design. When one looks at a website, they want to be able to view the content with no complications or inconsistency. The way things are organized is vital in getting information out towards the viewers.

 

LINES:    Lines can be found in various ways: forming shapes, creating direction or movement, and developing symbolic notation. In this image, lines are used for structure in web design. At the very top, the navigation buttons are divided by the illusion of lines while the links at the foot are divided by actual lines. Even the headliner before each reading content is sectioned by lines. This division gives a clear cut definition of boundaries, allowing the viewer to see how things are categorized and organized. Lines also create shape. Here, they form boxed shapes which define boundaries as well. Such bordered shapes created by lines organize relevant information into sections of space on a website. This helps viewers see where one topic begins and ends, therefore showing the importance of giving out information in a clear, concise manner. This is quite similar to the element of direction.

Design Success and Failure in Relation to Syntactical Guidelines

      Because web designing is an area of interest for me, I find it important in creating layouts that make it easier for viewers to see since many individuals use the internet on a daily basis. This is an image of a blogging website that puts the syntactical guidelines to good use. There is a certain level of balance here in which the format is simple and easy to follow, but at the same time there is relative stress in which the section where blog entries are posted take up more space in order to focus the viewers' attention on that. On the left side of the layout, grouping is used to categorize similar interests, topics, and links to make it more convenient to navigate.

     This website layout clearly has a lot going on that could confuse the viewer. Just by glancing at it, I myself wouldn't know where to look first as it lacks a format that can guide viewers. The chaotic appearance follows the syntactical guideline of stress. It is the complete opposite of balance, which conveys simplicity, regularity, and harmony. Although stress can be attention-getting, the fact that it is uniform in this layout makes it difficult for one to be interested in navigating the website. For successful web designing, one should create it in a format that makes it convenient for a viewer to access a website.


image citations: "http://www.bloggerblogtemplates.com/"
                        "http://www.jamesvandyke.com/2008/01/11/worst-website-design-ever/"

Visual vs Symbolic Language

     Doubtful. Worried. Contemplative. Uncertainty. Depression. Grief. Frustration. Exhaustion. A feeling of having both hopelessness and helplessness. Wondering what will happen next. Feeling out of place. Searching for something. Lost. Needing a solution. Trying to find comfort. Stressful. Restless. Scared.

     A group of people are seated at a seminar for the unemployed. In the lower left corner, the photo focuses in on what appears to be the main subject of the image-- a young, blond man wearing a black shirt. His hands are folded together in an almost prayer-like position and rest on top of his head. His face is somewhat hidden due to the fact that he is staring downwards with his folded hands covering it. Yet observing from his side profile, he seems to have an expression on his face that indicates he is experiencing a negative emotion. Although the rest of the photo is blurred and out of focus, behind the young man are other individuals who are seated in the same row as him. Two of them are conversing with each other, another individual appears to be playing with his or her phone, and two men are staring straight ahead.

image (URL): "http://money.cnn.com/2010/04/23/news/economy/extending_unemployment_benefits/"

Visual Thinking Research

    
     In this puzzle, you are asked to count how many triangles you can find within the pentagonal structure. I had my mother do the exercise with me (my puzzle on the left, hers on the right). Although we did not find all 35 triangles that was stated in the solution page, we both did use similar strategies in counting off the triangles. We started with the tiny triangles that were more obvious. Then we used McKim's method of "finding," in which we tried to search for triangular designs that are concealed among the lines. This was challenging because a good portion of the triangles overlapped, creating a distraction when counting. We also tried using the method of rotation in which we scanned for triangles that are placed in various positions.

     In this puzzle, you are asked to find the two umbrellas that are identical. With the color sequences shown, it was actually quite difficult to find the two matching umbrellas, and we both ended up not finding the correct pair. Again, both of our strategies were alike in that we went through the "long" way of matching. Because the color patterns look so similar, we went through a detail-by detail comparison and categorized according to similar patterns that we discovered. For example, if we picked up on a certain color sequence, we would try to match it with another umbrella that shared that very same feature. This pattern recognition was the main focus in trying to find the matching pair. Also, since there was a possibility of the umbrellas being rotated, we visualized a fixed image of an umbrella in a different position. This second method  of "rotation" was challenging due to the fact that we had to find a color pattern first.

Feature Hierarchy and Visual Search

     The internet contains a wide range of information for viewers to see. Some of these contents cater to what we are searching for while others are unnecessary information that we tend to skip over. As we peruse through websites, it is natural for us to quickly scan over a page as we may not have the time to absorb all that is displayed on a website. The sequence of eye movements that we make as we scan a page shows that we can only pick up information that we need as we focus our attention on something. Such visual queries express significance in terms of web designing. We must design a website in order to make it more efficient in processing information faster. The use of feature channels, such as color, spatial grouping, typogaphy, and motion are top factors in aiding rapid access to a cognitive task. For example, Facebook, a popular social networking website, is continuously drawing in a large number of users. Because of this, they are constantly making little changes in their page's layout in order to make it more convenient for viewers to access the site.


image (URL): "http://cantondog.com/103/more-hate-for-facebook-home-pages-get-new-layout-too/"

Top-Down Processing

      This image is an illusionary example of top-down processing. Here the viewer is able to focus their attention on a certain task that they would like to accomplish. For example, they could center their attention on the "black circles" or on the "white lines" that create the outline of a cube. This creates a biased goal in which whatever the viewer wants to see, they will easily perceive it (Are they really seeing black circles? Are they really seeing a cube?). Also, the image creates a sequence of eye movements. The viewer will most likely try to trace the "white lines" to see if they will create a finishing product (a cube). This design is set as a perceptual illusion.

image (URL): "http://openlearning.wordpress.com/2008/03/07/delightful-illusions/"