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.