Eons ago when I was taking the Freshman web design course in college (okay, it was only 4 years ago) I was taught about the acronym of all acronyms, the one by which all other web design acronyms were judged. We learned that good design is based on the C.R.A.P. principles where C.R.A.P. stands for Contrast Repetition Alignment Proximity, and when Creative Directors tell you that your design is crap, they’re actually giving you positive reinforcement. Okay, that last part was made up, sorry. “Crappy work” is probably not a term of endearment but rather an indication that your pixels smell.

There are various examples of what C.R.A.P. means on the web (Robin Williams first coined the acronym), but for me it’s this:

• Contrast
  Elements that aren’t the same should be very different so they stand out, making them “slightly different” confuses the user into seeing a relation that doesn’t exist. Strong contrast between page elements allows the user’s eye to flow from one to another down the page instead of creating a sea of similarity that’s boring and not communicative.
• Repetition
  Repeat styles down the page for a cohesive feel — if you style related elements the same way in one area, continue that trend for other areas for consistency.
• Alignment
  Everything on the page needs to be visually connected to something else, nothing should be out of place or distinct from all other design elements.
• Proximity
  Proximity creates related meaning: elements that are related should be grouped together, whereas separate design elements should have enough space in between to communicate they are different.

In this article I’ll go into further depth about each specific principle, and show examples of design that are either C.R.A.P. or just crap. Let’s go!

Contrast

Good contrast can make sites appear crisp and organized, whereas poor contrast blends it all into an incoherent mass of RGB values. Contrasting elements allow for the user to figure out which page areas are related and which are totally separate, so make sure to differentiate your elements and page sections.

One of my favorite designers, Jason Csizmadi, runs the killer design weblog Dangergraphics.com and his blog is a great example of what good contrast can do for the layout of a page. Here’s a screenshot:

His site is split into two main columns, where the right column has a medium red background with an illustration at the top, and the left column is dark grey and very clean. The immediate visual separation between the two areas shows that they contain separate types of content — the right side is his weblog while the left holds some of his recent work and links to other sites. The stark contrast between the left and right columns really brings cohesion to the similar areas while defining the boundaries between different types of content.

Good contrast separates main areas on a page and allows readers not to be distracted by similar elements on other sections. In my opinion poor contrast on a site makes for poor design. And example of this is Northrop Grumman’s Capabilities page.

This screenshot is a good example of bad contrast on the web. They had the right idea with the shaded right column background, however the light yellow doesn’t separate it enough visually, and using the exact same typeface for all body copy and headings within the two columns compounds the problem. The main section headers are merely emboldened versions of the text underneath, and this slight change doesn’t separate the sections enough. I think that if Grumman changed their section headings to a larger size (with more padding), and made the right column background more distinct, better visual contrast would be achieved.

Repetition

If you’ve ever designed a weblog before, you know about repetition. Typical weblogs have all the same page elements: a header graphic, a main column with multiple weblog entries (each entry having a title, date & comment headings, and content), and a sidebar with archive/category navigation. At Business Logs, I happen to design a lot of weblogs since that’s basically what my firm specializes in, so once you’ve put together half a dozen blog designs you start to figure out what works and what doesn’t.

The repeating nature of weblog entries down a page lets you control how the user’s eye is guided down the layout of your site, and the correct spacing and design is crucial or else entries will cram into each other (poor Contrast), users won’t be able to find key elements (poor Repetition), or in the worst consequence, readers won’t be able to read and comprehend your writing as well as they should. The repetition of design elements down a page reinforces their meaning to the user, as well as letting the designer organize the layout in a cohesive manner.

At the 9rules Blog, our layout represents a typical blog layout with two columns that provide normal blog functionality. Across both columns, I use similar design metaphors to keep the reader on track with what is being presented:

• Body copy and regular text is set in Lucida Grande (Verdana for Windows users).
• Section headings within blog entries and in the right column are Trebuchet MS with a dotted separation line on the bottom.
• Links have a bold font-weight, and in blog entries they are bright green to match the entry title link.
• All sections in the right column have a 7px grey border around them.

The goals for having the same typographical choices for both body copy and headings are 1) reinforcing their meaning within their context (headings in blog entries vs. headings above link lists), and 2) it’s cleaner and more visually consistent with the rest of the site. By repeating styles with similar significance/meaning across various areas of the site, I’m allowing the user get acclimated to this meaning which lets them browse the site more easily.

Alignment

In my opinion, quality alignment and spacing is the hallmark of good web design. Friends often ask me how I produce my design work, and honestly, I just line things up and make sure the padding around design elements is symmetrical and relative to their sizing. Here are some rules regarding alignment on the web:

• Either left-align, or right-align text, but don’t do both. Right-aligned text in a right sidebar creates rivers of white space between the two columns and looks awful. If you left-align your body copy, then left-align your sidebar text as well.
• Centered headlines are classy, centered body copy isn’t. Two examples of centered headlines with left-aligned body copy are McSweeney’s and A List Apart.
• Use existing hard edges to line up other elements. If your header graphic is 5px from the left edge, then have your body copy be 5px from the left as well. Be precise: 5px is not 7px — good design is all about the details.

Bryan Veloso’s SXSW Bowling site is a great example of how to align various elements on a diverse page. Let’s take a look at his cool header graphic:

Bryan has 4 different visual areas in the header, and all are aligned for maximum effect and message communication. He uses the left and right edges of the graphic to align the text and phoenix illustration, and then keeps the spacing around all 4 elements the same for symmetry, a technique that should definitely be emulated.

Repetitive alignment and symmetrical spacing are two techniques that can be used extensively in blog-based interface design, simply because there are so many opportunities to group elements together in some type of designed widget or box-like area. Further down on Bryan’s bowling site we see the Bowling Teams section and pictures of the bowlers. Bryan has a small padding around each image, and then keeps that same padding size to separate each image in the row horizontally. Good stuff.

Proximity

The principle of proximity allows similar or related elements to be grouped together to form a cohesive whole. Items that aren’t related should be kept visually separate from those which are. This enables the viewer to glance at a page and immediately know which page elements are grouped together and which are separate.

Matt Brett’s personal site looks great, and he uses a technique on his section headings that I find extremely valuable and useful:

For every section title, he has a sub-heading underneath it that provides a bit more explanation for what that area is about. He has tightly spaced the sub-heading with the larger title, and in doing so created a cohesive visual element that is the fusion of two smaller elements. If the sub-heading was 10px lower, the effect would be gone because the spacing between the two wouldn’t group the two elements together correctly.

This technique is very useful in weblog design, because too many blogs don’t put their sub-headings close enough to the paragraph they’re attached to, and without the correct spacing the elements appear separated instead of attached. Here’s an example of correct (left) vs. incorrect spacing (right) in this image:

The title and comment headings on the left are spaced evenly and form a cohesive whole, whereas on the right the haphazard and unsymmetrical padding causes the section to appear separated and jagged. Headings should appear close to the paragraph they apply to, same with images and their captions, comments and their author’s names, etc.

Oh C.R.A.P.

The C.R.A.P. principles (Contrast, Repetition, Alignment, and Proximity) are good ways to double-check your design work. Just like with a pre-shot routine in golf, if you constantly question and nitpick the details of your design work, good design habits will form and you’ll no longer have to think about if your padding is off or elements aren’t aligned, you’ll just do it correctly from the start.