When we think of CRAP we usually use it in a negative way. Today I will put a positive spin on the acronym by breaking it down into 4 design concepts that you should keep in mind when designing anything, not just websites. They are Contrast, Repetition, Alignment, and Proximity.
Contrast
Contrast is the process of making different elements stick out from the surrounding elements. If the type, size, and color are not the same - make them VERY DIFFERENT. As a previous instructor I had put it - “Don’t Be a WIMP!”
Contrast is most often classified the most important of all the following aspects, as it is what gets the reader to look at the page in the first place.
Repetition
Having elements repeated across your website helps establish unity. These elements do not have to be exactly the same as they can have slight variations and different shapes and sizes.
For example, take the underline out of your logo and use it as a horizontal rule. Maybe take the hat of your comic character and use it as a bullet. There are many creative and unique ways to repeat elements to continually give the user a good feel about the layout.
Alignment
Alignment is something that should always be taken into consideration. Every element you put on your page, poster, or business card should be put in the proper place. It should not be thrown onto the page to merely take up space. Aligning elements to other elements gives them a visual connection and guides the eye of the reader/visitor.
Center aligning everything is a sure sign of an amateur. Center align has its place, but the problem with it is that there is no hard edge for your eye to follow. Now if you right-align your information, the right edge stops at the same place on every line. This gives your eye an imaginary line which gives strength to the layout.
Proximity
When items relate to each other they should be placed near each other. You shouldn’t have your address in the top right corner, and your zip code in the bottom left corner. They should be grouped together in order to help the visitor get the information they need quickly with a simple scan.
For example, when you create a list; elements are placed one under another. Imagine if these related items where all over the page. Would it be as easy to see what is all in the list?
Really, what’s the difference?
Take a look at the following image and you will notice how much of a difference it makes to apply the above principles.
Brenelz Web Solutions