GREAT
GRAPHICS!
J U N I P E R S TO K E S & O L I V I A C O N N E R
UNIVERSITY OF COLORADO BOULDER
WHO ARE WE?
Olivia Conner
Juniper Stokes
• IEP Instructor, Assessment
Coordinator, Materials
Creator
• Strongly opinionated
about formatting and
materials design
• IEP Lecturer with 10 years
experience
• Copywriter/Asst. Creative
Director for creative
agency
• Trained visual & graphic
artist
PURPOSE & GOALS
• Studies show that the design of materials can influence learners in
significant ways (Diemand-Yauman, et al, 2010).
• Teachers are excellent instructional designers
• Not trained in visual design
• Goal: Present visual design basics to teachers and administrators
• Provide teachers with materials to continue designing
– Ideas
– Websites
– Materials
OUTLINE
Background
Handouts
Graphics
Font
Color
BACKGROUND
• Font choice has been found to influence the “credibility and authority” of
materials (Morris, 2010).
• Research demonstrates important differences between font use in online vs.
print contexts (Hojjati & Muniandy, 2014).
• “People studying a text with graphics learn about one third more than people
studying a text without graphics” (Levie & Lentz, 1982).
• Research has examined the ways in which the use and choice of colors can
impact memory and performance (Dzulkifli & Mustafar, 2013).
FONT
FONT & PSYCHOLOGY
• Song & Schwartz (2008) compared effects of simple and ornate fonts.
• Two test groups:
Fancy font group
– estimated that the directions would take longer and be more difficult,
less likely to want to engage in the activity.
Simple font group
– estimated that the task would take significantly less effort and time.
• Our students may be more willing to engage with materials and activities
using simple fonts.
• Note: People given identical menus in simple and fancy fonts gave much
more esteem to the fancier fonts.
FONT
• Choose a font that is easy to read and set it in
a larger size.
• Use fonts that your students are familiar with.
• Allow your font choice to mark different
sections of your handouts.
3 FONT TYPES
SERIF
SANS SERIF
• accent
• Serif fonts have
small lines attached
to the ends of their
strokes.
• Sans serif fonts
do not have these
small lines.
• Accent fonts are
more decorative.
They can have a
variety of looks.
• Times New Roman
is an example of a
serif font.
• Arial is an
example of a
sans serif font.
• Channel is an
example of an
accent font.
GOOD FONT CHOICES
SERIF
• PT Serif
• Times New Roman
• Cambria
• Baskerville
• Adobe Carlson Pro
• Hoefler Text
• Georgia
SANS SERIF
• PT Sans
• Arial
• Calibri
• Helvetica
• Myriad Pro
• Source Sans Pro
• Trebuchet MS
BAD FONT CHOICES
Comic Sans
Ariel*
Bradley Hand
Papyrus
Times New Roman*
Courier
Stencil
Trajan
Apple Chancery
FONT CHOICE TIPS
• Beginners do well with larger, sans serif fonts.
• We can help prepare advanced students for university by
using more common fonts and sizes.
• Limit yourself to two fonts, three if you're feeling ambitious.
–Text Body: Choose a simple font for your main font.
–Headings: Create contrast with your headings. (If you
used a serif font for your text, use a sans serif here).
–Accent Font: Use this font minimally and to really make
something pop. These are common in sidebars and special
graphics.
COLOR
• The increasing use of technology allows us to leverage the
use of color to support student learning.
– PowerPoint and Prezi presentations
– Class websites and blogs
– D2L and Blackboard
• We can use color to enhance the professional appearance
of materials, create contrast, increase legibility, and
promote memory and positive moods in our students.
COLOR THEORY BASICS
• Different colors can have different connotations across cultures, ages, and genders.
• However, there are a few basic rules we can use to make our color choices more effective.
Image credit: Jana Jan at Edynco.com
COLOR SCHEMES
• Figuring out a good color scheme is more than
simple preference or choice.
• There is a real science behind which colors work
well together.
• It all starts with the color wheel.
COLOR SCHEMES
COMPLEMENTARY
SPLIT COMPLEMENTARY
COLOR SCHEMES
TRIADIC
ANALAGOUS
ELEVATE!
For a more modern
feel, shift the tone,
tint, and shade of
your color choices.
Photo credit funtuse.com
GOOD EXAMPLE
• Triadic scheme
• Adjusted color tones
Photo credit: Creative Bloq via DocReady
GRAPHICS
"Everything on your handout
should impart information—if
it’s not content it’s clutter”
(Johnson, 2015).
GOOD EXAMPLE
APPROPRIATE GRAPHICS SUPPORT
LEARNING
“Some 83 percent of what we learn derives from what we see, whereas only 11 percent derives
from what we hear” (Gatlin, 1988).
The Past Perfect expresses
the idea that something
occurred before another
action in the past. It can also
show that something
happened before a specific
time in the past.
www.englishpage.com
CHARACTERISTICS OF AN EFFECTIVE
GRAPHIC
A graphic should serve a purpose, should be simple and uncluttered, and should present a
manageable amount of information (Markel, 2013).
HANDOUT DESIGN
According to Robin Williams, author of
The Non-Designer’s Design Book, there are
four elements to encourage readability in
handout design:
• Contrast
• Repetition
• Alignment
• Proximity
CONTRAST
“Contrast is created when two elements are different. If the two elements are sort of different,
but not really, then you don’t have contrast, you have conflict. If two items are not exactly the
same, then make them different. Really different” (Williams, 2008).
Present Perfect Progressive
Used to show that something started in the
past and has continued up until now.
•
•
•
You have been waiting here for two hours.
Have you been waiting here for two hours?
You have not been waiting here for two
hours.
Remember that the Present Perfect
Continuous has the meaning of "lately" or
"recently."
www.englishpage.com
Present Perfect Progressive
Used to show that something started in the past and
has continued up until now.
You have been waiting here for two hours.
Have you been waiting here for two hours?
You have not been waiting here for two hours.
Remember that the Present Perfect Continuous has
the meaning of "lately" or "recently."
REPETITION
“Repeat some aspect of the design throughout the entire piece.The repetitive element may be a
bold font, a thick rule (line), a certain bullet, color, design element, particular format, the spatial
relationships, etc. It can be anything that a reader will visually recognize” (Williams, 2008).
Active Voice vs. Passive Voice
Active Voice vs. Passive Voice
Active: Subject + verb + object
 Ben studied the map
 Juniper taught the students
 Olivia ate the chocolate
Active: Subject + verb + object
• Ben studied the map
• Juniper taught the students
• Olivia ate the chocolate
Passive: Object + be + PP + (by phrase)
 The map was studied by Ben
 The students were taught by Juniper
 The chocolate was eaten (who ate it?)
Passive: Object + be + PP + (by phrase)
1. The car was painted by Holly
2. The school was cleaned
3. The people were shocked
ALIGNMENT
“Nothing should be placed on the page arbitrarily. Every item should have a visual connection
with something else on the page. The principle of alignment forces you to be conscious—no
longer can you just throw things on the page and see where they stick” (Williams, 2008).
Common Phrasal Verbs
A verb plus a preposition or adverb
which creates a meaning different from
the original verb.
•
•
•
•
•
•
Show up
Make up
Run into
Talk into
Look up
Look into
Common Phrasal Verbs
A verb plus a preposition or adverb
which creates a meaning different
from the original verb.
Show up
Make up
Run into
Talk into
Look up
Look into
PROXIMITY
“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” (Williams, 2008).
Transition Words
Transition Words
Adding information
• Also
• Additionally
•
•
•
•
•
•
•
•
•
•
•
Contrasting Information
• However
• On the other hand
Giving Examples
• For instance
• For example
Also
Secondly
For example
Additionally
However
On the other hand
For instance
Firstly
Furthermore
Thirdly
Finally
WHITE SPACE & MARGINS
Don’t be afraid of white space. It makes the document seem friendlier and less cluttered.
PUTTING IT ALL TOGETHER
BRIEF SUMMARY
• Font: simple, easy-to-read fonts can increase learning.
• Color: using warm colors can stimulate learning while cool colors
can calm; use the color wheel for help.
• Graphics: graphics that connect with what you are teaching can
increase understanding.
• Handout Design: contrast, repetition, alignment, and proximity
make your handouts look professional.
RESOURCES TO KEEP LEARNING
FREE FONTS
• https://www.google.com/fonts
• http://www.fontsquirrel.com/
• http://www.dafont.com/
COLOR SCHEME CREATORS
• http://kuler.adobe.com/
• http://colorschemedesigner.com/
• http://www.pictaculous.com/
SELF STUDY SITES
• http://lynda.com
• http://www.sitepoint.com/series/design-principles-101/
http://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-ofcolor/
• http://www.creativebloq.com/
HOW TO ACCESS OUR MATERIALS &
TEMPLATES ONLINE
REFERENCES
• Brown, A. (N.D.).Visual Design Basics: Creating Effective Handouts, Flyers and Brochures. Retrieved
From://www.mscare.org/resource/resmgr/Articles/Article0019_VisualDesign.pdf
• Dzulkifli, M. A., & Mustafar, M. F. (2013).The Influence of Colour on Memory Performance: A Review. The Malaysian Journal of Medical
Sciences : MJMS, 20(2), 3–9.
• Gatlin, P.L. (1988).Visuals and Prose in Manuals: The effective combination. In Proceedings of the 35th International Technical Communication
Conference (pp. RET 113-115). Arlington,VA: Society for Technical Communication.
• Hojjati, N. & Muniandy, B. (2014). The Effects of Font Type and Spacing for Online Readability and Performance. Contemporary and
Educational Technology. 5(2), 151-164. Retrieved from: http://www.cedtech.net/articles/52/525.pdf
• Diemand-Yauman, C., et al. Fortune favors the Bold (and the Italicized): Effects of disfluency on educational outcomes. Cognition (2010),
doi:10.1016/j.cognition.2010.09.012
• Johnson, A. (N.D.). Good Handout Design: How to make sure your students are actually learning from your lecture notes. Retrieved
from Lecture Notes Online Website: https://www.pcc.edu/resources/tlc/cascade/documents/PCCHandouts_handout.pdf
• Levie, W.H. & Lentz, R. (1982). Effects of Text Illustrations: A review of research. Journal of Educational Psychology, 73, 195-232.
• Markel, M. (2013). Practical Strategies for Technical Communication. Bedford/St. Martin’s. Boston, MA.
• Morris, E. (2013). How Typography Shapes our Perception of Truth. Retrieved from www.fastcompany.com
• Song, H., & Schwarz, N. (2008). If It’s Hard to Read, It’s Hard to Do: Processing Fluency Affects Effort Prediction and Motivation. Psychological
Science, 19(10), 986-988. Retrieved 2015, from https://dornsife.usc.edu/assets/sites/780/docs/08_ps_song___schwarz_effort.pdf
• Williams, R. (2008). The non-designer's design book: Design and typographic principles for the visual novice. Peachpit Press. Berkeley, CA.
THANK YOU!
Questions
?