WK13 Contrast

No contrast whatsoever (YT as of 12/1/11)

YouTube currently is a blob of gray, without anything that will effectively organize the viewing experience of the audience. The YouTube logo has a red accent, yet everything is a single color. Besides the main video to be watched, the next thing that would catch your eye would be the Ads; perhaps that is the point of this design. This layout is uninteresting, boring, and monotonous. There is no opposition in color. There is only a single main value: gray. There are small red accents in the video player itself, but it is not enough contrast to balance the website.

Poor contrast (GameStop as of 12/1/11)

This site has too much color. Because it is a retail website, it contains alot of dynamic Ads within itself; however, these Ads contain too many different colors, too many bits and pieces, and too many sections making the contrast ineffective and crowded. It is unbalanced--perhaps if all the Ads adhered to the theme of the site it would look more organized. Or maybe it is the way the site is meant to be, such that all Ads are distracting and GameStop would want the consumer to be distracted by these Ads?

Good contrast (PLNDR.com as of 12/1/11)

PLNDR is also a retail website, but contains a good amount of contrast to balance the website. The logo has a mustard yellow accent, which is also used throughout the rest of the site via links, buttons, and titles. The background is a simple dark gray with minor floral design; a lighter gray is used to box the main part of the website. It is then sectioned into a smaller dark gray rectangle to separate Ads from the products. These simple uses of different values of gray actually balance it from the brighter hue and value of the yellow. There are many Ads, but unlike GameStop they are organized neatly in a very cohesive and structured rectangle, allowing the viewer to leisurely look through the website (rather than being frantic and being bombarded with too many colors).

WK12 Movement and Motion

Portal 2 Diagram
From: HalfLife2.net

This is a diagram from the Portal 2 game; there is also an animation of the Aerial Faith Plate in action http://www.youtube.com/watch?v=fE3B9uGnVlA . What is interesting about this image is that there is implied movement that is obvious to the viewer. There are arrows and lines that show direction from several launching pads known as Faith Plates. It shows different objects being launched and their direction of movement. The middle-most plate with the largest objects move toward the lower-left part of the diagram, which leads to the title of the diagram: Aerial Faith Plate.

A Feature of the Nintendo Power Magazine.
From: Zeldac.com

This feature from the Nintendo Power Magazine is about the upcoming game The Legend of Zelda: Skyward Sword. The layout of these two pages give an impression of implied motion. The blue streak from Link's sword shows movement and direction with diagonal stress. There is also minor event perception of the sword's implied motion. Someone can think that the sword is slicing the word "Legend" into two parts because of the way the text and image is set up; however, there is no real event, only crooked text and an image in a layer behind the text. Link is the main feature of this game, because he is the main character; therefore, it is only right to catch the eye of the reader with him and his sword, leading in implied motion to "YOU ARE LEGEND."

WK11 Dimension/Depth/Space/Scale

Dimension, depth, space, and scale are key factors in Mirror's Edge. This game requires the player to run and run consistently for whole minutes at a time, jumping from rooftop to rooftop, in order to escape those who are hunting her down. The art in this game is very minimalistic, without too much detail and putting emphasis on gameplay. However, because of the style of the game, dimension of walls, buildings, structures, and miscellaneous objects need to be clear. While being played on a 2D surface television, the graphics are made to be in 3D with multiple perspectives. Therefore, the distances between the runner an object or goal need to be scaled accordingly, and the sizes of buildings need to be accurate so the player can map out an escape route correctly; depth and space are accentuated through the objects on the 3D plane, like police men, poles to lunge over, ladders, and doors.

The 2D artwork on covers and posters need to reflect these details, as minimal as they are. The buildings face down into a vanishing point. Policemen and helicopter are small in the distance. "Swoosh" effects of her movement and the shining action lines around the main character also show Linear Perspective. Police show scale to the size of a building. Proper shading, texture, and color provide dimensions to faces of buildings.

http://images.wikia.com/mirrorsedge/images/a/a2/Faith_chase.jpg

It is harder to see scale in this image because of the lack of reference (such as people). But there is still a Linear Perspective.

http://www.geekshow.us/wp/wp-content/uploads/2009/03/mirrors_edge_logo.jpg

There are also depictions of the main character in a crowd of people, which is accurately given dimension by shrinking the crowd into the distance by vanishing point. People are not on top of each other and feet are not stepping on each other.

http://i.neoseeker.com/mgv/1-Redemption/1/13/mirrors_edge_guide_cover_display.png

WK10 Tone and Color

TONE
This is the gameinformer.com website front page. The website itself uses high contrast themes and well organized layouts. The logo itself is in a dark grey (not black), with a light blue accent. The current website as of November 3rd 2011, uses shades of grey in the main task bar--these are examples of usages of tones. The three main and most popular sections--News, Reviews, and Previews-- are highlighted in a midtone dark grey, and to the left of it is the "Platforms" tag (that lists the current electronic gaming consoles) which is highlighted in a lighter shade of grey. The rest of the bar is in a really dark shade of grey, which looks almost black (according to Photoshop, the color hex is #181512, not #000000 black). This subtle grey-black makes the website seemingly sophisticated because of the usage of a complex grey color than just straight black. The main text is also not in black, and uses a dark shade of grey; the text is still legible but again, makes a subtle difference of sophistication than typical black text on white background. The feature article is boxed in a light grey which complements the dark grey text and allows the text to still be seen. The bar at the very top with the "Join" and "Sign in" links is also not completely black; although it has a black base, it has a subtle grey pattern over it; this pattern makes the site look more "tech-savvy". The usage of black is mostly avoided in this front page.

COLOR
This minimalism-like theme uses accents of color (other than the images used). Links are highlighted in blue, the "more" links are boxed in blue with white text. There aren't any colors than the single shade of bright sky blue except for the single link for the "Home" tab, which is highlighted in the opposite color bright orange. This blue accent corresponds to the blue accent on the "i" of the gameinformer logo. The usage of this color is to catch your eye; the blue is used on tabs on feature articles, arrows for drop-down menus, and the hyperlinks as stated before. This usage of single colors is to catch your eye, to mean progression through the website, and transport the user from page to page via these little blue links.

WK9 Video Game Graphic Design

Focusing on logos and their development from video game consoles, old and new:

LINES
 
Lines will be actively used in graphic design in order to outline quick, general sketches for website layouts, logo shaping, dimension, and texture. In terms of the Nintendo 64 "N" logo, lines would be needed to outline the two-point perspective in dimension of a four panel "N" shape. With the line being an essential tool for previsualization, it is capable of being manipulated in forms that are non-existent, but only in imagination. (Dondis) The line is also used for standard notation, such as the Alphabet letters and Arabic numerals in this design such as six and four. (Dondis) The name itself had to be initially written down in notepads over and over again to obtain Nintendo, a company founded in Japan.

COLOR
The existence of color, and/or the lack thereof is an essential tool in graphic design. Especially in videogames, where graphics and eye catching is key, color will bring the emotion, category, and predisposition of the game to life. For example, in the previous image, the "N" logo was set in four bright colors: green, red, yellow, and blue. Three are primary. Besides the function of shading and highlighting the "N" to see it in three dimensional perspective, the four colors give the logo a predisposition of playfulness, and enticement. It's colors are carnival-like. These composition of colors attract people, especially children, to play this console (which was actually came in dark gray initially, and different colors such as purple and green in later developments).




The PlayStation logo by the Sony company also utilized these four colors initially to entice customers, attract children, and give off a sense of fun and enjoyment through usage of this bright colors. However, the usage of full-on red for the incomplete "P" made it more serious than the "N" in the Nintendo 64 logo, and perhaps encouraged a more sophisticated type of fun. These two companies rival to this day in gaming consoles alongside Microsoft's XBOX system.

 

It can be seen in this image of the progression in the PlayStation logo design the the three primary colors were used for basic purposes. However, the green was implemented in the very last design in order to define the "S".

DIRECTION


Further development of these consoles, focusing on Sony's PlayStation logo, allowed improved video graphics; therefore, there was an urgency to change the logos after subsequent systems (and the PS3 logo changing twice in three years). In shape, the more sophisticated PlayStation 2 took a more Gestalt approach with an incomplete and minimalistic "P", a two-directional "S", and a boxy two. It also only used two colors: purple and blue in a gradient fashion.

In the third installment, the 2006 PS3 logo had become italicized, giving it direction, such as going forward with progression, almost like a car. Three years later, the shortened signature logo was just the "PS3" than the whole name "PlayStation 3". It kept its slight italicized style. With the usage of differently weighted lines, and reflecting back the classic PS2 logo, it became a streamlined version of the PS3 logo in late 2009. With slightly bold lines, squashed look, and classic appeal, it used less ink and/or paint to print, and charmed older generations of gamers that remembered the great PlayStation systems.

WK8 Gestalt

A roommate and I were to figure out how many triangles made up this cat:

My roommate did not write or touch the paper. He only looked at it and counted 20 triangles. A very smart man. However, he asked another roommate to check his answer.

I was a much more visual learner and traced triangles as I saw them. I initially counted 18, and then recounted 20.

We both used a law of closure to differentiate sizes of triangles and other triangles within each other.

We decided to figure out what month was indicated by these shapes:

Again, he did not draw on the paper but looked at it for a good five minutes and then folded the paper in half to show "July" being reflected on a horizontal axis of symmetry.

I initially traced a D-e-C for "December" for the first three shapes but it didn't figure anything. After fifteen minutes I gave up, came back after five minutes, and asked my roommate what the answer was. Apparently I have poor symmetrical visualization.

In the last puzzle, we both had to utilize the law of symmetry to figure out the puzzle.

WK7 VisPerception2

 

http://www.gameinformer.com/b/news/archive/2010/07/23/new-infamous-2-character.aspx

The visual hierarchy of this cover for Gameinformer (in my point of view) is as thus:

the title is the brightest and biggest single chunk of information that the cover provides; eyes are then drawn to the face of the figure (because we as humans are drawn to human faces), and then to the lightning that is shown from his right hand to his left hand. After, the next brightest contrasting object is the pink, red, and yellow blob of color on the lower left hand side of the cover--over it the title of the game INFAMOUS 2; the two objects (blob and text) work together to pull the eyes away from the main larger figure on the cover and tell what the cover is depicting (as most gamers who subscribe or purchase this magazine are interested in the cover and what is being shown). The audience will then take in the background, such as the single red speck of light that signifies a gun firing at Cole (after knowing the title, most gamers will know that the man on the cover is Cole), and that the whole of the background depicts chaos with a building partially on fire.

WK6 Visual Perception Top-Down

http://www.kickstarter.com/projects/justinrusso/video-game-posters

This poster is a very minimalistic example of a majorly popular icon in video games. Because I want to create posters for gaming companies specifically, I will analyze this based on the top-down visual processing.

By looking at the poster, it may not look like much at first glance; the rapid eye movements will scramble from top to bottom, and to reading the words at the very bottom. Eyes will then jump back up to the bulk of the design and start looking at certain parts for longer periods of time like the bold lines and the series of solid-color circles in order to figure out what the poster means, goal-oriented processing. If one were not familiar with the character, then eyes would keep seeing other points of the poster for longer periods of time. If the person is familiar with the character, the eyes will take in the poster as a whole character rather than parts of the character (Big Daddy from Bioshock).

WK5 Design Success and Failure in Relation to Syntactical Guidelines

BAD: This is an example of cover art from the game ICO. The game itself is rather good and cinematic, but the cover doesn't show it. Syntactically, the cover is not balanced: there are more humans on the left side than there are on the right. There is also a lot of empty space on the right side. The colors also do not complement each other, the colors and background look too busy, the title gives a counterbalance as well, which adds to more stress--this is a type of negative stress because it does not bring a single emphasis.

GOOD: This is an advertising for the Playstation accessories--it depicts the Playstation Move and charger dock. This image is well balanced and gives less stress visually. The audience is drawn to the large circular shapes because they are more uniform than the other abstract items; these shapes are the glowing head of the controller and the white solid circle with the 50% OFF text. Also the contrasting color of bright red will distract the eye secondly. The two controllers are also in the direct center of the image and will draw the eye as emphasis.

WK4 VISUAL LANGUAGE SYNTAX

from economist.com

• Photograph of a crowd, protestors
• emotions: not too angry, maybe frustrated, assertive
• mostly African-American
• One AA-man holding up purple sign "Against Job Loss"
• a strike
• a walk out
• a riot
• a purple bar graph on the left side of photo to match with purple sign
• white font most prominent
• "unemployment rate in selected countries"
• South Africa highest unemployment rate, <20%
• Denmark lowest unemployment rate, ~3-4%
• photo assumed to be from South Africa
• A photograph of an angry crowd with signs usually mean sign of protest

This image shows a photograph of a protest against unemployment. This can be inferred because of the representation of a large angry crowd, mostly African-American, focused on a man holding a purple sign with big, white lettering: "AGAINST JOB LOSS". There is a purple bar graph (to match the purple sign on focus and to see it more prominently) on the left side of the photograph with a left-to-right black gradient indicating the percentages of unemployment rates in selected countries. The country with the most unemployment is South Africa, with more than twenty percent. The lowest are Denmark and South Korea, with three to four percent. By looking at the graph, it can be assumed that the photograph was a protest against unemployment in South Africa, where it is most prominent.This image is probably used for a news website in order to convey and compare the rates of unemployment around the world and the impact it may have.

WK3 BLOG MEANING 2

“A Salt And Battery” by Emery Greer -- T-Shirt design

Whilst this t-shirt design be very "punny" (funny pun), it is a great demonstration of all three levels of visual design. (1) Representation: this image shows an image of a very generic and common salt shaker, and a typical C-battery. Both can be easily identified as things that we've experienced and used in reality. Literally and directly, the image shows a cracked salt-shaker, and a beat up old battery. (2) The image design is abstract, meaning the image has very little detail, and is minimalistic in terms of design. Because of its cartoon-ish vector rendition, the salt-shaker and C-battery are very simplistic in shape and color. (3) Symbolically, the two items denote typical objects, but by name actually produce a funny joke: "a salt and battery" equates to "assault and battery." This visual message in a form of a joke is reinforced with a police lineup-esque background that measures height. Also, because the designer only used shades of black, white, and gray, this image can be easily printed, copied, reproduced, etc. i.e. t-shirts.

WK2 BLOG MEANING 1

 This is a build-able plastic model toy that represents a bear. The name of the toy is actually "Bearguy"; the robotic parts and design of the model show that it is not an accurate representation of a bear--a bear is in fact not robotic at all--and that it uses the typical colors and elements (such as rounded ears, a muzzle). This model is a "representational" design because one would immediately think of a bear albeit it being a robot. It cannot be abstract because it does not evoke direct emotion. It cannot be a symbol because Bearguy does not symbolize anything or hold a lot of meaning in itself rather than being a robotic bear toy. Therefore, Bearguy is an adorable, build-able hobby in a representational design of a bear.

This is the class text "A Primer of Visual Literacy" by Dondis. This cover is an abstract design; the cover is very minimalistic such that it is only in black and white, no colors. It only has two lines of text all in a corner while the rest of the cover is filled with shapes. These shapes do not represent anything; however, these shapes can become symbols themselves, denoting the basics of design and art: lines and shapes. These shapes and lines show the most "essential features" of art, the basis of abstract design. (Dondis) The cover gives a bland message from its too-simple design, but it gives the basics for identifying design--perfect cover art to back the title "A Primer of Visual Literacy".

This is a treble clef. The treble clef symbolizes higher pitches of sound, whether it be from voice, violin, piano, or any other instrument; moreover, it is in opposition to the bass clef which symbolizes the usage of low pitches of sounds. The treble clef is a symbol because it is a very popular sign that can be identified immediately by the musically literate. This symbol originates from the letter "G", where the standard note "G" is used in this pitch; the swirl in the symbol also encircles the "G" line of the musical staff. (http://www.music.vt.edu/musicdictionary/textt/trebleclef.html) It is common, reproduced and remembered for centuries; it is abstract, completely minimalistic with low detail. (Dondis) The treble clef can represent a "G" but it is harder to see, it is an abstract distillation of "G" through musical evolution, and it is a symbol recognized by many.