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)

Poster Design - Basic Elements

1. Tone

The element of tone dominates this example, being the primary mechanism by which the foreground, middle ground, and background of the composition are differentiated. This relative presence or absence of light makes the text visible against the background; as some of the different color areas are themselves multi-tonal, the relative visibility varies based on the level of contrast between adjoining tonal areas (e.g., the "t" in "typography" is less visible than the "y," and the "N" in "THEN" is more visible than the "H"). Similarly, characters superimposed on a darker background appear lighter, and vice versa. This clearly demonstrates the extent to which the perception of tone is dependent on its visual context. In the relative absence of color, the designer has skillfully used tone to create interest and heighten legibility through contrast.



2. Direction

This poster effectively uses the element of direction to emphasize the written information while creating a dynamic atmosphere. Strong diagonal lines create an intense feeling of motion (which directly relates to the content about motion graphics), and also create interest by decreasing legibility just enough so that the viewer has to stop and look at the poster for a few moments in order to comprehend its meaning. Furthermore, they sharpen the composition to such an extent that stress is a primary attribute. The unstable effect communicated by the diagonal orientation is augmented by the manner in which the black lines extend past the edges of the composition.



3. Color

In this example, the role of color is to suggest the subject matter (the warm, soft colors superimposed on a cool background indicate glowing light) while creating a calm, reflective atmosphere. The soft, light, "pastel" quality of the chosen hues connotes tranquility and passivity and invites associations with natural phenomena such as sunrises and mist. Although the colors are light and appear as if they were diluted with white, their saturation is increased through the low degree of neutrality, which imparts qualities of simplicity and emotional expressiveness. However, the bold, "primitive" quality associated with highly saturated colors has been tempered by the lack of intensity. The use of a triadic color scheme (blue with red and yellow) allows the colors to augment one another -- i.e. the blue appears cooler and the warm colors warmer -- while avoiding the tension often present in a simple complementary scheme.

(All images credit: Design Reviver - http://designreviver.com/inspiration/30-inspiring-poster-designs/)

Exercise 10 - Design Success and Failure in Relation to Syntactical Guidelines

(image: Best Design Options - http://bestdesignoptions.com/?p=4076)

1. Successful Design

The goal of this design was to visually reinforce the subject matter of the article, which deals with irrigation systems in rural Canada. The target audience for this design would be composed largely of educated younger adults with a tendency toward environmentalism, and who would appreciate subtlety and artistry in design. The composition is balanced by juxtaposing the large, irregular type and lesser photographic detail on the left with a square block of small type and more representational elements on the right. The fragmented-looking title and subtitles (located in the lower left for emphasis), as well as the asymmetrical quality of the chosen photograph, create visual stress which breaks up the potential monotony of a minimal, black-and-white composition. The blocks of text are grouped so as to facilitate the correct scan paths for reading the article sequentially. The text is established as the positive (predominant) element through a heightening of tonal contrast.


(image: Mushing Magazine - http://www.mushing.com/articles/content.php?vw=2,,4,490)

2. Failed Design

As in most magazine layouts, the goal of this design would have been to reinforce the subject matter of the featured article, which apparently has to do with dog sledding. The target audience for this design would consist of a specialized group of enthusiasts with a propensity for physical activity and the outdoors. The imbalance of the design can be attributed to several causes, including the poorly composed title page photograph with large blocks of text superimposed, as well as the lack of visual interest in the right-hand page as compared to that in the left. The large areas of black text on a plain white background have the stark, sterile look of an undesigned, plain-text webpage. Instead of existing in a clear positive-negative relationship, the text and images both lack visual interest; thus, neither predominates, and the design remains maddeningly ambiguous. As a result, even viewers who have prior interest in the subject matter would not likely be drawn to this article. Indeed, adventurous types could easily be put off by such a bland design. Although the color white suggests snow, and the image is illustrative on a basic level, the designer clearly did little else to connect the design with the article's topic.

Exercise 9 - Visual Thinking Research

Counting Triangles Puzzle - My Solution ([16 x 2] + 8 + 4 = 44 triangles)

In solving this puzzle, I started by counting the smallest triangles and worked my way up to the largest. Throughout this process I repeatedly utilized the pattern-seeking strategies of finding concealed or embedded figures within the image, and categorizing shapes to distinguish the triangle shape at different magnifications. Each level of magnification also required the use of the rotational strategy of inverse drawing, by which I was able to recognize the same shape repeated in different orientations.



Counting Triangles Puzzle - Partner's Solution ([16 x 2] + 8 = 40 triangles)

Partner writes: "I simply added up the smallest visible triangles, then the slightly larger triangles that those created when connected, then the even larger triangles that those created when connected, from all different perspectives. I counted 40 triangles." In other words, he used the same technique and strategies as I did, with the exception that he failed to count the four largest triangles.



Name the Month Puzzle - My Solution (July)

In solving this puzzle, I initially failed to look at the image very closely and instead made a mental note of the fact that only two months -- June and July -- have four letters in their names. I then looked over the image to see which word it resembled more and noticed that the bottom half of the image formed the word "July," and the top half formed the same word backwards and upside-down. Although I did not consciously employ a strategy here, this realization depended on my visual-cognitive abilities to find concealed or embedded figures within the image (the word in the bottom half) and to recognize a pattern regardless of rotation (the "inverse drawing" in the top half).



Name the Month Puzzle - Partner's Solution (July)

Partner writes: "I immediately noticed that the design was symmetrical in one direction. By cutting the design down the center, the word "July" appears in a mirror image to itself." My partner thus utilized both the same strategies of finding embedded objects and mentally rotating patterns. Unlike me, however, he immediately noticed the symbols' visual resemblance to letters.

*Note: I don't have access to a printer or scanner; I therefore picked puzzles that could be solved without pencils and emailed my partner copies so we could solve them simultaneously and record our strategies. I then annotated all four images using software to provide a visual depiction of the strategies we used.

Exercise 6 - Visual Perception 1 - Top-Down Visual Processing

(image source: easyexpat.com - http://easyexpat.blogexpat.com/blog/expat-trends/2009/08/14/languages-of-the-world)

This world language map relates to my area of study -- Visual Communication Design -- and is designed for top-down visual processing in that it aids in the accomplishment of a specific cognitive goal of the viewer, namely to discover demographic information related to language use by geographical area. In order to accomplish this goal, the viewer uses attention-driven vision to fixate on a language of interest and matches it to a country by using the color-coded key. Alternately, the viewer can fixate on a country or continent of interest and then refer to the key to discover which language(s) is/are spoken there. Using the process of active vision (in which vision is integrated with cognitive faculties), the viewer can link and re-link the visual information with prior knowledge -- such as the ethnic composition of different geographical areas -- to add depth and context to the information presented. As is typical of top-down visual processing, the viewer tends to bias his or her attention toward a small area of an image while allowing the rest to recede from consciousness. Instead of taking in the entire image as a whole, the viewer's attention is narrowed and sharpened through the use of "Just-in-Time Visual Queries", in which the viewer focuses only on those aspects of his or her environment which are of immediate consequence to the cognitive task at hand. The map's design facilitates this approach through its use of color coding and simple, easily intelligible graphics, which allow to viewer to intuitively focus on one area or another, with little need for laborious scanning techniques.

Exercise 5 - Meaning 2 - Interactions Between the Three Levels

Representational

The representational aspects of this 1988 ad for Chanel include photographic depictions of several different Chanel products, which are intended to provide the viewer with a sample of some of the products actually sold, while at the same time -- through product choice and placement -- attracting positive attention to the brand and creating a distinct mood which likely reflects contemporary fashion trends.
The choice of sleek textures and a limited palette including bright red with gold accents communicates power, modernity, elegance, femininity, and sexuality. The overall effect is one of luxury, which implies that the products being advertised are costly, well-made status symbols.
The symbolism of the Chanel logo is deliberately juxtaposed with representational elements which reinforce its association with luxury. These representational elements -- a shoe, a bag, gloves, and jewelry -- are placed and photographed in such a way that the abstract qualities of line, shape and color inherent in their forms come together to create a visually pleasing composition.

Abstract

The abstract qualities of this image are accentuated to facilitate artful composition and create an "eye-catching" effect. The curving lines lead the eye around the composition, while bright colors and contrasts create emphasis and interest.
The predominance of bold colors and shapes strikes the eye and calls attention to the ad, while the zoomed-in perspective and the sense of abstraction it creates cause the viewer to pause for a moment to identify what is actually represented in the image.
By piquing viewer interest, the abstraction of the composition helps to draw attention to the products represented in the image. It also reinforces the symbolic logo by reflecting an aesthetic similar to that communicated by the logo's design -- i.e. bold and modern yet timelessly elegant.

Symbolic

The symbolic element of this ad is the Chanel logo, composed of interlocking C's. It serves to reinforce Chanel's brand identity through its direct association with the products depicted, as well as to create brand loyalty through its ubiquity -- which leads to instant recognition -- and association with the positive qualities of wealth, success, beauty, and power.
The central placement of the logo establishes the brand as being perhaps more important than the products themselves. Such a strategy often indicates the promotion of the brand as a status symbol, which furthers the impression that the products being advertised are very high-end.
The use of the logo with the representational aspects of the picture adds to the meaning of both the representational and symbolic levels; the significance of the logo is enhanced by the representation of the type of products sold by the brand, while the representations are made more specific by their identification as Chanel products. The logo also harmonizes visually with the abstract elements of the piece, adding to the composition while remaining a focal point.