# Interactive web design courses

Practical courses in visual hierarchy, colour and motion for developers. Learn by editing live interfaces, with feedback and an optional completion certificate. Colour and motion require individual Vault access. The entire visual hierarchy course is free, with every lab available before sign-in. A free account saves progress across devices and enables certificates.

# Visual hierarchy for developers

Turn a busy page into a clear one. Move content, edit typography and spacing, balance actions, and make your decisions work on mobile.

Learn visual hierarchy through practical design decisions. Start here before exploring colour and motion.

About 35 minutes. Foundations. 6 practical labs.

## Prerequisites

Basic HTML and CSS familiarity helps. No GSAP experience or design software needed.

The interactive labs require a laptop or desktop with a browser window at least 1024px wide. The course outline is available on any device.

## Curriculum

1. Order before decoration
2. Give type a job
3. Make space mean something
4. Choose what matters
5. Keep the hierarchy on mobile
6. A fresh brief

## Access

The entire course is free, including every lab and the completion certificate. Start without signing in; browser progress stays on this device. Use a free account to save across devices and issue your certificate. No purchase required.

Start the course at https://gsapvault.com/courses/visual-hierarchy-for-developers/learn. Overview: https://gsapvault.com/courses/visual-hierarchy-for-developers.

Complete the practical checks in every lab to unlock an optional shareable certificate of completion. This is not an accredited qualification.


# Colour for developers

Build interface palettes from colour theory and photography. Sample an image, assign colour roles, and balance emphasis, contrast and status.

Practical colour theory for interfaces: palette relationships, colours drawn from photography, reusable roles and readable combinations. Automated checks assess the supplied brief, not whether a palette is beautiful.

About 85 minutes. Applied design. 8 practical labs.

## Prerequisites

Basic HTML and CSS familiarity. Visual hierarchy for developers is recommended preparation; no colour theory experience needed.

The interactive labs require a laptop or desktop with a browser window at least 1024px wide. The course outline is available on any device.

## Curriculum

1. Give colours a job
2. Build a related palette
3. Build from a photograph
4. Separate the surfaces
5. Check the actual pair
6. Spend the accent carefully
7. Make status understandable
8. A fresh colour brief

## Access

Every lab is included with each individual learner’s Vault access. Each learner needs their own account and Vault access. This course has no separate checkout.

Start the course at https://gsapvault.com/courses/colour-for-developers/learn. Overview: https://gsapvault.com/courses/colour-for-developers.

Complete the practical checks in every lab to unlock an optional shareable certificate of completion. This is not an accredited qualification.


# Motion design for developers

Design purposeful interface motion. Shape timing, easing and sequence, handle interruptions, and adapt for smaller screens and reduced motion.

Everyday page and interface motion with GSAP. Focus on design decisions and usable behaviour; advanced scroll choreography and WebGL are outside this course.

About 75 minutes. Applied motion. 7 practical labs.

## Prerequisites

Basic HTML, CSS and a little JavaScript. The free visual hierarchy course is recommended; GSAP expertise is not required.

The interactive labs require a laptop or desktop with a browser window at least 1024px wide. The course outline is available on any device.

## Curriculum

1. Give motion a purpose
2. Make movement feel right
3. Direct attention with sequence
4. Build rhythm with stagger
5. Handle interruptions
6. Adapt the motion
7. A fresh brief

## Access

Every lab is included with each individual learner’s Vault access. Each learner needs their own account and Vault access. This course has no separate checkout.

Start the course at https://gsapvault.com/courses/motion-design-for-developers/learn. Overview: https://gsapvault.com/courses/motion-design-for-developers.

Complete the practical checks in every lab to unlock an optional shareable certificate of completion. This is not an accredited qualification.