Ever feel like a lot of what you learned in school was CRAP? Well - believe it or not - it was the foundation of my education in design, and that's a good thing.

Joking aside, CRAP is an acronym for Contrast, Repetition, Alignment and Proximity.

These are four principles that lay the foundations for excellent design. These principles, like anything, become ingrained with experience...kinda' like potty training! And let's just say freeing yourself of that big, prohibitive (and embarrassing) diaper is all part of growing up.I still find it helpful to revisit CRAP every now and again to keep myself on my toes.

Contrast

Contrast is all about that pop. Contrast can come in many forms, but most commonly in shape, colour, texture, size, space, and type.

We are wired to recognize similarities and differences, and this is what gives design strength and vitality. Good use of contrast helps grab the viewer's attention, organize information, and creates a focus on the page.A few examples:

Contrast in colour, size and space

Apple uses contrast in its branded design to help make products stand out. The contrast between the white background and large, brightly coloured product images is attention grabbing, and creates a focal point that is hard to miss, and impossible to forget.

Contrast in Typography

When choosing fonts, it is bad practice to choose fonts that are too similar. Fonts that have differences in size, weight, colour, and structure generally go well together and provide more visual interest on the page.

You can find some great examples of contrasting fonts at Font Pair. Notice the differences in the characteristics mentioned above and how this creates aesthetically pleasing contrast.

Repetition

Repetition is about consistency in design. When using the same (or similar) elements throughout a design, it allows cohesive flow and unifies everything. Ultimately, the goal of this is to make the content easier for the user to digest.

Repetition and moderation go hand-in-hand. Choosing a very select number of fonts, patterns, colours, or image styles, and then repeating throughout can make for a very strong design. Often, repetition is used to create a solid style or brand, as you can see in the example below. Colours, fonts, and other visual elements are repeated across various mediums to create a unified look.

Repetition, and ways to apply it:

Typefaces and fonts: Too many fonts in a design can get messy—it is good practice to use a maximum of three. Using a typeface with a large family, or in other words, those that give you lot of different type styles such as light, medium, bold, heavy is a good habit to get into.

An example of repetition in typography would be the use of a heavier style for headings, and a lighter style for copy and applying this throughout your design.

Patterns, lines and colours: Limiting the different number of patterns, line weights/styles and colours used within a design (from start to finish) is important. 

Images and Graphics: Try and keep the style of images and graphics the same. For example, use photos shot by the one photographer to help with consistency. Or, if you have applied a certain filter to an image, apply it to all of them.

Mixed collateral: If designing a number of items for the one product, event or business, they should all share a common look. For example, if designing a website, business card, and advertisement, core design elements between each should be shared.

Alignment

Alignment is more than just left, right or center. It is about creating lines that easily take the viewer from A to B. Creating good alignment bridges the visual gap between each design element, helping us to create relationships between the elements.

Making conscious decisions about where elements are placed and how they interact with each other is important for any successful design.

Proximity

Proximity means grouping similar or related elements together on a page. It’s a simple yet extremely important concept. Good proximity will form visual units and give structure to the layout. It also ensures that the audience will never have to work to figure out a design. Proximity also helps create a clear visual hierarchy.

When designing the website for our software analytics product, DeskMetrics, proximity was used to group together related elements and create a hierarchy on the Pricing page. Our main call-to-action, was grouped with the headline at the top of the page as the key focal point, while the standard pricing plans were placed together so users could easily compare between the two.

A section for Enterprise options was placed below. This separation from the standard plans above is important as the Enterprise subscription requires extra sign-up steps, and has very unique features. Finally, it is important to remember that white space is key!

Allow plenty of white space around all text and other elements so that you can clearly see the effect of grouping items together.While CRAP certainly doesn’t cover all of the principles of design, it is a great place to start.

Remember, these principles are almost always used together to create beautiful, well-rounded designs. Now get out there and design some CRAP, won't you?