A Lesser Form of Immortality

Seven years ago my mentor, John Reid, said something to me upon seeing a new design I had made for the local high-school that’d change my perspective on web development;

“Ian, your designs are almost as full of crap as you.”

It was a compliment I took with pride.

In the years following, I’ve heard this particular mnemonic a variety of ways (and they all mean roughly the same thing), but the original hearing was always my favorite;

Contrast
Repetition
Arrangement
Precedence

Using this as a guideline after the 4 Questions of Efficient Marketing (which I addressed in an earlier post) are answered makes for an almost fool-proof page architecture.

The CRAP method of design is a tricky beast, because the whole is greater than the sum of it’s parts, and each element by itself is all but lost without its counterparts.

Contrast

The ideal of “contrast” can be taken multiple ways;
contrast in design, contrast in color, contrast in focus, etc.  And in each way, it can be done well, or it can be done very, very poorly.

Rather than my normal response of showing you examples of bad implementation of contrast in regards to color, I’ve got a handy-dandy little chart;

Pretty neat, right?

Contrast, in other context, is a little more… subjective, so I’ll leave those for personal taste.

Repetition

As anyone with writing, painting, photography, or design experience can attest, repetition in form and function is pretty important;
From the Rule of Thirds to the Triarch Priumvirate, the consistency of repetition keeps audience focus and clarifies the mission of the content.
The way repetition is put into this context should not be only be taken literally, but figuratively as well, in regards to focus, clarity, and consistency;
A site that is stylized in vista-esque web 2.0 and has an Old English header or a cardboard cut-out navigation is going to inherently confuse and turn-off the audience.
(As some of my old designs can show, this one was tough for me to keep in mind.)

Arrangement

Arrangement (or alignment, depending on who you ask) can tackle any form, from basic layout, to screen-resolution issues, to em’s vs. px, and beyond.  Content for me is very rarely not in sync with itself;
Equal spacing for all elements, proper coordination for headings and graphics, and making sure that, in conjunction with everything else, the content looks well designed is VERY important.
There’s a few examples of non-linear arrangement, but it’s one of those aspects of design that is incredibly easy to screw up, and unless you have an eye for it, can ruin an otherwise killer layout.

Precedence

In web design terms, “precedence” is understood as guiding the audience eye by use of graphics, focus, repetition, content, etc (See how the other elements of c.r.a.p. come into play?).  I’ve always considered precedence important, but not so important that it would derail basic usability of the design, particularly because of research done into the “F-Pattern”;
The research states that, almost regardless of content, the audience’s eye moves in a very particular pattern that looks similar to an “F”, and so marketable content put into the same guide is more pleasing to the viewer.
You can read more about precedence and it’s impact on the “F-Pattern” through the following links;

• F-Shaped Pattern for Reading Web Content
  by Jakob Nielson
• What Eye Movement Teaches Us About Web Design
  by Ian Smith
• 23 Actionable Lessons from Eye-Tracking Studies
  by Christina Laun

Well with that, I’m letting you loose.  And remember, if someone calls your work crap, take it as a compliment.

Keep in touch, I won’t leave you hanging.

-Ian