How TONE is operating

The app I used to annotate this picture is Skitch. When annotating, I want the user to focus on the pink outline and not the rest of the picture. Tone is operating in this annotation in that the tones are getting scrambled by the pixelate effect. Different tones next to each other create contrast. We use contrast to differenciate different elements of our world. As for the interface this picture is displaying, the luminance channel is used rather than the chromatic channels because an addition of chromatic channels would make us less sensitive to spatial detail. 

How TONE is interacting

Tone is interacting with the basic design element of shape. More specifically, shape and the syntactical guideline of grouping. As stated in the paragraph above, different tones next to each other create contrast and we use contrast to differentiate the different elements of our world. It could also be said that different tones next to each other help us differentiate shapes from other shapes. When we process this information in bottom up processing, we recognize patterns and one of the ways we process patterns is by grouping. The pixelating effect makes the tones more ambiguous decreasing the overall contrast that helps define the different shapes. By disrupting the shapes, the grouping of the image is also disrupted. 

How COLOR is operating

In this picture, Color is operating in that the pixels of my computer screen are creating the color magenta. Magenta is created on this screen with additive mixing. Additive mixing, or the RGB model, is taking place in this picture when green and blue light is combined to create magenta. If this were printed out on a piece of paper, Magenta would be created by mixing white with red. Mixing red with white to create magenta would be called subtractive mixing. This color seen above is highly saturated. 

How Color is interacting

Color is interacting with texture in the picture above. The Gestalts figured out that our eyes are attracted to corners and sharp contrast. Together, the mixture of corners and contrast creates texture which defines the interface and makes it recognizable. This pixelating effect gets rid of both leaving the eye with nothing to be attracted to except for the bright arrow. The colored arrow is interacting with the pixelated background by creating a chromatic difference. The color of the magenta is also interacting with the corners of the arrow making the tip of the arrow irresistible to look at. This clearly points out the area I want the user to focus on. 

The Basic Elements

Link for pictures: https://www.evernote.com/shard/s209/sh/cbb7f397-2002-4c7f-90e5-32acec3b7332/5158d179185f135d3e5544c0a7758ad5

Picture 1:

The active element in this picture is shape. The circle totally dominates the picture.  The purpose this circle serves is to house the X, which is part of the logo.  The circle here stands out so much because of the stark contrast with the wave behind it. The basic X shape is made from the negative shape. If you squint your eyes, everything else fades away except for the new OS X logo fades away. 

Picture 2:
The active element in this webpage is dimension. The skewed angle of the iPad really gives it a 3D look. Because there are not any shadows underneath it, it looks like the bottom right corner is popping out at the user.  This iPad is shot at below the eye level and is on a two-point perspective plane. More light is casted on the bottom right corner of this iPad and shadows are cast on the back part of the iPad to really enhance the 3-D look.  They want to achieve that look because it makes the user feel like they can reach out and touch it and start using it right there.  The way they dimensioned the iPad really makes it look bigger than everything else which brings the attention straight to it.

Picture 3:

Color is the active element on this webpage. It is highly saturated and is just bright enough to really make the color blue pop in this picture without washing out all of the color. The blue color is very calming and soothing to look at. They may have chosen this blue to make the user think of the sky on a really nice day. This has a hue of blue making it very soft looking. This is also a primary color! 

In this exercise, we both used the visual strategies of finding, rotating, pattern completion, categorizing and matching.

In mine on the left, I categorized the groups of triangles from smallest to largest and color coded them. The smallest are in black, next biggest in red, followed by green, white, and then yellow. since the exercise started us off with just one small one, I used pattern completion to find the rest of the smaller ones. Then I used more finding to see the bigger ones. After the finding, I did rotation to see if I missed any triangles in any different orientations. Then I counted the color coded triangles and wrote them down in color coded numbers and proceeded to add them up to find the total.

Surprisingly, Alex on the right seemed to do the exact same process in pretty much the exact same order too. He even wrote down color coded numbers!

In this visual puzzle, I employed the strategy of categorizing. I categorized from basic shapes to subtracted shapes. The Green outlined triangles are the obvious shapes that make up the cat. Next in red, I outlined the shapes that were less obvious and were created by overlapping basic shapes. Lastly, I outlined in yellow the shapes that were made from basic shapes being subtracted from each other. After I finished outlining, I counted each color and represented that number with a color coded number to match so I could tell which ones I already counted. Lastly I added them up. 

Alex used a similar categorization technique. He used dots to represent the various triangles. His method seemed slightly less specific as in terms of which dot corresponded to which triangle and I think he missed a triangle as a consequence.

We both also used the strategy of finding. Finding is when you look for concealed shapes within other shapes. 

TOP-DOWN  VISUALIZATION

                            (As far as six sentences go, I wrote them down and recited them)

This is a Dropbox folder found on a Mac.  

Representational

This object is representational in that it looks like a real paper folder and the multidimensional look to it makes it feel like you can physically put something in the folder. The shadows and gradients really add to the realness of the folder. The designer even included a textured paper look to it. The role this representational aspect plays in the whole design is it really lets the user know that this is an icon capable of “holding” other files. It is slightly open so it looks inviting unlike a closed folder or a zipped-file.  This relates to the Abstract level in that it gives the abstraction enough character to feel inviting, yet it does not distract from the simple form of the abstraction. This level relates to the Symbolic level in that it gives the Dropbox logo a place to reside. There is also a representational bevel added onto the symbolic logo that makes it look like someone etched it in stone giving it a high quality look to it.

Abstract

The abstract aspect of this design is what lets people understand what it is. The abstraction of office supplies was developed partially by Apple and partially by Xerox. That is why we call a desktop a desktop and a folder a folder. The abstraction of an every day object like a folder is genius because the user already has an idea of use attached to a physical folder and having this folder icon lets the user utilize their every day knowledge; therefore, enabling them to automatically understand how to interact with this digital file system. There is also know wrinkles, visible folds, or writing on the upper part of the file leaving a simplified folder. This relates to the representational aspect in that it gives the representational level a basic outline for placing the gradients and shadows. This relates to the Symbolic level because the combination of the abstracted folder and the symbolic logo creates an obvious meaning to the user. It demonstrates the usage to the user.

Symbolic

The symbolic aspect of this icon is the drop box logo on the folder. It lets the user know that this folder is specifically a ‘Dropbox’ folder. This is important to the whole design because without it, the user would know have an efficient way of mentally separating the folder from all of the other blue folders on their screen. The representational aspect tied with the symbolic logo gives the folder a sophisticated look because sometimes-plain logos are boring, but now with the added realistic textures, the simple logo is now more interesting.   The abstract logo works well with the abstract folder in that the logo categorizes the folder into a specific type of folder in the user’s head.

This picture of a bandaid is as realistic looking as it gets. This picture communicates that it has padding covered by an elastic sticky coating.











This abstraction of two bandaids shows that you probably need to bandaids to get the job done. It communicates it by having the bandaids overlap.

The symbol of this logo most likely is derived from the image of bloody Band-Aids that are crossed. 

I was pretty impressed that they thought of it. I actually never noticed it until I started this project!