Professional Documents
Culture Documents
1 I: S I (; ~I I: I : , I) I: S I (; 1'1 I: I) IJ I:
Contrast
The idea behind contrast is to avoid elements on the page
that are merely siJlliiar. If the elements (type, color, size, line
thickness, shape, space, etel are not the saJlle, then make
them very different. Contrast is often the most important
visual attraction on a page.
Repetition
Repeat visual elements of the design throughout the piece.
You can repeat color, shape, texture, spatial relationships,
line thicknesses, sizes, etc. This helps develop the organiza-
tion and strengthens the unity.
Alignment
Nothing should be placed on the page arbitrarily. Every
element should have some visual connection with anothe,-
element on the page. This ueates a clean, sophisticated,
fresh look
Proximity
Items relating to each other should be grouped close
together. When several items are in close proximity to
each other, they become one visual unit rather than
several separate units. This helps organize information
and reduces clutter.
umm .. .
When culling these principles from the vast morass of design theOty,
I thought there must be some appropriate and memorable acronym within
these conceptual ideas that would help people remember them. WelL uh,
there is a memorable-but very inappropriate-acronym. Sorry.
Proximity
Very often in beginners' designs, the lVards and phrases and graphics are
strung out all over the place, Alling corners and taking up lots of room
so there won't be any empty space. There seems to be a fear of empty
space. When pieces of a design are scattered all over, the page appears
unorganized and the information may not be instantly accessible to
the reader.
Tuke a look at this lypical business carel, below. How many separate
elements do you see in that sma!! space? How many times docs your eye
stop to look at something?
Toad Hall
Red River, NM
9-16 Old River Road
Toad Han
Red River, NM
916 Old River Road
Jt.. Now that there are two bold phrases. where do you begin?
00 you start in the upper left? 00 you start in the center?
After you read those two items. where do you go? Perhaps
you bounce back and forth between the bold words.
nervously trying to catch the other words in the corners.
00 you know when you're finished? Does your friend follow
the same pattern you did? No?
2 I' I! () .'\ 1 ,\ l i T \' m
\IVhcn severa! it-ems are in dosE proximity to each other, they become 1I11L'
visual unit rather thall severalscJlllnllr unHs. As in life, the proximity. or
the closeness, implies a relationship.
Toad Hall
Reilly Pickett
How to get it
Squint your eyes slightly and count the number of visual elements on
the page by counting the number of times your eye stops. If there are
more than three to five items on the page (of course it depends on the
piece), see which of the separate elements can be grouped together into
closer proximity to become one visual unit.
What to avoid
Avoid too many separate elements on a page.
.~.
Ell! I II I I: {) (I L
Take il look dt Ihis business cdI'd. Ii'll' Sdl1il' UI1l' YOLI Sll\V in the Idst
chapter. ParI of its pmblelll is Ihal- nothing is dligncd with dll}'\-hing eL'ic.
In I-his little space, there are clements aligned 10 Ihe left edge, the right
edge, alld the cellter. Neither Ihe text ill Ihe Lipper l\Vo corners or Ihe
bottom two corners are aligned across on the same baseline, nor are they
aligned 011 the left or right edges.
...
Toad Han By moving all the elements
Reilly Pickett over to the right and giving
them one alignment, the
information is instantly
more organized. (Of
916 Old River Road
Red River, NM course, you realize I also
(7"ln 555-'1212 grouped related elements
into closer proximity.)
The text items now have
a common boundary,
connecting them together.
Ill! r II I I') () - I) I
How to get it
Be conscious of where you place elements. Always find something else
on the page to align with, even if the two objects are physically far away
from each other.
What to avoid
Avoid using mOl'e than one text alignment on the page (that is, don't
center some text and right-align other text),
And please try very hard to break away from a centered alignment unless
you are consciously trying to create a mare formal. sedate (often dullll
presentation. Choose a centered alignment consciously, not by default
?
m I II ,- N () N - I) I: 1\ () () I·:
Here is the same busincss Glrcl we worked wil"!1 l'drlier. In the second
example, I have added a repelilive element, the slrong, bold typeface.
Take u look at- iI, and notice INhere your eye moves. VVhen you gel- to the
phone numbel', where do you look next' Do you go back to the begin-
ning, the other bold type, This is a visual trick designers have always
used to control a reader's eye, to keep your attention on the page as long
as possible.
How to get it
Think of repetition as being consistent. which I'm sure you are already.
Then push the existing consistencies a little further-can you turn some
of those consistent elements into part of the conscious graphic design. as
with the headline? Do you use a l-point rule at the bottom of each page
or under each heading? How about using a 4-point rule instead to make
the repetitive element stronger and more dramatic?
what to avoid
Avoid repeating the element so much that it becomes annoying or over-
whelming. Be concious of the value of contrast (read the next chapter
and the section on contrasting type).
For instance. if she were to wear the black evening dress with a red hat.
red earrings. red lipstick. a red handbag. red shoes and a red coat. the
repetition would not be a stunning and unifying contrast-it would be
garish and the focus would be confused.
r
tv
ii;
Contrast
Contrast is one of the most effective ways to add visual interest to YOlIr
page-a striking interest that makes you want to look at the page-and
to create an organizational hierarchy among different elements. The
important "rule" to remember is that for contrast to be effective, it must
be strong. Don't be a wimp.
Contrast is created when two elements are different. If the two elements
are sort of different. but not really, then you don't have conlTast, YOLI
have conflict. That's the key-the principle of contrast states that if two
items are not exactly the same, then make them different. Really
different.
Contrast can be created in many ways. You can contrast large type with
smalllype; a graceful oldstyle font with a bold sans serif font; a thin line
with a thick line; a cool color with a warm color; a smooth texture with
a rough texture; a horizontal element (such as a long line of text) with a
vertical element (such as a tall, narrow column of text); widely spaced
lines with closely packed lines; a small graphic with a large graphic.
Just don't be a wimp. You cannot contrast 12-point type with 14-point
type. You cannot contrast a half-point rule with a one-point rule. You
cannot contrast dark brown with black. Get serious.
m II E N () j,! - U E S \ C N E R ) II () () k
[f the two "newsletters" below came across your desk, vvhich one would
you read first? They both have the same basic layout They are bolh nice
and neat They both have the same information on the page. There is
realJy only one difference: the newsletter on the right has more contrast
ANOTHER NEWSLETTER!
9 9
I
sop Inner til"tly ladle boil worse jest
Wlli~ pirnple oll'ware:; wtmder doe Wllrt nit, an GUilty Loot::; ilide.:! Oil lop.
ud.:fer pimple dun wllmpum toe doe, Oingy nudist tree c~eers -wan
Debt;'s jest hormone nurture. Wan i1nomalous che~r. wan mu,;fdb:-silslt
----------------.... £
i
,~
, I' I I "
,, I'
Th(' CdUSt' uJ lilt> ('lllllr.!,,1 Ie, {!ll\'iIILle" I LI'1l'ci d .c,irunger, hldlll'l" IYlld-,\( (' in
IIie hCddlil1l's olnci c,ublll_'dd ..... I IT]H'dl('d Ilidl IYllcfdc(' Iprillcipll' ()J f!'p('li-
liun, n..'Il1l'I11Ll('r~l) ill Ihe 1lt'\\'~IL'I!cr Iii-Ie. Decdllst' I ch,m,!.!,('ci lile lillI' frol1l
-,v,..:: nur. 1T1L,,-,k,';- WI11~.t ,3ullry L"L'I ". l'o1:,lIy ur ~"rtry r,',"-'"
Il,_',' ,Ij"r ),~,'''y :~n~'.'" t,'rc' mud~r'"
""-.,I.b,,,l" IBming Subhead
-c .1LI,~,' .ie" ~_'ll."t,l'·
.11' \\'r,'I,tt j"a' H",,,,,' n)-';'I~ '''''a .1.1' ""',_1 ''''''. ~t", t
rr~~ 1',,,1,, i"lI~t- "·.'f' ~ [\',111 .H-.1.i~ 1'.1..1
"lI'~)' fl",.",! I"J~ ,"'ph.1M n,,'1.lo·~~~
f"''''I'I( L_1,1I~ ,)IJII~ "hut I 'I'!'t'- ,".1r~ h',ltr s,'I', ,,,;\11 ot1u.l.lit·"-,,,1I h',1. .1'1
i'nl1 , k!-t ,- .It'.it''- .1",,,,,'11,'1. _1'; "r .1n' ",.1111'.1",,,::> 1.1.11,> h',i ,_'"My Lc'_'I"
,'tfa .I:+t fl""",' [l~I·t fI,',-; ,r'" '1ILl,'11 rUe'1 a srun f"il~, "cT '",n'!,' ..t"".k
1·.1~ I','II-I'u,oloy "I'ul :~J .'r: ,,"' ..,
r,';, .b:ru,(" fun:, 1.1.110' .)ull'-
"._,! . . ,'
10.'.10-,,1 -~, ..:I:r· "lull. -Od'; ,"-'f'"
rc'~ 10.1,1-1'.,,-,,,· '''.01' J1;~'LJo'-;'
1IIII11I11I1I1I1I1I1l1111l11l11l11l11l11l11l11l11l1111l1111l1111l1111l111li1l1;;!ii\ii\£·'-'C:~:;;;-,'~~:;,:,:,:,.. " --
m T II I: I) Ie I ~ () () k
Contrast is kind of like matching wall paint when you need to spot paint-
you can't sari oj match the color; either you match it exactly 0" you
repaint the entire walL
How to get it
Add contrast through your typeface choices (see the next section), line
thicknesses, colors, shapes, sizes, space, etc. It is easy to find ways to add
contrast, and it's probably the most fun and satisfying way to add visual
interest. The important thing is to be strong,
What to avoid
Don't be a wimp. If you're going to contrast, do it with strength, Avoid
contrasting a sort-of-heavy line with a sort-of-heavier line, Avoid
contrasting brown text with black headlines. Avoid using two or more
typefaces that are similar. If the items are not exactly the same, IIIIlke thelll
dijjerml'
t
6 D I:: S [ (~ N I! E I' I I: IV Ell
See it. Keep a swap file. Some people call this an idea file, or a morgue.
It is simply a file folder or even a box where you keep designs that have
impressed you-nyers, brochures, graphic images, calligraphy, Iype
arrangements, packaging, advertising-anything that strikes a chord in
you. Designers always have a swap file, and they use it for inspiration
and ideas. Before you start another project, look through your swap file.
Say it. When you see a design you like, spend a couple of minutes put-
ting into words why you like it. Consciously pick out the places wher'e
the principles of proximity, alignment, repetition, and contrast have been
used. Make a mental or written note of any bold and daring technique
that was used, such as extra large or small lype, a unique graphic treat-
ment, interesting spacing, etc.
Sketch it. When you come across a poorly designed piece, sketch a little
improvement. Or cut the pieces out and rearrange them. When }'OU
actually put pencil to paper, more ideas pop out than when you just
think about it. I never know what my books are going to look like until
I start producing them, until I see things growing on paper' (or monitor).