Web Design

Lines

This website design uses simple lines to establish a clear division of sections. Directly underneath the menu we see a long line that separates the menu space from the banner. Beneath this the layout switches to a 2 column design, with each new section displaying a new dividing line. Although there are many buttons and photographs, the repetition of dividing lines, and sub-header lines, establish a clear closure between each area of the website. The sides of the layout even show vertical lines, giving the website content a border.

www.hieroglyphics.com

Dots

The design of this website includes lots of sketch-like drawings in the background, as well as script text which all conveys the feeling of hand-made. One of the few elements of this screenshot is the line of dots on the left side of the page. Their equidistant placement lets us know that they are separate, and have unique functions, but are in-fact all related. Typically, the constant repetition of dots in a close proximity indicate social website buttons. Other times they are squares, or default icons, but they follow the rule of close proximity placement for the establishment of similarity.

http://www.mezcalbuenviaje.com

Shapes

Soundcloud is a music hosting and streaming website that recently revamped their entire look. In this screen shot, I lowered the top navigation window to display even more content over one of their artist pages. The use of shapes is critical to establish separation of areas, as in the actual dark-background drop down window that creates a rectangular shape that contrasts the rest of the white-background site. Each track has a soundwave shape that clearly indicates where the actual music is & can be played from. Each "player" also has a highly recognized play button above the soundwave. The usage of "boxes" or rectangles" for 'action buttons' are found throughout, on the right hand column for the Soundcloud app download links, and the interaction of user found on the left.

www.soundcloud.com

Puzzle Playground

This first scan is my friend's result of the puzzle. She said she looked for a continuous heart that went over and under, and her eyes moved across the diagram. This is an applied pattern finding technique. If you look at any heart it most likely is fully under or over another heart. If that pattern is broken and it overlaps then it is one of the "tangled" hearts. 

This was my sheet, I went for a similar approach for looking at each heart for the "over and under" section to see if it is tangled, rather than fully above or under. I only found 3 however with this similar approach. One of the main differences between our puzzle solving technique was I searched for particular points (over and under) while my friend followed the entire heart shape with her eyes. The heart I missed (top right) is in a more compact & dense area.

My friend's scan shows where she took the basic shape that was given and flipped it once for each time it fit. That's where the first "2" comes from, she then flipped the given shape to fit the other end into each point of the yellow shape and flipped or mirrored it again. She came out with a total of 16. She imagined a different viewpoint for each placement that fit.

I started off by placing lines into the given shape, thinking it would be easier to break up and see how it fits. I placed the square area into each 4 corners of the yellow shape and did the similar process of mirroring it to the other side. But I struggled with applying the other end of the given shape (the rectangle) towards the yellow shape. Once I did figure that out, I forgot to mirror it per each side and ended up with 12 (4 short, one mirrored shape per side..)

Visual Perception 1 / Top-Down Visual Processing

The features of this BART map include a clear separation of a 'blue area', a distinctly different grayed-out area, and an "X" like shape splattered over the entire image. The separation of land versus water is distinguished with color, more explicitly noticed on the land which has bounded areas of green and gray. These are the patterns we see on the map, we also can clearly see a divide between the terrain map which is dull, versus the bright eye-catching route of the BART lines. Finally for the objects that we notice, although almost minute on this map, there are the different BART trains, defined by color. The blue immediately calls our attention and is identified as water. We also notice the symbols used for information, a prime example being the parking symbol which repeats throughout the map.