Essential cookies
There are some cookies that we have to include in order for certain web pages to function. For this reason, they do not require your consent.
- knowledgecademy_cookie_consent 1 year 1 month 1 day Used to store the user's cookie consent preferences.
- knowledgecademy_session 2 hours Used to identify the user's browsing session.
- XSRF-TOKEN 2 hours Used to secure both the user and our website against cross-site request forgery attacks.

We use cookies

This website uses cookies in order to enhance the overall user experience.

UI Design Systems & Prototyping

Product Design, UX & Digital Experience

UI Design Systems & Prototyping

UI Design Systems & Prototyping explains how to create interfaces that look consistent and scale across screens and platforms. It starts with layout, typography, colour and spacing, then moves on to reusable components and design tokens. Later levels cover interactive prototypes, developer handoff and maintaining a design system that many teams share.

Levels: 4
Starting from: 240 credits

Choose a level

Each level is unlocked on its own

Level 1 / 4

Beginner

240 credits

What you will study: Grids and layout, alignment and spacing, typography scales, colour theory and contrast, visual hierarchy, whitespace, icons and imagery, and common interface patterns for web and mobile. Before-and-after examples show how small changes improve a screen.
Who it is for: For beginners in interface design who want screens that look balanced, readable and professional, even before learning any specialist design software in depth. No specialist tools are required at this stage.
What you will be able to do: You can lay out a clean, well-balanced screen, choose readable type and accessible colours and guide attention to the most important elements on a page. Your screens will feel calmer and easier to read.

Level 2 / 4

Intermediate

440 credits

What you will study: Building reusable components, variants and states, auto layout, design tokens for colour, type and spacing, naming conventions and documenting usage rules for each component. Examples walk through building a component from first draft to finished piece.
Who it is for: For designers who can create individual screens and want to work faster and more consistently by reusing well-defined components across a whole product. It is the step from single screens to a shared system.
What you will be able to do: You can build a small, organised component library with tokens and variants, and document it clearly enough for other designers to use it consistently. Your designs will stay consistent as the product grows.

Level 3 / 4

Advanced

740 credits

What you will study: Interactive prototyping, transitions and flows, responsive and adaptive layouts, accessibility checks, annotating designs, preparing specifications and working with developers during the handoff and build. Sample specifications show the level of detail developers find most useful.
Who it is for: For designers who want realistic prototypes that can be tested with users and handed to developers without confusion or endless back-and-forth. It closes the gap between design and development.
What you will be able to do: You can create interactive, responsive prototypes, check them for accessibility and deliver specifications that developers can build from with few questions. Handoffs will be smoother and final builds closer to the design.

Level 4 / 4

Expert

1,040 credits

What you will study: Design system governance, versioning and release notes, contribution models, measuring adoption, aligning design and code libraries, multi-brand theming and keeping documentation current. Examples show how established systems handle growth and change.
Who it is for: For design system leads and senior designers who maintain a shared system used by many teams, products and platforms across an organisation. It suits people responsible for shared design standards.
What you will be able to do: You can run a design system as a living product, manage contributions and releases and keep design and code aligned across many teams and platforms. Your system will remain useful and trusted over many years.

Levels are paid for with credits. Access details are emailed to you, typically within 24 hours, and if nothing arrives after 72 hours, please contact us.

About This Learning Material

UI Design Systems & Prototyping focuses on the visual and structural side of interface design. It is written for designers who want their work to stay consistent as products grow, and for developers who want to understand how design systems are organised.

The Beginner level covers grids, layout, typography, colour, spacing and visual hierarchy. Intermediate introduces reusable components, variants, design tokens and documenting how each element should be used. Advanced focuses on interactive prototypes, responsive behaviour, accessibility checks and preparing clear specifications for development. Expert looks at governing a design system across multiple products and teams, including versioning, contribution processes, adoption and keeping design and code libraries aligned over time.