Please enable JavaScript.
Coggle requires JavaScript to display documents.
A Visual Design Model for Planning Graphics Systematically - Coggle Diagram
A Visual Design Model for Planning Graphics Systematically
Why Systematic Graphic Planning Matters
Visuals must promote learning, not decoration
Early analysis prevents visual mismatch
Planning integrates visuals across instruction
Visuals affect credibility and effectiveness
Weak visuals undermine strong content
Design decisions must precede development
Three Facets of Graphics (Interrelated)
Treatment (GUI / Skin / Template)
Look and feel
Display framework
Interface conventions
Style consistency
Color palette
Typography
Orientation and format
Branding alignment
Navigation (e-learning)
Individual Instructional Graphics
Content-specific visuals
Illustrations
Diagrams
Charts
Tables
Animations
Representational visuals
Real-world depictions
Layout
Text–visual placement
White space
Visual hierarchy
Groupings
Visual cueing
Sequencing
Audio–visual coordination
What Happens Without a Systematic Approach
Decoration-first design
Tiny or unreadable text
Blurry charts
Visual clutter
Inconsistent styles
Poor emphasis
Learner confusion
Wasted screen space
Five-Phase Visual Design Model
Phase I: Define the Instructional Goal
Inform or motivate (awareness)
Build near-transfer skills (procedures)
Build far-transfer skills (problem-solving)
Combination of goals
Phase II: Determine the Context
Learners
Prior knowledge
Novice vs expert
Mixed audiences
Age, culture, education
Visual limitations (e.g., color blindness)
Learning Environment
Classroom
Workplace
Garage or shop floor
On-the-job settings
Lighting and viewing distance
Delivery Medium
Books or manuals
Computer-based
Mobile devices
Projection
Wall charts
Constraints
Budget
Time
Templates
Style guides
Accessibility requirements
Phase III: Design the Visual Approach
Identify worst-case graphic needs
Determine image to project
Establish credibility
Text-dominant vs visual-dominant
Interface and navigation decisions
Timing and sequencing
Callouts and emphasis methods
Phase IV: Identify Communication Function of Visuals
Content Types
Facts
Concepts
Procedures
Processes
Principles
Visual Functions
Representational
Transformational
Organizational
Explanatory
Interpretive
Mnemonic
Media Choices
Static images
Series of stills
Animations
Step–action–consequence cycles
Phase V: Apply Psychological Instructional Events
Focus learner attention
Reduce cognitive load
Activate prior knowledge
Build mental models
Support transfer
Increase motivation
Use cueing and proximity
Apply sequencing and learner control
Psychological Foundations of Learning
Working memory (limited capacity)
Long-term memory (large but inactive)
Managing cognitive load
Mental model construction
Transfer of learning
Motivation and persistence
Evidence-Based Visual Learning Principles
Aligned visuals improve learning
Misaligned visuals depress learning
Visuals are best for spatial content
Relationship visuals deepen understanding
Simpler visuals are often better
Ignored visuals do not teach
Bottom Line
Plan graphics systematically
Integrate all three facets
Design for learning, not decoration
Good visuals support learning
Poor visuals disrupt learning
Clark, R. C., & Lyons, C. C. (2010). Graphics for learning: Proven guidelines for planning, designing, and evaluating visuals in training materials (2nd ed.). Pfeiffer.