Pubs chap 1 5

Principles of Effective Design:Joshua Tree Epiphany & CRAPEdited & adapted by Barbara B. NixonGeorgia Southern University

CRAPcontrast, repetition, alignment, proximityMajor sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit PressSlide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained. Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known.

CRAPContrast Repetition Alignment Proximity Robin Williams Non-Designers Design Book, Peachpit Press

CRAPContrastmake different things differentbrings out dominant elementsmutes lesser elementscreates dynamismRepetition Alignment Proximity 12345Robin Williams Non-Designers Design Book, Peachpit Press

CRAPContrast Repetition repeat design throughout the interfaceconsistencycreates unity Alignment Proximity1324Robin Williams Non-Designers Design Book, Peachpit Press

CRAPContrast RepetitionAlignmentcreates a visual flowvisually connects elementsProximity1324Robin Williams Non-Designers Design Book, Peachpit Press

CRAPContrast Repetition Alignment Proximitygroups related elementsseparates unrelated ones123Robin Williams Non-Designers Design Book, Peachpit Press

Wheredoesyoureye go?CRAP combines to give you cues of how to read the graphictitlesubtextthree pointsmain pointsub pointRobin Williams Non-Designers Design Book, Peachpit Press

Principle of ProximityGroup related items togetherPhysical closeness implies a relationshipWhat happens when similar elements are grouped into one unit?Relationships are important

Too many elements forthe eye to look atWith two bold phrases, thereader doesn’t know whichto look at first. Which ismore important?

Here the elements are groupedtogether, into closer proximity.The card is now organizedintellectually & visually – making itcommunicate more clearly.

First masthead has no elements in proximitySecond masthead chose better typeface &placed elements in proximity

What to Remember about ProximityWhen several things are in close proximity, they become one visual unitItems relating to each other should be grouped togetherBe conscious of where you eye is goingBasic purpose is to organizeCount the number of visual elements

What to AvoidDon’t stick something in every corner or the middle just ‘causeAvoid too many separate elements on the pageAvoid leaving equal amounts of white space between elements unless group is part of a subsetAvoid confusion over whether something belongs to its related materialDon’t create relationships that don’t belong together

No one will be able to understand this messWith this the reader caneasily figure out what’s going on

Principle of AlignmentNothing should be placed on the page randomlyEvery item should have a visual connection with something else on the pageAligned items result in stronger cohesive unit

Elements on the card look likethey were randomly placed to fillthe corners & middle. There are noconnections.Moving elements to the right givesit one alignment. The informationis more organized.

Centered alignment. The edgesare “soft,” and you can’t see thestrength of the line.By aligning text flush-right, itcreates a hard edge – an invisibleline connecting the information.

Aligning TextOn a business card, centered text appears weak.When aligned left or right, the invisible line connects the text & gives a hard vertical edge.Centered alignments creates a more formal look.Lack of alignment is likely a big cause of pieces that don’t communicate well.Lining up the elements can make a difference.

Aligning TextWhen you find a strong alignment, stick with it.See Newsletters pg. 44-45What about indenting?Strong alignment=Professional look

What to Remember About AlignmentNothing should be placed on the page at random.Every element should have some visual connection with another element on the page.Unity is an important concept.Basic purpose of alignment is to unify & organize the page.Be conscious of where you place elements.

What to AvoidAvoid using more than one alignment.Try to break away from always using a centered alignment.

Principle of RepetitionRepeat some aspect of the design throughout the entire pieceThis element may be a bold font, a color, a design element, etc.It must be something the reader will visually recognize.Repetition=Consistency

When you get to the end of the information, does your eye wander off the card?Now, with the bold type atthe top & bottom, do you findthat your eye “bounces”between the bold typeelements?

The letterhead, business card &envelope retain the repetitiveelements.Strong left alignment

SpacingWant each piece to belongtogether.

RepetitionHelps organize informationHelps guide the reader through the pagesHelps unify unrelated parts of the designRepetitive elements establish a sophisticated continuity

What can a repetitive element be?Clip artPicture fontSimple element using different sizes, colors, anglesSometimes not exactly the same object, but closely relatedLook at the examples on pg. 59

What to Remember about RepetitionRepetition of visual elements unifies & strengthens a pieceIt’s critical in multi-page documentsBasic purpose is to unify & add visual interestRepetition is about being consistent

What to AvoidAvoid repeating the element so much that it becomes annoying or overwhelming

Principle of ContrastIf two items are not exactly the same, then make them differentContrast is an effective way to add visual interestContrast is created when two elements are differentThere is no contrast between a 12 pt. font & a 14 pt. font

ContrastThe piece can be nice & neat, but with no contrast no one will read it!It’s important to the organization of information.Look at the differences between pg. 68 & 69Easiest way to add contrast is with typefacesCreate headlines that catch the eyeThen create contrast with textEnhance with strong alignments

ContrastDon’t be afraid to make some items small to create a contrast with larger itemsDon’t be afraid of blank spaceElements of contrast can sometimes be used as elements of repetitionLet’s take a look at the ads on pgs. 76 & 77

The first example shows some contrastbetween the typefaces & the rules, butthey’re wimpy.The second example has a strongcontrast between typefaces making itmore eye-catching.Stronger contrast between thicknessof the rules.The third example also has a strongcontrast.The reverse type draws your eye.

What to Remember about ContrastContrast draws our eyes to itIf placing two elements on the page that aren’t the same, they can’t be similar. They must be VERY different.Contrast has two purposesCreate an interest in the pageAid in the organization of the information

Add Contrast Through…Typeface choicesLine thicknessesColorsShapesSizesSpace

Pubs chap 1 5

More Related Content

Viewers also liked (10)

Similar to Pubs chap 1 5 (20)

Recently uploaded (20)

Pubs chap 1 5

Editor's Notes