UI/UX Design Roadmap
A UI/UX designer researches user needs, designs intuitive interfaces, and builds prototypes that guide how a product looks and feels. Day to day, you will sketch wireframes, design high-fidelity screens in Figma, run usability tests, build and maintain design systems, collaborate with developers on handoff, and present design decisions to your team. The 'UX' side is about understanding what to build (research, flows, information architecture) and the 'UI' side is about how it looks (visual design, typography, colour, components).
Learning roadmap
Follow the topics in order, from the fundamentals to advanced skills. Click any topic to learn more.
Beginner
Design Fundamentals
beginnerDesign fundamentals cover the core visual principles — layout, typography, colour, spacing, and hierarchy — that make any design clear, usable, and visually appealing.
Figma
beginnerFigma is a browser-based design tool used by teams to create, prototype, and collaborate on user interfaces. It is the industry standard for UI/UX design.
Wireframing & Information Architecture
beginnerWireframing is creating low-fidelity sketches of a screen's layout — what goes where, how content is structured, and how users navigate. Information architecture is the art of organising and labelling content so people can find what they need.
Intermediate
UX Research
intermediateUX research is the practice of studying real users to understand their needs, behaviours, and pain points. It uses interviews, surveys, usability tests, and data analysis to inform design decisions.
Design Systems
intermediateA design system is a collection of reusable components, patterns, and guidelines that keep a product's design consistent. It includes a component library, colour tokens, typography scales, spacing rules, and documentation.
Prototyping & Interaction Design
intermediatePrototyping is building interactive simulations of your design that look and feel like the real product. Interaction design defines how users interact with UI elements — animations, transitions, micro-interactions.
Usability Testing
intermediateUsability testing is observing real users as they try to complete tasks in your product. It reveals where people get confused, frustrated, or stuck — problems you might never notice on your own.
Accessibility (a11y)
intermediateWeb accessibility means building sites that everyone can use, including people with visual, motor, hearing, or cognitive disabilities. It involves semantic HTML, keyboard navigation, screen reader support, and inclusive design.
Advanced
Developer Handoff
advancedDesign handoff is the process of preparing your designs so developers can build them accurately. It includes specs, assets, component documentation, and clear communication about interactions and edge cases.
Portfolio & Case Studies
advancedA design portfolio showcases your best work through case studies — structured stories that explain the problem, your process, your decisions, and the outcome. It is how designers get hired.