Williams 1994 Design Principles

8/9/2019 Williams 1994 Design Principles

1/14

ON E TH E J O S HUA TR E E EPIPHANY m

The four basic principlesThe following is a brief overview of the basic principles of design that appearin every well-designed piece of work. Although I discuss each one of theseprinciples separately, keep in mind they are really interconnected. Rarely willyou apply only one principle.

contrastThe idea behind contrast is to avoid elements on the page thatare merely similar. If the elements (type, color, size, line thickness, shape, space, etc.) are not the same, then make themvery different. Contrast is often the most important visualattraction on a page-it's what makes a reader look at the pagein the first place.RepetitionRepeat visual elements of the design throughout the piece.You can repeat colors, shapes, textures, spatial relationships,line thicknesses, fonts, sizes, graphic concepts, etc. Thisdevelops the organization and strengthens the unity.AlignmentNothing should be placed on the page arbitrarily. Everyelement should have some visual connection with anotherelement on the page. This creates a dean, sophisticated,fresh look.proximityItems relating to each other should be grouped dose together.When several items are in dose proximity to each other, theybecome one visual unit rather than several separate units.This helps organize information, reduces clutter, and gives thereader a clear structure.

Umm . . .When gathering these four principles from the vast maze of design theory,I thought there must be some appropriate and memorable acronym within


2/14

II I :';"I I (/1 -I IIrIll Summary of contrast! ' contrast on a page draws our eyes to it; our eyes like contrast. If you are put. ting two elements on the page that are not the same (such as two typefacesII or two line widths), they cannot be similar-for contrast to be effective, theIt two elements must be very different.!Iit,III Contrast is kind oflike matching wall paint when you need to spot paint-youI ' can't sort ofmatch the color; either you match it exactly or you repaint the1t :L'I\ entire wall. As my grandfather, an avid horseshoe player, always said, "'Almost'

only counts in horseshoes and hand grenades:'i.jll I,I', I The basic purpose!! II The basic purpose of contras t is two-fold, and both purposes are inextricablet from each other. One purpose is to create an interest on the page-if a pageI is interesting to look at, it is more likely to be read. The other is to aid in the, organization of the information. A reader should be able to instantly under

stand the way the information is organized, the logical flow from one item toanother. The contrasting elements should never serve to confuse the readeror to create a focus that is not supposed to be a focus.

J

l! How to get it11 Add contrast through your typeface choices (see the next section), line thickI H ';', '\",i il nesses, colors, shapes, sizes, space, etc. It is easy to find ways to add contrast,I li \. and it's probably the most fun and satisfying way to add visual interest. The.i i ii important thing is to be strong.II What to avoid"I r

Don't be a wimp, If you're going to contrast, do it with strength, Avoid conII trasting a sort-of-heavy line with a sort-of-heavier line, Avoid contrastingi brown text with black headlines. Avoid using two or more typefaces that areI\ similar. If he items are not exactly the same, make them differentIII

. '\


3/14

ill"II

:1"Iiiii

" i

1A'j

{I Ii1UII,I1:1

Contrast is crucial to th e organization of information-a reader should alwaysbe able to glance at a document an d instantly understand what's going on.

Gnp, J. f . ~ l e ~ Rol 4.lJo\ 1>1

( j r t : ~ n \ ' l r k M\ S'75IHl:::!l':Ii.'i5':;1:.!1:'

Oa..J'ECTJ\ E:To 11nU..l P I I ~ l l l o n .. tl hll!-h ~ o : h o o l mad\ Iro.d'l ..T ,.md IC>Cltb:..H .:mKh Illlh. N ~ ~ n h M I ~ S I S ~ l f l r l .u.:"

WOH"': EXPF.RlNC[:A\JJ;tJSI 1 9 q 1 } r n : ~ ~ l u Malh I t : ~ t : h c r and !ootbJII CO:lch .11 51 J Q ~ < . : p n ( ' I ~ h ~ . : : h Q l l l (irL"en, ilk.M I 5 ! > 1 $ ~ I P p l ' % " r e ~ 1 \he)O\ ofmalhemll.lin. \ ~ I l h high ~ . ; h o o l studrnl5 a \ I ( : n l p l ~ d ,(1 I ~ : : l , , ; h pn'-'''tc~ c h ( ) o l b(l\5 h(lY\ to pla\ rO\lIoall. w ~ n \ 10 m:l.:


4/14

F [ v E CONTRA ST rI

Notice that not only is the page more attractive when contrast is used, butthe purpose and organization of the document are much clearer. !,r

.'Crant J. Egley

R O l J l r : ~ . SQ:I. iSJG r e e n v l l l . , , . ~ S 8 ' ~ f } 1 ~ S 8 B ) ~ 5 5 - 1 : ! 12

ObjectiveT o n n d a " O I O l l l o n a o . a h l g . h ~ c h o o l malhleachetAfld (oolballcooch Inlhci'lorthMissisJ;IJlPtlue ..

won: EIperlenceA U ~ l J 5 t 1 ? 9 9 - ~ r r 5 . c n \ MKh tnd'ler an d ~ o t b i l l l COOle" a.l $1 J(Jtph Hlc.h School. (jrt


5/14

r

II ItIIII !I.Ij,IiIj: iiI:I'I,II:Ii!ii,I!:1I'!I I, IiI[;rI:1;'!I'jIII!

, ! 'I

I

1 '!:' _. Wi_",,*,

I I r . ; . ~ . . : Jj,

If the two "newsletters" below came across your desk, which one wouldyou pick up first? They both have the same basic layout. They are both niceand neat. They both have the same information on the page. There is reallyonly one difference: the newsletter on the right has more contrast .

1----ANOTHER ~ I E W S L E T T E R ! IExciting HeadlineWant.e p ~ w n term dart ....or:;tcJ IClditgull hoe: hat. 6carch p ~ J t t y yowle:r COISSdebt pll'l"lple colder GUJl(.y Lools GtJlltylool"e lift. Inner ladle cordage: s,aClJr'::l'ted8 d d . e . ~ shirt (..1IE;Sldcncc rim-Ier bagflOrist, an)' la(..lle gulr ot'"pl-tari a:;-tsrmurder t..oe Iet.ter 0oro:: ent-lty f 1 o n ~ c 011b l J Y ~ i ' $ f 1 ~ l f

Thrilling 5ubhead'Guilty Loob:ir croter rTllJt'"der arl@ularly,"Homll1y term6 arM ~ a r " e ; as-thrna6Ut:.vre stooped qUlz-chlnf GOiter door

f l o r i ~ t 1 Sordidly Nurl"'Wlr" !1lJt, rTIllrder7' Wlt1ee:l Go/lt.y looks,hoe dint p.e-ony Ut1!>IOt1 ' ~ o r c rTIlJrde:r'rp5csJalng!.S."C.alJ5-e dorsal lodge an Wicket beer"Inner ROrl&t. .Ioe orphan mol.!il5-S"e!:ipimple l


6/14

g:::::c .......~ ~ _ . l _ " : ' . ' ~ r ' l ' ..;:;;;. 'i - { .H . . . . . . . . . . .. ' ........... _

l? I V E CON TRA S T I I

The source of the contrast below is obvious. I used a stronger, bolder type-face in the headlines and subheads. I repeated that typeface (principle ofrepetition, remember?) in the newsletter title. Because I changed the titlefrom all caps to caps/lowercase, I was able to use a larger and bolder typesize, which also helps reinforce the contrast. And because the headlinesare so strong now, I could add a dark band across the top behind the title,again repeating the dark color and reinforcing the contrast.

Exciting HeadlineWant:6 pawn tertrl ~ t H ' e wOf6ted ladlegIll) hoe ha t 5e3rcn F'ut-ty yowlu coilf.od ~ b t . plt'tiple colder GUIlty LooK5, GlJrIt.yLOOK'S (,ft mner la&le: c o r d a ~ e ' a t u r e r ~ adfJer ~ h J r t dJ551denr::e fktl1U l?agflorJ!'Jt., ~ n ladle qull orph


7/14

I,II1,1II ::I j

I I " . f

Summary of repetitionA repetition of visual elements throughout the design unifies and strengthensa piece by tying together otherwise separate parts. Repetition is very usefulon one-page pieces, and is critical in multi-page documents (where we oftenjust call it being consistent).

The basic purpose

illII

III ' ,I"II i '1:111\ i

,

The purpose of repetition is to unify and to add vIsual Interest. Don't underestimate the power ofthe visual interest of a page-ifa piece looks interesting,it is more likely to be read.How to get itThink of repetition as being consistent, which I'm sure you are already. Thenpush the existing consistencies a little further-can you turn some of thoseconsistent elements into part of the conscious graphic design, as with theheadline? Do you use a I-point rule at the bottom of each page or undereach heading? How about using a 4-point rule instead to make the repetitiveelement stronger and more dramatic?Then take a look at the possibility of adding elements whose sole purposeis to create a repetition. Do you have a numbered list of items? How aboutusing a distinctive font or a reversed number, and then repeating that treatment throughout every numbered list in the publication? At first simply findexisting repetitions and then strengthen them. As you get used to the ideaand the look, start to create repetitions to enhance the design and the clarityof the information.Repetition is like accenting your clothes.lfa woman is wearing a lovely blackevening dress with a chic black hat, she might accent her dress with red heels,red lipstick, and a tiny red corsage.

What to avoidAvoid repeating the element so much that it becomes annoying or overwhelming. Be conscious of the value of contrast (read the next chapter andthe section on contrasting type),For instance, if the woman were to wear the black evening dress with a redhat, red earrings, red lipstick, a red handbag, red shoes and a red coat, therepetition would not be a stunning and unifying contrast-it would be overwhelming and the focus would be confused.

;1


8/14

.1"" " -'r '".P,',,>, < ",c"e,"-; I. ' ~ - ~ ' - - - ;.,.:- \ ., f'

Here is the same business card we worked with earlier. In the secondexample, I have added a repetitive element, the strong, bold typeface. Takea look at it, and notice where your eye moves, When you get to the phonenumber, where do you look next? Do you go back to the beginning, theother bold type? This is a visual trick designers have always used to controla reader's eye, to keep your attention on the page as long as possible,

Mermaid TavernlRalph Roister Doister l

916 Bread StreetLondon, NM(17) 555-1212

When you get to the end of the information,does your eye just wander off the card?I'! ! ,I

. II'I' :1II i!I , 11' I 'I i ; i,lI 11 \ III: di

I 1'11 II Ii IIi I':.i",! jiI: , :!i ':

Mermaid TavernRalPh Roister Doister

916 Bread streetlondon, NM(717) 555-1212

Now when you get to the end of the information,where does your eye go? Do you find that it bouncesback and forth between the bold tyre elements?It rrobably does, and that's the roint of reretitionit ties a riece together, it rrovides unity.

I 'LlIii , :L,I 'II 'II,,1ii'iIIi:1 'Ii ,

'I i'J

I" ,

iIi1""'Ii'II

, , ;'!.I'

, 1.

I,ill1,1In

I"ih11'1j"I

II;':1j

; I, ,Ii I'I'IIJ! ,IH

,rr,iIi'j,rifl

r

illI"I III : I .1. ,.,1I' .,1I, i'lIiII":: I


9/14

IIIi

I'II Iiii, 'I"1'1 '1,1 ,

1I'I:,I,I,I'i, II''I "

iii. I, IIi '"II I iltl II

iii'iii III, :iI! ltI 1I ; , i'1 \ I I1, , IIi, II II: \ : I, , Iii,Ii, II!I: Ii i1'1 ,i,l, i'lI II: \ ,:1!i I HI" II ! ,I:

1\ ! I ,! I, II: I. '" "!" I ! !: II ! j'j i! 1\ i\I

:j I ii i,I :i t'll,I ,II 1': i' ,: iii" ' , II . iI'i! ij1'\ ' i:',I!, :1\

I J , ,- ; 1\."1 j'nftt: i r I L c

Summary of alignmentNothing should be placed on the page arbitrarily. Every element should havesome visual connection with another element on the page.Unity is an important concept in design. To make all the elements on the pageappear to be unified, connected, and interrelated, there needs to be somevisual tie between the separate elements. Even if the separate elements arenot physically close on the page, they can appear connected, related, unifiedwith t!"1e other information simply by their placement. Take a look at designsyou like. No matter how wild and chaotic a well-designed piece may initiallyappear, you can always find the alignments Within.

The basic purposeThe basic purpose of alignment is to unify and organize the page. The result issimilar to what happens when you pick up all the baby toys that were strewnaround the living room floor and pu t them all into one toy box,It is often a strong alignment (combined, of course, with the appropriatetypeface) that creates a sophisticated look, or a formal look, a fun look, or aserious look.How to get itBe conscious of where you place elements, Always find something else on thepage to align with, even if the two objects are physically far away from eachother,

What to avoidAvoid using more than one text alignment on the page (that is, don't centersome text and right-align other text).And please try very hard to break away from a centered alignment unless youare consciously trying to create a more formal, sedate (often dull?) presentation. Choose a centered alignment consciously, not by default.


10/14

-1.- \L, . . . it wI! . , ... '- .. . " .. JWjt .....w ........... '...... T ' ' ' ' i - F,;"",' .... ; ..... ' ' ' ' ' ' ' -..ad 4: ' ,- '' 1 .....' 4Q-.J . ; .. . . . . . . . . . . ...;,. ...... _ill

'\\\\ .,,\1)\ "1i' I1': 'II II' III' I

'!I\!! I.it; I'Ih Ii' \. '. 1'\'i\',1\,;lill ]jliIll l\ I'i.I,i\' "IIll! \."1,1 :.iiil' ;i\I;; ,,'\\1'. ,\,\'d ~ . I'q II!I\' . \I I I

\ dl I, I",I \1 1,;\\ \! ,I ''J \! 'j'l. I '1!

I -. '\ ii\ ri I ' :

"1!ii i;'! 'I"\ InI!rl, :lII\' i,1. 1,1\ ',I. I \,r; 1 ;li\! ~ 11i \ 1'\it;t:I

,,_ 1 .I I <

Even a piece that has a good star t on a nice design might benefit from subtleadjustments in alignment. Strong alignment is often the missing key to amore professional look. Check every element to make sure it has a visualconnection to something else on the page.

: E . . a . , d . 1 ~ ~ & L - t ; ~ c - t ; - t ; ~ : 1 1 1

JEE'1I.1-t;The story of a Wicket woof and a ladle gull l>y H. Chace

_to pawn term dare worsted ladle'3ull hoe lin. w ~ ' t t e r mur-du mncr {3dit': c o r d , : l g ~ murdcr'e rlut cup an


11/14

II

T H R E E ALIGNMENT I I

Check for illustrations that hang out over the edge just a bit, or captionsthat are centered under photos, or headlines that are no t aligned with thetext, or a combination of centered text and flush left text.

:E..a",c"l.1Et::E&a","t,::E&c."t,"t,EtJD.

S:EK-.:a."t,The story of a WlcKo1O woof and a ladle gull

~ r t 5 p.;1wn Ur m dore; wo:,sted l a d l ~ 9ut! hoe11ft wetter murder lnM'r ladle cord8g!.: honor Itchoffl;' rodf3c. dock:. flori5t.. DIsk: ladle 9ull orphanworry Putty (adle r.at cluck w e t . ~ r l.adle mthut . .an fur dl:3k r,3ISoln pimple coldu ladle R"tRotten Hut

Wan moanln') Ladle Rat. Rot:tcn HUt'6 murdercordcr In!1J.et. "Laale Ra t Rot-t;en Hut. heresy ladleb a 5 k l n ~ wi,,6ome burden C7E1I"U, an shrner cocklt:,Tick d l ~ k " l.&ldlc u E l l k ' i n ~ tu tor cordage: offer e,romrrllJrder hoe 1ift...5 honor uade/" 61te offer ROI'IBt.SI1.aker l.3kcl Dun ~ t o p p e r laundrJI wrote I Dunswpper pt.:ct::: floOrt;.1 Dun daIly-dolly Inner A o t 1 ~ t . t!rl y o n d ~ r nor " o r q h u m ~ ' 5 t e n c ; h c : ; . dun stopperr.orquc:: wet 5tl"aiMrsl"

"Hoe-cake, murder," re':>plendent Ladle R1It.Rocun Hut, an tickle I ~ d l e b , , ~ k i l 1 t ) ~ $tIJt.uredoft. Honor wrote tuCor c.ordagc offer g r O I t 1 ~ m u t ' d e r , Ladle Rat Rotten Hut ml&ten anomalom; '>voof

'Watl, wail, wadi" 5e t diBk: W I G l : : ~ woof,Whantscent Lacile Rat. Rottet'J Hutl W ~ r e : areputty lad!e gull gOrlne Wizard ladle bGi6bng7'

"Armor (,:1[. Ratt:en Hu t a raft at'carcordage, on nlnk.e:1" dou>3h ball. "Comb inK.. 5wMthard," ,:>ctter M , k ~ 'Noot: dl.;gfaCln


12/14

I11.I1,11 ,-. . " . , i\ ... '" .I

/\1iI"I' Summary of proximity1;" When several items are in close proximity to each other, they become oneI ;i visual unit rather than several separate units. Items relating to each other

should be grouped together. Be conscious of where your eye is going: where doI II you start looking; what path do you follow; where do you end up; after you'veI :! 11 read it, where does your eye go next? You should be able to follow a logical! I1 II . progression through the piece, from a definite beginning to a definite end.I i: I

i'I',I The basic purposeI'1, The basic purpose of proximity is to organize. Other principles come into playi I as well, but simply grouping related elements together into closer proximityiii I automatically creates organization. If the information is organized, it is more. i I likely to be read and more likely to be remembered. As a by-product of orgaIi II nizing the communicat ion, you also create more appealing (more organized)Ii white space (designers' favorite term).I; How to get itI'I ; Squint your eyes slightly and count the number of visual elements on theI' I. I

1 page by counting the number of times your eye stops. If there are more than'. 1

I. three to five items on the page (of course i t depends on the piece), see whichiI, of the separate elements can be grouped together into closer proximity toi become one visual unit.'III. What to avoid. ]1i Avoid too many separate elements on a page.i ':. II Don't stick things in the corners and in the middle.IiI Avoid leaving equal amounts of white space between elements unless each",! I IiI' group is part of a subset.

, 11 Avoid even a split second of confusion over whether a headline, subhead,caption, graphiC, etc., belongs with its related material. Create a relationIi ship among elements with close proXimity.Don't create relationships with elements that don't belong together! If theyII are not related, move them apart from each other.

I ,llIII :(1'IIil.

illI ;.1I!I'I


13/14

I!IiI I11,l;I I

I"l:';11

Hi"):1illiiI'I!f

i ,I 'I II', "I, ll I I Iil IIj!I 'r

"i 'III j11

\1

II II: i!

I'i

t

il,I !!I:1 il'

", ;! [I

ji \',

Ii I","ji ll!,'I! 1)1

' i ' !'I"

m

Proximity is really just a matter of being a Little more conscious, of doingwhat you do naturally, bu t pushing the concept a Little further. Once youbecome aware of the importance of the relationships between lines oftype, you will start noticing its effect. Once you start noticing the effect,you own it, you have power over it, you are in control.

~ ~ ~ ~ ~ ~ ~ ~ ~~ GALARIA HISTORY" HAS ONE BEEN ABLE TO TASTE 50___-IlI_--, GALARIA RESTAURANTS AND 50INTERNATIONALLY-ACCLAIMED WINERIES AT ONELOCATION ON ONE DAY. DON'T MISS OUT! JOIN USFOR THE BIG EVENT OF THE 7TH ANNUAL GALARIA WINE & CHILE FIESTA THIS SATURDAY FROM 12NOON UNTIL 4:30 PM. AT THE EL DORADO HOTEL.$35 ADMISSION INCLUDES UNLIMITED TASTINGS,SOUVENIR GLASS & ENTERTAINMENT. PLUS, APORTION OF THE PROCEEDS TO BENEFIT THEGALARIA FOOD BRIGADE HELPING US FEED OURHUNGRY NEIGHBORS. ADVANCE TICKETS STILLAVAILABLE AT GALARIA NEWS AND AT OUR PLAZAAMERICADO BOX OFFICE. LIMITED TICKETS WILLALSO BE AVAILABLE AT THE DOOR.

I""""'"ook this ad right out of the newspaper. Really. One Of the biggestproblems with it (besides being all caps) is that all the informationis one big hunk.Before trying to design with this information, write out the separate piecesOf information that belong together; group the elements. You know howto do this-simply use your brain.Once you have the groups of information, you can play with them on thepage. You have a computer-try lots of options.


14/14

I Never beforein Galaria history ...has one bE>en able to taste 50 Galal'ia restaurantsand 50 internat ionally acclaimed wineries at onelocation on one day. Don't miss out! Join us forthis big event!$35 admission includes unlimited tastings,souvenir glass, and entertainment.A portion of the proceeds will benefit the

1 ; ti)I[IIII'l:TW O PROXIMITY m II""I,'p'IL,iltRarely is the principle of proximity the only answer to a problematic page.

The other three principles are intrinsic to the design process and you willusually find yourself using all four. But take them one at a time-start withproximity. In the example below, I decided which elements should be closetogether, then experimented with the other principles (and fonts).

Galaria 'Food Brigade, helping us feedou r hungry neighbors.

-\"':IIIl"t' lid,"I'; urI' .. I,ll .f'dlllahlt' iii G:d'lI"ia'\j," ...1Mid al tHII PbZ,1 Amt:Tl,a.!u Bn, Offirl'f.lllllh'd tll"kd wIlJ :d;o';(1 ht' : 1 . \ ' a i l ~ h l e - allh .. l!oor.

:1~ i I ~ \ : >:J:l~ ~

II IUUOd' \ J I ~ U I I III7b Annual GalariaWine &Chile Fiesta

Saturday 12 noon to 4:30 P.M.at the El Dorado Hotel

The biggest problem with the original ad is that there is no separationof information. Setting all the text in all caps in one big block also tookup all the space, so there was no extra, blank, "white" space to restyour eyes. It's okay to set the type smaller than 12 point! Really!This is only one of dozens of possibilities for arranging the groups Ofinformation. I also used the principles of alignment and contrast. whichyou will be reading about shortly.

Williams 1994 Design Principles

Documents

Transcript of Williams 1994 Design Principles