Overview
Visual Design and UX for Storyline 360 Courses helps designers and developers create eLearning experiences that are both visually compelling and highly usable. This course bridges the gap between graphic design principles and instructional effectiveness, teaching participants how to apply visual hierarchy, typography, and color theory specifically for learning contexts while ensuring intuitive navigation and clear user affordances.
Participants will learn to design consistent UI components, create layouts that guide learner attention, and balance aesthetic goals with accessibility requirements and brand guidelines. Through hands-on exercises, you’ll develop a design system approach that produces professional, learner-centered courses efficiently.
Format: 1 Day | Live Online (VILT)
Who Should Attend
- Storyline developers seeking to improve course visual quality
- Graphic designers transitioning to eLearning development
- Instructional designers responsible for course aesthetics
- L&D professionals establishing visual standards for training content
What You’ll Learn
- Apply visual hierarchy principles to guide learner attention
- Select and configure typography for optimal readability and learning
- Use color strategically for meaning, contrast, and accessibility
- Design consistent UI components and interaction patterns
- Create layouts that support content comprehension
- Build intuitive navigation with clear affordances
- Balance brand guidelines with accessibility requirements
- Develop reusable design systems for efficient production
Course Outline
Module 1: Visual Hierarchy for Learning
- Understanding how learners scan and process visual information
- Using size, position, and contrast to establish hierarchy
- Directing attention to key content and interactions
- Reducing cognitive load through thoughtful design
Module 2: Typography in eLearning
- Selecting fonts for readability across devices
- Configuring type size, spacing, and line length
- Creating typographic hierarchy for headings and body text
- Ensuring text accessibility and responsive behavior
Module 3: Color Strategy and Accessibility
- Applying color theory for meaning and emotion
- Meeting color contrast requirements for accessibility
- Creating cohesive color palettes from brand guidelines
- Using color to reinforce feedback and status
Module 4: Layout Systems and Grids
- Designing with grid systems for consistency
- Creating white space for visual breathing room
- Balancing content density with comprehension
- Adapting layouts for different screen sizes
Module 5: UI Components and Patterns
- Designing reusable buttons, icons, and controls
- Creating consistent interaction patterns
- Building component libraries in Storyline
- Maintaining visual consistency across courses
Module 6: Navigation and Affordances
- Designing intuitive navigation structures
- Creating clear affordances for interactive elements
- Providing orientation and progress indicators
- Testing usability with target learners
Prerequisites & Technical Requirements
- Familiarity with Storyline 360 slide creation and basic interactions
- Interest in improving visual design skills for eLearning
- Computer with Articulate 360 subscription and Storyline 360 installed
Customization Options
This course can be customized to incorporate your organization’s brand guidelines, design system, and visual standards. We can focus on particular design challenges relevant to your content types, address specific accessibility requirements, and develop templates and components aligned with your production workflows.