CEPD · Module 2 — Visual and information design for screens
Studio's 70+ formats need a pattern library: which ones your team ships, how they look in both languages, and a CAP and accessibility pass on each.
About 18 min
Practice in the lesson player
Sorting, matching, quizzes, and the module gate stay behind a free account so scored answers are not public. The teaching notes below are the same cited curriculum.
01
A pattern library documents the title block, callout tones, quiz footer, gate layout and RTL variants. Consistency means learners learn the course chrome once and spend attention on content. It also means a new developer can produce a correct screen on day one. Innovito Studio's breadth is a reference; your library decides which patterns your courses use.
02
Narrative with focal graphic: one idea, one visual.
Decision screen: case, three options, feedback panel.
Sort and order: with tap alternative and keyboard support.
Data screen: chart or table with source line.
Callout: info, warning, honesty, each with a fixed colour and icon.
Gate: item counter, score, pass mark, certificate status.
03
CAP pass? — All six checks, in both languages.
Accessible? — Keyboard, focus visible, 24-pixel targets, contrast, text alternatives.
Works on a phone? — Tested at 360 pixels wide, in portrait.
04
Mature teams define design tokens: named values for colour, type size, line height and spacing, used by every template instead of fixed numbers. With tokens, the Arabic version can use a different type scale and line height while sharing colours and spacing, and a client rebrand is a change to a few values instead of hundreds of screens. Ask whether your authoring tool supports themes or variables; Studio themes and Storyline themes both cover part of this.
05
Complete six templates in your pattern sheet from the starter set, each in both languages, each passing the entry test. This is your module artifact.