Learn how to research users, understand problems, structure digital experiences, create intuitive interfaces and design products people love to use. Build the creative, analytical and technical skills required to become an industry-ready UI/UX Designer.
UI/UX Design is the practice of creating digital products that are useful, usable, accessible and visually coherent. It combines understanding people, structuring information, designing interactions and communicating visual information effectively.
Focuses on the complete experience a person has while using a product. It includes user research, problem definition, information architecture, interaction design, usability and experience evaluation.
Focuses on the visual and interactive elements of a digital interface, including layout, typography, colour, buttons, forms, icons, spacing and component consistency.
Both disciplines contribute to the same product experience, but they emphasise different design questions.
| Dimension | UX Design | UI Design |
|---|---|---|
| Primary focus | Overall user experience and usability | Visual interface and interaction presentation |
| Key question | Can users achieve their goals easily? | Is the interface clear, consistent and visually effective? |
| Main activities | Research, journey mapping, information architecture and usability testing | Visual design, layout, typography, colour and component design |
| Typical deliverables | Personas, user flows, wireframes, research findings and prototypes | High-fidelity screens, design systems, icons and UI components |
| Success measures | Task success, usability, satisfaction and reduced friction | Visual consistency, clarity, accessibility and interaction quality |
| Common tools | Figma, Miro, FigJam and research platforms | Figma, design libraries, illustration and prototyping tools |
A design process is iterative. Teams often revisit earlier stages as research, testing and implementation reveal new information.
Interviews, surveys, observation, usability research and synthesis.
Content organisation, navigation, hierarchy and user flows.
Low-fidelity layouts, screen structure and interface planning.
Typography, colour, spacing, hierarchy, layout and composition.
Interactive flows, transitions, states and design validation.
Inclusive design, contrast, keyboard access and readable interfaces.
Follow these stages to develop a complete design skill set, from foundational principles to professional design delivery. Expand each stage to explore the concepts, tools and practical outcomes.
Mark a stage complete after practising its concepts. Progress is saved in this browser.
Start by understanding what digital product design involves and how design decisions influence user behaviour, usability and business outcomes.
Understand UI, UX, interaction design, product design and human-centred design.
Learn empathise, define, ideate, prototype and test as an iterative approach.
Use size, weight, contrast, position and spacing to guide attention.
Understand proximity, similarity, continuity, closure and common region.
Balance, alignment, contrast, repetition, proximity and consistency.
Design around user needs, abilities, goals and real-world context.
Learn how visual elements communicate meaning, establish hierarchy and create a consistent interface.
Typeface selection, font pairing, hierarchy, readability, line height and scale.
Hue, saturation, value, colour relationships and semantic colour usage.
Primary, secondary, neutral, success, warning and error palettes.
Consistent spacing scales, padding, margins and layout rhythm.
Columns, gutters, margins, responsive grids and alignment.
Icon consistency, sizing, visual clarity and appropriate use.
Balance, whitespace, grouping, density and visual flow.
Reusable visual rules and predictable interface patterns.
Effective UX design begins with understanding people. Learn to collect evidence, identify patterns and convert research into actionable design insights.
Define research goals, questions, participants and methods.
Prepare open-ended questions and conduct structured conversations.
Collect quantitative feedback and understand survey limitations.
Study user behaviour and context while completing real tasks.
Identify motivations, frustrations, behaviours and recurring themes.
Use measurable data to identify patterns and compare behaviours.
Represent relevant user groups through goals, needs and behaviours.
Organise what users say, think, do and feel.
Before designing a solution, make sure you understand the problem. This stage connects research findings to a clear opportunity and a set of possible design directions.
Define the user, need, context and underlying problem.
Convert problems into open-ended opportunity questions.
Map actions, touchpoints, emotions and pain points over time.
Group research observations into themes and patterns.
Understand what users are trying to accomplish in a situation.
Brainstorming, crazy eights, mind mapping and sketching.
Connect user needs to potential areas for improvement.
Compare ideas against user needs, feasibility and expected value.
Information Architecture (IA) determines how information is organised, labelled and accessed within a digital product.
Structure content and functionality around user needs.
Represent page hierarchy and relationships across a product.
Design primary, secondary, contextual and utility navigation.
Group and label information in meaningful categories.
Understand how users naturally group and label information.
Evaluate whether users can find information in a proposed structure.
Prioritise content based on user tasks and importance.
Support efficient discovery of content and product options.
Interaction design focuses on how users interact with digital products. Wireframes help explore structure and functionality before investing in detailed visual design.
Map the steps and decisions involved in completing a user task.
Represent the sequence of actions required for a specific task.
Understand common patterns for forms, menus, dialogs and navigation.
Explore screen structure using simple shapes and placeholders.
Refine layout, content hierarchy and interaction structure.
Design default, hover, focus, active, disabled, loading and error states.
Communicate system responses and available user actions.
Design small interactions that provide feedback and improve usability.
Figma is widely used for interface design and collaborative prototyping. Learn to create structured, reusable and responsive designs.
Understand files, pages, frames, layers, groups and design panels.
Organise screens and control how elements behave when resized.
Create flexible layouts that adapt to content and screen dimensions.
Build reusable interface elements and component instances.
Manage component states and reusable configurations.
Organise colour, typography and design tokens.
Adapt interfaces across mobile, tablet and desktop breakpoints.
Prepare organised files and communicate implementation details.
Prototypes allow designers to test ideas, demonstrate flows and communicate intended behaviour before a product is developed.
Understand fidelity levels and prototype use cases.
Connect screens and create realistic navigation flows.
Configure triggers, actions, overlays and interactive components.
Use navigation transitions and screen-to-screen behaviour.
Understand timing, easing, continuity and purposeful animation.
Design meaningful feedback for actions and system states.
Use prototypes to evaluate task completion and interaction clarity.
Demonstrate design decisions through interactive walkthroughs.
A visually attractive interface is not necessarily usable. Learn how to evaluate design quality, identify friction and improve accessibility for different users and contexts.
Plan sessions, define tasks, observe users and document findings.
Evaluate interfaces using established usability principles.
Understand visibility, consistency, error prevention and user control.
Measure completion, errors, time and user confidence.
Understand inclusive design and barriers faced by different users.
Learn perceivable, operable, understandable and robust design.
Check text and interface contrast against accessibility requirements.
Understand screen readers, keyboard navigation and semantic structure.
Design systems help teams maintain consistency, improve collaboration and scale product experiences across multiple screens and platforms.
Understand foundations, components, patterns and documentation.
Organise colour, typography, spacing, radius and elevation values.
Create reusable buttons, inputs, cards, menus and navigation.
Define hover, focus, active, disabled, loading and error variants.
Understand atoms, molecules, organisms, templates and pages.
Design layouts that adapt to screen size and content.
Document component usage, behaviour and accessibility guidance.
Maintain quality, consistency and controlled evolution of components.
UI/UX Designers work closely with developers to ensure that design intent is translated into working interfaces. Basic technical understanding improves communication and feasibility.
Understand page structure, elements, headings, forms and semantic markup.
Understand styling, selectors, spacing, typography and responsive layouts.
Understand basic interactions, events and dynamic interface behaviour.
Understand breakpoints, flexible layouts and mobile-first principles.
Prepare specifications, assets, measurements and component states.
Discuss feasibility, constraints, implementation questions and trade-offs.
Compare implemented interfaces against approved designs.
Understand performance, browser, platform and technical limitations.
A strong UI/UX portfolio explains how you approach problems, understand users, make design decisions and evaluate outcomes. It should communicate your thinking, not just display attractive screens.
Organise projects, case studies, role descriptions and outcomes.
Explain the problem, research, process, design decisions and results.
Communicate concepts and design rationale clearly.
Present research findings and design iterations through a coherent narrative.
Highlight design tools, research skills and project contributions.
Practise design challenges, critique, research and behavioural questions.
No roadmap stages match your search.
Learn the tools that support research, interface design, prototyping, collaboration and developer handoff. You do not need to master every tool at once.
| Tool | Primary Purpose | Priority | What to Learn |
|---|---|---|---|
| Figma | UI design, collaboration and prototyping | Essential | Frames, components, Auto Layout, variables and prototypes |
| FigJam | Collaborative research and ideation | Highly useful | Workshops, brainstorming, affinity maps and journey maps |
| Miro | Whiteboarding and UX collaboration | Useful | Research synthesis, diagrams and collaborative planning |
| Adobe Illustrator | Vector graphics and illustration | Role-dependent | Shapes, icons, vector editing and visual assets |
| Adobe Photoshop | Image editing and visual assets | Role-dependent | Image manipulation, retouching and asset preparation |
| Notion | Documentation and project organisation | Useful | Design notes, research documentation and project tracking |
| Maze | Usability and prototype testing | Useful | Test planning, task flows and user feedback |
| Optimal Workshop | Information architecture research | Specialised | Card sorting, tree testing and navigation research |
| Webflow | Visual website development | Role-dependent | Responsive pages and no-code implementation |
| HTML and CSS | Understanding interface implementation | Strong advantage | Semantic structure, layout and responsive styling |
| Storybook | Component documentation | Advanced | Component libraries, states and documentation |
| Lighthouse | Web quality and performance audits | Useful | Accessibility, performance and best-practice checks |
These principles help designers evaluate interfaces and make consistent decisions across different products.
| Principle | Meaning | Practical Application |
|---|---|---|
| Visual Hierarchy | Organise elements according to their importance. | Make primary actions and key information easy to identify. |
| Consistency | Use predictable patterns across the interface. | Maintain consistent buttons, navigation and components. |
| Feedback | Show users the result of their actions. | Provide loading, success, error and confirmation states. |
| Affordance | Make possible interactions understandable. | Use recognisable controls and clear interaction cues. |
| Accessibility | Make experiences usable by people with diverse abilities. | Support keyboard navigation, readable text and sufficient contrast. |
| Recognition over Recall | Reduce the need for users to remember information. | Show options, labels and contextual guidance. |
| Error Prevention | Reduce the likelihood of mistakes. | Use validation, clear instructions and safe defaults. |
| Progressive Disclosure | Reveal complexity when it becomes relevant. | Keep primary experiences simple while offering advanced options. |
| Fitts's Law | Target size and distance affect interaction time. | Make important controls easy to reach and select. |
| Hick's Law | More choices can increase decision time. | Organise options and reduce unnecessary choices. |
Build a portfolio that demonstrates research, design thinking, interface craft, interaction design and usability evaluation.
Design a personal portfolio with a clear information hierarchy, project sections and responsive layouts.
Create a clean authentication experience with form validation, error states and onboarding.
Design restaurant discovery, menus, cart and checkout screens.
Improve product discovery, product details, filtering and checkout usability.
Create search, destination selection, booking and confirmation screens.
Design a learner dashboard with course progress, assignments and learning activity.
Interview users and identify friction in account management and money transfers.
Design a patient-friendly appointment booking and doctor discovery experience.
Create a data-heavy dashboard with clear hierarchy, filters and visualisations.
Build a reusable component library with typography, colour, spacing and states.
Evaluate a website for accessibility issues and propose evidence-based improvements.
Design and prototype a complete multi-screen application with realistic interactions.
Test a prototype with participants, analyse findings and document design iterations.
Create a consistent desktop, tablet and mobile experience with responsive behaviour.
Take a product from research and problem definition through wireframes, UI, prototype and usability testing.
See how the different stages connect through one practical product scenario.
Students using an online learning platform struggle to find relevant courses, understand their learning progress and continue lessons across devices. The goal is to make the experience easier to navigate and more engaging.
| Stage | Designer Activity | Expected Output |
|---|---|---|
| Research | Interview learners and observe how they navigate the platform. | Research insights and user needs |
| Define | Identify major usability problems and user goals. | Problem statement and design opportunities |
| Ideate | Explore ways to improve course discovery and learning continuity. | Concepts and design alternatives |
| Information architecture | Organise courses, learning paths and progress information. | Sitemap and navigation structure |
| Wireframing | Design the dashboard, course page and learning interface. | Low-fidelity wireframes |
| UI design | Apply visual styles, components and responsive layouts. | High-fidelity screens |
| Prototyping | Connect screens and simulate key learner interactions. | Clickable prototype |
| Testing | Observe learners completing key tasks and collect feedback. | Usability findings and design iterations |
| Handoff | Document components, states and implementation requirements. | Developer-ready design file |
Percentage of users who successfully complete a defined task.
Time required to complete a task in a usability test.
Frequency of errors or failed interactions during a task.
UI/UX offers multiple specialisations. Your direction can depend on whether you prefer research, visual design, interaction, systems or broader product experience.
Focuses on interface layouts, visual systems, typography and component design.
Focuses on user research, journeys, usability and experience design.
Works across discovery, UX, UI and product problem-solving.
Plans and conducts research to understand user needs and behaviour.
Designs interaction patterns, behaviours, transitions and feedback.
Focuses on visual communication, graphics, layouts and aesthetics.
Creates clear interface language, instructions and content experiences.
Builds reusable components, design tokens and scalable design standards.
Leads design teams, quality standards and design strategy.
This illustrative plan combines structured learning with hands-on exercises. Adjust the pace based on your experience and available time.
| Weeks | Focus Area | Learning Outcome |
|---|---|---|
| 1–2 | Design fundamentals and visual design | Understand UI/UX principles, typography, colour and layout. |
| 3–4 | User research and problem definition | Conduct interviews, create personas and define user problems. |
| 5–6 | Information architecture and interaction design | Create sitemaps, user flows and wireframes. |
| 7–8 | Figma and high-fidelity UI design | Build polished screens and reusable components. |
| 9–10 | Prototyping and usability testing | Create interactive prototypes and evaluate usability. |
| 11–12 | Accessibility and design systems | Apply inclusive design principles and create reusable components. |
| 13–14 | Responsive design and developer handoff | Prepare responsive layouts and technical design documentation. |
| 15–16 | Portfolio and capstone project | Complete and present an end-to-end design case study. |
Estimate the time required based on your weekly study commitment.
Assess whether you can apply the skills independently. Tick an item only when you have practised it.
Attempt these questions to evaluate your understanding of design fundamentals and UX practices.
Interviews often assess design fundamentals, problem-solving, user empathy, visual execution and the ability to explain design decisions.
| Term | Meaning |
|---|---|
| UI | User Interface. |
| UX | User Experience. |
| HCI | Human-Computer Interaction. |
| IA | Information Architecture. |
| CTA | Call to Action. |
| UXR | User Experience Research. |
| UXD | User Experience Design. |
| UI Kit | A collection of interface elements and visual assets. |
| Wireframe | A structural representation of a screen or page. |
| Prototype | An interactive or simulated representation of a design. |
| Persona | A research-informed representation of a user segment. |
| Usability | How effectively, efficiently and satisfactorily users achieve goals. |
| Affordance | A property or cue that suggests how an element can be used. |
| Design System | A structured collection of design foundations, components and guidance. |
| Design Token | A named design value such as colour, spacing or typography. |
| Responsive Design | Design that adapts to different screen sizes and contexts. |
| Accessibility | Designing experiences that can be used by people with diverse abilities. |
| WCAG | Web Content Accessibility Guidelines. |
| HMW | How Might We question used to frame design opportunities. |
| JTBD | Jobs to Be Done. |
| Hi-Fi | High-fidelity design or prototype. |
| Lo-Fi | Low-fidelity design or prototype. |
Yes. A formal design degree is not universally required. A strong understanding of design principles, research methods, practical projects and a well-documented portfolio can demonstrate your ability to perform the role.
No. Coding is not mandatory for most UI/UX design roles. However, basic HTML and CSS knowledge helps designers understand implementation constraints and communicate more effectively with developers.
Begin with design fundamentals and UX principles, then develop visual interface skills. Understanding users and problems gives context to the interfaces you create.
Figma is an important tool, but knowing the software alone is not enough. You also need research, problem-solving, visual design, interaction design, accessibility and usability skills.
Start with two or three well-documented case studies. Explain the problem, your research, design process, iterations and decisions. A few strong projects are more valuable than many unexplained screen designs.
A wireframe communicates the structure and layout of a screen. A prototype simulates how a design or set of screens behaves when a user interacts with it.
A design system is a collection of reusable design foundations, components, patterns and documentation. It helps teams maintain consistency and scale product experiences.
UI/UX Designers work in SaaS, fintech, healthcare, e-commerce, education technology, banking, media, logistics, consulting, enterprise software and many other sectors.
You can specialise in UX research, interaction design, visual design, design systems, accessibility, product design or UX leadership. You can also deepen your skills in frontend implementation or product strategy.
Use these official and established resources to deepen your understanding of interface design, accessibility, usability and prototyping.
Learn Figma fundamentals, interface design, components and prototyping.
Explore Figma Learning Resources →Explore UX research, usability, interaction design and user-centred design principles.
Explore UX Articles →Learn accessibility fundamentals and inclusive web design practices.
Explore Accessibility Resources →Understand the standards and principles used to evaluate web accessibility.
Read WCAG Guidance →Explore interface patterns, components, layout and design system guidance.
Explore Material Design →Learn platform-specific design principles and interface conventions.
Explore Apple HIG →Explore design principles and resources from Google's design ecosystem.
Explore Google Design →Learn about web accessibility, performance and modern frontend experiences.
Explore Web.dev →Explore related roadmaps to build complementary technical, analytical and product skills.
Explore Python, statistics, data analysis and machine learning.
Explore Roadmap →Explore AI engineering, machine learning systems and deployment.
Explore Roadmap →Discover more technical and career-oriented learning resources.
Visit edSlash →Additional roadmap links can be added here as the series pages are published.
© 2021 edSlash. All Rights Reserved.
