Good designs are a bunch of CRAP.
This entry was posted on September 12, 2007
Contrast
Contrast is a very important aspect of any design. Contrast is the difference between what makes something eyecatching and what makes something dull.
You can add contrast to your design by using different colours, by making certain words bold, by using italics, or by typing in CAPITALS. However, adding too much contrast has the effect of not making things contrasted at all. A large paragraph with certain words in CAPITALS has more punch than a paragraph that’s typed all in capitals.
Contrast is also important with the colours you use. Baby pink text on a lilac background is a good example of bad contrast. Black text on a white background is a good example of good contrast.
Repetition
Repetition is good. Repetition is good. Not in your text (because that’s a sign of old age as well as a waste of words) but in your design. Use as few fonts as possible - if you have to / want to use more than one, try and use the same font for your main bodies of text and use a different for titles.
If the first h3 tag on your page is 120% bright green tahoma, make sure all your h3 tags are 120% bright green tahoma. This repetition adds a sense of consistency. Use the same design for all your pages. Don’t do unexpected things to your visitor!
Repetition helps things to “flow”. If I have one paragraph in baby pink georgia, the next in lime verdana, and the third in orange times new roman, you’re going to be left wondering what the hell has happened to my site.
Alignment
Text and images on your site need to look “just so”. For large bodies of text, this usually means aligning text to the left. This not only makes the text “look neater”, it also improves the readability. Whilst justifying the text may make the left side and the right side “look neater”, it makes the text harder to read because it messes with the spacing. Messing is not good!
Centred text is a favourite trick for novices to use, but there has to be a valid reason why the <center> HTML tag is now deprecated, right? Humans weren’t built to read large chunks of centred text - our eyes just don’t function that way.
The way you align objects can also add to contrast (see above). You’ll often see blockquotes indented slightly - this uses alignment to help contrast the blockquote against the rest of the text.
Proximity
From dictionary.com
proximity. noun. the property of being close together.
Things that should be near each other need to be placed near each other. This means keeping your navigational links all together rather than dotted all over the page. Keep your sidebar’s elements all in one place. Put your contact details near your copyright statement. Keep your blog entry’s meta details near the title of your entry.
Visitors follow information logically. Once they’re read, say, your blog entry’s title, they expect to see information on when the entry was published, etc. Don’t try and confuse your visitors!
There we have it. A brief explanation of the CRAP theory. The first step to a brilliant design is a bunch of CRAP. And for those of you who don’t like the word “crap”, you can of course change it to “CARP”.
16 lovely people have commented
They are nice tips. Except sometimes you may use the same heading tags in the navigation and the content. In that case I think the inconsistency of styling between those headings are justified.
Smelly, smelly crap. You forgot that bit (Sensible, Meticulous, Efficacious, Legible, Legal, Yellow)… OK I flaked on the ‘Y’ but when else will you hear me use the words ‘efficacious’ and ‘legal’ together? 
Proximity could also be about keeping things apart, and careful consideration of negative space in comparison to what is on the page.
^ Get your arse on msn you over-educated wench!
Well. You can tell it has been a bit since I have been here. I am proud of you for finally using wp. Now if I could get me a crappy design that would make me happy.
I cannot find your quilt woman. I need the new patch.
I don’t believe it, you’ve changed to a CMS!
So two things have happened…
1) Your RSS feed has changed and I only found this out because…
2) I just popped by to look at the beauty that was your old theme… and now it’s gone 
But hey, things are looking great! Do you think you will do a similar theme for this CMS?
After all, you seem to have good ideas about layout etc!
P.S. Please post a screen-shot of your old site, it was gorgeous!
Ohh, I thought this was going to be a rant entry of some sorts, apparently not 
CARP theory makes me hungry for some reason. Hmm, sticking to CRAP theory then :3
I miss , I think LJ still uses it. I might be mistaken though…
Great article. You have put some very well thought out reasons behind everything. I hope people find it useful. 
We used to have a CRAP poster on the walls of our computer lab. I wonder where it’s gone…
I should point out that it wasn’t mean who invented the CRAP theory. No way. Nuh uh. I’ve just expressed it in my own special way. Next week : POSH!
“Plain Old Semantic HTML”, Rachael?
Yup!
Awesomesauce. I like reading your take on things, so I can’t wait.
I need to think of stuff to write.
Write about something you know about… like sheep-shagging. *gasp*
I don’t want to imagine how I’d manage to do that. I could write something on escape sheep…
But actually I’m writing something on link styling and useability. W00t.
Leave a comment?
·
Kaylee said:
You said crap! *giggles immaturely*
Anyways, those are good tips. Definitely agree with “Messing is not good!”