GOOD DESIGN IS AS EASY AS ....1.2.3

TH

E F

OU

R B

AS

IC P

RIN

CIP

LES

OF D

ES

IGN

- CO

NRAS

T, R

EPET

ITIO

N, A

LIG

NMEN

T, P

ROXI

MIT

Y 1. LEARN THE PRINCIPLES

2. RECOGNIZE WHEN YOU ARE NOT USING THEM

Annette Williams Yearbook

1)CONTRAST2)REPETITION3)ALIGNMENT4)PROXIMITY

3. APPLY THE PRINCIPLES

GO

OD

DES

IGN

THE FOUR BASIC PRINCIPLES

CONTRAST – REPETITION – ALIGNMENT - PROXIMITYCONTRAST – IS ONE OF THE MOST EFFECTIVE WAYS TO ADD VISUAL INTEREST TO YOUR PAGE—A STRIKING INTEREST THAT MAKES A READER WANT TO LOOK AT THE PAGE. THE IMPORTANT RULE REMEMBER IS THAT FOR CONTRAST TO BE EFFECTIVE, IT MUST BE STRONG.

REPETITION- THE PRINCIPLE OF REPETITION STATES THAT YOU REPEAT SOME ASPECT OF THE DESIGN THROUGHOUT THE ENTIRE PIECE. THE REPETITIVE ELEMENT MAU BE A BOLD FONT, A THICK RULE(LINE), A CERTAIN BULLETT, COLOR, DESIGN ELEMENT, PARTICULAR FORMAT, SPATIAL RELATIONSHIPS, ETC. IT CAN BE ANYTHING THAT A READER WILL VISUALLY RECOGNIZE.ALIGNMENT- THE PRINCIPLE OF DESIGN STATES THAT NOTHING SHOULD BE PLACED ON THE PAGE ARBITRARILY. EVERY ITEM SHOULD HAVE A VISUAL CONNECTION WITH SOMETHING ELSE ON THE PAGE.

PROXIMITY- THE PRINCIPLE OF PRIXIMITY STATES THAT YOU GROUP RELATED ITEMS TOGETHER, MOVE THEM PHYSICALLY CLOSE TO EACH OTHER SO THE RELATED ITEMS ARE SEEN AS ONE COHESIVE GROUP RATHER THAN A BUNCH OF UNRELATED BITS.

GO

OD

DES

IGN

CONTRASTOF THE TWO NEWSLETTERS BELOW WHICH WOULD YOU PICK UP FIRST? THEY ARE BOTH NICE AND NEAT. THE SOURCE OF CONTRAST IS OBVIOUS. A BOLDER TYPEFACE IN THE HEADLINES SUBHEADS IS USED. THE TITLE IS CHANGED FROM ALL CAPS TO CAPS/ LOWERCASE. A DARK BAND ACROSS THE TOP BEHIND THE TITLE REINFORCE THE CONTRAST.

WOULD YOU AGREE THAT YOUR EYES ARE DRAWN TO THIS PAGE, RATHER THAN TO THE PREVIOUS PAGE?

GO

OD

DES

IGN

SUMMARY OF CONTRAST CONTRAST ON A PAGE DRAWS OUR EYES TO IT; OUR EYES LIKE

CONTRAST. PUTTING TWO ELEMENTS ON THE PAGE THAT ARE NOT THE SAME, THEY CANNOT BE SIMILAR---FOR CONTRAST TO BE EFFECTIVE, THE TWO ELEMENTS MUST BE VERY DIFFERENT. A NAMEPLATE OR HEADING USUALLY AT THE TOP OF THE NEWSPAPER OR COPY TEXT CONTAINS BOTH SIZE CONTRAST AND TYPE CONTRAST.

THE BASIC PURPOSEONE PURPOSE IS TO CREATE AN INTEREST ON THE PAGE—IF A

PAGE IS INTERESTING TO LOOK AT, IT IS MORE LIKELY TO BE READ. THE OTHER IS TO AID IN THE ORGANIZATIN OF THE INFORMATION.

WHAT TO AVOIDAVOID CONTRASTING A SORT-OF-HEAVY LINE WITH A SORT-OF-

HEAVYIER LINE. AVOID CONTRASTING BROWN TEXT WITH BLACK HEADLINES. AVOID USIN TWO OR MORE TYPEFACES THAT ARE SIMILAR. IF THE ITEMS ARE NOT EXACTLY THE SAME, MAKE THEM DIFFERENT

GO

OD

DES

IGN

CONTRAST MINI QUIZ

NUMBER YOUR PAPER FROM 1 -4 WRITE THE ANSWER TO THE FILL IN THE BLANK QUESTIONS

GO

OD

DES

IGN

CONTRAST MINI QUIZ ANSWERS

NUMBER YOUR PAPER FROM 1 -4 WRITE THE ANSWER TO THE FILL IN THE BLANK QUESTIONS

1. CONTRAST2. ORGANIZATION3. NAMEPLATE4. COLOR, SIZE

GO

OD

DES

IGN

REPETITIONREPETITION HELPS ORGANIZE THE INFORMATION; IT HELPS GUIDE THE READER THROUGH THE PAGES; IT HELPS UNIFY DISPARATE PARTS OF THE DESIGN.

REPETITIONS: BOLD TYPEFACE LIGHT TYPEFACE SQUARE BULLETS INDENTS SPACING ALIGNMENTS

GO

OD

DES

IGN

SUMMARY OF REPETITION A REPETITION OF VISUAL ELEMENTS THROUGHOUT THE

DESIGN UNIFIES AND STRENGTHENS A PIECE BY TYING TOGETHER OTHERWISE SEPARATE PARTS. REPETITION IS VERY USEFUL ON ONE-PAGE PIECES.

THE BASIC PURPOSETHE PURPOSE OF REPETITION IS TO UNIFY AND TO ADD

VISUAL INTEREST. IF A PIECE LOOKS INTERESTING, IT IS MORE LIKELY TO BE READ.

WHAT TO AVOIDAVOID REPEATING THE ELEMENT SO MUCH THAT IT BECOMES

ANNOYING OR OVERWHELMING.

GO

OD

DES

IGN

REPETITION MINI QUIZTHE BEST WAY TO IMPROVE YOUR VISUAL AWARENESS IS TO LOOK AT OTHER PEOPLE’S PAGES AND IDENTIFY WHAT WORKS AND WHAT DOES NOT WORK. ANSWERING THE QUESTIONS IN THIS QUIZ IS INTENDED TO SHARPEN YOUR VISUAL AWARENESS AMD SENSITIVITY.

Number your paper from 1 to three. Name three of the five incidences of repetition in the figure on the right.

GO

OD

DES

IGN

REPETITION MINI QUIZ ANSWERSTHE BEST WAY TO IMPROVE YOUR VISUAL AWARENESS IS TO LOOK AT OTHER PEOPLE’S PAGES AND IDENTIFY WHAT WORKS AND WHAT DOES NOT WORK. ANSWERING THE QUESTIONS IN THIS QUIZ IS INTENDED TO SHARPEN YOUR VISUAL AWARENESS AND SENSITIVITY.

1

2

3

4

5

GO

OD

DES

IGN

ALIGMENT

FOUR BASIC TEXT ALIGNMENTFLUSH LEFT

ALIGNMENT IS A USEFUL PRINCIPLE FOR SINGLE-PAGE AND MULTIPLE-PAGE DESIGN. THE ALIGNMENT OCCURS WHEN VISUAL ELEMENTS LINE UP WITH OTHER VISUAL ELEMENTS ON THE PAGE. A GRID IS A NON PRINTED SYSTEM OF HORIZONTAL AND VERTICAL LINES THAT DIVIDES THE PAGE AND HELPS THE PAGE DESIGNER ALIGN ELEMENTS CONSISTENTLY. JUSTIFIED TEXT TENDS TO DEVELOP “RIVERS” OF WHITE SPACE IN THE COLUMNS . CONCRETE TEXT ALIGNMENT IS WHERE THE ARRANGEMENT OF THE TYPE TAKES ON THE SHAPE OF THE ACTION OR THE OBJECT BEING DESCRIBED. CENETERED ALIGNMENTS ARE EASY TO ARRAGE ON THE PAGE BUT HAVE A FORMAL SOMEWHAT DIGNIGIED FEEL TO THEM. PAGES THAT LACK A CLEAR ALIGNMENT SCHEME OFTEN SEEM CLUTTERED AND SLIGHTLY MESSY, EVEN IFOTHERWISE WELL DESIGNED.

ADVANCED TEXT ALIGNMENTRUNAROUND

GO

OD

DES

IGN

ALIGNMENTEVEN A PIECE THAT HAS A GOOD START ON A NICE DESIGN MIGHT BENEFIT FROM SUBTLE ADJUSTMENT IN ALIGNMENT. STRONG ALIGNMENT IS OFTEN THE MISSING KEY TO A MORE PROFESSIONAL LOOK. CHECK EVERY ELEMENT TO MAKE SURE IT HAS A VISUAL CONNECTION TO SOMETHING ELSE ON THE PAGE.

CAN YOU SEE ALL THE PLACES WHERE ITEMS COULD BE ALIGNED, BUT ARE NOT? I THERE ARE AT LEAST NINE!

GO

OD

DES

IGN

SUMMARY OF ALIGNMENTUNITY IS AN IMPORTANT CONCEPT IN DESIGN. TO MAKE ALL

THE ELEMENTS ON THE PAGE APPEAR TO BE UNIFIED, CONNECTED, AND INTERRELATED, THERE NEEDS TO BE SOME VISUAL TIE BETWEEN THE SEPARATE ELEMENTS. EVERY ELEMENT SHOULD HAVE SOME VISUAL CONNECTION WITH ANOTHER ELEMENT ON THE PAGE.

THE BASIC PURPOSETHE BASIC PURPOSE OF ALIGNMENT IS TO UNIFY AND

ORGANIZE THE PAGE.

WHAT TO AVOIDAVOID USING MORE THAN ONE TEXT ALIGNMENT ON THE

PAGE ( THAT IS , DO NOT CENTER SOME TEXT AND RIGHT-ALIGN OTHER TEXT).

GO

OD

DES

IGN

ALIGNMENT MINI QUIZTHE BEST WAY TO IMPROVE YOUR VISUAL AWARENESS IS TO LOOK AT OTHER PEOPLE’S PAGES AND IDENTIFY WHAT WORKS AND WHAT DOES NOT WORK. ANSWERING THE QUESTIONS IN THIS QUIZ IS INTENDED TO SHARPEN YOUR VISUAL AWARENESS AND SENSITIVITY.

NUMBER YOUR PAPER FROM 1-5. WRITE THE ANSWER TO THE FOLLOWING QUESTIONS.

GO

OD

DES

IGN

PROXIMITYSOMETIMES WHEN GROUPING LIKE ITEMS IN CLOSE PROXIMITY, YOU NEED TO MAKE SOME CHANGES, SUCH AS IN THE SIZE OR WEIGHT OR PLACEMENT OF TEXT OR GRAPHICS. THE IDEA OF PROXIMITY DOES NOT MEAN THAT EVERYTHING IS CLOSER TOGETHER, IT MEANS ELEMENTS THAT ARE INTELLECTUALLY CONNECTED, THAT HAVE SOME SORT OF COMMUNICATION RELATIONSHIP, SHOULD ALSO BE VISUALLY CONNECTED.

NOT ONLY IS THIS PAGE VISUALLY BORING, BUT IT IS DIFFICULY TO FIND THE INFORMATION—EXACTLY WHAT IS GOING ON, WHERE IS IT HAPPENING, WHAT TIME IS IT, ETC.

HOW MANY CONCERTS ARE IN THE SERIES? GROUP THE INFORMATION TOGETHER, THE SPACING BETWEEN THE THREE PERFORMANCES IS THE SAME. THE SUBSIDIARY INFORMATION IS FARTHER AWAY-YOU INSTANTLY KNOW IT IS NOT ONE OF THE PERFORMANCES.

GO

OD

DES

IGN

SUMMARY OF PROXIMITYWHEN SEVERAL ITEMS ARE IN CLOSE PROXIMITY TO EACH

OTHER, THEY BECOME ONE VISUAL UNIT RATHER THAN SEVERAL UNITS. THE READER SHOULD BE ABLE TO FOLLOW A LOGICAL PROGRESSION THROUGH THE PIECE, FROM A DEFINITE BEGINNING TO A DEFINITE END.

THE BASIC PURPOSETHE BASIC PURPOSE OF PROXIMITY IS TO ORGANIZE. SIMPLY

GROUPING RELATED ELEMENTS TOGETHER INTO CLOSER PROXIMITY AUTOMATICALLY CREATES ORGANIZATION. IF THE INFORMATIO N IS ORGANIZED IT IS MORE LIKELY TO BE READ AND MORE LIKELY TO BE REMEMBERED. WHAT TO AVOID

AVOID TO MANY SEPARATE ELEMENTS ON A PAGE.DO NOT STICK THINGS IN THE CORNERS AND IN THE MIDDLEDO NOT CREATE RELATIONSHIPS WITH ELEMENTS THAT DO

NOT BELONG TOGETHER! IF THEY ARE NOT RELATED, MOVE THEM APART FROM EACH OTHER.

GO

OD

DES

IGN

PROXIMITY MINI QUIZ

GO

OD

DES

IGN

PROXIMITY MINI QUIZ ANSWERSTHE BEST WAY TO IMPROVE YOUR VISUAL AWARENESS IS TO LOOK AT OTHER PEOPLE’S PAGES AND IDENTIFY WHAT WORKS AND WHAT DOES NOT WORK. ANSWERING THE QUESTIONS IN THIS QUIZ IS INTENDED TO SHARPEN YOUR VISUAL AWARENESS AND SENSITIVITY.

GO

OD

DES

IGN

ResultsEnzyme Assay

Absorbance readings of the samples at 420nm for enzyme assay

Sampleβ- galactosidase

(control)

β- galactosidase(treated with β mercaptoethanol)

β- galactosidase(treated with DNase)

REVIEW

GO

OD

DES

IGN

LITTLE QUIZ #1: DESIGN PRINCIPLESFIND AT LEAST SEVEN DIFFERENCES BETWEEN THE TWO SAMPLE RESUMES

Design Principles

alignment

contrast

proximity

repetition

GO

OD

DES

IGN

ResultsEnzyme Assay

Absorbance readings of the samples at 420nm for enzyme assay

Sampleβ- galactosidase

(control)

β- galactosidase(treated with β mercaptoethanol)

β- galactosidase(treated with DNase)

ANSWER TO QUIZ #1

ALIGNMENT• TEXT IS CENTERED AND FLUSH LEFT, AND SECOND LINES OF TEXT RETURN ALL THE WAY TO THE LEFT EDGE: CREATE A STRONG FLUSH LEFT ALIGNMENT.

• ALL HEADINGS ALING WITH EACH OTHER• ALL BULLETS ALIGN• ALL TEXT ALIGNS, SECOND LINES OF TEXT ALIGN WITH FIRST LINES.

• REPETITION

GO

OD

DES

IGN

Discussion

GO

OD

DES

IGN

Discussion

Conclusion

GO

OD

DES

IGN

Thank You