Illustrator guides

Keeping our courseware clean and visible

When designing our courseware pages, one of the most important layout principles to follow is the use of safe areas. These invisible margins act as protective zones for our content — ensuring everything looks neat, readable, and visible across all screen types.

22-10-25

Christopher DEsposito Christopher D'Esposito, Graphic Designer

Why safe areas matter

Although the concept of safe areas originated in the early days of television broadcasting (when parts of the screen could get cut off), it’s still highly relevant today — especially for modern digital devices. Here’s why:

 

They make our content easier to read

By keeping key elements within a defined safe area, we give our content some “breathing room.” This prevents overcrowding at the edges of the screen and helps focus the viewer’s attention where it matters most.

Scandlearn-design-system-article-safearea-samples-incorrect

The above examples from past course content place demonstrate why safe areas are important. The top page displays important text and graphic information too close to the edge of the shot, risking their exclusion on certain devices. The second example has Captain Carl presented at too large a scale, creating imbalance on this page and when compared to other similar pages in the course.

They protect our courseware content from being cropped on different devices

On many modern phones and tablets, viewers can choose to expand videos, including our course pages, to full screen. When this happens, the top and bottom portions of the content may be cropped. Using safe areas ensures that none of our essential text or graphics disappear in the process.

Scandlearn-design-system-article-safearea-device-comparison

A sample page from our courseware shows how it would be displayed on a device at regular scale; and then with missing information when displayed using a devices full-screen feature.

Our two safe area margins

We use two types of safe areas to organize and protect on-screen content:

Scandlearn-design-system-article-safearea-greenmargin-only-1
Green: Content Safe Area

This is the primary safe zone — the most important one to remember. All text, tables, buttons, and other critical information must stay within the green content safe area. If it’s something learners need to read, tap, or interact with, it belongs here.

Scandlearn-design-system-article-safearea-margins-1
Magenta: Action Safe Area

This area surrounds the green zone and serves as a secondary margin. You can think of it as a buffer for non-essential visual elements — background images, decorative graphics, or motion effects that enhance the scene but don’t contain readable or interactive content.

Ideally, nothing apart from background images should extend beyond this magenta boundary.

The safe areas in practice

When laying out a course page:

  • Keep all text and interactive elements inside the green safe area.
Scandlearn-design-system-article-safearea-greenmargin

As shown in the above example, all of the critical elements, the boxed information and the important parts of Captain Carl's body are contained within the green safe area.

  • Allow supporting visuals (such as background patterns or secondary imagery) to extend into the magenta area if needed — but never beyond it.
Scandlearn-design-system-article-safearea-magentamargin

Here we can see that all of the key elements, the IATA logo, the bulleted text and the majority of the document images are within the green margin. In the main image, the three characters and even the Scandlearn logo on the aircraft livery are also within the green margin.

Only less important parts of the main image and the document images have been allowed to extend past the green margin but within the secondary magenta margin.

The big picture

Using safe areas consistently gives our courseware a polished, professional look — one that feels comfortable and accessible on any screen.

It’s a simple practice that keeps our learning content clear, focused, and easy to enjoy — no matter how or where our learners are viewing it.

Download the safe area templates now
Core Elements Kit
Christopher DEsposito Christopher D'Esposito, Graphic Designer
Creativity is cleared for takeoff
All rights reserved