1. Effective Graphic Design
Robin Williams is a graphic designer who lives in Santa Fe. She’s written several books on the basics of graphic design. Becoming familiar with the basic elements of graphic design can help you create more professional and effective materials for your students.
Adapted from
The Non-Designer’s Design Book
By Robin Williams

2. The Four Design Principles
Contrast
If not the same, make them very different
Alignment
All elements should have a visual connection
Repetition
Repeat color, shape, texture, space
Proximity
Group related items
According to Robin Williams, basic graphic design boils down to for elements: contrast, alignment, repetition and proximity. We’ll look at each in turn.

3. Contrast
The principle of contrast states that if two items are not exactly the same, then make them really different.
Be BOLD!
If you’re putting two elements on a page that aren’t the same, such as two fonts or two line widths, they can’t be similar – for contrast to be effective, the two elements must be very different.
The basic purpose of contrast to two-fold: contrast creates visual interest meaning people are more likely to read it. Contrast can also be used to organize information on a page.

4. How To Create Contrast Large type and small type (size)
Thin line and thick line (weight)
Combinations of fonts
Color
Varying things such as font size or type, colors, or the weight of graphic design elements such as lines all can create contrast on a page.

5. Examples of Contrast
Both these pages are well-designed and show contrast. The one on the left shows contrast in the different font sizes and bolding of headings. Note also the use of the horizontal line under the title as a graphic design element.
The example on the right shows a bolder use of contrast. The title now stands out against the black background and the title and all headings use a bolder font.

6. Contrast – What To Avoid
Don’t be a wimp – do it with strength.
If contrast is to be effective, it has to be obvious. Don’t use a sort-of-heavy line with a sort-of –heavier line. Don’t use dark blue text on a medium blue background. Don’t use two similar fonts.

7. Alignment
The principle of alignment states that nothing should be placed on the page arbitrarily.
Every item should have a visual connection with something else.
The second basic graphic design elements is alignment. Design beginners tend to put text on a page wherever there happens to be space. Without alignment, you get the Messy Kitchen Effect – a cup here, a plate there, a napkin on the floor, a pot in the sink, a spill on the counter. It doesn’t take too much to clean up a messy kitchen. Just as it doesn’t take much to clean up a messy design with weak alignments.
The basic purpose of alignment is to unify and organize a page.
Let’s look at some alignment options.

8. Alignment Styles
It’s best to stick with a single text alignment on a page: left, right or centered. Let’s look at some example business cards to see how the graphic design element of alignment can impact the effectiveness of the card at getting its message across.

9. No Alignment Frank Garcia Acme Construction (505) 123-4567
Here the content on the card is placed anywhere there seemed to be space. What information goes together isn’t clear. Now, let’s make one change to the business card – let’s align the text – and see what happens.
100 Rio Grande Road
Red River, NM

10. Right Alignment Frank Garcia Acme Construction 100 Rio Grande Road
Here each element on the page shares a visual connection. Unity is an important concept in design.
The left alignment makes all the elements on the page appear to be unified, connected and interrelated.
Even though the separate elements at the top and bottom aren’t physically close on the card, they appear connected simply by their placement.
100 Rio Grande Road
Red River, NM
(505)

11. Center Alignment Frank Garcia Acme Construction 100 Rio Grande Road
Take a look at web pages, fliers or magazines. No matter how wild or chaotic a well designed piece may be, you’ll always be able to find alignments within the design.
100 Rio Grande Road
Red River, NM
(505)

12. Alignment – What To Avoid
Avoid using more than one text alignment on a page.
Don’t center some text and right align other text.
Break the center alignment habit.
Formal / sedate / dull.
Robin Williams feels center alignment is overused and therefore doesn’t do a good job of grabbing the attention of readers.

13. Repetition
The principle of repetition states that you repeat some aspect of the design throughout the entire piece.
The repeated item could be a font, line, particular bullet, color, image, or format.
The third basic graphic design element according to Robin Williams is repetition. The repeated item can be anything the reader will visually recognize including colors, or graphic elements such as bullets or lines. Repetition in design makes things look more professional and helps readers understand the organization of information.
What examples of repetition can you ID in this presentation so far? All the slides in this PowerPoint share a repeated graphic design which includes a consistent white background, the UNM graphic at the top of the page, page titles in gray Tahoma 44 point font, round black bullets, body text in black Times New Roman 32 point font.
This PowerPoint would not look nearly as professional and unified if these elements all were changing from slide to slide. If that were the case, the PowerPoint would become a hodgepodge and distract readers from the content.
Let’s look at another example. Be aware of where your eye moves as you look at it.

14. Repetition Frank Garcia Acme Construction 100 Rio Grande Road
Where did your eyes go first? I suspect to be bold name at the top. Contrast is used to make the name stand out. If Frank wants to be sure you remember his name, making it larger, bolder, and a different font so it immediately draws your attention would be a good way to do that. But the graphic design suggests Frank also wants you to remember something else – his phone number. The design uses repetition of font style and boldness to highlight the two most critical aspects Frank wants you to get from his business card.
100 Rio Grande Road
Red River, NM
(505)

15. Repetition – What To Avoid
Avoid repeating an element so much that it becomes annoying or distracting.
Repetition of visual design elements unifies and strengthens a piece by tying it all together. It adds visual interest – if a piece looks interesting, it’s more likely to be read.
It’s useful on single page documents, and critical on multi-page documents or webpages.
What to avoid – Example: Imagine you want to dress up for the evening and knock the socks off your date or husband. You slip on a black evening dress, then for a little punch, that bright red lipstick. Wow! Then, you put on the bright red hat, bright red earrings, bright red shoes, bright red handbag…
The repetition wouldn’t be a stunning and unifying contrast – it would be garish, and the focus would be confused. So don’t overuse repetition.

16. Proximity
The principle of proximity states that you should group related items together
Why?
To organize information
To lend visual appeal
To lead your eyes
The final basic graphic design element Robin Williams talks about is proximity. Proximity means how close together things are. Beginner’s designs often string words and phrases all over the place, filling corners and talking up lots of room so there isn’t any empty space.
There seems to be a fear of empty space.
When things are scattered all over, the page seems unorganized and the information may not be instantly accessible to the reader.
To use proximity effectively, place related items physically close to each other. The close physical grouping provides an instant visual clue as to the organization of the page.
Let’s look at Frank’s business card again,this time focusing on proximity.

17. No Proximity Frank Garcia Acme Construction (505) 123-4567
Does your eye stop 5 times? Of course – there are 5 separate elements.
Where do you begin reading? Why? Because the name Frank Garcia is in the middle, its biggest edits bolded.
Where does your eye go next? Left to right because you read English?
What happens when you get to the bottom right corner? Do your eyes wander around the card making sure you didn’t miss anything?
Now, let’s make one change to the business card – let’s group related elements together – look what happens…
100 Rio Grande Road
Red River, NM

18. Proximity Frank Garcia Acme Construction 100 Rio Grande Road
Proximity implies a relationship. When several items are in close proximity, they become one visual unit rather than several separate visual units. Items relating to each other should be grouped together.
Is there any question now about where to begin reading this card? What about where you end? Do you know when you’ve gotten to the end? Using the one simple concept of Proximity, this card is now organized both visually and in terms of meaning.
100 Rio Grande Road
Red River, NM
(505)

19. Proximity – What To Avoid
Avoid too many separate elements on a page.
Avoid leaving equal amounts of white space between elements.
Don’t create relationships between elements that don’t belong by placing them in proximity.
Robin Williams cautions about leaving equal spaces between elements. Doing so leaves the reader unsure which elements go together.
Let’s look some at some examples now to see how these four graphic design elements interact.

20. Lessons from Hitchhiking
What Goes Around
Comes Around
Lessons from Hitchhiking
Across the country
Robin Williams
January 1, 2001
Robin Williams wouldn’t like this graphic design. The spacing between elements in the title do not clearly identify what goes with what.

21. Lessons from Hitchhiking
What Goes Around
Comes Around
Lessons from Hitchhiking
Across the country
Robin Williams
January 1, 2001
This is better – readers clearly no which elements on the page along together.

22. What Goes Around Comes Around Lessons from Hitchhiking
Across the country
Robin Williams
January 1, 2001
Robin Williams would like this even better because it avoids center alignment which he feels is overused. Because we usually read from left to right, using right alignment grabs the reader’s attention. Such alignment often feels modern or avant-garde.

23. What Goes Around Comes Around Lessons from Hitchhiking
Across the country
Robin Williams
This is a more traditional alignment which benefits from avoiding overuse of center alignment.

24. What Goes Around Around Around Lessons Comes Around from hitch- hiking
Robin Williams
Around Around Lessons
from
hitch-
hiking
across
the
country
This example adds strong contrast to the graphic design.

25. Font Style for Primary
Comic Sans is an effective font for use with primary kids. Can you tell why?
Look at the letter a. In most fonts, the letter a is not written in the form we teach kids in handwriting.

26. What design techniques?
Which of the four basic graphic design elements, contrast, alignment, repetition and proximity, can you identify in this example?
There’s contrast between the font color and background color and between the font sizes. All text is right aligned. There is repetition in the right alignment as well as the graphic elements of the three lines leading into the word The and away from the word Oregon. The first word The is closer to the next line, Media Literacy Online Project than the line about the College of Education which indicates it is part of the title.

27. Rule 166 When using presentation software: One main idea or concept
6 points
6 words
Here’s another graphic design rule for PowerPoint presentations. (This is different from the talking books where you format the text as you would find in a regular printed book.)
The rule of 166 says you should never have more than one main idea or concept (that should appear in the title text box). You should never have more than six bullets, and for each bullet you should never have more than six words.
You should never paste large blocks of text into PowerPoint then turn your back on the audience and read it to them. PowerPoint should be used like notecards when giving a speech with just enough written on each slide to prompt your memory about what it is you wanted to say.

28. References The Non-Designer’s Design Book By Robin Williams
CARP Website