Visual Design Fundamentals

Visual Design Fundamentals treats visual design as a system of decisions, not personal taste. Across four one-day modules, colour, typography, grids and spatial systems, and components, it grounds each topic in cultural references, tests it through hands-on exercises, and leaves room for individual exploration. Throughout, design decisions are connected to design tokens and to the code developers consume, so visual craft becomes structured, defensible, and reusable.

It is designed for a mixed audience: UX designers developing their visual craft and graphic designers moving into digital. Sessions combine short theory grounded in design history with practical exercises and open critique, so participants leave able to make and defend visual decisions.

• Colour: perception and interaction, colour models (RGB, HSL, HSB)
• Colour in interfaces: roles, WCAG 2.1 AA contrast, colour blindness, dark mode
• Colour as a system: palette construction, tonal scales, semantic tokens
• Typography: anatomy, classification, type rendering on screens, variable fonts
• Type as a system: modular scale, type tokens, pairing, responsive typography
• Grids: history, column / modular / baseline grids, the 8pt grid, responsive behaviour
• Spatial systems: spacing tokens, the 12-column grid, breakpoints
• Components: atomic design, the component as a contract, the eight interactive states
• Variants vs complexity; composition vs configuration
• Hands-on exercises and open critique using a shared design vocabulary

At the end of the training, learners will be able to…

• build an accessible colour system with tonal scales and semantic tokens that meet WCAG 2.1 AA
• construct a modular type scale and document it as reusable type tokens
• design responsive layouts using a 12-column grid and an 8pt spatial system
• build a component with all interactive states, variants, and a clear design-to-code spec
• critique visual design using a precise, shared vocabulary rather than personal taste

Lecture, real-world scenarious / examples, practical exercises, group work