013: Week 15 Blog Exercise – Interactions Between the 3 Levels

Representational

This image is representational of a desk top setting with pen holders and writing utensils scattered about. Anyone who sees this can easily recognize this as such because as literate human beings, we've encountered a similar setting before. Or we may even have seen it in media where a person is at their desk with a piece of paper in front of them with pen holders and writing utensils and other kinds of items scattered about.

One would recognize the idea of using a mug as a form of storage, particularly for pens and would immediately draw the connection upon seeing this picture. Despite the entire image in blue and white, we can recognize that to the right of the pen holder is half a can for storing smaller writing utensils. There is then of course the rectangle shape at an angle we typically view paper as in addition with a fountain pen (with the trademark point).

It relates to the level of abstraction being a much simpler form of a desk top setting. Everything is reduced to the basics from the desk top itself and the items with little to no tone.

It is symbolic as the details are are uncommon with the world and symbolizes another form of instrument - the art program that is Photoshop.

Abstract

This illustration itself is an abstract of a desk top setting. Eveyrthing is in its basic form with very little detail such as the mug as in the upper left with little to no depth with its limited tone. It is only using was is essential for recognizing with the common shape and placements. The image, as stated earlier is also entirely in blues and white, departing further from an actual representation and this way, gives it some emotional impact.

It relates to the level of representation being a distilled form of what its meant to appear as.

The image is an abstraction toward symbolism with both arbitrary and experience assigned meanings as shown in the details.

Symbolic

There are many symbols prevalent in this image. For one, the contents of the pen holder are of tools a person can use in the art program, Photoshop. The zoom, hand, font, magic wand, and brush tool inside the mug are all symbols that denote writing/art utensils. Similarly, the contents of the can sans the eraser tool are all symbols of smaller utensils a writer/artist uses. The erase likely acts as a connection for the viewer to make as both the smaller tool and another part of Photoshop along with the arrows and dodge tool.

The other tools scattered about can be among many possibilities, there is the clone stamp tool and healing brush which in the context of this image seems to be more abstract representations of an actual stamp and band-aid. Here, we can interpret the other Photoshop tools to be just as random items on a desk or in relation to what we know, such as the crop tool possibly symbolizing a paper clip and the notes tool as a post-it.

Finally, there is the rectangle shape containing a checker pattern. This is atypical of a blank slate of a Photoshop image to work on with lines created by the (enlarged) pen tool. As mentioned earlier, it seems to represent a piece of paper and pen and it does so abstractly with the placement and shape. However, this image cleverly places a blank Photoshop slate and its lines created by the pen tool to act as symbols of a piece of paper and pen.

012: Week 14 Blog Exercise – Application

Representational:

Image taken from http://cakecentral.com/

This cake here is representational of a handbag; more specifically, a Coach Inc. one. Furthermore, it is placed on what appears to be a wrinkled sheet but in reality is decorative sugar. Many of us, especially from the developed world, would have no troubles immediately associating the particular design of the letter "C" (as shown on this "purse") with the brand. The sheet itself, however, is easily recognizable by anyone with the form of a 'wrinkled' substance is common from clothes to bedsheets. What makes this a good representation of a Coach bag is how it counters the conventional shape and look of a cake: circular and solid color(s). It is technically faithful to a common Coach Inc. handbag in visual details from the color, shape, and tone. It even carries on some texture with the lines in the handles to appear as stitches and the creases of this sheet it is placed on.

Abstract:

Image taken from http://forum.tureng.com/members/islim-albums-abstract-picture164-abstract-wallpaper.html

This desktop wallpaper is an abstract design of a storm. While it is representational in color and recognizable shape, it is still a reduced form with the use of simple shapes (especially the circles), directional arrows, and little depth. The only form of depth in this image are the overlapping shapes, tone, and color. It also makes use of symbols with the arrows to denote wind and for all its purposes, proves to be abstract this way with this arbitrarily assigned meaning. There are connections with familiar visuals such as the clouds and more notably, the rainbow. It has the identifiable curved arch and is multi-colored. However, is still a reduced form of this light spectrum being technically unfaithful with such deep, solid colors. Not to mention the red color is usually the first or second color on the top half of one.

Symbolic:

Image taken http://www.zazzle.com.au/fundamental_game_symbols_bumper_sticker-128029983741117189

These four circular shapes are the iconic symbols of the Sony Playstation controller: a square, triangle, x, and circle. In Japanese culture, the shape of a circle signifies "okay" or "approval" and in a game, this would be the confirmation button. The "x" is typically a symbol of disapproval and likewise, would be a button to cancel an action. Teiyu Goto, a Sony engineer has revealed that this was indeed, the reasoning behind the shapes of the Sony Playstation controller and also shared the meaning of the triangle button, which signifies viewpoint, and the square as a piece of paper.

However, in the US market, the "x" has been the confirmation button with the "circle" and the cancellation. This could be for ergonamic reasons, with the player resting their thumb easier on the "x", as it is on the bottom of the controller rather than on the side.

These symbols are culture-dependent, as many US consumers aren't aware of these meanings. In addition, these are be non-iconic symbols, being arbitrary functions, especially outside of a gamer's knowledge, much less a cultural one.

011: Week 12 Blog Exercise – Visual Techniques

image taken from anliah from deviantART.

• Asymmetry
• Regularity
• Economy
• Boldness
• Activeness
• Consistency
• Flatness
• Singularity

image taken from missesglasses from deviantART.

• Asymmetry
• Irregularity
• Complexity
• Unity
• Intricacy
• Spontaneity
• Flatness
• Variation
• Juxtaposition
• Randomness

Here are two resources provided by two different people that can be used (for non-profit) graphics be it for wallpaper, banners, layouts, etc. Its these unique kinds of designs that is what inspired me to want to be part of the visual communication world as for fun and practice I take some of these provided resources into use for recreation and even look up to these to make "resources" of my own.

The first design, is a curved rainbow placed on the left side so as to open space for text or other images on the right. The second is a collage of various scans/photos placed together to make a compiled design that can used on its own as a header or part of another graphic design. The first is more singular as it is of one component, the rainbow in comparison to the second with its visual technique of juxtaposition. There is the random placement of phrases which color and shape juxtaposes but blends in well due to the nature of the words and accompanying images (cute frogs and bugs).

Another way these two designs contrast is through regularity and irregularity. The rainbow-like curve is a uniform of the colors that go in the same direction and from bottom to the top, start rather small and get larger as it goes higher. The second design is comprised of various elemental units from the different cut outs and there isn't a pattern.

There is also Economy - Intricacy that differentiates the first (being economy) and second (being intricacy). The first design uses the elements of line, shape, and color. It is rather frugal with these elements and to be used in the same manner. There is also a bit of a contrast with the gray background, but otherwise, the rainbow curve is very easy to look at and digest. The second design is more intricate as it is much heavier than the rainbow curve, carrying various shapes, lines, color, and layers. Some of the shapes overlap another (the frog over the love letter). It is very detailed and offers an a visual of power and wealth.

010: Week 11 Blog Exercise – Contrast

Despite the stark contrast of the child-like cartoon depiction of a young man to the far right of this Yaris ad, this is an effective use of contrast. There is a contrast is tone, color, and shape yet harmony has also been successfully achieved. With the car, there is a clear amount of light source that gives it different tones and shades and thus, depth. A quite amount of tone was given to the young man as well so as to blend in a little better with the car but not quite contrast completely with his simple shape.

The left of the ad would have usually dominated the entire image but with the vastly contrasting shape and tone of the young man in a cartoon fashion, the weight is distributed evenly. There is more visual reinforcement with the "mp3 player balloons" that the young man is holding in addition to the color of his attire which isn't that all vibrant. The young man himself acts as a compositional counterforce to the regular shape of the car to his irregular, unpredictable, albeit simple shape.

Here is an example of a poor use of contrast. The intended use of this image, which was to use scale to contrast the green blocks (opened cases of X-Box games) to give off a feeling of massiveness or "tall" as with the King Kong and the green blocked shaped Empire State Building. No doubt this was an attempt to display how the producers/advertiser wants the audience to feel, with the XBox giving off a large scale, immersive feeling into their movies.

However, the gray bar on the bottom for me is seen as "the ground" thus I cannot imagine King Kong being any higher up than two feet. This is further supported with the XBOX 360 console itself "standing" on the gray bar as well. The design has succeeded in terms of contrast in the sense of color, where the bright green pops out and draws the viewer's eye to it but it doesn't achieve much harmony because of the stark differences in tone.

It has done a decent job in some design elements individually, such as scale with the texture of the green blocks more apparent from the bottom and color from dark to bright. But overall, contrast has not been successfully achieved as all I'm seeing is what feels more like King Kong in the background with green legos.

009: Week 10 Blog Exercise – Movement/Motion Blog

Image taken from http://www.impawards.com/2008/slumdog_millionaire.html

Here is the cover for the movie: "Slumdog Millionaire". It is an example of implied motion in the sense of induced motion. The female character in the center appears static as the city lights are blurred horizontally to the left. This is to give off the implication that she is running quickly with the lights oozing past her as she is departing that direction. This would be a low level system of motion perception because the blurred lights would be the first thing a view would catch as it is bright and complex. Their eyes will follow the direction it is going and then proceed to recognize the two still figures as a man and woman.

There is also apparent movement within this image. With knowledge of the world, it is easy to interpret the woman running because of the positions of her arms. In addition to the concerned facial expression on her face, the way she clenches her fist and has the right arm in an angle with her left in front, this is what is commonly recognized as someone who is in a rush that is running.

Image taken from http://www.musicalcolors.com/what.html

Here is another example of implied movement here in this musical score. Following the notes from left to right as we have a preference for the lower left, there is a diagonal/triangle-like dynamic. A diagonal is almost always used to communicate movement and change. This is what is known as diagonal stress in which uses the universal nature of implied movement. With a combination of the lines, color, and direction, there is a felt axis given the top-bottom preferences. The different colors of each note has the eye travel up and down as one consciously tries to recognize each individual color.

In addition, through knowledge of the world, reading it this way is a given because thats how musical scores are read. Thus, the eyes are being lead through composition as with all 2D graphics. It is seen as going "higher" as well with the notes climbing on top of each other with the last one being in a higher position than the first.

008: Week 9 Blog Exercise – Dimension/Depth/Space

Figure 1. Screenshot from the Nintendo wii 2010 game: Xenoblade. A closer view of the playable characters' backsides are seen dependent on how stationary they are left (i.e the player not playing) and/or the camera angling dictated by the player through certain buttons.

Here are screen shots from the 2010 Nintendo wii role-playing game: Xenoblade that places a large emphasis on exploration. In figure 1, we get a closer view of the playable characters' backsides than usual when actively playing. It makes use of the depth cue of overlapping as we see the character with the red weapon in front of a tree which is in turn, in front of many buildings so we see the character as being in front of these things from the player's perspective.

Figure 2. The game being actively played with the characters running around town.

Here is a screen shot of the game in action. The player is actively moving around and we get a better sense of depth and size from the surroundings. By relative size, the buildings and the road are taking up the most space in the player's field of view. This is to give off a sense of immersion through relativity that the things around us in the game would be in the same scale as if we were to enter the world ourselves.

Figure 3. The town that the characters where previously in (figure 1,2) being seen from a distance.

The town the two playable characters were in earlier (figure 1 and 2) is now seen from a distance after a bit of traveling. This makes use of the depth cue of relative size, where objects that take up a small part of the field of view are perceived as being farther away from the objects that take a larger part of the field (Veeder). The burg that was once so large and had buildings that extended beyond the civilians height is now seen as the same height as the characters.

It is also making use of relative height with the town being above the horizontal line, thus also being perceived as being further away. In this image here, the characters here are in the center of this shot and are relatively small, so they also are perceived to be seen from a distance from the player's point of view.

In addition, linear perspective is coming into play here with showing two verges on each end of the image converge, being where the town is. There are what looks like man-made extensions on the left side which appear larger (relative size) giving off the perception that it is closer while being connected to the burg.

007: Week 8 Application (Blog) Exercise: Tone and Color

Figure 1. Screencap from The Legend of Zelda: The Wind Waker featuring Link (character in green clothing) holding a boomerang.

image taken from: http://www.lazygamer.net/what-is-the-problem-with-cell-shading/

Figure 2. Link experiencing a massive explosion.

image taken from: http://www.wikipedia.org/

Here is a screencap from the Nintendo GameCube game: The Legend of Zelda: The Wind Waker released in 2002 in Japan and 2003 in America. I am very interested in the field of game design and hope to pursue it sometime in the future. This game implements the use of cel-shading, which heavily relies on tone and color for its visuals.

Cel-shading, as defined by wikipedia: "is a type of non-photorealistic rendering designed to make computer graphics appear to be hand-drawn." Tone, provides the foundation for this game, as seen with the simplistic lighting on Link (figure 1) and in the smoke in different shades as a result of an explosion (figure 2). If we were to see these images in complete monochrome, we can easily distinguish the intensity of darkness or lightness, such as the light source coming from the upper right (figure 1) and the impact of the explosion in the center due to its brightness with the darker shade indicating the smoke dissipating. Every bit of shading is straight-forward and with a purpose.

Tone here, interacts completely with dimension. It is what gives each of these shapes depth such as the boomerang (figure 1) with only the indication of being three dimensional is how it has an edge that faces light. The same goes for Link himself and the slime creature "ChuChu" that have shadows that follow them in whichever environment they're in. In figure 2, the light lines of the water show that its not a solid ground, but something that provides waves and has depth. There is the shadowing of the ledge as well, showing it rises up and there's a face that you can run into as seen here with Link rolling against it instead of over it.

Color, is an incredibly important aspect of this game's graphics. For one, the bright hues and saturations provide the tone of the game. It takes advantage of how the human brain has "learned" colors and sets a mood of simplicity and cheeriness to an extent, creating an entirely new world to explore. It emits a more positive emotion. The same level of brightness provides harmony, so that each part of the game is being interacted the same way. As shown in figure 2, color and tone is highly dependent on context, the setting was within a cavern-like area where there is little light and upon exploding a series of bombs, the impact is defined by the bright colors and tones.

Color in this game is involved with defining shapes. Aside from the informational aspect (life, buttons, etc.) here are no black outlines to define shape but rather, color along with tone. Different hues are used (figure 1) to represent each thing from Link himself, the approaching ChuChu, the tall blades of grass and other vegetation, which all are green. Also, in figure 2, the color makes distinctions among similar shapes. Each of the explosive smokes are of different bright levels of orange, to give each part of the smoke an emotional punch.

I would highly recommend anyone with access to a GameCube or wii to get a wonderful taste of this tonal and colorful experience.

006: WK 7 Blog Exercise: Basic Elements (1) in Relation to Web & Graphic Design

image taken from and made by

http://www.orangelabel.com/

Shape is the apparent design element used in this logo: "Tasta oh!" for a particular cafe in Barcelona. Two-dimensional circles are placed all over and there is also a bit of texture and color featured to give each individual circle a distinguished and unique look. Line for the text "oh!" is used as well. Circles are said to represent the visitors to its wonderful teas and pastries. Circles were an appropriate choice as they are usually defined to be endless, of warmth and protection so it gives off a rather calming effect. A square wouldn't have worked so well since it would've been too stiff with its straightness and workmanlike feeling a triangle would've created unneeded tension as it represents action and conflict.

image taken from and made by

http://www.orangelabel.com/

Lines distinguished by color is the apparent design element used in this logo for Quadplus, a telecom service. Quadplus offers internet connectivity and so these thick, curved two-dimensional lines define relationships to "get connected" so to speak. These lines with their dynamic movements can be said to be dots in motion depicting enormous energy that never sits still. It has as Dondis would put it, "direction and purpose" and the designer defines the lines used in this particular design to represent different information channels.

image taken from and made by

http://malionette.org/

Color is the dominant element in this layout designed by fruitstyle for livejournal users. Giving color to specific text - lines in this context are what makes this particular design unique. By giving only select areas of this design against the neutral white gives this layout emotion and character as it is said that color is given associative meanings. Meanings such as blue with the sky and ocean, green with nature, red for passion, and so forth. The text given color are links, to highlight their meaning and importance. In addition, these colors are rather bright, saturated and are of secondary hues, giving them more of an emotional punch, "highly charged with expression and emotion" Dondis would say.

005: WK 6 Blog Exercise: Design Success and Failure in Relation to Syntactical Guidelines

image taken from and made by 99mockingbirds

Here is a sample preview of a particular layout design for use by 99mockingbirds. I would love to be able to making layouts/designs and such for websites, be it for personal or professional use in the future. The colors and dynamic shapes along with the focus of a Pippy Longstocking-like monkey girl sends the visual message of cheeriness and movement. This design was made to target those who seek a fun and dynamic character.

It puts the Syntactical Guidelines in perfect use. It is in balance as the irregular shape of the header is given a horizontal base, served by the "FULL SATISFACTION GUARANTEED" as it is formed in a straight line. With a vertical axis through the header, we can see there is an equally amount distribution of color such as with the enlarged character on the upper left with the jagged circle on the lower right. This design also takes note of out "preference for the lower "left" with the alternative links and notes placed on that side. It also makes use of the Gestalt principle with the law of grouping. The main image of this Pippy Longstocking-like girl is repeated all over the header in different sizes and colors but as the law of grouping states proximity has us see the image together as a whole than separately. In terms of negative and positive, it wonderfully defines the two with the positive being the header and the layout as it dominates the eye and the white around being the negative; being more passive. I would love to use this layout sometime in the future!

screencap of http://www.frnz.de/

Here is a perfect example of a design work for websites that DO NOT work. Or rather, has not put the Syntactical Guidelines into consideration at all. According to http://www.blogstorm.co.uk, this is a website that belongs to an Australian technology company. Even more strange, it plays a non-looped MIDI of Nobuo Uematsu's "Sending a Dream into the Universe" from the Final Fantasy VII franchise. For a supposed website of technology, it does not visually communicate this fact at all (sans the possibility of the text stating this). What with the use of flower and hearts and if you scroll down, a picture of a dog!

It is horribly unbalanced, what with the unequal usage of the orchid and animated separators. If you were to put a vertical axis in between, there is no equal amount of color or shape distribution whatsoever, thus this is a design of stress of complex and unexpected variations. This design does acknowledge preference for the lower left in a way, with a message that would require some effort to read due to the uncomplimentary nature of the colors. The overload of positive in this website calls for too much attention and effort with the blinking gifs and images. I don't think anyone would believe if you if you told them a technology company professionally endorsed this.

004: WK 5 Blog Exercise: Visual vs Symbolic Language

image taken from http://www.life123.com/career-money/find-a-job/unemployment/apply-for-unemployment.shtml

woman

box

quitting

fired

laid off

recession

stylish (jewelry)

office

expressionless (face not shown)

unhappy

single woman (ring not visible)

professional

person of color

In this photograph, a woman, presumably African American or Hindu is shown wearing a grayish brown pinstripe suit. The suit notes that this woman is in a setting that has a dress code. She is wearing two pieces of jewelry, a necklace with a small, white oval-shaped jewelry in the middle and a thin, golden bracelet on her left hand. These accessories add on to her professional appearance. A ring is not in view as her ring finger is not in full view, due to her holding an item, so it is hard to determine whether if she is single, engaged, or married. Only from the neck below down to her upper thigh is shown because the focus of the image is to be placed on what she carries.

She is holding a large cardboard box with its blue lid underneath, leaving the top open to make room for her things that she needed to pack. What is shown sticking out of the left of the box are large thick books, facing upright, possibly the best way she can squeeze them in along with whatever else is in the box. On the very right a black, metal netted pen holder is in view stuffed with various thin and cylindrical items such as a makeup brush, No. 2 pencils, ballpoint pens, and a large pair of scissors with the outer part of the handle navy blue with the inverted side a baby blue. The items in her box indicate that this was a type of office job.

This is a typical scenario as seen in TV shows and movies of one leaving their job permanently, whether they were laid off, fired, or quit themselves. However, in the nature that was intended of the photograph, this woman was most likely laid off. The absence of her face leaves her expression up to interpretation by the viewer but with all things considered, it would be a safe guess to say she is crestfallen.

003: Week 4 Blog Exercise - Visual Thinking Research

Here is my sad attempt at trying to solve the "Name the Month" puzzle from Visual section at puzzles.com. From the brief that stated to "break down this code" and to "decipher what month it could be", I thought the shape and color was forming a familiar symbol that would help me figure out what month it was representing. I attempted a form of pattern completion by adding the rest of the letters that would name a month, such as the blue shape looking like a J, thus adding 'anuary' then the 'O' for 'October' but then got stuck at what looked like a 'C'. On top of that, there was the much more perplexing "o" with arms at the end. I was hoping to seek a pattern within the months 'January' and 'October' and found none.

I then thought then maybe the colors would be some kind of hint and thus, thought the blue indicated winter, the red fall, the green spring, but caught myself in another rut with the orange, which also could've been fall. In retrospect, I'm not sure why summer didn't come to mind.

Finally I tried taking another viewpoint by rotating. As shown, I rotated the image 20 degrees to the right in hopes of finding some form of clue and still remained confused. Thankfully, my friend figured it out first.

This is my friend's successful completion of the 'Name the Month' puzzle. She immediately distinguished a commonality, and with the use of spatial analogy, she deduced that it had to be a four-letter month as there were only four shapes and months were usually abbreviated with three letters. This, in her mind led her to believe it had to be "June" or "July".

She then attempted to take another viewpoint by turning her head left and right. She employed finding by placing her hand around and on the letters to try to make something out of it. Eventually her pointer finger came in between and with the use of orthographic imagination, she discovered it as a mirrored image of 'July'.

Here is my take on "Puzzling Journey 2" from the Pencil 'n' Paper Puzzles section of puzzles.com. The rules state to get through all 64 cells, beginning at the red gate, passing through the green in the center, and leaving through the blue one. You can only visit each cell once and without the use of diagonal lines. Immediately I was reminded of very similar Super Mario Galaxy puzzles that have similar rules (at least, in the sense of being only able to visit on block at a time), so visual memory came into play as I attempted to solve this puzzle. I mentally formed a line to go through this journey and managed to solve it on the first try!

Here is my friend's take on "Puzzling Journey 2". With the rules in mind as well, knowing she couldn't go diagonally, she explained that she simply just went up and down. This way she was mentally forming in a pattern that would able her to fulfill the journey by its rules.

002: Week 3 Blog Exercise - Feature Hierarchy and Visual Search

image taken from: http://www.imyouare.com/

This image here features the second single album of the Scottish alternative rock band, Franz Ferdinand entitled: "No You Girls". In addition to any kind of video game related design, I am also very interested in packaging designs, such as cover album art. This piece makes use of the feature channel of color and brightness. Particularly, in a way that makes us detect color preattentively as quick glances has me immediately drawn to the words, "No More Girls" and the shoes on the bottom right of the image worn by one of the members. However, the words "No More Girls" are immediately processed.

What makes these three words easily digestible is because of the choice of sans serif typeface, making it an effortless read. The rest of image would require a bit of scanning, involving a bit of bottom up processing. This is when we scan for recognizable features, patterns, and objects to determine what it is we're looking at. Thus, color coupled with shape is what makes "No More Girls" first in the feature hierarchy of this image. What I'm immediately drawn to next are the "Franz Ferdinand" words in orange as it is the only color outside of greyscale. This makes use of a "pop-out effect" where it is isolated by hue. Finally, the rest of the image would be processed next after the text.

If I were to visually search for any works by this particular artist in a store for example, I would as Ware would put it, seek out ways to find the artist's name and so the "brain will tune my low-level feature receptors" so that letters that form "Franz Ferdinand" send out stronger signals. Another way would be to simply look for feature channels of shape, seeking out the band members themselves within the image. With that in mind, it is clear that this cover album art was designed in a way so the orange text would be seen first in terms of this picture's feature hierarchy to aid those seeking this artist.

001: Week 2 Blog Exercise - Top-Down Visual Processing

This snapshot from the classic 1985 Nintendo entertainment system game: Super Mario Bros. which is a good example of an image involving Top-Down Visual Processing. This is a design example related to my intended and existing are of study: Visual Communication that would include strategies that can be applied to videogames, a passion of mine that I hope to pursue in one form or another.

This image alone triggers the mind (especially to those familiar with the game) that there are more than more than seven actions that can be done, creating many saccades. There are many goals to achieve and so one can find themself fixated all over. You would need to look ahead (staring to the right edge of the screen in this case) to enable future actions and there is the matter of the question blocks, with one of them containing a mushroom power up. The power up would require a "just-in-time" query because as soon as it 'leaves', it can no longer be retrieved. There is constant re-thinking involved, from wondering if you should hit all the bricks or not, or to ignore them, and so forth. This one area featured in this image is "driven by the demands of attention, which in turn are determined by the needs of the tasks" (Ware, Visual Queries, p.10). Specifically, for this design, one would need to consider the timing of jumps and when to go proceed or not, especially as backtracking cannot be done.