Visual Techniques

Translucent Speaker by People People

• Transparency
• Asymmetry
• Simplicity
• Accuracy
• Depth 

Pagoda by The Do Lab

• Accent
• Symmetry 
• Curvy
• Consistency
• Repetition

The Pagoda strikes me as grand. When I look upon the huge arcs that form its body, I see the great circles that they imply. The Pagoda's radiance and symmetry make it shine like a beacon in the night sky. For these reasons the Pagoda is a bold design, which intrigues the viewer to come sit under its spires. In contrast, the Translucent Speaker is very subtle and minimal in impression. The speaker's translucent body reveals the inside, and at the same time demands no visual attention. The various speaker cones connecting to the power module make the speaker asymmetrical and provide a feeling of technical precision. The two objects have opposing traits that lead to their success as designs.

Contrast

Eggwave - by Werteloberfell for Neff

The Eggwave, designed by German design group Werteloberfell for refrigerator manufacture Neff, is an elegant take on the traditional egg carton. The tray's form flows with a series of peaks and valleys that mimic the shape of an egg. The undulating plastic structure of the carton is an effective use of contrast for two reasons. First, each positive and corresponding negative spaces provide both a cradle for one egg and a cap for another. The symmetrically contrasting form of the carton unit allows for an almost infinite expansion of egg containment in two dimensions. Eggwaves can be stacked both vertically and horizontally, while maintaining a modular and rigid structure. Additionally, the elegant contrasting sine waves of the Eggwave combine to create a sculptural element for your fridge. This makes consumers less likely to simply dispose of the Eggwave, but rather cherish it for its sculptural value. For its functional and sculptural qualities Eggwaves use of contrast makes it successful as a design.

Sky UI

The user interface for Sky, a web app, is designed with a sexy clean aesthetic that looks in par with our modern design sensibility. However, the design ultimately fails because the interface and buttons lack proper contrast, both from themselves and the rest of the apps content. The app's background is a cool grey-blue gradient to white. This is usually a calm and approachable style for a web app, but there is no contrast between it and the "buttons," they are also blue and (slightly less) cool blue. Additionally, there is no contrast between the Interface "buttons" themselves. Each "button" has the same blue with light sheen surface and a white symbol – at a quick glance they are impossible to differentiate. For these two reasons Sky's UI's lack of contrast makes it fail as a design.

Motion in Interface

MAMUS - Creative Agency

(http://www.mamusinc.com/)

MAMUS Inc.'s interactive website uses motion to deliver a beautiful experience and give the user an understanding of the content flow, while showing off the agencies creative side. 

  

On load, the site displays a gutter-less grid of images at around 80% percent opacity. 

When a grid image is hovered over, the image slides up and a short description slides down with an option to click and view the project in greater detail. Of hover, the description retreats and the grid returns to normal. This expansion and contraction of content allows the user to get a glimpse of a project before committing to viewing it in depth.  

When an image is clicked on, a mostly opaque layer slides over the home grid and larger images of the selected project fill the screen, as well as a description box. Upon clicking the "X" (signifying "close"), the large images fade out and the white layer slides back up returning the user to the home grid. 

The flow of movement used by the site's designer allows for the user to dive into the content without without loosing reference of how they got there. Additionally, the sites motion solves the problem of information size; with simple motion and interaction with the user greater and greater information can be displayed (small image > small  image + description > multiple large images + in depth descriptions). 

Square Inc. - Mobile Payment Platform

(https://squareup.com/careers/creative)

Square's webpage for creative talent recrutement uses smooth scrolling-triggered motion to convey their hip, high tech mentality, and be an eye-catcher for job-seeking creatives. 

As you begin scrolling down the "Creative Careers" page, your first stop (after the inspirational quote and video) is industrial design. Their flagship card reader is displayed, along with a technical and conceptual drawing.

The rendered (real looking) card reader image begins to move with your screen as you attempt to scroll past it. 

An iPhone comes into view as you keep scrolling (card reader still fixed on screen) and as you arrive at the product design section the card reader slides right into the iPhones headphone jack (really natural feeling). 

Continuing down the page, the unfolded packaging for Square's card reader comes into view.

Upon the whole packaging becoming in view, the front flap folds over revealing the page's print and packaging design section. 

Not only is Square's site's motion beautiful, but it solves the problem of conveying their intent to potential applicants. The message is, "We really care about design," and it's said loud and clear.