Proximity, Alignment, Repetition & Contrast Design Principles Proximity, Alignment, Repetition & Contrast

Basic Design Principles Principle of Proximity: Group related items together. Principle of Alignment: Nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page. Principle of Repetition: Repeat some aspect of the design throughout the entire piece. Principle of Contrast: If two items are not exactly the same, then make them different, very different. The Principle of Proximity states that you group related items together, move them physically close to each other so the related items are seen as one cohesive group rather than a bunch of unrelated bits.

Let's take the rather dull report cover you see below and apply each of the four design principles in turn. A rather typical but dull report cover: centered, evenly spaced to fill the page. If you didn't read Eng lish, you might think there are six separate topics on this page. Each line seems an element unto itself.

Proximity If items are related to each other, group them into closer proximity Separate items that are not directly related to each other Vary the space between to indicate the closeness or the importance of the relationship Besides creating a nicer look to the page, it also communicates more clearly. By putting the title and subtitle close to each other, we now have one well-defined unit rather than six apparently unrelated units. It is now clear that those two topics are closely related to each other. When we move the by-line and date farther away, it becomes instantly clear that although this is related information and possibly important, it is not part of the title.

Alignment Be conscious about every element you place on the page. To keep the entire page unfiled, align every object with an edge of some other object. If your alignments are strong, then you can choose to break and alignment occasionally and it won’t look like a mistake Even though the author's name is far from the title, there is a visual connection between the two elements because of the alignment to each other. The example on the previous page is also aligned - a centered alignment. As you can see, though, a flush left or flush right alignment (as shown above) gives a stronger edge, a stronger line for your eye to follow. A flush left or flush right alignment often tends to import a more sophisticated look than does a centered alignment.

Repetition Repetition is a stronger form of being consistent Look at the elements you already repeat (bullets, typefaces, lines, colors, etc.): see if it might be appropriate to make one of these elements stronger & use it as a repetitive element. Repetition also helps strengthen the reader’s sense of recognition of the entity represented by the design The distinctive typeface in the title is repeated in the author's name, which strengthens their connection even though they are physically far apart on the page. The font for the other text is now in the light weight. The small triangles were added specifically to create a repetition. Although they point in different directions, the triangular shape is distinct enough to be recognized each time. The color of the triangles is also a repeated element. Repetition helps tie separate parts of a design together.

Contrast You can add contrast by: Rules (lines) Typefaces Colors Spatial relationships Directions Would you agree that the example on this page attracts your eye more than the example on the previous page? It's the contrast here, the strong black versus white, that does it. Adding contrast to this was simply a matter of adding the black boxes.

Launcelot Gobbo Find at least seven differences between the two sample resumes below. Specify each difference and name the design principle the first example offends. State in words what the changes are. Write your answers on a sheet of binder paper.

Clean It Up! What are the problems with this magazine ad? Clues: Is there one main focal point? Why not, and how could you create one? WHY IS SO MUCH OF THE TEXT IN ALL CAPS? Do you need the heavy border and the inner boxes? How many different typefaces are in this ad? How many different alignments? Are the logical elements grouped together into close proximity? What could you use as repetitive elements? Write the six problems with the ad on a sheet of binder paper. Use complete sentences.

Clean It Up! Knowing where to begin can sometimes seem overwhelming. So first of all, let's clean it up. First get rid of everything superfluous so you know what you're working with: For instance, you don't need ''http:/ /'' (or even "www") in a web address. You don't need the words "phone;' "call;' or "email" because the format of the text and numbers tells you what the item is. You don't need FOUR logos. You don' t need the inner boxes. You don't need all caps. You don't need CALIF. (it's messy); use CA or spell it out. You don't need parentheses around the area code. The rounded edges of the border make this ad look wimpy; it also conflicts with the sharp edges of the logo. So make the border thinner and sharp (if your ad is in color, perhaps you could use a pale tint shape instead of any border at all). Choose one or two typefaces. Web and email addresses are easier to read if you capitalize the first letters of the main words. Now that you can see what you're really working with , determine what should be the focal point. The focal point might be slightly different depending on where the ad is placed. For instance, if it's a phone book ad for an optometrist , the focal point might be on "Optometry" rather than the physician's name - a reader is scanning the yellow pages looking for someone in that field, not that doctor's name. In a phone book, the phone number should have more priority than, say, it would in a flyer that was for an event being held on a specific day and time. Add the answers to these questions to your sheet of paper from part 1: What should be the focal point? What is the purpose of this piece in this particular magazine (or wherever it is)? That will help you determine the hierarchy of the rest of the information. Which items should be grouped together into closer proximity? Use complete sentences.

Assignment