UX and Responsive Web Design Course

Lesson 1 • Design Thinking Process

Introduces the five-stage design thinking framework as a problem-solving method. Provides the iterative mindset applied in all subsequent chapters.

Lesson 2 • What UX Design Really Means

Defines UX beyond aesthetics, covering usability, utility, and desirability. Establishes the vocabulary used throughout the course.

Lesson 3 • Accessibility and Inclusive Design

Establishes accessibility as a core design requirement, not an afterthought. Introduces global content accessibility guidelines and inclusive design principles.

Lesson 1 • Surveys and Quantitative Methods

Introduces survey design, usability benchmarking, and analytics interpretation. Complements qualitative findings with measurable behavioural data.

Lesson 2 • Interviews and Contextual Inquiry

Teaches structured and semi-structured interview techniques alongside in-context observation. Builds skills for capturing authentic user behaviour and motivations.

Lesson 3 • Planning a Research Study

Covers research goals, scope, and method selection before fieldwork begins. Ensures research questions align with design decisions to be made.

Lesson 1 • Site Maps and Content Hierarchies

Produces formal site map documents that communicate structure to stakeholders and developers. Aligns content hierarchy with user mental models from research.

Lesson 2 • Card Sorting and Tree Testing

Teaches open and closed card sorting to validate category structures with users. Tree testing verifies navigation labels before visual design is applied.

Lesson 3 • Designing Navigation Systems

Covers global, local, and contextual navigation patterns for web and mobile. Connects navigation design to user task flows established in research.

Lesson 1 • Digital Wireframing Tools

Covers industry-standard wireframing tools for creating mid-fidelity screen layouts. Builds tool fluency applied in prototyping and handoff stages.

Lesson 2 • Sketching and Low-Fidelity Wireframes

Introduces rapid sketching and paper wireframing as fast ideation tools. Low-fidelity artifacts communicate layout without distracting stakeholders with visual polish.

Lesson 3 • Building Interactive Prototypes

Connects wireframes into clickable flows that simulate real product behaviour. Prototypes are scoped to test specific user tasks identified in research.

Lesson 4 • Usability Testing with Prototypes

Applies prototypes in moderated and unmoderated usability tests to validate design decisions. Closes the research-design loop before visual design investment.

Lesson 1 • Layout, Spacing, and Visual Hierarchy

Applies grid systems, spacing scales, and visual weight to direct user attention. Consistent spacing and hierarchy reduce cognitive load and improve scannability.

Lesson 2 • Typography for Digital Interfaces

Covers typeface selection, scale, line height, and contrast for screen readability. Typography decisions directly affect accessibility and brand perception.

Lesson 3 • Colour Theory and UI Colour Systems

Teaches colour psychology, contrast requirements, and systematic palette construction. A structured colour system ensures consistency across all interface states.

Lesson 4 • Iconography and Imagery

Covers icon design principles, image selection, and illustration style for UI contexts. Visual assets must reinforce meaning without creating ambiguity.

Lesson 1 • Media Queries and Breakpoints

Applies min-width and max-width queries to adapt layouts at defined breakpoints. Covers modern range syntax and container queries for component-level responsiveness.

Lesson 2 • CSS Flexbox for Responsive Layouts

Teaches Flexbox axes, alignment, and wrapping to build one-dimensional responsive components. Flexbox is applied to navigation bars, card rows, and form layouts.

Lesson 3 • Responsive Images and Media

Teaches srcset, sizes, and the picture element to serve appropriately sized images. Optimised media delivery improves performance on all device types.

Lesson 4 • CSS Grid for Complex Layouts

Covers Grid template areas, auto-placement, and named lines for two-dimensional layouts. Grid enables page-level structure that Flexbox alone cannot achieve.

Lesson 1 • Advanced Selectors and Specificity

Teaches pseudo-classes, pseudo-elements, and specificity management for maintainable CSS. Reduces style conflicts common in large responsive codebases.

Lesson 2 • CSS Architecture and Scalability

Introduces BEM, utility-first, and CSS Modules as methodologies for scalable stylesheets. Scalable architecture prevents specificity conflicts in large responsive projects.

Lesson 3 • CSS Transitions and Micro-Animations

Applies transition properties to create smooth state changes that reinforce interaction feedback. Micro-animations improve perceived performance and guide user attention.

Lesson 4 • CSS Keyframe Animations

Builds complex multi-step animations using @keyframes for loading states and onboarding flows. Covers performance-safe properties and animation orchestration.

Lesson 1 • Design Handoff Best Practices

Covers annotation, redline specs, and asset export workflows that reduce developer ambiguity. Accurate handoff documents prevent costly implementation errors.

Lesson 2 • Responsive Design QA and Testing

Applies cross-browser and cross-device testing to verify responsive behaviour matches design intent. QA closes the gap between design specifications and live implementation.

Lesson 3 • UX Metrics and Success Measurement

Defines quantitative and qualitative metrics that connect UX decisions to business outcomes. Metrics established here guide post-launch evaluation in the final project.

Lesson 4 • Capstone Project and Portfolio Presentation

Synthesises all course skills into a complete UX and responsive web design case study. Portfolio presentation prepares students for professional design interviews.