From Crap Design to CRAP Design

There's an acronym that's used as a guide for web design: CRAP (unfortunately, it also has another use in computer science). It stands for contrast, repetition, alignment, proximity. These are just four basic things to keep in mind when designing an interface of any kind. Even for non-designers, this can help whenever you need to design a basic webpage for any project you're working on. <!--more-->

Contrast #

Contrast means to make things stand out from each other. You may notice that the header for this section, "contrast", is big and bold. This makes it contrast with the smaller, lighter, body text. You can also make text contrast by making it strong or emphasized. Links contrast by being a different color (usually blue). The text on this page contrasts with the background by using opposite colors (white and black). It there are two different things, they should look different.

If you want one really big thing for the reader to focus on, make it contrast with the rest of the page. Consider the following two pages:

On the left, it's hard to immediately tell what you need to focus on. On the right, the biggest element is the title, which gives a very good idea of what the meeting is. The next most important thing is logistics, which would be the date and time. That's why that is the second biggest. The exact details here are less important, so we can afford to make that smaller.

Repetition #

Of course, if you're writing text that's supposed to be read in order, like in a novel, then you don't need much contrast. You don't want to interrupt the reader by throwing in contrast when it doesn't need to be there. If you want someone to read the entire piece, then it's okay to be a little bland.

Repetition can also be useful for tying related ideas together. Imagine if all the paragraphs of this article were different colors. That would be a very jarring experience. You wouldn't know if any of the paragraphs are related to each other.

The navigation system should also be repetitive. The user doesn't want to learn how to use a whole new system for every page. In fact, all the pages of your site should look very similar, because it's the same site. That includes any logos, color scheme, typography, and layout.

Alignment #

All the elements of your page should be lined up with each other. The elements can either be aligned on the left side, the right side, and the center. Normally, you don't want to mix alignments. You want to pick one and stick with it.

A lot of non-designers have trouble with this. It's tempting to show off by putting all the text in different places, but it looks terrible. The easiest alignment to use is center, because it's nice and symmetrical. Although, most people are used to a left-align.

Also, please don't bump into the edges. It's annoying for the eyes whenever you want to move to the next line.

Proximity #

If two items are related, they should be close together. Elements that are close together seem related. Avoid orphaning your elements by separation.

This image looks related to the text, because it's pretty close to the text. This screenshot doesn't quite do it justice, but trust me, it works. If the image was separated by a few hundred pixels, the reader might think that the image is unrelated to the text.

Using the correct proximity helps give a structure to the page. The Section homepage is separated into different sections (pun not intended). Each section illustrates a different point. If the image above was talking about who uses it, then it wouldn't make sense to put it so close to the text above it.

Conclusion #

It's important to note that you can break some of these rules and still have a decent-looking site. Look at the Pronoun Testing Grounds:

This is way more than three colors, but it still works (Probably. Maybe some color theorist will come along and scold me for this). The colors are actually somewhat similar. Most of them have a slightly bright, yet dull appearance.

For the most part though, these four rules are what you should stick to. If you're a non-designer who needs a website, this should be very useful to you.

If you'd like to see a CodePen of some of the examples featured in this article, here you go. I actually made the CodePen after making all of the examples. If some of the words are different, that's why.