Contrast, Repetition, Alignment, Proximity

Basic Design Principles and some observations on how we see Contrast Repetition Alignment ... Proximity Technology Applications Standards 7.1s, 7.3s, 7.5s, 7.11s, 7.13s, 7.16s, 7.17s, 7.18s, 7.29s, 7.30s, 7.31s, 7.32s, 7.35s, 7.36s, 7.37s, 7.38s, 7.45s, 8.1s, 8.12s, 8.17s, 8.18s, 8.19s, 8.20s, 8.21s, 8.24s, 8.25s, 8.41s, 8.43s, 8.44s

Sunday, July 12, 2009

I love this movie poster I also loved the sappy romantic comedy. ...and the dog But the designers of this poster have created a masterpiece of storytelling and of visual manipulation. Not that this is bad, only that you need to open your eyes to see it.

Sunday, July 12, 2009

Let’s look at it First: that’s not Reese Witherspoon’s body. She’s only about 5’2”. That body belongs to a 6’ tall model. Sunday, July 12, 2009

The story of this movie is fairly traditional: the female grows up in a small town, falls in love and gets married, feels stifled, leaves town and moves to the big city. She becomes extraordinarily successful in fashion design, falls in love again but this time with a fabulously wealthy and socially significant man, decides to get married to him. But then realizes she never divorced husband one, so she returns home to finalize the divorce. There, she finds she is still in love with husband one, and the conflict resolves when they reunite. Sunday, July 12, 2009

So what is going on? The fake body for Witherspoon and its style of dress imply the success she finds in fashion design. Although I don’t endorse it, I think Mark Twain’s idea is illustrated here: never let the truth stand in the way of a good story. Sunday, July 12, 2009

But there’s a lot more... First let’s look at the purpose of the poster: It is displayed at theaters where it has less than 3 seconds to persuade you to watch this movie. There are a lot of other posters. This one is in competition with them and must convey the essence of the film quickly and effectively. I don’t know how many people were persuaded to see the movie because of this poster, but so far this 2002 movie has grossed almost $200 million worldwide. That’s a successful romantic comedy. In fact, it was the most successful movie ever released in the month of September. You can bet that nothing about this poster is accidental.

Sunday, July 12, 2009

Look for contrast Now that we have established the background of the poster and its movie, let’s look at it as a design. What elements give a sense of contrast to the poster? Color? Size of type? Large things versus small things? Things that are a light shade versus things that are a dark shade? Living things versus inanimate things? Right. All of these. Did I leave any out? There are some additional content contrasts: the dog symbolizes something that hunts and finds people while the shopping bag symbolizes the hunt for possessions.

Sunday, July 12, 2009

First basic principle is contrast Contrast is the attribute of looking different from something else. If the point is to look different then it should be

really different. Contrast is the single most important element in a design, usually. Properly done, it makes the design come to life. This means that the design is easy to see, the information is organized in a way that makes it easy to guess what the important things are and what the not-so-important things are, and it leads the eye to the most important things. We notice contrast before we notice anything else. In our movie poster, the first image that jumps out at us is the image of

Sunday, July 12, 2009

Reese Witherspoon. We know immediately that this movie will be centered on her. All the attributes she brings to the theater will be showcased—cuteness, sex appeal, lively manner, interesting problems, and so on. So it is appropriate that the black dress is in contrast with everything else in the poster. But this is not the only use of contrast in this poster.

Black vs. White Red vs. Black vs. White Large type vs. small type Stuff in the foreground vs. blank background (white) Text without serifs vs. text with serifs Sunday, July 12, 2009

Repetition Contrast is not the only design principle here. Look at all the elements that REPEAT: The blue color of the shopping bag (the famous “Tiffany blue”) is repeated in the block of text at the bottom and also in the line of text at the top. The red color in the center of the poster is repeated in the red color of the text at the bottom (and with slight change of hue in her lips). The brown hues in the dog’s coat are repeated in the brown tones of the fancy luggage. The black of the dress is repeated in the black of the shoes. Even the color of the sanserif text of “Reese Witherspoon” is repeated in the color of serif text of “Sweet Home Alabama”—showing that repetition and contrast can work together

Sunday, July 12, 2009

The second basic principle of design is REPETITION Repetition means using the same element or attribute in more than one place in the design. Obviously there is only one Reese Witherspoon face, but there are examples of duplication for every other element in the poster. The importance of REPETITION is this: it reminds the visual cortex of the brain that there is something similar here, and this suggests that there is a kind of unity in the design. Things that are similar belong together. Recognizing similarities is one of the earliest intellectual achievements developed by the human brain during infancy, and it remains a critical function for our whole lives.

Sunday, July 12, 2009

Repetition ties elements together, allowing them to echo one another. It is also important in other ways. Music depends upon variation against repetition, for example. Of all the basic principles of design, repetition is the one that requires cognition: we must both remember and then associate two or more elements in order to have repetition. Contrast, in contrast, is a purely visual perception and is processed by the visual cortex before it hits consciousness.

This appears to be the center line of the poster, but it isn’t

3rd: look for alignment This poster uses a center alignment, usually the weakest kind of alignment technique. Sunday, July 12, 2009

this is the geometric center line

In fact, the ALIGNMENT in this poster is very subtle. It gives the appearance of center alignment until you actually place a line through the geometrical center point. Her left eye falls directly on the center line, and her feet are evenly bisected by the line. But that’s about it. The curve of her body is not aligned towards the center, with her right hip cocked over the NYC trappings— the luggage, the Tiffany’s bag. The dog balances the stuff, but not in terms of space. The title is centered on her body, but not on the center line of the poster itself. Very subtle differences, these. But your eye has already registered these subtleties even though you were probably not aware of them. These variations against an expected alignment give the the poster a sense of life and excitement—a conflict—that could have been killed by slavish alignment along a center axis. Absolutely superb work by a real master designer.

Sunday, July 12, 2009

While we’re on the subject, you should also note that Witherspoon’s eye lines up directly with the “B” in Alabama, and with the “in” in “in love.” If you look at the arrangement of letters in Sweet Home Alabama, the T is positioned directly between her thighs, and her choice in the movie is whether she wants the NYC side (side A) or the hound side (side B). In other words, which guy is she going to be committed to forever? The alignment tells us that the guy we see second (who is actually her first husband) is the one she is going to end up with. I really love this poster. Subtle. Another point about the alignment: while it appears to be center aligned, there is more mass on the left side of the poster than on the right. That poor bloodhound is balancing all that fancy junk. Finally, the block of blue text at the bottom is also aligned. Now: look at the title and tell me why it is aligned the way it is, with Alabama crowding up into Sweet Home, and some letters running together while others do not. Any guesses? A brief look at the horizontal alignment reveals that the apparent centering of the title is not quite right, either. It is actually a little above the horizontal center. The dead center of the poster is located a little above the “B”, but the optical illusion of the design doesn’t look like it. Sunday, July 12, 2009

The third basic element of design is ALIGNMENT Alignment is the attribute of arranging every element in a design to conform to some kind of horizontal and vertical visual relationship with other elements in the design. No element in a design can exist by itself, out of visual relationship with other elements. Everything, including text, graphics, images, and headlines, must have a visual alignment with everything else in the design. I chose to illustrate this principle with the most complex example I could find—the Sweet Home Alabama poster is subtle and its design is extraordinary. But once you begin looking for alignments in it, you realize that it is far more than just center-aligned. While every element in the design is repeated (except the face, appropriately), no one element stands off by itself unrelated to the other elements. Everything is aligned in some way, and the visual alignment connects them.

Sunday, July 12, 2009

We perceive that all of these elements go together, that this is not a series of information statements about a movie but a unified, whole description of it. We have one elaborate communication here, not (as on a newspaper page or the wall of a subway station) a whole bunch of different communications with different meanings and intentions. All of the basic design elements contribute to this sense, of course, but alignment is one of the most important. It is also the one design principle most often violated by amateurs. For more information on these principles, navigate to the website below. http://thinkvitamin.com/features/how-crap-is-your-site-design/

4th: look for placement How items are placed in space relative to one another is the fourth d e s i g n p r i n c i p l e . We c a l l i t “ P R O X I M I T Y. ” I s t h e r e a n y significance to how the various items in this poster are placed in proximity to one another? You bet there is. Sunday, July 12, 2009

The first question to ask is whether all of the different items in the poster have a spatial relationship with one another. If they do, we need to be able to say why they do. All of the images are close together. We’ve already talked about the symbolism of some of these images—the dog, the expensive “stuff,” the female caught between the two. I guess it’s belaboring the point to notice that she both rises above this conflict, and puts it behind her. It’s probably also appropriate to note that she doesn’t have on a wedding ring, although (—guess what!?—) the hand that ought to have the wedding ring is positioned on the “living” side of the poster with the dog, the word “home,” the partial word “MA”, and the “B” side of her life. The three images all touch, crowded into the central space of the poster. This is emblematic of the movie, but it also illustrates an important design principle: they only make sense as symbols of the movie if they are seen together. So they have proximity. They are close together, they are not scattered out across the white space of the poster. All the names of actors and the legal stuff is collected into a single text block at the bottom of the poster. Is this information important? It’s standard—it has to be there. The names are not scattered around, however, they are collected together. This illustrates the principle of proximity: stuff that ought to go together is placed together. Sunday, July 12, 2009

The 4th principle of design is PROXIMITY Proximity is the principle that things must be placed close to the items they belong with. The headline of a story should be placed close to the text of the story. The caption of a photograph should be placed close to the photo. The names of actors in the movie should be placed close to the names of all the other actors. The price of a can of beans at the grocery store should be placed close to the can of beans. We expect this kind of information. It is a design principle because it is one of the ways we have learned to make sense of the world. If you violate this principle in your designs, or your posters, or your grocery store, then you confuse your viewer. A confused viewer is one with whom you failed to communicate. The principle of proximity is perceived by the visual cortex before the image rises to consciousness. It is

Sunday, July 12, 2009

a basic function of the brain. And we have even abstracted this principle into a maxim: you are known by the company you keep. If you are in proximity to gangsters, then you are probably a gangster. Whereas CONTRAST differentiates between objects, PROXIMITY associates them. A cop in a blue uniform contrasts with the disheveled perp in handcuffs, so we don’t think of their proximity as defining, only that they are associated in a particular way. REPETITION is also a form of association, but involves a higher level of cognition than PROXIMITY. The visual cortex processes PROXIMITY, but the prefrontal cortex processes REPETITION. PROXIMITY is spatial. REPETITION is cognitive.

The four principles of graphic design: Contrast Repetition Alignment Proximity We call this the CRAP of design. Sunday, July 12, 2009

Now let’s play

Identify the uses of contrast, repetition, alignment, and proximity in this ad Sunday, July 12, 2009

Some possible answers Contrast: There is contrast between the sizes of the type and also with the red color and yellow lettering of the logo. The use of shadowing with the lure contrasts it with the flat background. The display font of the sanserif headline contrasts with the more traditional serif font of the small text. Repetition: the red of the lure eye repeats in the red of the logo; all four sides of the ad are bordered with the same line; there are two hooks in the image; both the headline and the small text make complete statements, with punctuation, and they are both black; the background picks up some of the brownish hues in the lure Alignment: the two hooks align with one another; the bottom text is aligned horizontally with the logo; while this small ad is predominantly center-aligned, the lure itself is centered to the right of the center line, creating visual conflict and a sense of motion; the angle of the hooks is the same, leading the viewer’s eye to the eye of the lure, while the tongue of the lure directs the viewer from the lure eye to the logo in the bottom right--you’ve been hooked Sunday, July 12, 2009

Proximity: the logo is close to the explanatory text at the bottom. The two blocks of text are equal distances from the lure (alignment) but close enough to the lure to guarantee that you know they are making statements about it.

More play.... The repetition is pretty evident here, don’t you think? Alignment: the male model is not exactly on the geometrical center line of the ad, and there are interesting things going on with the lines and angles of his body— they seem to be leading our eyes towards the fragrance bottle. There is contrast between the gray tones of the background and model with the bright gold of the headline and bottle. Contrast is also shown in the sizes of the type, and the difference between the type on the bottle and the text The bottle is proximate to the model, etc.

Sunday, July 12, 2009

Let’s play a little harder The magazine page at left is part of a spread on theatrical events. How do the principles of Contrast, Repetition, Alignment and Proximity apply to this page? Contrast is obvious in the text in the upper right, where the name of the play is in bold face, and the actors against a blank background. The images of the sword fight at the bottom are repetitions intended to show action in time, while all the character show costuming and makeup appropriate for their roles. There are some really interesting uses of alignment, including the line of the fight scenes and the pyramidal shape of the tableaux itself. Oberon, on the right, is next to his queen Titania, and actually holding hands with his impish elf, the flying Puck, who is the vehicle for magic in the play. One of Puck’s most significant achievements is giving Bottom the tailor an ass’s head, and then making Titania fall in love with him. I think most of that story is revealed here, don’t you? Sunday, July 12, 2009

Sunday, July 12, 2009 Some answers—Contrast: White text on black background, white text on red background, white text on maroon background, sizes of text, styles of text, bold vs. regular faces of text, different shades of background for text. Repetition: maroon color, white text, red color, strong white/black contrasts, use of italics, styles of text in headlines and body text, same spacing between story units, all of the jump lines (i.e., story continues) are exactly the same size and type style; every secondary story headline includes a strong vertical bar and a short head giving the locale of the story (China, The City, Crime, Cinema, etc.). Alignment: story units across the bottom align beneath lead story on Wings, everything on the left and right margins is arrow straight and aligned, the red banner is exactly the same width as the lead story. Everything is aligned horizontally on the top and bottom. Proximity: the headlines are close to the stories, the captions are close to the photos, it is obvious that everything in a unit goes together with everything else in the unit.

answers:

Your turn....

List all the instances of contrast, repetition, alignment and proximity you can find in this front page from The Examiner of San Francisco.

Okay, you’re on your on find five each: contrasts repetitions alignments proximities

Sunday, July 12, 2009

more practice Contrast:______________ Repetition:____________ Alignment:____________ Proximity:____________

Sunday, July 12, 2009

okay, look for this cd design on a quiz

Sunday, July 12, 2009