Designing with C.R.A.P.

How do you decide where to place elements on the page? What colors should you use? How do you get people to notice your content. Believe it or not the answer resides in C.R.A.P.
Contrast, Repetition, Alignment, Proximity. These basic elements of design can be found everywhere design is present. By following these four basic princiapls your designs will improve immeasurably and immediately.

Contrast

Why is most of the text you read black while the background is white. It’s an example of contrast. Through the use of contrast various elements on the page can stand out from each other. In this case the black text stands out against the white background. If the text were also white you’d have a hard time seeing it let alone reading it.
Light gray text on a white background can be seen, though you might have to squint a little to read it. Black text on a white background is usually the easiest to read, however white on black can also be used for a different effect. The point here is to use one light and the other dark. The greater the contrast the easier it will be on the readers eyes.
There are many other examples of contrast on web pages. Typically your headings will look different from your main text and background colors might be used in certain areas of your design. The contrast helps to make things stand apart from each other and draws your eye to each.
Color is not the only way to bring about contrast however. Bold and italics can be used to set things apart as can size. Look at the headings of any web page. Are they all the same size? How else are they set apart from each other?
Contrast is an important part of any web page design. The trick is to use it sparingy. There must be a common thread to stand apart from. If everything was to contrast with everything else the page would be little more than a confusing mess.
Look around for examples of contrast on web pages, in magazines, in art, or any other place you can think to look. Anytime your eye is drawn to something there is probably a bit of contrast going on.

Repetition

Repeating similar elements ties them together and lets the viewer know they belong together. Let’s consider page headings again. Notice how similiar level headings are usually the same color and size. This lets you know right away they go together.
Think about a website beyond a single page. Do the pages look similiar across the site? Are the colors consistent between pages? Is the navigation consistently in the same place? Why do you think that is?
Repeating things from page to page lets you know you haven’t left the site by accident (you wouldn’t leave on purpose would you?) and helps you find things quicker. Once you’ve identified that the main navigation is along the top of the page you can easily find it on other pages. And once on other pages you know you need only look to the left to find links for the various topics in each section of the site.
Have you ever visited sites that moved the navigation to different places on each page? It was probably hard to find your way around. You might even have left the site and never returned.
Repetition brings a familiarity to a website. When effectively used you’ll often be unaware it’s even going on. You’ll just find the whole site easier to use.

Alignment

Ever wonder why newspapers are laid out in columns, or why all the windows in your living room are the same distance from the ceiling? The reason has to do with alignment. Having the text in the newspaper or magazine articles in columns gives you clues about where to read. Start at the top, read all the way down the column and then move on to the next column.
Aligning elements gives hints that they belong together. It lets your eye easily group elements together and place them within the context of the whole page.
It’s easier to find the next word to read when reaching the end of a given line when it aligns with the word in the line above it. One of the surest ways to recognize amateur web design is to see all the text centered on a page. While centering elements has it’s value it is better to either left or right align text within it’s containing block or column.
Aligning elements has a soothing effect on the reader and helps to give organization and order to seemingly random elements.

Proximity

Proximity is placing elements that belong together near each other and seperating elements that differ. Again looking at text proximity is used to keep like sentences together in a paragraph and using additional spaces to seperated paragraphs with different thoughts and ideas.
Placing elements that share something in common near each other gives visual clues that they go together. Captions are placed directly under the image they describe. Headings sit atop the text to which they refer. Headings may have space between them and the text to which they refer, however they should be closer to that text than any other text on the page.
Not only should like elements be grouped together, but they should be clearly separate from elements from which they do not belong. Have you ever seen a caption located directly between two images? Could you tell whether it went with the image to the right or to the left? Certainly not before reading it. Placing it closer to the image on the right would clearly indicate that it belongs to that image. And it would allow those who only want to know more about the image to the left to skip over it.
C.R.A.P.
Keep in mind that these principals are not etched in stone. Often the best designs are those that find interesting and creative ways to break the rules. However they do so with good reason and before you can break the rules you must know what the rules are. You must learn to use them and master them before you can move beyond them.
Just by using these four basic principles your designs will improve considerably and keep you moving along the path from amateur to professional. Keep an eye out for Contrast, Repetition, Alignment, and Proximity everywhere around you and incorporate them into your future designs.

Thanks for reading. Please share this post.