Design Theory I
Robin Williams’ book Design for Non-Designers has a mnemonic for what she considers to be the most basic understandings of design theory. Her mnemonic is C.R.A.P; Contrast, Repetition, Alignment and Proximity. Understanding these and applying them to your pages (whether scrapbook or web), you can step up a level in your design. And if you want to know more, the whole field of ‘Design Theory’ is both deep and broad.
Note: while all of the images used here are for scrapbook pages, the same principles of C.R.A and P definately apply as well to web pages.
Contrast
Color
What does she mean by contrast? There are several ways to generate contrast- the easiest way to demonstrate would be with color: higher contrast text is easier to read than lower contrast text. The color that makes up the letters must contrast enough with the background color so that a reader doesn’t have to concentrate in order to read the text.
In this page, Dawn McDowell has used some great contrast with the bright yellow flowers against the more muted tones of the photo and papers. Not to mention the contrast of the shapes and lines.
Size
Another way of providing contrast is with size; for instance, a layour with one 5×7 photo on the left and then three wallet sized photos down the side naturally brings the viewer’s attention to the larger photo. Web pages use this technique everywhere; if you take a look at a webpage at flickr.com, you’ll see “thumbnails” and a “larger image;” often this small photo/large photo technique for providing contrast is used as a mechanism for navigating through photos on the web.
Shapes
Another way to create contrast would be with shapes; a stained glass effect, with a round picture in the middle of four rectangles with the corners trimmed would put the emphasis on the central round shape. Similarily with a layout that combined a rectangle and several squares. The emphasis would be on the rectangle. In most incarnations of this combination, the squares would be smaller than the rectangle too; and so the emphasis by contrast would be assisted by the size difference.
The image here by Shirley Ross has some great repetition of shapes;the flower pictures are all the same shape, but the “Spring has Sprung” as well as the meandering path really stand out from the overall flow of the page. It’s a terrific example of both of these principles.
Two things to keep in mind when you’re working with contrast; Don’t be a wimp, but it can’t all be contrast. “Don’t be a wimp” is a concept drawn from Robin Williams’ books; if you try to show contrast through showing three circles and one slight oval, or make one concept stand out by using a slightly different color, it may come across to your audience as a mistake; as if you couldn’t get the circle round enough, or the color was slightly off. It’s the general nature of contrast; it’s an effective step from the repetition of the materials. That’s why it can’t be all contrast; a page with a circle, triangle, pentagon and a square may be pretty, but the emphasis is all over the pieces; there’s no visual cue to the audience as to what you’re saying is important.
With text, sometimes too much contrast can cause the eyes to shy away; imagine a hot pink page with teal blue letters. The contrast is very high, and your eye doesn’t even want to look at it. The same thing is actually true with black text on white background (or white on black); if the black is completely black and the white is completely white, it’ll cause the eye to tire out faster than a slightly off-color (a pale ivory for instance). So if you’re designing with a lot of words, you probably want to have your text to be not-quite complementary to the background.
Repetition
Where contrast defines emphasis, repetition defines relationships. Repetition works well with color schemes, for instance. In a web page, use some of the colors from the lovely header you’ve commissioned as colors in the header tags or backgrounds for the photos on your page; you are “tying the web page together” by repeating colors.
Colors
On a page, use the same colors for all of your titles, or if you’re putting borders on your photos, use the same color photo. Reuse colors from your big header graphic for smaller elements. Perhaps a ribbon with the same color as the highlights in your central photo could be used to affix charms. By reusing colors, you’re color coding the visual elements and giving cues to your audience as to where you see the connections.
Peggy Gottschau uses spot color (the tight color on the lollipop) and then the color is repeated on the left side and in the surrounding paper. It’s a great technique to bring out what she’s focusing on; the sweet treat in the kid’s hands.
Elements
Repetition of elements is a great way to tie disparate parts together. Lisa Haas repeats her concentric circles and flowers to tie together these five great pictures. The repetition of elements causes the audience to look for other repetitions in the pictures.
Don’t be afraid to use brads, but if you use the same shape and color brads to nail all your little square photos to the page, it’ll look more like a cohesive whole than if you just reach in and pull out a random handful of varying size, color, shaped brads and use those. Of course this is true for the overall look, you can make some stand out by using a different size or color or shape for contrast. As you begin to play with this concept, I’d recommend varying one of these attributes, but use your own judgement. And of course, it’s possible that your design warrants using many different brads; your judgement is more important than anything you read on the web.
Often times you can use a variety of stickers (scrapbooks) or icons (webpages) to decorate your page. However, if you use the stickers from one manufacturer (Making Memories or one creator on Icon Factory), within one sub-group, the colors, designs, shapes will all be cohesive throughout the icon set. Using those will help to tie together your page as well; in other words, the repetition you’re seeing here is a repetition of style. You don’t see a classic Mickey Mouse shape in the Disney cartoon for Hercules; it would stand out too far and be too jarring.
Or you can use the same element for different parts of the page- Charlee is using the small flowers for … flower decorations, color-repetition embellishment in the upper right quadrant, and to tack down the photograph on the left. This brings the photo and the embellishments together in a way that using different features wouldn’t have done.
Alignment
When you repeat an edge-location, you get alignment. Abby Lewis does this with her right margin and the two pictures as well as the top margin- and if you look closely, the left margin and the corner of the left bottom picture. A line like this keeps the structure from looking haphazard. Most pages in most books have a consistant left margin. Many paragraphs begin with an indent on the first line, but the alignment of the rest of the lines keeps the paragraph together in the reader’s mind. Robin Williams makes a case that “left aligned” and “right aligned” are hard-edged, but when you use “center-align” on a paragraph, you get a soft alignment. The connection between the lines is harder to see than with the edge alignments, and so the relationship needs more help from design to make it as effective.
This is a place where precision matters. If you’re slightly off, the audience will sort of understand there’s something “wrong” with the layout, and it will seem like a mistake. If you’re way off, it will look less like a mistake, but also less “professional.” For instance; a square layout with one large square and three squares along the right side, the three smaller squares should be lined up with each other, and the top of the large square and the top of the top square should line up — and the bottom of the large square and the bottom of the bottom square should line up. If they don’t, the design won’t be as professional in appearance.
But this “precision matters” doesn’t mean that you’re restricted. Rachel Houghton lined up these five tags on top of one another, and then lined this block up with the boundaries of the photo (not the mat behind the photo). This beautiful layout also uses repetition of colors and elements to wrap the page up nicely.
However, you may be stuck in a place where you really want this sort of layout, but your squares are too big and don’t fit. In this case, I’d recommend either placing a mat around the large photo to make it a better size and then lining the photos up against that, or putting them all on one mat, so there are more cues for the audience to see what you’re seeing. If this doesn’t work for you, I’d suggest choosing two of the three photos or reprinting them smaller.
Sometimes, with a page full of text, it’s pleasant to have differently-indented paragraphs. For those, I’d recommend using similarily-sized photos or other icons and placing them in the paragraph area in such a way that overall the paragraph is inline with the other ones, and within the groups of indented blocks of text, they are all lined up. This is true primarily for left-aligned paragraphs, but I’m sure you can extend this to other concepts as well.
Proximity
Proximity works well with alignment; two ways of denoting paragraphs are with either a trailing empty line between the paragraphs, or with the first line indentation. When most people assemble their wedding invitations, they rely heavily on center-alignment for the text alignment, but then use proximity to group together the address, the time, and the participants.
When you move page elements closer together, you bring them closer together in the audience’s mind. By varying the proximity of the elements, you can demonstrate where the connections should be.
All these images were provided by denizens of the Scrapbook Jungle Message Board. Special thanks to all of them who offered images; I wish I had room for all of them. These people were: Dawn McDowell, Abby Lewis, Shirley Ross, Lisa Haas “AKA” Sassette, Peggy Gottschau, Rachel Houghton, Charlee, Vicki Dvorak Isely, Diana Scott, Julie McCauley, Emily Irwin, Kisa Dawson and Donna Kauffroath. I’ll probably pester these people again for a future article or two.
Speaking of future articles- I already have two in mind; one on a more “traditional” view of “design theory” with regard to motion and shape, and one on “colors.” The one on colors may be cancelled- there’s a lot of resources out on the internet for that. But I haven’t seen a lot of articles with ideas and theory behind design.
