Exercise 17: Movement/Motion (Option 2)

A. Marc Ecko (www.marcecko.com)

Upon arriving at the home page, the viewer is confronted with a wall of hyperlinks designed to resemble framed photographs (1).

1. Marc Ecko home page

The largest and most prominent of these (near the center and the title of the page) link to online shopping pages for Ecko's current fashion lines, as well as a store locator. Smaller images around the periphery link to information about the designer, the brand, and various causes the brand is promoting. The display (done in Flash) incorporates agency by allowing the user to scroll around the page by waving the cursor in the same way that one would use a finger on a touch-screen display, pulling certain areas to the center while others move towards the edge of the window and out of view. Mousing over the black bar at the top of the screen presents a drop-down menu with the same links in text format. After clicking on one of the main links (entitled Ecko Red), a new window opens with a catalog page featuring hyperlinked images of products, with a menu on the left organized by garment category (2).

2. Ecko Red

A click on the image link "Shop Tops" navigates to a page featuring a variety of women's shirts (3).

3. Short Sleeve Tops

Finally, the user can click on a top to reveal product information and the opportunity to purchase it (4).

4. Fame and Fortune Top

Alternately, navigation from the homepage directly to one of the side links, "Graffiti," instigates another motion effect in which the other frames on the page seem to fall away, revealing an engaging Flash display of a cityscape with an animated drive-in movie (5).

5. Graffiti

In creating this website, the designer fulfilled the goal of increasing intuitiveness of use by incorporating lifelike motion cues to give the user a sense of agency and control and transfer some of the "cognitive load" to the user's perceptual system. Beyond this, the primary goal (or "problem") of the site is to get users to buy the company's products, which is accomplished by placing the links to the online shopping and store locator in the most prominent area on the the homepage, and by making them larger in size. Once one of these links is followed, the path taken to purchase a product is very straightforward. The other links also help to attract buyers in a more indirect manner by promoting brand loyalty.



B. Recom CGI (recom-cgi.de/?lang=en_US)

Recom CGI's home page presents the viewer with a Flash-based rotating display of portfolio images, containing nine thumbnails per panel (1).

1. Recom CGI home page

Other panels are faintly visible in the background and can be pulled to the front by clicking or scrolling the mouse over, which demonstrates agency through an animation effect that makes it appear as though the selected panel is rotating to the front while the previous display recedes into the background. Upon selecting the left center panel, the display fades and is replaced by a series of views of the featured design (2).

2. Hansgrohe Ambiente

Clicking on one of the thumbnail images causes these to advance into the foreground and fade out, revealing a larger version (3).

3. Hansgrohe Ambiente Sinks

Selecting "Information" from the left-hand menu causes a bar to drop over most of the image, upon which informative text materializes (4).

4. Information Bar

The "Color Picker" on the right-hand side of the page (5) allows the user to search the entire portfolio while filtering search results by color (6).

5. Color Picker


6. Red/Orange Color-Filtered Search Results

As in the previous example, the designer has maximized usability by using visual effects to depict transitions between pages and simulate a three-dimensional environment, thus transferring some of the cognitive load to the viewer's perceptual system. Since this site was created to showcase a portfolio, the primary object of its design would have been to direct the viewer to images of the work, supplemented by pertinent information. Accordingly, the "pop-out effect" of the large, central group of images directs the viewer's attention and makes him or her more likely to navigate directly to a larger image. In addition, the hazy background images create visual interest which induces the user to engage with them; the designer has here encouraged user traffic to further pages of images by enabling both clicks and scroll-overs to bring them to the foreground. Other information, contained in menus near the top and bottom of the page, is clearly presented but highly minimized to keep user attention focused on the work.

EX 14: Tone and Color

(image credit: Epromos - http://blog.epromos.com/promotional-projects/post-it-mosaic-art-gains-traction/)


(image credit: Klo - http://kloagency.wordpress.com/2008/11/13/window-display-tips/bergdorf-goodman-post-it-window-1/)

Tone creates contrast which allows one to differentiate elements within one's visual field. The use of contrasting tonal elements in these Post-it murals creates an illusion of depth through which the viewer is able to recognize patterns that resemble the contours of two human faces. Tonal variation enables the differentiation of these patterns to such an extent that the right image is easily recognizable as Mona Lisa, while the left image evokes Frankenstein's monster. Nonetheless, the limited tonal range, along with the low-resolution effect of the chosen medium, creates ambiguity and visual interest by decreasing the clarity of the images. This unusual use of tone caters to the young, technologically savvy target audience through an appeal to novelty by association with digital art and kitschy, "retro" concepts.

Tone deceives the eye into seeing what Dondis refers to as "implied dimension" (60), the same sense of depth which allows the viewer to recognize a three-dimensional face in a two-dimensional field of colored squares. It does this by simulating the play of light and shadow on real, three-dimensional objects, which is directly linked to common experiential knowledge regarding the relationship between tone and dimension (i.e darker areas of an object are farther away and/or recessed).

The main role of color in this piece is to further differentiate the distinct feature areas of the mural which are primarily distinguished by tone. In the Frankenstein image, recessed areas are depicted in a cool, bluish-purple hue, which corresponds to the darkest tonal areas. The cool color and dark tone create a receding visual effect which allows the warmer-toned, lighter areas of the forehead, nose and chin to "pop out" while also looking warmer and more vibrant through simultaneous contrast. The Mona Lisa exhibits smaller color and tonal ranges, both of which limit differentiation and create a flatter appearance. This image is composed almost entirely of warm yellows, orange, and pink, with a cooler but still pinkish-looking lavender color composing the recessed areas in the face and underneath the chin. Color also helps to establish mood -- the greater complementary contrast caused by the use of dark purple in the left image reinforces the bold, quasi-threatening feel of the subject matter, while the more analogous, warm-toned color scheme in the right image plays to the aura of subtlety and calm surrounding Mona Lisa's smile. Finally, the bold, "edgy" overall color scheme of the entire mural represents a direct appeal to the younger target audience.

Color interacts with shape to create the smallest unit of visual expression in this piece, namely the Post-it note. Visually, each note forms a colored square of small size in relationship to the whole. This creates the effect of pixels in a low-resolution digital image, in which the general form of the content is characterized by the unrefined, squared-off shape of its component color areas. The end result of this, in terms of the composition, is that color and tone supersede the more ambiguous shape and form as the primary defining elements of the piece.

More about Post-it art:
http://weburbanist.com/2008/01/24/more-unusual-art-from-everyday-materials-16-post-it-note-pranks-sculptures-and-murals/"

(NOTE: I finished this yesterday but forgot to upload it, if these haven't been checked yet please forgive me)