Is your site C.R.A.P.?
C.R.A.P. stands for: contrast, repetition, alignment and proximity. The C.R.A.P.-principles are a good set of basic rules for web designers. They can progressively increase the quality of a design.
I do not see myself as a designer but more as a programmer. When I first learnt about these principles I was immediately enthusiastic because they are to the point and practical. That’s what guys and girls like me need. When I made my first design after learning about this I paid attention to these principles and noticed that my common-sense wasn’t that bad. But I really improved my design skills in some area’s using just these four principles.
Let’s look at these principles step by step.
Contrast
Contast is the difference between elements. This difference can be size, color, etcetera. Contrast adds visual interest to a page. The trick with contrast is to not make elements look merely similar. Either make them very similar or the same, or make them very different.
- You should always use enough contrast between your sites’ background color and text. People with a visual handycap can have a very hard time reading your site.
- Don’t be afraid to use different fonts and font sizes. Make your headers big and visible. Make notes small.
- You can use contrasting colors to make the distinction between menu’s, header and content on your page. Big differences in color makes navigation easier. It’s easier to recognize a menubar or infobox if it’s in a different color than the rest of your site.
So either make it similar, or make it very different. This applies to all kinds of elements like lines, space, shape, color and thickness.
Repetition
Repeat aspects of your design. Repetition adds consistency to your pages. If you repeat elements of your design throughout your entire site, your visitors will know they are still on the same site. Repeating elements can be colors, certain lines, images, bullets and anything you can think of.
- Use consistent font sizes for the same types of information
- Repeat headings and make them consistent (same size, color)
- Repeat elements like your navigation bar, background and menu’s
Alignment
Alignment is the key to making a page look neat. Good alignment will make you page look coherent and professional. Webmasters often don’t know or forget this.
- use the same margin size between page elements like menu’s and content area’s. For example, stick with 10 pixels throughout your entire design.
- if you use padding, try to use the same padding everywhere.
- align menu bars, advertisements and other element vertically with the content of your site.
- Use text alignment. Sometimes aligning text in the center or to the right can look great. Justified alignment (like in the news papers) can sometimes make an otherwise messy text look neat and professional
Proximity
The last principle is proximity. You should group related items. Grouping implies that items are related to eachother. So grouping related items will make their relationships clearly visible. A good example is a navigation menu where you group the different menu links together.
- items that are not related to eachother should not be placed close to eachother
- if you group items, make sure there is enough space between the group of items and other groups
- organise your groups of elements in such a way that the reader does not have to jump his eyes around the page to get the information he or she is looking for.
That’s it. My final remark is that some of the best designs are made by deviating from the rules. Use the knowledge, but don’t be afraid to be different!