Tone and Color

http://www.dannewton.com

I will be using the portfolio site of photographer Dan Newton as an example to analyse how tone and color can be used for interactivity and user understanding. 

How is TONE operating

In this user-interactive photo gallery, tonal elements operate as the foundation from which the artist displays his work. The site's background image, both navigation systems, as well as half of the artist's name are in grayscale. This allows for the fundamental elements to be clear and understandable, while not distracting from the content.

How is TONE interacting

Tone interacts with the user in various ways. When the user hovers over a page navigation item the item grows in size, and also transitions from white to black along the the greyscale. This show a transition of importance and cues the user to click and progress through the site. Additionally, on page load, the sites background image is in full-color. Then, after clicking on a navigation link, the background image transitions to greyscale and full-color image gallery appears in the forefront of the screen. The once important background image thus relinquishes its focus to the new user spotlight and recedes in hierarchy. 

How is COLOR operating 

Color operates a as a tool for user focus and information hierarchy. First and foremost, the large format image galleries, the reason the user is on the site, are one of the only page elements in beautiful full color. This establishes the image galleries as most important–as they should be. Secondly, the last name of the photographer, Newton, is sitting in the top left corner in vibrant red, while his first name, Dan, remains white. This creates, within the hierarchy of the site, the notion that "Newton" is more important than "Dan" and the rest of the page–except for the the images. 

How is COLOR interacting

Color interacts with the user primarily as the user interacts with the image gallery navigation at the bottom of the page. The image that is shown large format is also in full color within the galleries navigation system. As the user hovers over other images, they too transition to color, and back out when they loose focus.