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/"