Visual Techniques

Balance
Regularity
Unity
Predictability
Stasis
Bold
Episodicity
Sequentiality

Asymmetry

Simplicity

Subtlety 

Accuracy 

Singularity 

The first ad is for the iPod nano.  It uses bright bold colors to attract attention while simultaneously using those colors to communicate what color the iPods are available in.  The ad using sequentiality with the colors by arranging them into a rainbow.  The paint dripping down from the iPods makes the colors pop out even more, creating a sense of loudness and fun which are appropriate in trying to sell music players.

The Second ad is for the Mac Book Air.  It is a very subtle ad because it is mostly black with a bit of grey.  The laptop is shown from the side to demonstrate how thin it is which goes with the subtle theme of the ad.  The point of the ad is to emphasize how thin the laptop is and this is done well with the black background which makes the thin strip of light grey stand out.  This ad creates a much calmer and quieter feeling than the ad for the iPods by only displaying one of the product and having a much more subdued color scheme.

Contrast

Good Use of Contrast

http://farm4.static.flickr.com/3054/2575279443_d5ed4043d6.jpg

The above photo is of a row of ad posters for iPods in a BART station.  These ads use contrast very effectively in a couple different ways.  The first use of contrast is with the bright colors on the posters that make them stand out from the dull brows and whites of the station.  This contrast grabs the attention of passengers on the plantform and making the ad more effective in selling iPods.  Second, the posters themselves are very simple in design.  They each only use two colors and the only element of the posters with detail are the white iPods which contrasts with the bright colors of the poster, making it very clear what they are selling.  

Poor Use of Contrast

http://www.directionsmag.com/images/newsletter/2007/01_18/HIV_Map_lg.jpg

The above map is intended to illustrate the number of people living with HIV in europe by the millions.  The yellow to orange colored areas represent lower numbers while the pink and purple areas represent higher numbers.  While the information this map offers is useful, it is difficult to read due to low contrast between some of the colors, particularly the pink and purples.  Iceland and the Ukraine are two different pinks but it is difficult to tell, especially since iceland is surrounded by light blue and the Ukraine is surrounded by purple.  The light blue and purple make the two different pinks look the same.  Due to this poor use of contrast, someone trying to gather information from this map may end up misreading it because they can not easily tell the difference between the similar colors.  

Movement and Motion

http://portalkh.files.wordpress.com/2010/08/shipalso.jpg

The Image above is from a part of the video game Kingdom Hearts, where players have to navigate a ship through a 3D environment while dodging obstacles and shooting enemies.  The rout the ship must take from the beginning of the level to the end of the level is a strate line but the 3D obstacles and enemy ships that the player must dodge means that the player needs to be able to move all over the path.  This presented a challenge to the designers of the level because they had to decide how to allow the player to navigate vertically and horizontally through the space as well as forward, without getting disoriented and losing track of where the path is.  In order to solve this problem, the game designers made it so the game camera never moves.  It always stays in the center of the path and everything the ship flies towards simply looks like it is al moving backwards.  while the camera stays in place, the ship is free to move horizontally and vertically on the screen, allowing it to dodge the obstacles that are flying towards the camera and the ship.  The motions of all the obstacles moving toward the camera gives the illusion that the ship and camera are flying forward through space.  

http://upload.wikimedia.org/wikipedia/en/thumb/e/eb/MarioPArtyDS.jpg/220px-MarioPArtyDS.jpg

This is a screen shot of a mini game from Mario Party DS.  In this game, the player's character is on a conveyer belt that is moving towards the camera.  The conveyer belt is covered in food that act as obstacles that players must run around.  If a player does not successfully get around an obstacle, they will fall off the end of the belt and lose the game.  This game is very similar to the game addressed above however simply letting the character move left and right would not work here.  They players would not have enough time to navigate around some of the bigger obstacles if they were confined to a set depth away from the camera like the ship is.  To solve this problem, the game designers allow the player to move there characters forward and backward through space rather than just left and right or up and down.  This allows the players to move father away from the edge of the conveyer belt, which gives them more time to successfully dodge the obstacles and eventually wint the game.

Dimension, Depth, Space, and Scale

http://awesims.sixty-ten.net/wp-content/50shouse-exterior-driveway.jpg

The image above is of a house that was designed using the computer game, The Sims 3.  In this 3D game, players can create avatars and houses for them to live in.  In order to make the design process easier, the game uses a lot of visual cues to communicate depth and dimension within this world.  In this image we see the house in a 2 point perspective.  We also see shading, particularly on the house and plants to help us define where the light is coming from.  We can also see Atmospheric perspective on the hills behind the house, which helps illustrate that they are far away.  It is easy to tell that the white house in the background is pretty far away as well because we can campare its relative size to the familiar size of the green house.  We can also tell what is closer and father away from us by looking at the overlap of some objects, for example, the bush with the orange flowers is the closest object to us because it overlaps the house and other plants, and is not overlapped by anything its self.  

Color and Tone

In the PlayStation 2 vido game, Kingdom Hearts, Color and tone are used throughout the game to create stunning environments that were inspired by a number of Disney movies and cartoons.

Tone

The video above is game footage of the level that took place in the world of Steamboat Willy.  The level was done in all black and white, just as the old Steamboat Willy cartoons were.  In the creation of this game level, tone was much more crucial in visually communicating what was going on because it had to communicate that the characters were in a three dimensional environment, while the animation of the old cartoons only had to display two dimensional environments.  The animation has very high tonal and dynamic ranges which help define the three dimensions more clearly.  The old cartoons actually had lower tonal ranges which made them look much simpler.  

In this three dimensional environment, there are hardly any textures used. Everything from the water to the trees looks as though it has a completely smooth surface.  If the game had higher dynamic range, more texture and detail could have been added to the level, however it would not have fit in as well with the Steamboat Willy theme, since the old cartoons were very lacking in detailed textures.  

Color

Kingdom hearts takes place in one of the most vibrantly colored video game worlds.  This is partially do to the fact that they are trying to create a world in which they can incorporate many styles of disney animation.  If the game colors were really saturated, some colorful worlds like Beauty and the Beast's world would not look right.  

As you move your character around the game world, color helps define objects and lighting within the 3 dimensional world.  Smooth gradients help illustrate the presence of light on rounded shapes like spheres and cylinders, giving the game a very defined 3 dimensional environment.  

Video Game User Interface Design

The Line

This is the world map for the video game Grand Theft Auto IV.  This map is frequently accessed by players and is easily accessible from the main menue of the game.  While the information the map is conveying is rather complex, the map has been simplified down to lines that connect important points (represented by dots) to each other.  Similar to real world maps, thicker lines represent high traffic streets while thinner lines represent less busy streets.  Lines were used in the design precess of this display to build up the map and remain as part of the final presentation.  

Texture

Texture is used all the time in video game menues to help bring out the themes of the game.  The above image is the menu of a list of songs from Guitar Hero II that players can choose to play.  The background is given the texture of a wrinkled piece of binder paper and the text of the menu looks as though it were written by hand.  This was done to make the players feel as though they are looking at a set list.  A set list is the list of songs on a piece of paper that a band is going to play at a show or concert.  This paper textured menue helps create the feeling of being on stage at a concert for the players which is pretty much the entire goal of the game.

The Dot

Dots are the most basic one dimensional unit of construction.  The pixel is the digital equivalent to the dot and is seen in all the old video games.  Unlike dots which are round, pixels are tine bits of square light and color that when organized properly can come together to form digital pictures such as the above screen shot of the classic game Super Mario Brothers.  Pixels are still used in vido game graphics today as well as in all forms of digital media however, they have become smaller and more concentrated, creating smoother and more detailed images.  

Visual Thinking Research

For my visual research I picked two games to play with my mom off of http://www.puzzles.com/PuzzlePlayground/Visual.htm

The first game we played was The Cat.  In this game we simply had to count up all the triangles in the picture of the cat.  

My strategy was to simply count all the obvious triangles starting with the most complicated area of the cat, the tail, and them moving to simpler areas like the body.  I then went back over the more complicated areas and started counting off triangels made by combining more than one triangle.  

My mom's strategy (seen on the right hand side) involved starting at the top of the cat and working her way down to the tail.  She did not realize at first that multiple triangles could be combined to form bigger triangles but once she figured that out, she was only able to find the ones in the tail. 

 We both missed the 4 extra ones that made up the eyes.  Since we were both looking for triangles, we were both using pattern seeking.  It was easy to find the triangles with obvious contours but building up triangles from shapes with separate contours like in the tail and eyes was a bit more difficult.  

The second game we played was called Five Routs in which we had to get the little men to their respective houses without any of their paths crossing. 

I quickly realized this game was much harder than it looked.  At first it though I would move each man one square at a time so that i would be able to foresee when their paths would cross.  This strategy did not work out because it was impossible to get them anywhere without a fully formed plan.  I decided to work with one man at a time and just try not to cross between other men and their houses.  This strategy only worked for 4 out of 5 of the men.  I simply could not figure out how to get person A to his house.

My mom's approach (seen on the right) was to use as few tiles as possible while not crossing between other men and their houses.  It took her a couple attempts to get 4 our of 5 of the men to their houses.  

While trying to figure out the proper paths for the men to take, we both utalized visual reasoning.  Visual logic told us that direct paths to the houses would cause the routs to cross so we therefore had to figure out which squares would get one man to his house while not cutting off another man from getting to his house.  

Visual Perception 2/ Feature Hierarchy

http://blog.comcast.com/assets/newsaguide.jpg

This week we have been talking about feature channel hierarchy which talks about how some elements such as color, shape, and movement catch our attention and in what order they do so.  The image above is of the Comcast TV guid which greatly utilizes the color, movement, and shape channels. 

Although it is not visible in this image, motion is used in this display.  In the top right corner of the menu, there is a video preview that advertises upcoming shows.  This part of the display may be the first component of the page to catch the users attention, fallowed by the actual TV guid menu.

The fist thing we notice in the list of programs is the bright yellow rectangle which simply marks the item the remote has selected and corresponds to the information given on the top lefthand side of the screen.  Next we notice the long purple block that indicates there is something special about that program that may interest the user.  In this case the purple block is representing that the program is a movie.  Other than the column of light blue squares on the left hand side that indicate the channel the row is addressing, all the other blocks are the same dark blue, but some are much larger than others.  The smaller blocks indicate shows that only last a half hour while the larger blue boxes indicate shows that run for more time.  Each row of blocks corresponds to the timeline at the top of the menu.  Over all the color channel is at the top of the hierarchy for this display.  Color is used to indicate headings or programs of interest and then shape is used to attract the user’s gaze to shows that are on for a longer time.    

Top-Down Visual Processing

These are instructions for building a smal Lego set.  It utilizes Top-Down visual processing because "visual queries are processed both rapidly and correctly" in this display.  (WARE, Visual Querries)  The queries that this graphic answers are which lego pieces the viewer will need next, how many they will need, and where they will go.  It also shows in what order to place the pieces.  The design is very simple and easy to fallow which means the viewers' queries are answered rapidly and accurately.  By indicating what piece the  viewer will need next they will know what color and shape to look for which will enhance the awareness of the receptors that pic up on that color and shape.

Design Success and Failure in Relation to Syntactical Guidelines

This is a poster designed for a Miami book fair.The 25 book covers are grouped together and are the most prominent part of the poster.  If the books were randomly placed all over the poster and were different sizes, it would imply that some books are more important or better than others but with all the books placed side my side in nice neet rows, all seem equally important which helps contribute to the message that all books of the last 25 years are being celebrated equally with this book fair.  The arrangement of the books also creates balance and gives the sense of harmoniousness which is a very appropriate feeling to extract from viewers when representing a book fair that is celebrating books.

In this poster for National Poetry Month, the red letters dominate the poster but the way they are laid out poorly communicates that the poster is about poetry.  Poetry usually has district rhythm or pentameter.  It is usually a very structured and organized style of writing, or in other words, it has rationality and balance.  This poster on the other hand has a lot of stress in the way the letters are arranged.  The letters are different sizes, they are presented at different angles, and they are not on an even plane of existence.  This demonstrates kayos and disorder which is the complete opposite of the kind of writing that poetry is.  The way the text is displayed gives the illusion of movement that would be more appropriate for a poster about a preforming art like dance but not really for poetry.  

Visual vs Symbolic Language

Literal Representations

Person

Monitors

Building

Unemployment rates rising

Symbols
Arrow pointed up
Written English Language

This photograph visually communicates that unemployment rates are on the rise with the use of the written english language, which is a symbol system using phonetic sounds and a symbol of an arrow pointing up.  The written language denotes unemployment rates and the arrow signifies that they are on the rise.  The person in the photo is sitting with their head in their hand which sends a visual message of stress and in a state of waiting.  This component is very integrated with the symbols in the image because together they communicate that unemployment rates are rising and that it is very stressful for people as they wait for this to change.  Without the symbols, the image would not be able to communicate that it was addressing unemployment rates, and without the person, them image could not communicate how people feel about the presented information.  This image could be replaced by a person who looks very stressed, in a long line at the unemployment office and it would communicate a similar message.

Meaning 2: Interactions Between the Three Levels

This is a neon sign for a coffee shop that demonstrates all three levels of visual design communication.

Representational
In the center of the sign we recognize the representational form of a hot cup of coffee.  It plays a decorative role in the sign and it provides extra light, making the sign more noticeable.  The coffee cup is a visual representation of what the letters around it are symbolizing.

Abstract
The representation of a cup of coffee in the middle of the sign has been greatly abstracted.  This was done so because the medium, neon lights, does not allow for complex representations.  This abstraction of a warm cup of coffee may also have an emotional impact on viewers. This abstraction of a coffee cup is very warm and inviting, and since it is most likely to be viewed outside and maybe even in the cold, those who see it may suddenly desire hot coffee to help warm themselves up.

Symbolic
The words on the sign, "espresso coffee" are made up of symboles that together denote that the shop in which the sign is found has espresso coffee.  These symbols have an informative impact on the viewer.  The letters on the sign symbolize what the abstraction in he center represents.

Meaning 1

Representation


This children's desk uses representation in its design.  Even without the little "School Bus" sign, we can recognize that the desk is designed to look like a school bus by its bright yellow color, the black circles which represent whiles, the white squares which represent windows, and the black stripe along the side which is characteristic of school buses.  Dondis states on page 67 of A primer of Visual Literacy that representational visual messages are derived from what we see and recognize from our environment.  The decorative elements of this desk come together to create the familiar appearance of a traditional school bus. 

Abstraction



This is an abstract representation of the Deathly Hallows from the Harry Potter series.  The Deathly Hallows are three magical objects that are each represented by a shape in this abstraction.  The line down the center represents a wand, the circle represents a resurrection stone, and the triangel represents a cloak of invisibility.  An abstraction according to Dondis is something "reduced to its basic elemental visual concepts"  Each of the three objects represented in this mark is reduced to its basic shape which would be its "basic elemental visual concept"  In the Harry Potter series, if this mark showed up on an object or person, it was an indication that that person or object was somehow related to the legend of the deathly hallows, or that the person simply believed in their existence,  However, in the real world, if somebody is sporting this abstraction, it most likely means that they are simply a fan of the Harry Potter series.

Symbol





This is the peace symbol.  It is a universal symbole that denotes the abstract concept of peace. The shape in the center is supposed to be an olive branch which has been the symbol of peace since the time of the ancient Greeks.  They believed that Eirene was the goddess of peace and that the olive was very important to her.  It is for this reason that the concept of peace has adopted this symbol.  Many people may not know the reasoning behind the symbol but most people can recognize it as the peace symbol because it is such a universal symbol.