The Science of Visual Design: Creating Strong Graphics for ID
- 1. • What is Visual Design? • Layout Best Practices and Considerations • Improving Visual Design Visual Design
- 2. • Lead Instructional Designer, FlightSafety • Senior Graphic Designer, Data Publishing Inc. • Marketing and Commercial Designer, Ft. Worth HOG James Washok, M.Ed., M.S. IDT
- 5. • Use of various elements to enhance and enforce user experience • Colors, Media, Typography, White Space, and Layout • Creating a scientifically and aesthetically pleasing experience What is Visual Design?
- 6. • Focuses on the aesthetics of a site and its related materials by strategically (or scientifically) implementing colors, fonts, images, and other elements Visual Design Basics Visual Design Basics | Usability.gov
- 7. • Focuses on the aesthetics of a site and its related materials by strategically (or scientifically) implementing colors, fonts, images, and other elements Visual Design Basics Visual Design Basics | Usability.gov
- 8. • Focuses on the aesthetics of a site and its related materials by strategically (or scientifically) implementing colors, fonts, images, and other elements Visual Design Basics Visual Design Basics | Usability.gov
- 9. • Focuses on the aesthetics of a site and its related materials by strategically (or scientifically) implementing colors, fonts, images, and other elements Visual Design Basics Visual Design Basics | Usability.gov
- 10. Visual Design Basics • Color palette • Use of fonts • Element “weighting” • Element positioning • Important! Remember image QUALITY – or resolution – when designing. • 72 DPI for typical web elements, 150+DPI for presentation delivery, 300+ DPI for print.
- 11. “Visual design has as much of an effect on the overall experience as actual usability.” Don Norman, Emotional Design: Why We Love (or Hate) Everyday Things Why is Visual Design Important? What is Visual Design And Why It is Important
- 14. Bad Design vs. Good Design • Poor color palette • BLUE text on RED background?? • Poor alignment (Lunch and Top Heading) • Light Blue on White background with small font size
- 15. Bad Design vs. Good Design • Poor color palette • The central image is the concept, but the diagonal text does not support the chevron topics • The ugly green “Click NEXT to Continue!” • The phrasing is DEMANDING/YELLING at the user
- 16. Bad Design vs. Good Design • Poor color palette • FlightSafety LOGO not used as is required by FSI on all FSI training deliverables • Washed out Teammate Training logo and “Presents” • Wasted space at bottom for revision information and copyright declaration • RED on BLUE…VERY BAD!
- 17. Bad Design vs. Good Design • Poor color palette • Bullet spacing between bullet and text • Poor font use for buttons (no BOLD and SHADOW) • Poor choice of “buttons” for use (too clunky and bulky) • Non-intuitive interface
- 18. Bad Design vs. Good Design • Excellent use of color palette, even for such “odd” colors • Placement and weighting of elements • “Grouping” elements to convey sense of commonality • Use of White Space to create border effects • Intuitive interface
- 19. Bad Design vs. Good Design • Excellent use of color palette • Placement and weighting of elements • Use of White Space to create importance • Placement and use of Space for Revision and Copyright information • Intuitive interface
- 20. Bad Design vs. Good Design • Excellent use of color palette • Placement and weighting of elements • Use of White Space to create importance • Use of Grouping to infer commonality • Intuitive interface
- 21. • Use color to direct attention • Use colors strategically to enhance and enforce • Improve readability with color • Use colors based on their meaning • Choose the right color combinations Visual Design – Color Color wheel, a color palette generator | Adobe Color
- 22. • Primary Colors (Red, Blue, Yellow) • Secondary Colors (Primary + Primary) • Violet, Green, Orange • Tertiary (Between Primary and Secondary) The Color Wheel CMYK Black (0/0/0/100) RGB Black (0/0/0) Color wheel, a color palette generator | Adobe Color
- 23. Color Use The Do's And Don'ts of Infographic Color Selection
- 24. Color Use
- 25. • Use clean, professional images that are relevant to the concept • Avoid using overpowering images • Remember bandwidth considerations and limitations • When possible, modify images prior to using in presentation • Remember copyright rules! Visual Design – Media Free Vectors, Stock Photos & PSD Downloads | Freepik
- 26. Visual Hierarchy Capture Attention With Visual Hierarchy
- 27. Visual Elements and Audience 9 Visual Elements EVERY Online Training Course Must Have • Know your audience…use appropriate elements • Use the right element for the right delivery for the right audience Know Your Audience! • Younger Learners – OK! Adult Learners – Not OK! • Adult Learners – OK! Younger Learners – Maybe Not OK!
- 28. • Know your audience…use appropriate fonts • Utilize and maintain consistency throughout • Stick to standard and web-safe fonts • Aim for readability • Understand typography etiquette Visual Design – Typography Typography In eLearning: 5 Key Tips For eLearning Professionals
- 29. Typography - Use Typography In eLearning: 5 Key Tips For eLearning Professionals • Know your audience…use appropriate fonts • Use the right fonts for the right delivery Corporate Revenue was down by 12% last quarter Corporate Revenue was down by 12% last quarter Corporate Revenue was down by 12% last quarter Corporate Revenue was down by 12% last quarter Use Sans Serif fonts for electronic delivery, including PDFs, to reduce eye fatigue. Use Serif fonts for printed delivery and professional printed correspondence.
- 30. Typography - Consistency Typography In eLearning: 5 Key Tips For eLearning Professionals • Consistency • Placement • Size
- 31. Typography – Use (Web) Safe Fonts Typography In eLearning: 5 Key Tips For eLearning Professionals • Not used system-wide • Anomalies and errors • Size
- 32. • “Empty” space around content and functional elements • Let’s your design “breathe” and reduces eye fatigue • Any space that serves as the background for content • Adds clarity to the overall design • Use white space to your advantage to draw attention and focus Visual Design – White Space What's White Space Design? 5 Real Examples
- 33. White Space – Typography Typography In eLearning: 5 Key Tips For eLearning Professionals • White space makes text more readable • Adjust line height (vertical distance between lines) • 120%-145% of size TOO TIGHT “Mistakes are almost always of a sacred nature. Never try to correct them. On the contrary, rationalize them, understand them thoroughly. After that, it will be possible for you to sublimate them.” - Salvador Dali JUST RIGHT “Mistakes are almost always of a sacred nature. Never try to correct them. On the contrary, rationalize them, understand them thoroughly. After that, it will be possible for you to sublimate them.” - Salvador Dali TOO LOOSE “Mistakes are almost always of a sacred nature. Never try to correct them. On the contrary, rationalize them, understand them thoroughly. After that, it will be possible for you to sublimate them.” - Salvador Dali
- 34. White Space – Creating Connections Gestalt Laws of Perceptual Organization • Gestalt Laws • Closure • Common Region • Proximity • Figure and Ground
- 35. White Space – Examples in Design White Space In Graphic Design: Guidelines & Examples Passive white space (typography) Active white space (logo) Macro white space (logo) Micro white space (typography) Use white space to create brand and element focus Effective use to focus and draw attention
- 36. Gestalt Principles 7 Gestalt Principles of Visual Perception: Cognitive Psychology for UX Closure Common Region Proximity
- 37. Gestalt Principles 7 Gestalt Principles of Visual Perception: Cognitive Psychology for UX Similarity Focal Point Figure - Ground
- 38. • Design using “conversation” • Everything “speaks” to the user. Use content wisely. • Look for opportunities for active engagement • Adds clarity to the overall design • Use white space to your advantage to draw attention and focus Visual Design – Layout eLearning Design - 38 Slide Design Tips from the Pros
- 39. Macro-Layout Flowcharts, Storyboards, and Rapid Prototyping • The OVERALL or “big picture” of your presentation • Logically flow the content to address each of the learning objectives or outcomes • Story > Chapter > Content • Flowcharts and broad storyboards
- 40. Macro-Layout – The Flowchart Flowcharts, Storyboards, and Rapid Prototyping
- 41. Micro-Layout • The “traditional” layout thought/vision • Each element has a place and purpose • Elements maintain consistent placement throughout • Whitespace provides borders and grouping • Effect and sound design takes into consideration content and elements and works to make them flow together
- 42. Design Using Conversation Conversation and Instructional Design • Create content as if having a conversation with the user • Helps me focus on content • Helps me drive the design as to what is important and useful • Keeps unneeded content out (usually) • Think of the learning or training from the user’s perspective • Using multiple voices for narration adds more “human” feel
- 43. Using Content Wisely Conversation and Instructional Design • Use content wisely and appropriately • Avoid overload • Remember what needs to be focused on • Design thinking of where I want the user to start and end • Provide “hooks” to grab attention
- 44. Active Engagement Opportunities Conversation and Instructional Design • When using authoring tools, look for opportunities to include active engagement with your content • This could be as simple as clicking a button • It could also be including hyperlinks in objects, such as this image linking to a webpage • More engaging and interactive objects include drag and drops, formative assessments, and branching scenarios
- 45. • The Adult Learner (SL360) • The Adult Learner (Rise 360) • Core Skills & Competencies Alignment Working Examples & Images • Normalization of Deviance • Design Images • E-Learning Heroes Examples
- 46. Questions?