Adobe XD UI Design Workshop at University of Warwick
In February 2022, Noran Design founder Nicole Fung ran a UI design fundamentals workshop at the University of Warwick using Adobe XD — the second in a series of design tool workshops delivered to undergraduate and postgraduate students.
Where the Illustrator workshop in January focused on vector fundamentals and graphic craft, this session shifted focus to interface design — how you think about and design digital experiences that actual users interact with.
[INSERT WORKSHOP PHOTOS]
Why UI design is worth learning early
UI design is one of the most transferable skills in the design toolkit. Whether you're building a product, a website, a mobile app, or a client-facing dashboard — the ability to translate an idea into a structured, usable interface is genuinely valuable.
Adobe XD was the tool of choice for this workshop: at the time, it offered an accessible entry point into UI design with a clean interface, solid prototyping capabilities, and a component system that introduced students to the concept of design at scale rather than just individual screens.
What we covered
Artboards and responsive frames — setting up screens for different device sizes and understanding how layout decisions change across breakpoints. A lot of students had only ever thought about design as a single canvas. This session introduced the idea that the same content needs to work across very different screen contexts.
Wireframing — the discipline of working out structure and hierarchy before adding visual polish. We walked through the difference between low-fidelity wireframes (layout and logic) and high-fidelity mockups (design and detail), and why skipping straight to the latter is usually a mistake.
Components and repeat grids — one of XD's most useful features. Once a button, card, or navigation element is defined as a component, you can update it everywhere at once. This is a small taste of how professional design systems work — and it changes how students think about building interfaces.
Prototyping and interactive flows — connecting artboards to create a clickable prototype. This is often the moment students realise that UI design isn't just about what things look like, but how they work. The act of clicking through a prototype exposes problems that look invisible in a static mockup.
Design principles in practice — throughout the session, we applied core principles: visual hierarchy, contrast, alignment, spacing, and consistency. Not as abstract rules but as decisions made in real time with real examples.
What the session produced
Students worked on a short brief — designing a three-to-four screen flow for a simple app concept of their choice. By the end, most had a basic but functional clickable prototype that demonstrated the key concepts from the session.
The most common realisation across the room: good UI design is mostly about making decisions with confidence. The tools are learnable. The hard part is developing the judgement to know when a layout is working and when it isn't — and that only comes from practice and honest critique.
The session was run in partnership with the Warwick Graphic Design & Marketing Society (GDMS).
What attendees said
"I found the workshop very insightful. It will surely help me in my presentations and I intend to use this software in personal projects and pitches. I highly recommend everyone to attend the workshops organised by GDMS!" — Kristof
"I really liked Nicole's workshop as she gave a nice overview of the basics of Adobe XD." — Carina
What's changed since 2022
Adobe XD has since been discontinued as an actively developed product — Adobe shifted focus to Figma following its (ultimately blocked) acquisition attempt. Today, Figma is the industry standard for UI and UX design, and most of what was covered in this workshop maps directly to Figma's toolset. The concepts — components, prototyping, responsive frames, hierarchy — are platform-agnostic. The tool changes; the thinking doesn't.
If you're learning UI design today, start in Figma. The principles from this workshop apply directly.
Noran Design runs workshops and educational sessions for universities, accelerators, and professional communities. If you're interested in bringing a design workshop to your organisation, get in touch.
