UI/UX Designer Roadmap: Skills, Tools, Portfolio and First Job

What UI/UX designers do

UX (user experience) design is about how a product works for people: understanding their problems, planning the flow and making tasks easy. UI (user interface) design is about how it looks: layout, colour, typography and components. In most companies one person does both, especially in entry-level roles. You will see titles such as UI/UX Designer, Product Designer, Interaction Designer and UX Researcher.

This is a good path if you enjoy empathy, visual thinking and solving problems for real users. You do not need to draw well, but you do need to think clearly and explain your decisions.

Stage 1: design fundamentals (weeks 1–6)

• Visual design basics: alignment, spacing, hierarchy, contrast, colour theory and typography
• Layout and grids: how to organise content so it scans easily
• Usability principles: consistency, feedback, error prevention, recognition over recall (study Nielsen's usability heuristics)
• Accessibility: colour contrast, readable text sizes, clear focus states, designing for screen readers and keyboards
• Design systems: reusable components, tokens and patterns

Practise by redesigning one screen of an app you use every day and writing three sentences about what you improved and why.

Stage 2: the UX process (weeks 5–14)

1. Understand the problem: talk to users, define who they are and what they are trying to do
2. User research: interviews, surveys, usability observation, competitor analysis
3. Synthesis: personas, user journeys, problem statements, affinity mapping
4. Ideation: sketches, user flows, information architecture
5. Prototyping: low-fidelity wireframes, then high-fidelity mockups and clickable prototypes
6. Testing: watch five users try your prototype, find where they struggle and iterate
7. Handoff: specs, assets and working with developers

You can show every step even in a student project, and doing so is what separates a designer from someone who just makes pretty screens.

Stage 3: tools (weeks 8–16)

• Figma is the industry standard: frames, auto layout, components and variants, prototyping, shared libraries
• A simple whiteboard tool for flows and workshops (FigJam or Miro)
• Basic HTML and CSS so you understand what developers can build (frontend roadmap)
• Optional: animation and prototyping tools, plus a basic knowledge of analytics

Stage 4: build a portfolio (weeks 12–26)

Your portfolio is your resume. Aim for three strong case studies instead of ten screens.

Each case study should tell a story:

• The problem and who it affects
• Your role and the constraints (time, team, goals)
• Research you did and what you learned
• Process: sketches, flows, wireframes, iterations
• The final design, shown clearly
• Results or what you learned, with honest reflection on what you would change

Project ideas: redesign the onboarding of a popular app, design a booking flow for a local business, build a mobile app for a real student problem, or run a usability test on an existing website and propose fixes. Host the portfolio on a simple site (Behance, a personal page or Notion) and put the link on your resume.

Stage 5: jobs and interviews

Expect:

• Portfolio walkthrough: present one project in 10–15 minutes
• Design exercise or take-home task: for example, "Design a feature for a food delivery app" with a time limit
• Design critique: discussing someone's work or your own
• Behavioural questions about teamwork, feedback and working with developers (STAR guide)

When you present, always explain why a decision was made, not only what you made.

Common mistakes

• A portfolio of nice-looking screens with no research or reasoning
• Copying trending visual styles without thinking about users
• Ignoring accessibility and real content
• Never testing designs with real people
• Leaving developers out of the conversation

Next steps

Read tech roles explained, look for design roles and internships on our internships page and fresher jobs, and prepare with the interview process explained.