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 ?