Tuesday, May 31, 2011

Design Principles: Contrast | Repetition | Alignment

Contrast is a very powerful design principle. It is the key to attaining attention, yet it is one of those principles that can be applied without much effort. When an element, such as a black box is placed on a blank page, you have already added contrast to the layout. Contrast can be achieved in multiple ways, through the use of contradiction and with different elements. Examples are:
• Type: large headline versus small body text. Bold large words, within regular body text.
• Shape: geometric objects contrasted against angular, organic shapes
• Size: sharply varying the size one box or image next to a tiny box or image
• Texture: using bold, thick lines with thin, skinny lines
Type and color are used as contrasting elements
• Color:  most extreme is the play of black and white, but how about bright yellow and dark purple as well? Yes, contrast can be created with color as well.

As with other design principles, it's important to use careful judgement so that when you apply contrast, it's appropriate for your project's message. Will high-drama contrast be suitable for the message, or will subtle contrast be more apropos? Once you've determined which type of contrast is more in line with the project's mood, then you can apply accordingly.

Repetition is a design principle I highly espouse because it is especially useful in branding a company, product or service. For example, in a marketing campaign, you may have different components/pieces that create the package of collateral material for a promotion. If there is a brochure, sell sheet, posters, Point of Purchase displays, web graphics, and eBlast, there needs to be a consistent thread throughout all pieces that will tie them together. A repeated use of a graphics and/or colors, or the same type of fonts is the use of repetition and unifies different components. Repetition is essential, especially in the art of branding.

Another form of repetition is to use a recurring theme within the same piece. A brochure about springtime could have sprinkles of flowers as graphics in the background, along with spring-like colors. Perhaps even bullet points feature flower buds instead to drive home the spring theme. This is also another example of the use of repetition.

Click on the following link for more on repetition. There is also a simple, but nice visual that further explains the concept. http://www.classjump.com/skinner/documents/Repetition_Handout.pdf

Examples of Left, Right and Centered Alignment
Finally, with the principle of Alignment, every element on the page should be aligned with something else on the page. Alignment anchors elements on the page and gives a feeling of purpose and stability, while misalignment or freeform, gives more of a random, less organized feel. Examples of alignment are: left justified full body paragraphs, headings are either left or centered, and columns of numbers are right justified. There are many other ways to accomplish alignment. Featured here are some examples.

Before and After Layout. Do you see how the main title is aligned with the paragraphs of text? Each headline is left aligned and elements are anchored. It's a definite improvement from the "before" layout.

My next entry will about the wonderful world of color!

No comments:

Post a Comment