Designing with C.R.A.P.
How do you decide where to place elements on the page? What
colors should you use? How do you get people to notice your
content. Believe it or not the answer resides in C.R.A.P.
Contrast, Repetition, Alignment, Proximity. These basic elements
of design can be found everywhere design is present. By
following these four basic princiapls your designs will improve
immeasurably and immediately.
Contrast
Why is most of the text you read black while the background is
white. It's an example of contrast. Through the use of contrast
various elements on the page can stand out from each other. In
this case the black text stands out against the white
background. If the text were also white you'd have a hard time
seeing it let alone reading it.
Light gray text on a white background can be seen, though you
might have to squint a little to read it. Black text on a white
background is usually the easiest to read, however white on
black can also be used for a different effect. The point here is
to use one light and the other dark. The greater the contrast
the easier it will be on the readers eyes.
There are many other examples of contrast on web pages.
Typically your headings will look different from your main text
and background colors might be used in certain areas of your
design. The contrast helps to make things stand apart from each
other and draws your eye to each.
Color is not the only way to bring about contrast however.
Bold and italics can be used to set things apart
as can size. Look at the headings of any web page. Are they all
the same size? How else are they set apart from each other?
Contrast is an important part of any web page design. The trick
is to use it sparingy. There must be a common thread to stand
apart from. If everything was to contrast with everything else
the page would be little more than a confusing mess.
Look around for examples of contrast on web pages, in magazines,
in art, or any other place you can think to look. Anytime your
eye is drawn to something there is probably a bit of contrast
going on.
Repetition
Repeating similiar elements ties them together and lets the
viewer know they belong together. Let's consider page headings
again. Notice how similiar level headings are usually the same
color and size. This lets you know right away they go
together.
Think about a website beyond a single page. Do the pages look
similiar across the site? Are the colors consistent between
pages? Is the navigation consistently in the same place? Why do
you think that is?
Repeating things from page to page lets you know you haven't
left the site by accident (you wouldn't leave on purpose would
you?) and helps you find things quicker. Once you've identified
that the main navigation is along the top of the page you can
easily find it on other pages. And once on other pages you know
you need only look to the left to find links for the various
topics in each section of the site.
Have you ever visited sites that moved the navigation to
different places on each page? It was probably hard to find your
way around. You might even have left the site and never
returned.
Repetition brings a familiarity to a website. When effectively
used you'll often be unaware it's even going on. You'll just
find the whole site easier to use.
Alignment
Ever wonder why newspapers are laid out in columns, or why all
the windows in your living room are the same distance from the
ceiling? The reason has to do with alignment. Having the text in
the newspaper or magazine articles in columns gives you clues
about where to read. Start at the top, read all the way down the
column and then move on to the next column.
Aligning elements gives hints that they belong together. It lets
your eye easily group elements together and place them within
the context of the whole page.
It's easier to find the next word to read when reaching the end
of a given line when it aligns with the word in the line above
it. One of the surest ways to recognize amatuer web design is to
see all the text centered on a page. While centering elements
has it's value it is better to either left or right align text
within it's containing block or column.
Aligning elements has a soothing effect on the reader and helps
to give organization and order to seemingly random elements.
Proximity
Proximity is placing elements that belong together near each
other and seperating elements that differ. Again looking at text
proximity is used to keep like sentences together in a
parapgraph and using additional spaces to seperated paragraphs
with different thoughts and ideas.
Placing elements that share something in common near each other
gives visual clues that they go together. Captions are placed
directly under the image they describe. Headings sit atop the
text to which they refer. Headings may have space between them
and the text to which they refer, however they should be closer
to that text than any other text on the page.
Not only should like elements be grouped together, but they
should be clearly seperate from elements from which they do not
belong. Have you ever seen a caption located directly between
two images? Could you tell whether it went with the image to the
right or to the left? Certainly not before reading it. Placing
it closer to the image on the right would clearly indicate that
it belongs to that image. And it would allow those who only want
to know more about the image to the left to skip over it.
C.R.A.P
Keep in mind that these principals are not etched in stone.
Often the best designs are those that find interesting and
creative ways to break the rules. However they do so with good
reason and before you can break the rules you must know what the
rules are. You must learn to use them and master them before you
can move beyond them.
Just by using these four basic princiapals your designs will
improve considerably and keep you moving along the path from
amatuer to professional. Keep an eye out for Contrast,
Repetition, Alignment, and Proximity everywhere around you and
incorporate them into your future designs.