UI Design and Visual Systems: Building Interfaces That Hold Together

The gap between a prototype and a production-ready design

Many designers can put together a screen that looks good in isolation. The challenge is making the fifteenth screen still feel coherent — and making sure a developer can build from your files without a long back-and-forth.

This course focuses specifically on that gap. Visual consistency, component architecture, and handoff quality are treated as core design skills, not afterthoughts.

Typography and colour as systems, not decorations

Week one starts with type scales. Students often arrive thinking they know typography, but working through optical sizing, line-height ratios, and responsive type behaviour tends to surface gaps quickly. The same applies to colour: we move from picking hex values to building functional colour tokens that work across light and dark modes.

What you will build during the course

• A full design system with documented components and usage guidelines
• Three polished screens using only your own system — no borrowing from UI kits
• A Figma file structured for developer handoff, with auto-layout and variables
• A short written rationale for your design decisions (one page per screen)

Where feedback comes from

Instructor Dariusz Wenta reviews every component library submission with annotated Figma comments. There are also two live critique sessions where students present their systems and field questions — the format is closer to a design review than a classroom presentation.

Dariusz has spent the past six years as a product designer at two B2B SaaS companies. He has built and maintained design systems used by teams of 15 or more designers, which shapes how he teaches component structure and documentation.

Prerequisites

Comfortable with Figma at a basic level. Some prior exposure to UI or graphic design is expected — this course does not teach design fundamentals from scratch.