Is your web design CRAP?

When I first began to study the fundamentals of design I ran across a very interesting acronym the gives one the deepest insights into good design: CRAP. An acronym such as this certainly is easy to remember. And indeed to this day, it influences every stage of my design process.

Once you learn exactly why good design is CRAP, then you, too, will see vast improvements in your designs as well.

“CRAP” stands for: Contrast, Repetition, Alignment, and Proximity. And as my chemistry teacher in high school once said, “Etch these onto your forehead so you’ll never forget.”

Here’s an overview of each:

Contrast

When you apply the rule of contrast to your designs, you are striving to do just one simple thing: if you are going to make two things different, then make them VERY different from each other. Contrast is important because it adds visual attraction to your designs.

Repetition

Make sure to repeat certain visual elements throughout your design. Some elements include color, shape, texture, size, and even the spacial relationship of objects. When you repeat elements, you add continuity and unity to your design.

Alignment

Every element on your design should be placed with a clear reason in mind. Every element needs to have a visual connection with every other element. Having proper alignment gives your final layout a clean and sophisticated look.

Proximity

Rule of thumb: elements relating to each other should be grouped in close proximity to each other. By doing so, you can make several items appear as a single coherent group of related material or information.

What is Lorem Ipsum?

Can you read this:

“Lorem ipsum dolor sit amet, neque velit suspendisse nunc mattis, eu duis vel viverra tortor, a massa feugiat, felis volutpat ut ultrices sit ante tincidunt. Amet fermentum, etiam lacus neque nonummy est mauris, urna nunc sagittis.”

You can’t? Good! Neither can I. And neither can 99.999% (approximately) of the people on this planet.

That’s the whole point of Lorem Ipsum — meaningless, jibberish text that can’t be read or understood and yet can flow naturally in a design layout. It’s actually one of those little-known design tools that is very important to the design process.

Let’s learn more about Lorem Ipsum and how to use it.

What is Lorem Ipsum?

Printers and designers for many years have used Lorem Ipsum when laying out the foundations of a new design project. It’s a form of the old (and almost never studied) Latin language. What does it mean? Who knows. Who created it? Who knows. (Who is John Galt?) But the history of Lorem Ipsum isn’t as important as why it is used and why it’s better than readable text.

Why use Lorem Ipsum?

It is commonly known that readable text is often a distraction to the design process. Instead of looking at the layout to find the problems or weak spots, people will unconsciously focus on the words. This is why designers use Lorem Ipsum when first laying out a project. It allows them to focus on the positioning, spacing, color, and other stylistic elements.

Why is it better than readable text?

Before I learned about Lorem Ipsum, I used to use my own filler text: “This is meaningless text. It should be ignored and disregarded.” I would copy and paste it multiple times to fill out paragraph sections. But there are two main problems with using this kind of readable text.

The first was mentioned above: it’s readable. I found it to be a distraction when I saw it repeated over and over again. The second has to do with the flow of natural text. When a sentence is used repeatedly in a block of text it can create vertical or diagonal lines that add a new and unwanted element to the design. Take a look and the image below. Can you see the lines? (Click to enlarge)

vert-dia1-300x225

Now look at it using Lorem Ipsum:

lorem-ipsum1-300x225

Can you see the difference? The Lorem Ipsum example flows more like real text should flow and yet cannot be read. That makes it easier to concentrate on the layout of the design.

Where can I get some Lorem Ipsum?

Right here! I have included four paragraphs of Lorem Ipsum text below. Just select it, then copy and paste it into a blank text document so you can use it in the future.