Please enable JavaScript.
Coggle requires JavaScript to display documents.
Visual Design Model - Coggle Diagram
Visual Design Model
Determine the Context
Who Are the Learners?
Classroom, workplace, mobile, real-world settings
Environment affects visibility and surface features
What Is the Learning Environment?
Print, computer, mobile, e-learning
Bandwidth, resolution, and device size matter
What Is the Delivery Medium?
Budget, time, deadlines
Corporate standards and accessibility requirements
What Are the Constraints?
Prior knowledge (novice vs. expert)
Culture, age, accessibility considerations
Visuals benefit novices most
Design the Visual Approach
Determine the primary visual treatment
Image selection
Text–visual balance
Layout and navigation
Design choices must align with goals and context
Visual consistency improves credibility and comprehension
Apply Psychological Instructional Principles
Visuals should support key psychological learning events:
Focusing attention
Activating prior knowledge
Apply design principles:
White space
Grouping and proximity
Visual contiguity
Cueing
For dynamic media:
Provide learner control
Use audio narration instead of heavy text
Manage animation to avoid overload
Identify Communication Function
Visuals should be selected based on content type
Five instructional content types:
Facts → mnemonic visuals
Principles → explanatory visuals showing relationships
Processes → transformational visuals
Concepts → explanatory or interpretive visuals
Procedures → representational & transformational visuals
Match visuals to instructional purpose
Print → screenshots with callouts
Digital → animation for motion-based skills
Define the Goal
Clarifying the intended learning outcome
Instructional goals drive all visual design decisions
Primary instructional goals:
Inform or motivate (awareness building)
Build principle-based or problem-solving skills
Build procedural skills
Clear goals prevent unnecessary visual embellishment
Agreement on goals ensures visuals support learning outcomes