Sefism UI/UX Design Roadmap

What it is

Sefism's UI/UX design roadmap is a plan for designing interfaces that people can actually use. It has two paths that share most of the journey: one for people who want design as their main job, and one for developers who want to design well. Each path is eight stages and about 144 hours.

The shared stages cover how product design works, visual design rules, Figma in depth, research and usability testing, interaction patterns, accessibility and design systems. The final stage splits: designers build a portfolio and look for a first role; developers turn their designs into a responsive, accessible component library.

Each stage lists its topics in learning order, each with a short explanation, a check question and a study prompt that turns an AI assistant into a strict design reviewer rather than a designer. Each stage has a milestone, Tauseef's practical advice and resources labelled by job.

By the end you can:

• Run a small research round: five user interviews, a usability test with five people and a written list of findings ranked by severity.
• Design a multi-screen flow in Figma with auto layout, components, variants, variables and a clickable prototype.
• Check a design against WCAG 2.2 AA basics: contrast, focus, touch targets, labels and screen reader order.
• Build or document a small design system with tokens, components and usage notes.
• Designers: publish two case studies that show the process and the decisions. Developers: turn a Figma file into a responsive, accessible component library.

Two paths

• Designer (the default at /roadmaps/ui-ux/): design as your main job. Includes journey maps and card sorting in research, and ends with portfolio case studies, critique and finding a first design role.
• Developer who designs: build interfaces that look and work right. Research becomes heuristic reviews and quick usability tests of apps you built, milestones are set in your own code, and the path ends with CSS layout, tokens, Tailwind themes and Storybook.

Both paths have 55 topics and the same total hours.

Who it suits, and who should start elsewhere

It suits students and early-career engineers who want to design interfaces people can use: those aiming for a product design role, and developers who keep shipping screens without a designer and want them to look and work better.

If you want to build interfaces in code from scratch, the Frontend development roadmap teaches HTML, CSS, JavaScript and a framework properly; the developer path here assumes you can already build a page. If your interest is in product thinking more broadly, the Tech roles beyond coding roadmap covers other non-engineering routes into tech. If you want to build client websites, see WordPress and Shopify.

Time and a weekly plan

Each path is about 144 hours. The first stage, How product design works (8 hours), is a foundation stage you can skim. At the page's pacing that is about 31 weeks at 5 hours a week, 20 at 8 hours, or 16 at 12 hours.

A student with 8 hours a week: about five months. Pick one real problem you care about in stage 1 and carry it through every stage: the brief becomes the research pack, then the Figma flow, then the accessibility review, then the case study or component library.

Someone working full time with 5 hours a week: about seven months. If you are a developer, use the app you work on (or a side project) as your material; the developer path's milestones are designed around apps you built.

Stage by stage

1. How product design works (8 hours, foundation)

UX and UI and what each covers, the design process (discover, define, design, test, deliver), framing the problem before the solution, sketches, wireframes, mockups and prototypes, who does what on a product team, and measuring whether a design works. Milestone: a one-page brief for a real problem: a problem statement without a solution, the users, two "How might we" questions and two success measures.

2. Visual design fundamentals (20 hours)

Layout grids and columns, a spacing system, typography (scales, line height and line length), colour and contrast, visual hierarchy, alignment, grouping and Gestalt principles, and icons and images. The roadmap's point: these are learnable rules, not talent. Milestone: three redesigned screens from an app you use (developers: three screens of your own app), each with a written note on grid, spacing, type and colour, and every text colour pair checked for contrast.

3. Figma in depth (22 hours)

Plans, files, frames and constraints, auto layout, components and instances, variants and component properties, variables, styles and modes, prototyping, and Dev Mode and handoff. Milestone: a tidy file with a small component library (button, input, card, navigation) built with auto layout, variants and light and dark variables, plus a clickable three-screen prototype. Developers also map each Figma property to the CSS or component prop they would use.

4. UX research and usability (20 hours)

Research questions and choosing a method, user interviews, personas used carefully, information architecture, usability testing with five users and heuristic evaluation with Nielsen's ten heuristics, plus journey maps and card sorting on the designer path. Milestone (designer): an interview guide, notes from five interviews, a research-based persona or journey map, and a five-person usability test with findings ranked by severity. Developers run a heuristic review and a five-person test of an app they built and fix the top three problems.

5. Interaction design and patterns (16 hours)

Forms people finish, navigation patterns, empty, loading, error and success states, feedback and system status, microcopy, modals, dialogs and toasts, and touch and mobile patterns. Milestone: one complete flow, such as sign-up or checkout, with every state designed, real microcopy and a note on each pattern choice.

6. Accessibility (14 hours)

WCAG 2.2 and its four principles, contrast and colour, keyboard access and visible focus, target size, structure, headings, labels and alt text, how screen readers work, and checking accessibility yourself. Milestone: an accessibility review of your flow with contrast, target sizes, focus states and heading order checked, alt text written, and issues fixed after a keyboard and screen reader pass.

7. Design systems (14 hours)

What a design system is and is not, design tokens, component anatomy, states and rules, documentation and governance, Material Design and Apple's Human Interface Guidelines, and auditing an interface with a UI inventory. Developers add headless and copy-in component libraries. Milestone: a token list, six documented components with all states, and one documentation page per component.

8a. Portfolio and first design role (30 hours, designer path)

Case studies that show process, a portfolio site people can scan, giving and receiving critique, design exercises and portfolio presentations in hiring, freelance design work, finding a first role and AI tools in design work. Milestone: a live portfolio with two or three case studies, a rehearsed 30 minute presentation of one, and feedback from two working designers applied.

8b. Turning designs into code (30 hours, developer path)

CSS layout with flexbox and grid, responsive design and container queries, tokens as CSS custom properties or a Tailwind theme, building a component library, Storybook, working well with designers, and making a plain app look good without a designer. Milestone: a responsive, accessible component library from your Figma file, six components with every state in Storybook, and one real page restyled with before and after screenshots.

Projects that fit

Both paths share a documented design system with tokens and Storybook and a bilingual community services directory with right-to-left support. Designers add a usability study and redesign of a public service flow; developers add web accessibility regression testing in CI.

How it works on Sefism

Everything here is free to learn from. The public page shows the full stage list, with the first two stages open to read. Adding the roadmap to your dashboard uses credits: new members get starting credits and the first roadmap you add is free. Once added, every stage opens, you can track progress, the weeks follow your pace, and the companion cheat sheet opens with it. If you want honest feedback on a case study or which path suits you, ask Tauseef a question or book a 1:1 session.

The companion cheat sheet

The UI/UX design cheat sheet follows the same stages, with a designer edition and a developer edition. Use it to revise the rules before a critique, and as a checklist before you hand off or ship.

Related on Sefism

• How to choose between frontend, backend, mobile, cloud, security, data and AI
• How to build a developer portfolio as a beginner
• Library picks used in the stages: Figma Learn, Laws of UX, Nielsen Norman Group Articles, the GOV.UK Design System, How to Meet WCAG 2.2 and Refactoring UI
• Related roadmaps: Frontend development, Mobile development and Tech roles beyond coding

What you can do afterwards

Designers can apply for junior product design roles or take on freelance design work with two or three case studies to present. Developers can own the look and usability of their team's screens, build and maintain a component library, and work with designers on equal terms.

FAQ

How long does it take to learn UI/UX design? About 144 hours on either path: roughly five months at 8 hours a week.

Do I need to know how to code? Not on the designer path. The developer path assumes you can already build a page and ends with CSS, tokens and Storybook.

Do I have to pay for Figma? The roadmap notes that students in a structured programme can apply for Figma's free Education plan.

Is UX design still worth learning with AI tools? The designer path covers AI tools in design work in its final stage, and the roadmap's prompts use AI as a strict reviewer, never to design for you.