Contrast: It helps the viewers direct their attention to the most important things and makes objects distinguishable from each other. Example:
Using Contrast to highlight the title give the reader a clearer idea of what’s the page about, what’s the most important thing on the website.
Repetition: also known as “consistency“. Using the same font, color, icons, etc. on your webpage will help the viewer learn.
We can appreciate how the ODU webpage uses the same font size, font color, etc. This is an example of repetition.
Alignment: Everything on the webpage should line up vertically and horizontally.
Here we can see that the New York Times website employs alignment. Every link follows an horizontal and vertical line.
Proximity: Place the elements that are related close to each other.
In this example we see how in the first picture all the names are put together, and in the second one they’re organized and those who have something in common are put together.
Have you ever visited a webpage where everything was so unorganized that you couldn’t figure out how to find anything what you were looking for and you just gave up and visited a different webpage? This is what C.R.A.P. tries to avoid. By using Contrast, Repetition, Alignment and Proximity, you’ll help your webpage’s viewers to remember the information and know what they should focus their attention on.
These technics is what transform an average webpage into an excellent one.