4

Design Strategies to Make Your Stuff Look GoodWith thanks to RobinWilliams

1. Contrast

2. Repetition

3. Alignment

4. Proximity

1. Contrast

2. Repetition

3. Alignment

4. Proximity

The principle of

Make sure related items on the canvass are placed physically close to one another.

Proximity

ProximityNon-designers tend to string words, phrases and graphics all over the place, taking up lots of room so there won’t be any empty space. There seems to be a fear of white space.

The page then seems to be cluttered and unorganized, and

the information is not instantly accessible to the reader.

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.

Don’t make the reader work! We’re lucky to have readers, so give them a break!

Proximity

There are five, maybe six, entry points on this business card. That’s too many. Where do you start reading? Maybe you start with where the person works. But then where? Nothing seems to go together. Your eyes jump around the card, not knowing where to stop to read.

Proximity

But look at this card. Items that belong together have been put together. Now this card makes sense. You eyes will stop three times, not five. Your eyes don’t scatter all over the card. This card is easier to read.

Bad business card

Better business card

Proximity

ProximityWHAT’S NEW FROM UNIVERSITY OF MICHIANA COOPERATIVE EXTENSION

THE BABY PLACEDecember 2002

The Baby PlaceWHAT’S NEW FROM . . .

University of MichianaCooperative ExtensionDecember 2002

What items above should be grouped into closer proximity? The two items at the top left corner are in close proximity, implying a relationship. Should these two have a relationship?

Was this your logical conclusion? Have the proper relationships been established?

The Baby PlaceWHAT’S NEW FROM . . .

University of MichianaCooperative ExtensionDecember 2002

Notice a few other changes:

We’ve changed most of the letters to lowercase, which gives more room to make the flag stronger.

The corners have been changed from rounded to straight, giving it a cleaner, stronger look.

The graphic was enlarged to make it a better visual element.

ProximityNational Honor SocietyFlower saleInitiationCar WashTutoring studentsBandTrip to Washington D.C.ConcertsMarching at gamesPopcorn salesParent nightChess clubWeekly gamesWinter tournamentHoliday game saleComputer Tech ClubComputer assistanceJob shadowingCommunity game nightJazz Dance ClubWinter recitalSpring recitalHalftime show at two games

National Honor SocietyFlower saleInitiationCar WashTutoring students

BandTrip to Washington D.C.ConcertsMarching at gamesPopcorn salesParent night

Chess ClubWeekly gamesWinter tournamentHoliday game sale

Computer Tech ClubComputer assistanceJob shadowingCommunity game night

Jazz Dance ClubWinter recitalSpring recitalDance at two games

ProximityPhotography WorkshopMichigan State University

Saturday, Feb. 1, 2003Photo BeginningsKnow your camera

LightingSeeing your Work

Processing filmDeveloping prints

Darkroom strategiesSaturday, Feb. 8, 2003Advancing your SkillsBurning and dodging

Pushing filmSports photography

Saturday, Feb. 15, 2003Open to all

All workshops in Room 243Communication Arts Building

Michigan State UniversityCost per workshop: $25

For registration information, please call (517) 353-6761.

Proximity

The principle of

Choose an invisible line and line elements along it. Don’t throw things on the page arbitrarily.

Alignment

AlignmentEvery item on the page should have a visual connection with something else on the page.

When items are aligned on the page, a stronger, cohesive

unit is created.

Don’t throw things on the page arbitrarily. Find an invisible line and place items against it.

Even if the elements are physically separated form each other, it they are aligned, there is an invisible line that connects them, both in your eye and your mind.

Remember this card? Everything is scattered all over here. It looks unorganized and is hard to follow.

345 Cedar St.St. Paul, MN 55101-1057(651) 222-5011

Lauri HoppleSenior Editor/Visuals(651) 228-5535Lhopple@pioneerpress.com

When we place items along a line, whether actual or imaginary, items begin to look more organized.

Alignment

The invisible line runs along the right hand side, connecting the text.

Alignment

Alignment

By Maria JohnsonMarch 18, 2002

JRN 430

The Search for Students’ Rights

This is a typical report cover, right? This standard format presents a dull, almost amateurish look, which may influence someone’s initial reaction to the report.

Alignment

By Maria JohnsonMarch 18, 2002JRN 430

The Search for Students’ Rights

The strong flush-left alignment gives the report cover a more sophisticated impression. Even though the author’s name is far from the title, that invisible line of the strong alignment connects the two text blocks.

Alignment

You are warmly invited to

attend!

Centered. Really rather dull.

You are

warmly invited

to attend!

If you are going to center text, at least make it obvious.

Alignment

You are

warmly invited

to attend!

Experiment with uncentering the block of centered type.

You are

warmly

invited to

attend!

If you’re going to center the type, experiment with making it more dramatic in some other way.

AlignmentPANDA FACTSThe Panda Bear is a probably the most famous Endangered Animal. The Panda lives in six small areas located in China . In China they call the Panda "Xiongmao", which means Giant Cat Bear. The Panda was believed to have magical powers that could ward off natural disasters and evil spirits. Writings about the Pandas can be traced back 3,000 years. They were even kept as pets by Chinese Emperors. The Panda was first introduced to the Western world in 1869 by a French missionary. He sent a pelt to a Museum in Paris.

PANDA FACTSThe Panda Bear is a probably the most famous

Endangered Animal. The Panda lives in six small areas located in China . In China they call the Panda

"Xiongmao", which means Giant Cat Bear. The Panda was believed to have magical powers that could ward

off natural disasters and evil spirits. Writings about the Pandas can be traced back 3,000 years. They were

even kept as pets by Chinese Emperors. The Panda was first introduced to the Western world in 1869 by a

French missionary. He sent a pelt to a Museum in Paris.

Alignment

Alignment

The principle of

Repeat some aspect of the design throughout the entire piece.

Repetition

RepetitionChoose some element to repeat:

typeface boldness an icon a bullet spatial relationships

a thick rule linecolor, etc.

The repeating element can be anything a reader will visually recognize.

Repetition can be thought of as consistency. It is a conscious effort to unify all parts of a design.

Repetition

Repetition

Repetition

Repetition

The principle of

If you are going to use contrasting elements, make sure they really contrast.

Contrast

ContrastContrast is one of the most effective ways to add visual interest to your page—a striking interest that makes you want to look at the page—and to create an organizational hierarchy among different elements.

The important thing to remember is that for contrast to be effective, it must be strong. Do not be a wimp!

Avoid elements on the page that are merely similar. Use contrast with typefaces, type size, color, line thickness, etc.

It two elements on the page are not exactly the same, then make them different. Really different.

Examples of contrast Large type, small type Graceful oldstyle font with a bold sans serif font A thick line with a thin line Widely spaced lines with closely packed lines A small graphic with a large graphic, etc.

Contrast

Contrast

Contrast

Which one do you like better?

Contrast

Contrast

Contrast

Contrast

The End