Workshops and Training

Matthias Ott conducting a workshop

I offer workshops and training events for companies and individuals where I share my knowledge and experience in the field of user experience design and UI engineering for the Web.

All workshops are aimed at designers and UX practitioners who are open to working with code, but also developers and UI engineers who believe that a better understanding of design patterns and principles will improve the quality of their user interfaces.

Through experienced guidance and by combining basic theory and practical applications with hands-on exercises and discussions in an environment of collaborative learning, you will acquire the muscle memory and confidence to apply what you have learned in your daily work.

All training materials, supporting notes, and resources like links are shared immediately after the workshop.

Below you will find my current, prewritten workshops. If you need an individual training package to suit your needs or want me to conduct a workshop at your company or event, please get in touch.


Responsive Web Design Masterclass

Responsive Web Design (RWD) has become the industry standard for building fluid, resilient experiences for today’s multi-device Web. In this masterclass workshop, we will dive deep into the concepts behind responsive design as well as the practical applications when building accessible, performant websites. From fluid layouts to typography to design systems and processes – Responsive Web Design challenges teams on multiple levels. Whether you are a designer or a developer, this workshop will teach you all you need to take the overall quality of your work and the work of your whole team to the next level.

What you will learn:

  • Responsive Web Design: The history and the basic concept
  • Fluid layouts, flexible images, and media queries
  • The business case for RWD
  • Mobile first? Content first? And why?
  • Responsive typography and flexible typesetting
  • The new CSS layout: Going beyond 12 columns with intrinsic web design and algorithmic layouts
  • RWD and performance
  • Building accessible, inclusive responsive designs
  • What is progressive enhancement?
  • Beyond pages: Responsive components and design systems
  • How pattern libraries & style guide driven development can improve your project
  • The power of prototyping and designing in the browser
  • The elements of a modern Responsive Web Design workflow


UX Prototyping for the Web

Prototyping is an essential part of the modern design process. It allows you to test your assumptions and explore different materials and possible solutions. This workshop gives you an introduction into the basic theory and practical applications of prototyping user experiences. You’ll learn how to prototype effectively, how to test your prototypes with users, and how your whole team can benefit from a prototyping mindset. With many exercises and a lot of collaborative hands-on work, you will create a wide range of different prototypes yourself, so that you leave the workshop with the practical skills you need to leverage the power of prototyping in your digital projects.

What you will learn:

  • The fundamentals of sketching and prototyping user interfaces
  • The benefits of iterative prototyping
  • What it takes to build effective prototypes
  • Prototyping fidelity: How detailed should your prototypes be?
  • Popular prototyping tools compared: What are their strengths?
  • Content-First Prototyping
  • Prototyping fluid, responsive layouts
  • HTML prototyping with a tool like CodePen
  • Prototyping component variations
  • Prototyping typography
  • Prototyping UI animation
  • Testing your prototypes with users


Advanced Design and Prototyping with Adobe XD

Photo: Mattia Compagnucci

Since 2018, I am running in-depth workshops and trainings for Adobe on designing and prototyping with Adobe XD, both at community events as well as in-house. The workshop is available in two formats: For beginners and for advances users, including prototyping with Auto Animate, gamepad triggers, and for Voice UI.

For more information, see this blog post on the Adobe website or get in touch.