the rhetorical situation audience purpose context

design principles arrangement emphasis contrast repetition alignment proximity

(some) variables

margins blank space paragraph spacing paragraph length line spacing line length justification type sizes and typefaces

(fonts) type features (e.g., bold,

italics, strikethrough)

letter case highlighting color graphics, images,

icons, symbols tables, charts,

diagrams columns headings headers and footers page numbers

document design includes

The use of all of which should be guided by:

arrangementemphasis

contrastrepetitionalignmentproximity

“The intelligent and informed management of white space will do more to improve your visual communication than any other design decision.”

(Alex W. White)

CRAP contrast

repetition

alignment

proximity

contrast

contrast aids in the organization of information and creates hierarchy

contrast can add clarity

contrast can make the page/screen look more interesting

if two items are different, make them really different; avoid doing wimpy contrast—make contrast strong

bold, bright pinks

conservative, traditional black and gray

sloppy, handwritten font face

elegant, cursive-style font face

square, linear shape

wild, twisted shape

drab, flat gray

bright, vibrant orange

bold, bright, simple blocks

richly detailed, lively photos

conservative, serious, blackand white

black and white (strongest visual contrast)

strong contrast betweencurve of icon and smooth,simple, lowercase, sansserif font face

repetition

repetition unifies elements throughout a document

repetition adds visual interest

repetition develops organization and creates consistency

repeat some aspect of a design (e.g., horizontal rule, a certain type of bullet, a type of font) throughout an entire page or site

avoid repeating an element so much that it becomes annoying or overwhelming

**

running headerIncluding author/organization and graphic line

running footer including page number and graphicline

tip icon appearsthroughout instructions to mark key information

level 1 heading

level 2 heading

alignment

alignment unifies and organizes the page

alignment helps create visual connections

nothing should be placed on a page arbitrarily

avoid using more than two text alignments on a page

balance image and text alignment carefully

center alignment and full alignment are more difficult to read than right alignment

images are center aligned,vertically arranged

image arranged centered and leftof text

text is left aligned orleft justified; headings flush left

all bulleted items are aligned with hanging indent

2003 appears outof alignment withrest of title

images alignedflush left in eachparagraph in whichthey appear; text alignedsquare around images

body text generouslyindented on page;left aligned withragged right margin

heading level 1 flush left, no indent

multiple, visually competing alignments create interesting look and feel

proximity

proximity helps to organize elements, imply relationships

proximity helps with use of blank space

proximity reduces clutter

create visual relationships with elements that belong together

avoid too many separate elements on one page

don’t stick things in the corners and in the middle of the page

searchfeaturesappear inclose proximity

main navigationin close proximity

organizations’logos appear in close proximity

institute’s name and contact infoin close proximity

individual’s name and contact infoin close proximity

images organized onpage in close proximity

chu

nks o

f relatedin

form

ation

in clo

se pro

ximity