Basic Principles of Web DesignOh CRAP! No, I am not cussing. CRAP is the acronym for the basic principles of web design. To understand this principle, author Robin Williams (not the comedian) tells a story in her book, Non Designers Type Book about The Joshua Tree.
"Once upon a time, Robin received a tree identifying book where you could match a tree up with its name by looking at its picture. Robin decided to go out and identify the trees in the neighborhood. Before she went out, she read through part of the book.The first tree in the book was the Joshua tree because it only took two clues to identify it.
Now the Joshua tree is a really weird-looking tree and she looked at that picture and said to herself "Oh, we don’t have that kind of tree in Northern California. That is a weird-looking tree. I would know if I saw that tree, and I’ve never seen one before. So she took the book and went outside. Her parents lived in a cul-de-sac of six homes. Four of those homes had Joshua trees in the front yard. She had lived in that house for 13 years, and she had never seen a Joshua tree. She took a walk around the block – at least 80 percent of the homes had Joshua trees in the front yards. And she had sworn she had never seen one before!" It's a good story and one that shows how our perception can change depending on our awareness. As a designer, you need to be aware of the four basic principles. They are presented below separately but remember they are interconnected. To me CRAP sounds negative. I like a more positive spin on things, so here is my version...I call it CARP (the same principles, just in a more pleasing name).
The Four Basic Principles |
The CARP principles can be applied in a variety of ways, from page layout to typography and even color selection. The idea is that each principle is important in it's own right but when effectively used together, the viewer's eye will flow naturally on a web page.
Contrast is an effective way to add visual interest to a web page. Contrast can be created through typeface choices, colors, shapes, lines, space, etc. The concept of contrast states that if the elements on a page are not the same, then they should be different. Very different. Contrast is created when two elements are completely different. If there are just a little different, then you have not achieved contrast; you have created conflict.
By using the Alignment principle you create order and visual connections. No element should be arbitrarily placed on a page. When elements are aligned, they are connected even if they are separated on a page. This is where an underlying grid system comes into play. The grid system is a wire frame used to design and develop a cohesive design across multiple pages.
The idea of repetition is to repeat objects or typographic elements. The idea of repetition is to repeat objects or typographic elements. Got it? Repetition is the ability to tie otherwise separate elements together. Repetition creates visual unity.
The principle of proximity means that you should group related items together by moving them physically close to each other and adding some form of separation between items that are not similar. This helps to ensure they appear as a group rather than a selection of unrelated elements.
Here is the before and after graphic from the Non Designers Type Book:
|
Now it's your turn to explore the web... |
Module 3 DiscussionHaving trouble finding a page to critique? Confused about how the design principles relate to web design? Post questions or comments for Module 3 in the discussion forum.
Link to the discussion board |