5 Visual Design Model Stages
Identify Communication Function Needed to Match Content Types
Define Goals
Determine Context
Design Visual Approach
Apply Principles of Psychological Instructional Events
Inform or motivate
Build far-transfer (problem-solving) skills and associated knowledge
Build near-transfer (procedural) skills and associated knowledge
Learning Landscape - Where is the learning taking place
Delivery Media - The way in which the material will be displayed
Learner Profile - Who is doing the learning
Pragmatic Issues - Define the limiting factors (LIMFACs)
Novice, Advanced, Mixed
Classroom, self-study computer
Book
Determine the image - colors and fonts should reflect content, desired impact on the audience, and credibility
Assess general graphic requirements of content
Design Treatment
Text dominant or visual dominant
Instructional Strategy
Navigation and functionality (for online learning)
Surface features that align with context and goals
Concept
Facts
Procedures
Process
Multiple Content
Principles
Use organizational visuals
Use representational, transformational visuals
Use diverse representational or interpretive visuals
Sue representational and mnemonic visuals
Use transformational visuals
Use explanatory visuals, such as relational, interpretive, or transformational
For all instructional goals, apply principles to awaken prior knowledge and support transfer
If building near-transfer skills then apply transfer principles
If building far-transfer skills then apply mental model principles
If learners low in personal motivation, then apply motivational visual principles
If complex content, novice audience, or runs outside learner control, then apply attention and cognitive load principles
Layout or interface for media (style, orientation, real estate)
Male vs Female
Older vs Younger
Novices usually require more graphics
Experts or advanced learners find that graphics depress learning
There are statistically more colorblind males so graphics for males should not rely solely on red = wrong and green = right.
Breakroom
Home
Office
Computer
Flip chart
Smart phone
Display size
Touch interface
Graphic size
Bandwidth
Style Guides
Time Tables
Accessibility requirements
Budget
Templates
Page Orientation
Colors
Real Estate
Functionality needs