Thursday, November 17, 2011

Movement/Motion

OPTION 2:

The first image I found was a tutorial for an iPad game. This tutorial shows the user how to navigate around the game, and how to use the camera to see the different views. This tutorial leads the user through the interface in multiple ways. First, on the left it shows the three images of pan camera, rotate camera, and zoom in and zoom out. They are placed kind of in a zig-zag form, leading your eye from the top one to the bottom one. Next, the numbered list on the right leads our eye down that list, from 1-3. These are the instructions that further explain the images on the left. We then link these instructions with the images on the left, lining up each number with each image.







The second image I found is an interface design for an avatar creator for "sanrio land". The first thing the user will navigate through, is the experience of creating their avatar. Our eyes our lead down the list of icons, depending on which part of our avatar we want to change. It goes from hair, eyes, clothing, etc, leading down the list until we have our avatar completed. We next see the bottom part, which show us different stats, such as birthday, gender, etc. After that, our eyes are then lead to the "about me" section. Here we see icons representing things like our favorite food, favorite song/music, favorite movie, favorite sanrio character, etc. The "tips" at the bottom help lead you through creating your character in this interface. After that, we are pretty much completed creating our avatar. The rest of the menu we see on the right then is linked to the screen after we are done creating our avatar. These menu options link to navigating around the sanrio land, and other menus throughout the game.

Thursday, November 10, 2011

Dimension/Depth/Space/Scale





The image I chose to use for my blog exercise this week, is the interface for a GPS navigational system, more than likely being used in a car. This image shows great examples of depth in several different ways. First it shows a good use of overlap with the buildings, especially on the left side of the image. They are overlapping each other, showing that they are farther and farther away in distance. These buildings are also a good example of relative size and relative height. They get smaller and shorter as you move farther away in the picture. Also, watching how the road moves down and there is a vanishing point and horizon, shows that the roads are stretching out farther and farther away. Also, the arrows on the street show some flow pattern, showing movement along the road.

Thursday, November 3, 2011

Tone and Color


TONE
The image I found that I decided to use for tone is an info graphic of the US, showing the obesity levels throughout each state. They use different tones of red and green to represent the different percentages of obese people. Tone in this map works by showing that the most saturated and brightest version of the red represents the largest percentage of obesity. The most saturated and brightest version of the green represents the least percentage of obesity. Then depending on the amount, the tone fades from the red to the green, going from most obese to least obese. This map that uses tone also uses lines. They work together by the white lines separating the different states, being able to separate the tones from each other.

This example is also a good use of color. It's very symbolic for red to mean "bad" and green to mean "good". This graphic uses those colors in that exact way. In this graphic, I would say color works with direction, at least in the top bar or "key" showing the different obesity levels. You could also even say it is a line too, because it uses the change of color, over a line, to direct your eye from left to right.