Introducing CRAP: The Principles of Design

Design Principles 1: CRAP
This article was originally written by me for Hubze, a former Social media news and tutorial source.

Welcome to the first segment of the Design Edition of Hubze Hangout! Today we’re going to start diving into the goods that will get you on the road to becoming a damn good designer.

To start things off, we’re going to talk about CRAP. No, we’re not going to look at crappy designs or discuss the composition of, well, you know….

CRAP is the acronym for the four basic principles of design.

  • Contrast
  • Repetition
  • Alignment
  • Proximity

Before we define what each of these mean, it’s important to know why we need to identify these by name. Being able to name things gives you power over them. Think about it…

  • Did you ever see an actor or actress for the first time in a movie that you really liked, then after you learned their name, you recognize them in a ton of movies that you’ve already seen?
  • Have you ever gotten Poison Ivy walking through the woods? Well, once you knew what it looked like, I’m sure you could spot it from 10 ft away!

Being able to name things gives you control over them. You can now reference your actor or actress when speaking about movies with your friends, and you know to avoid going near Poison Ivy for fear of contracting an itchy rash. Referencing things by name is important, and today we’re going to learn how to take control of your designs.

The four basic design principles

Contrast

Contrast in design is sort of the measurement of how elements on a page stand out against each other. What you want to avoid is making elements on the page similar, but different. If you’re going to make elements different, make them very different. Make things contrast, not conflict.

Bad Contrast Example

Bad contrast
Lack of contrast leaves Craigslist visually unappealing

Good Contrast Example

Good contrast
By using contrast, the page is much more visually engaging, and important elements are easy to find.

Repetition

Repeat visual elements on the page to strengthen organization and unity. Repetition gives the piece cohesiveness.

Elements being repeated can consist of colors, shapes, textures, spatial relationships, line thicknesses, fonts, sizes, graphics concepts, etc.

Good Repetition Example

Good repetition
Signature elements and styles are repeated throughout the page.

Alignment

Every element on your page should have a visual connection with another element on the page. Nothing should be randomly placed on the page. Good alignment creates a clean, professional appearance.

Bad Alignment Example

Bad alignment
There is little-to-no visual connection between elements on the page. The eye cannot form a straight line between elements, making it harder to follow.

Good alignment Example

Paragraphs form an invisible line with each other, while the sidebar and logo share a left and right margin with each other.
Paragraphs form an invisible line with each other, while the sidebar and logo share a left and right margin with each other.

Proximity

Proximity is the spatial relationship between elements on a page. Related items should be grouped together, forming a visual “unit.” Proximity helps organization, reduces clutter and makes digesting information easier on the reader.

Bad Proximity Example

Bad proximity
Elements of similar importance are spaced erratically throughout the site. This makes digesting information more confusing and difficult.

Good Proximity Example

Good proximity
Related elements are grouped together in an easy-to-read layout.

It’s important to note that all elements can be identified individually, but rarely is only one element used in a design. Look at the examples and see if you notice the other principles in each design.

Read part 2 of the series, Learning Proximity in Design

Read part 3 of the series, Learning Alignment in Design

Read part 4 of the series, Learning Contrast in Design

Read part 5 of the series, Learning Repetition in Design