There are a huge number of ways that people tend to break up the different elements of design, and most are overly complicated. This leaves people to believe that some people are born with a “designer’s eye” and others aren’t. Fortunately, it takes just a little bit of training to start to understand the basics, which go a long way! If you have ever visited MySpace, you have seen bad design.
In a technical writing class I took, the professor used the acronym CRAP, and it worked very well (so I am going to steal it for this post). I have included some screenshots of bad design examples (all of which are from real pages).
Contrast – Bad Contrast Example
The point of text is to pass along information. If you can’t read it, it’s useless. White and black contrast very well and that’s why most word processors use black text on a white background. Since just using black and white is boring, people like to mix in other colors. The key is that the background and the text need to contrast (be different) enough to be easily readable.
Repetition – Bad Repetition Example
If you look at this post, you can see that each of the topics is in bold. That repeating element helps to make it easy to key in on the topics. Each type of heading should have the same styling. You should not change styles (size, font, color, etc.) arbitrarily. That means no thinking, “Well that last paragraph was green, so lets make this one blue and the next one red and..”
Alignment – Bad Alignment Example
Just as each of the topics of these paragraphs is in bold, they are all at the same level (think of indenting). For some reason, people like to indent sometimes, center other times, and generally mix it all up. Don’t center body text; it’s incredibly hard to read.
Proximity – Bad Proximity Example
Headings should go with their paragraphs. Your eyes naturally want to clump information together. If you look at most publications, the images have small captions directly under them, letting you immediately know that caption is for that picture specifically. If you look at the example, you can’t tell if the caption is for the top or bottom picture. This is most commonly a problem with headers, where people don’t specify the spacing and it appears directly between two paragraphs rather than closer to the one it belongs to.
Other Points
Partition your information. That means: break it down into smaller chunks and label them when possible. Imagine if this entire post had no headings and was just one big paragraph. Partitioning not only makes the information easier to read, it makes the information easier to refer back to. Cursive fonts are generally a bad choice. Animation, flashing, blinking, etc. take your eye away from the content.
Final Note
If your MySpace page causes someone’s CPU to spike to 100% for five minutes, your page is terrible and shouldn’t be allowed on the internet.
Here’s an interesting article about typography and the concept of being “in phase” that came across my google reader RSS feeds today: http://www.37signals.com/svn/posts/159-type-that-keeps-the-beat
I thought it fell in line with design topics, topography is such a complicated subject. I think I would have to take a good long class on it before I could actually understand a small amount of what there is to know about the topic.