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