Illustrator guides

Character-based instructors in our courseware

The talking head serves as our on-screen instructor — a character-driven presence that brings personality and clarity to each course. Most often embodied by Captain Carl, this visual element helps guide learners through the material, appearing in formats that range from compact inset circles to expressive full-body shots.

26-10-25

Christopher DEsposito Christopher D'Esposito, Graphic Designer

Integrating Talking Heads into the Design System

Talking heads function as individual design elements within our page layouts. They bring character and storytelling value to our courses, but they also need to work harmoniously with text, imagery, and other content.

Scandlearn-design-system-article-talkingheads-collage

To make this easy, each talking head is aligned to our Grid and Layout System and positioned within the Safe Areas defined in our design framework. These rules ensure that character placement looks intentional and balanced, no matter which screen or layout is used.

Guidelines for full and partial figures

When using a full-body or cropped version of Captain Carl (or any other character), follow these principles to keep the layout clean and consistent:

Scandlearn-design-system-article-talkingheads-zoning-1
1
2
3

1. Treat each talking head as its own element
When zoning layouts — refer to the Grid and Layout Systems guide for alignment and spacing.

2. Overlapping is allowed
Parts of the character, like a raised hand or pilot cap, can overlap other visual elements to add depth and realism.

3. Stay within the Magenta Action Safe Area
Except where the character’s body is intentionally cropped by the page edge (typically at the bottom).

4. Keep balance in mind
Ensure the character’s positioning doesn’t compete with key content areas or distract from on-screen text.

Scandlearn-design-system-article-talkingheads-example-full

Choosing the right talking head adds balance to your page and creates a welcoming atmosphere, guiding learners confidently through their training.

This approach lets our characters feel natural and expressive, while still respecting the boundaries that keep our overall design neat and readable.

Inset circle version

For situations where a smaller, more compact presence is needed — such as brief dialogue moments or introductions — the inset circle version of the talking head provides a clean, versatile option.

Scandlearn-design-system-article-talkingheads-example-inset
1
2
3

Follow these guidelines to keep the inset consistent and unobtrusive:

  1. Fixed position in the bottom left or right corner of the shot.

  2. Placement should sit snugly in the corner of the Action Safe Area (see Safe Areas for details).

  3. Circle size: between 220 px and 315 px, depending on screen dimensions and layout.

  4. Overlap is acceptable, as long as it does not obscure critical content such as text or other important elements.

Scandlearn-design-system-article-talkingheads-example-inset-2

This smaller inset maintains character presence without pulling attention away from the learning content — a perfect balance of personality and practicality.

Download talking heads set
Core Elements Kit

Character, consistency, and connection

Talking heads like Captain Carl do more than deliver information — they create a human connection between the learner and the material. By following these placement and sizing guidelines, we maintain that connection while keeping every scene visually aligned with our broader design system.

When used thoughtfully, these characters become more than just part of the course — they become part of our brand story.

Christopher DEsposito Christopher D'Esposito, Graphic Designer
Creativity is cleared for takeoff
All rights reserved