Design by Duck!: What to Do When Your Grid Won't Work
By John McWade
Dateline: November 24, 2003
Heres a common problem. Your client sells objects say, museum-quality duck decoys and has a favorite she wants used everywhere. How do you work with this elegant image and not lose its shape? Instead of a straight-line grid the kind used to lay out pages you make a grid of your own based on the lines and proportions of the duck. Heres how.
Every image has natural lines. First step is to simply have a look. It might help to draw some lines. Pay attention mainly to shapes and edges. Look first at the big shapes the ducks body, head and neck. (Go by mass, not the absolute edge [right].) Small shapes include tail triangles, cheek circle, and the curve of the breast color. Edges are between colors for example, where the duck ends and the white page begins. They have flow; they curve. The duck has a lot of edges. How many can you see?
Create visual connections. The most pleasing designs are made by working with the sizes, colors and lines that are in front of you; don't pull stuff out of thin air. Watch. Here, the headline follows the line of the ducks back, and is roughly the size of the ducks body (left). This gives it a voice equal to the image. Its also the same color. These similarities create a connection between head and body. The subhead curves beneath, and is colored lighter to match the breast, another connection. Text block occupies the body mass; note how similar its texture is to the ducks breast. We also see a hierarchy of scale big, medium, small that makes a good design.
Typefaces - above the duck: Malstock ITC, below: Adobe Caslon Regular.
The playful variation below turns the title into a visual sound. Type follows the curve of the ducks back, but is then rotated into its new position relative to the throat and cheek. Mid-range brown color allows the title to cross the black of the ducks head and the white of the page. Note how the words end neatly at the color-change line. Subhead across the body starts at the vertical neck-line, and changes color when the duck changes color, pulling title and subhead together. Type colors can all be found in the duck. Clever.
Typefaces - decoys call: Gill Sans Condensed, Description: Frutiger 87 Extra Black Condensed.
The next treatment downplays the title, and adds a wave of typographic whimsy! Note how the title flows neatly between the underside curve and the feather score. One typeface Goudy extra bold appears throughout; its thicks and thins echo the curving lines of the duck (left). Note the blue wave isn't bright, but is muted like the photo. It's almost straight across the color wheel from brown. Complementary colors like these harmonize well.
Typeface - Goudy Extra Bold.
Although they have little in common with the lines and shapes of the duck, they have a lot in common with real life; in the final example, the words pretend to be marsh grass coyly concealing the decoy! Visual connections matter: Words are twice as high as the ducks body (a rational amount), and subhead is title length, colored to match the duck. Because legibility is low, this technique can be used only with an audience familiar with your product. Fun.
Typefaces - Big: Empire, Small: Adobe Caslon Regular
Design more cool stuff! Visit Before & After magazine online at http://www.bamagazine.com/ to buy the current issue, subscribe, or order back issues, including the one containing this article.