Before you build anything, you need to understand how web design actually works as a process and a profession. This module covers the difference between designers and developers, the stages of a web project, and the five stages of design thinking that carry a site from brief to launch. You'll learn how to interpret a client brief and turn it into clear site goals, and build a reusable design brief template you'll use throughout the course.

Strong websites start with strong visual foundations. This module covers the design principles that make a page work, hierarchy, contrast, alignment, and Gestalt theory, alongside colour theory, typography, and imagery. You'll learn how these choices shape brand perception and user trust, and you'll build a complete brand style guide from a client brief.

A website can look good and still be frustrating to use. This module covers the thinking that makes a site genuinely usable: UX principles, information architecture, accessibility, and responsive design across breakpoints. You'll learn to map a site's structure, evaluate a page for usability issues, and build low-fidelity wireframes for desktop, tablet, and mobile.

Figma is the industry-standard tool for designing and prototyping websites, and this module makes you fluent in it. You'll learn the workspace, auto-layout, and how to build reusable component libraries with variants and properties. By the end you'll be able to create interactive prototypes that demonstrate real user flows across multiple screens.

To build well in a low-code platform, it helps to understand what's happening underneath. This module covers how browsers render pages, how HTML, CSS, Flexbox, and Grid actually work, and how those foundations show up in modern website builders. You'll compare the major low-code and AI website platforms and set up your Framer account ready to build.

This is where your designs become real, published websites. This module takes you through Framer properly: the canvas, layout with Stacks and Grids, global styles, components, and Framer's breakpoint system for responsive design. You'll learn to add interactions and scroll animations, and you'll build a responsive home page from scratch without relying on a template.

AI can build a web page in seconds. Knowing whether that page is any good is the actual skill. This module teaches you to work with AI tools like Framer AI professionally: structured prompting, evaluating output against a brief and brand standards, and knowing when to accept, refine, or reject what it produces. You'll also work through the ethics of AI-assisted design, from authorship to client transparency, and document your process in a professional prompt log.

The difference between an amateur site and a professional one is often in the final 10%. This module covers what it takes to publish properly: custom HTML and CSS in Framer, performance optimisation against Core Web Vitals, accessibility auditing, and SEO setup with metadata and Open Graph tags. You'll also learn to use LLMs to generate and implement custom code, and work through a full pre-launch checklist.