Thursday, December 6, 2012

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. 

No comments:

Post a Comment