C.R.A.P :: Proximity

Proximity is the space between elements, and this concept can be used to group elements together that belongs together, or separate elements that should be separated. Sometimes elements can get a completely different meaning by just changing the proximity a little bit. The examples below are from a leaflet The Arena Theatre in Wolverhampton uses to inform visitors of upcoming performances. A little manipulation in photoshop lets me show what a little change in the leaflet can change the meaning of an element.

In the first example you can see how the original page looks:

If we then try to look at the elements were proximity is used to group things, we could look at the header and sub-header

If we then try to change the proximity and group the sub-header with the body text. The meaning of that sub header completely changes.

C.R.A.P :: Alignment

Alignment is important for every design. A symmetrical alignment is important to not confuse the viewer, you don’t want a viewer to stop and think “are these aligned or are they supposed to be offset?” Alignment can sometimes compensates for other thing like contrast. Instead of using contrast you can maybe use some alignment options to draw the eye or separate a side bar like in the example below, where Eric Meyer on his website don’t use another colour for his side bar, just pure alignment.

C.R.A.P :: Repetition

Repetition can as said be used to familiarize viewers with different things. Repetition is really just what it says and I’m not gonna go into to much details because it’s so obvious. I’m gonna use this site as an example.

The repetition used on this site includes the links, the colour is a bit lighter and they have a dotted underline. Another things is the date shown for each post, the same formatting is used on every post. Also the categories in the sidebar are formatted equally, this is so that the user/viewer easily can see whats a category and what is not.

C.R.A.P :: Contrast

Contrast can make a page look fresh and crisp if made good, whereas bad contrast can make a page look dull and uninteresting.

Is this first example from the Magazine WebDesigner, there is used contrast to separate the content of the article with that artwork that is there to grab attention. The contrast used here is the change between a white background to a dark background (black). It’s easiest to see up in the right hand corner, but we can see through the artwork somewhere where we can see the background through. If this background had been white, it would stand so much out as separate things, because it would appear on the same background.

Click to maximise

In this nesxt example from a (unfortunately danish) blog, there is used very little contrast, and it can be hard to separate the sidebar from the rest, because it kind of blends it with everything else on the page. There is no clear contrast. Which in my opinion makes the page look a bit boring, because nothing stands out.

Click to maximise

The C.R.A.P Rule

Explanation of the C.R.A.P rule
Contrast, Repetition, Alignment and Proximity all equally important in a successful design layout.

Contrast:
Contrast is used to draw the viewers eye around the page. Contrast should be exactly what it says, there should be a very clear contrast between elements on a page that is not the same. If the distinction is not clear, it could confuse the viewer into thinking they are not separate elements.

Repetition:
Repetition helps to familiarize a viewer with a design. This is helpful and can be used to present different information more clearly. If a viewer is used to a certain repetition of elements the meaning becomes clearer. For example it does only take one link on a website to make a viewer familiar with how the links look. Normally all links will look the same, so as soon as you have seen the first link, you know that when you see that again, you know its a link.

Alignment:
Aligning things is important to get a unified design. Weblogs are usually a good example of good alignment. Here you have the same elements repeated throughout the page; Headline, date, body text.

Proximity:
Used to create related meaning and group different elements together. Proximity is the space between elements. An example could be the space between a header and a sub header, if they are placed to far away from each other, or the space between is too big, then it could be hard to see that they actually belong together. This is often seen in newspapers were paragraphs and sub headers normally has a very clear connection because of the space between them.