Guide to 4 Principles of Design, It’s All CRAP For Web Strategy!

In design, there are four fundamental principles that need to be followed.  These four rules are as follows:

• Contrast
• Repetition
• Alignment
• Proximity

If you browse to a website or pick up a magazine, you will notice that many successful designs follow these principles.  Once you familiarize yourself with these principles, you will begin to notice them in other components from the table of contents in a book your reading or the flier you just picked up at the local coffee shop.

Contrast and Repetition

Contrast is the state of being strikingly different between two objects, colors or textures.  In design, contrasting elements is how to make things stand out.  You use opposite colors such as a dark colored background with a light colored text.  By using opposite or contrasted colors, you will be able to compare these elements in such a way to emphasize their differences.  An example would be the chapter heading in the table of contents, the font may be larger and it is usually emphasized with bold lettering.

Repetition is to repeat elements consistently.  An example would be the navigation menu items for a website or table of contents in a book.  If the navigation menu items came in assorted sizes and colors, a user will have difficulty using the website because of inconsistencies.  In the case of the table of contents, if chapters or subjects were not distributed evenly, you would have a hard time finding exactly what you are looking for in a book.

The header and navigation use contrasting colors and navigation items are repeated for consistency.

Alignment and Proximity

Alignment is to arrange elements in correct or relative positions.  By using alignment you can line up text or images so that it is evenly distributed and easier to read.  Without alignment, every paragraph would be indented differently or placed in random locations throughout a page in a book or magazine article.    This principle goes with images as well.  Imagine an image gallery with images placed without order on a page and how difficult that would be.  A good example is when you are using forms, the information fields are typically aligned so it makes it easier for you to follow the form to fill it out.

Proximity is placing similar elements in relationship or space.  An example is like the contact information on a business card.  Typically, the address, telephone, fax and email information are in proximity to each other.  They are all components that make up the contact information area.  It would be difficult to read if the address is separated from telephone number and if each item were typed out with a different font and size.

The Discounts and Commitment boxes are in proximity with each other and all items are aligned to the left.

Conclusion

I’ve just barely introduced you to some basic design principles by explaining the importance of using contrast, repetition, alignment and proximity in design.  Whether you are doing print or web design, you will need to follow these rules to be successful.  To see some great examples and have a basic knowledge to build upon, I suggest reading Design Workshop by Robin Williams.