Summary

CRAP is an acronym for Contrast, Repetition, Alignment, and Proximity. Contrast makes things stand out, repetition makes things look consistent, alignment makes things look organized, and proximity keeps things grouped together appropriately. The principles are simple, but their mastery is difficult. Each has its place—for example, you don’t want to use contrast unless you’re deliberately emphasizing or separating something.

Example

Most websites employ the CRAP principles, so I’ll pick the one that destroys most of my free time I’m most familiar with: Reddit. The site uses contrast with the blue hyperlinks, to make them stand out from the rest of the site—after all, that’s why people visit them. This format is kept consistent in most of the site’s individual pages, called subreddits. Next to each link, there is a number in between two arrows, indicating the submission’s score and allowing people to vote on it (provided they’re logged in to an account). Voting on a submission changes the color of the arrows in distinct ways: an upvote is orange, while a downvote is blue. This is more contrast—it helps users quickly identify the way they’ve voted, in case they accidentally click something they didn’t mean to. The link and score indicator together are an example of both repetition and alignment. The repetition is obvious—the setup for every link is the same, with the title, information, and links to comment/save/etc. The alignment comes into play when you look at the left side of the screen: the links and the score indicators are paired so that the score indicator is aligned with the link and its associated information. This also uses proximity: the links are left-aligned and the score indicators are placed right next to them. This, combined with the alignment, lets you know that they are associated with one another.