How to become a UI/UX Designer

A complete, honest roadmap for the skills UI/UX designers actually use, from design thinking and user research through information architecture, interaction and visual design, prototyping, design systems, accessibility, usability testing, portfolio, and AI in design. It runs top to bottom, foundational to advanced, so you always know what comes next. Free to read, no signup required.

1. 01

   Step 01Foundations: design thinking & the process

   Great design isn’t decoration. It’s solving real problems for real people. Start with the mindset and process before any tool or visual polish.

   • UX vs UI: UX is how it works and feels to use; UI is how it looks and how you interact with the surface. Most roles blend them, but they’re distinct crafts.
   • Design thinking: A problem-solving approach (empathise, define, ideate, prototype, test) that is human-centred and iterative rather than linear.
   • The design process: Frameworks like the double diamond (discover, define, develop, deliver) that structure moving from a fuzzy problem to a validated solution.
   • Solving the right problem: Understanding a problem deeply before designing. A beautiful solution to the wrong problem still fails.

   Tools come and go; the process and problem-solving mindset endure. Designers who can frame and solve a real user problem stay valuable no matter which software is in fashion.

   UX vs UIDesign thinkingDouble diamondHuman-centred designProblem framing
2. 02

   Step 02User research

   Design starts with understanding people. Research is how you replace assumptions about users with evidence, the foundation everything else builds on.

   • Research methods: Interviews, surveys, contextual inquiry, and observation, plus knowing which method fits which question.
   • Qualitative vs quantitative: The “why” behind behaviour versus the “how many”, and how they complement each other.
   • Synthesis: Turning raw research into insights: affinity mapping, themes, and separating what users say from what they do.
   • Personas & journey maps: Modelling who you’re designing for and mapping their experience to expose pain points and opportunities.

   User interviewsSurveysContextual inquirySynthesisPersonasJourney maps
3. 03

   Step 03Information architecture

   If people can’t find or understand things, nothing else matters. Information architecture is the invisible structure that makes a product make sense.

   • Structuring content: Organising information so it matches how users think, not how the org is structured internally.
   • Navigation: Designing menus, hierarchies, and wayfinding so people always know where they are and how to get where they’re going.
   • Card sorting: A research technique for learning how users naturally group and label content.
   • User flows: Mapping the paths users take to complete tasks, and smoothing the friction along them.

   Content structureNavigationCard sortingTaxonomyUser flows
4. 04

   Step 04Interaction design

   Interaction design is how a product responds to people: the behaviour, feedback, and flow that make it feel intuitive rather than confusing.

   • Flows & states: Designing every state (empty, loading, error, success), not only the happy path, because real products live in the edge cases.
   • Affordances & feedback: Making it obvious what’s interactive and giving clear feedback for every action.
   • Patterns & conventions: Using established interaction patterns so products feel familiar, and inventing new ones only when it truly helps.
   • Micro-interactions: The small moments (a toggle, a transition, a confirmation) that make an experience feel considered.

   Flows & statesAffordancesFeedbackInteraction patternsMicro-interactions
5. 05

   Step 05Visual design fundamentals

   The visual layer carries usability and trust, not only aesthetics. These fundamentals are timeless; they apply whether you design in any tool or era.

   • Typography: Type choice, hierarchy, scale, and readability, often the biggest factor in how polished and legible a design feels.
   • Colour: Colour theory, palettes, meaning, and using colour for hierarchy and state, with contrast that keeps it usable.
   • Layout & spacing: Grids, alignment, and consistent spacing that create order and guide the eye.
   • Visual hierarchy: Directing attention so the most important thing reads first. This is the core skill beneath every good layout.

   TypographyColour theoryLayout & gridsSpacingVisual hierarchyContrast
6. 06

   Step 06Wireframing & prototyping

   Ideas become testable when you make them tangible. Moving from rough sketches to interactive prototypes is the everyday craft of design work.

   • Fidelity spectrum: Low-fidelity wireframes to explore structure quickly, high-fidelity mockups to nail the details, using the right fidelity for the stage.
   • Design tools: Fluency in a modern design tool (Figma and its peers) for UI design and collaboration. The tool is a means, not the skill itself.
   • Interactive prototypes: Wiring screens into clickable flows so ideas can be experienced and tested, not merely viewed.
   • Iteration: Treating designs as drafts (sketch, test, refine) rather than trying to get it perfect in one pass.

   WireframingLow vs high fidelityFigma & peersPrototypingIteration
7. 07

   Step 07Design systems

   At any real scale, design needs consistency and reuse. Design systems are how teams keep a product coherent and ship faster, and they’re a core professional skill.

   • Components & patterns: Reusable building blocks (buttons, inputs, cards) with defined states, assembled into consistent interfaces.
   • Design tokens: Centralised colour, type, and spacing values that keep a whole product consistent and make theming trivial.
   • Documentation: Guidelines for when and how to use each component so a team applies the system consistently.
   • Working with engineering: Understanding how a design system maps to coded components, so design and build stay in sync.

   ComponentsDesign tokensConsistencyDocumentationDesign-dev parity
8. 08

   Step 08Accessibility & inclusive design

   Good design works for everyone. Accessibility is both an ethical baseline and, increasingly, a legal expectation, and it makes products better for all users.

   • WCAG basics: The core accessibility guidelines (contrast, text alternatives, clear labels) as a working checklist.
   • Designing for assistive tech: Considering screen readers, keyboard navigation, and focus order from the design stage, not as a retrofit.
   • Inclusive design: Designing for the full range of human diversity (ability, context, language) so more people can use what you build.
   • Colour & contrast: Ensuring information isn’t conveyed by colour alone and that text meets contrast requirements.

   Designing for accessibility from the start is far cheaper than retrofitting it, and the constraints routinely produce clearer, simpler designs for everyone.

   WCAGScreen readersKeyboard navigationInclusive designContrast
9. 09

   Step 09Usability testing & evaluation

   You are not your user. Testing designs with real people is how you find out whether they actually work, and it’s a skill that visibly separates strong designers.

   • Usability testing: Watching real users attempt real tasks to uncover confusion you can’t see yourself.
   • Heuristic evaluation: Assessing a design against established usability principles to catch common issues quickly.
   • Iterating on findings: Turning what you observe into concrete design changes, then testing again.
   • Measuring success: Task success, time, and error rates, plus qualitative signals, to know if a design is improving.

   Usability testingHeuristicsIterationTask successEvaluation
10. 10

    Step 10Collaboration & handoff

    Designers rarely work alone. Collaborating with product and engineering, and handing off cleanly, is what turns a beautiful file into a shipped product.

    • Working with PM & engineering: Designing within real constraints, bringing collaborators in early, and deciding together as a triad.
    • Design handoff: Specs, assets, and annotations that let engineers build your design accurately.
    • Design critique: Giving and receiving feedback well, separating the work from the person and improving the design.
    • Communicating decisions: Explaining the “why” behind design choices so stakeholders trust and support them.

    Cross-functional workHandoffDesign critiqueCommunicating rationale
11. 11

    Step 11Portfolio & case studies

    In design, your portfolio is your résumé. It’s judged less on pretty screens than on how you think: the process behind the pixels.

    • Case study structure: Problem, process, decisions, and outcome, telling the story of how you got from a problem to a solution.
    • Showing your process: Research, iterations, and trade-offs, not only the polished final screens, because that’s what reveals your thinking.
    • Curation: A few strong, complete case studies beat many thin ones; depth signals judgement.
    • Presenting your work: Talking through a case study clearly and confidently, a core part of every design interview.

    Hiring managers hire the thinking, not the screenshots. A case study that honestly shows your process, including what didn’t work, beats a gallery of glossy mockups.

    Case studiesProcess storytellingCurationPresentation
12. 12

    Step 12AI & design

    AI is reshaping design work, speeding up parts of the process and creating new kinds of experiences to design for. Judgement and craft matter more, not less.

    • AI in the workflow: Using AI for ideation, first drafts, copy, and repetitive production work, with your taste and judgement guiding it.
    • Designing AI experiences: Designing for non-deterministic output, setting expectations, showing confidence and sources, and handling errors gracefully.
    • Keeping the human in the loop: Designing controls and transparency so people stay in charge of AI-powered features.
    • Ethics & trust: Considering bias, privacy, and honesty when a product’s behaviour is driven by AI.

    AI can generate options, but it can’t decide what’s right for your users. Research, judgement, and taste, the things this roadmap builds, are exactly what it can’t replace.

    AI in the workflowDesigning AI UXNon-deterministic designHuman-in-the-loopEthics & trust