Roadmap · Build products
UI/UX design
Opens with creditsFor students and early-career engineers who want to design interfaces that people can actually use, either as a product designer or as a developer who designs. By the end you can research a problem, design and test screens in Figma, meet accessibility basics, work inside a design system, and show the work in a portfolio case study or ship it in clean, responsive code.
Curated by Tauseef Fayyaz8 stages, 55 topics~7 months at a few hours a weekBy the end, you will be able to
- 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
The path
8 stages, in the order to learn them. Open one to start.
1How product design worksWhat UX and UI mean, how design work moves from a fuzzy problem to shipped screens, and who does what on a product team. This gives every later stage a place to fit.6 topics · ~2 weeks
- 1UX and UI: what each one coversUser experience (UX) is everything about how someone gets a job done with a product.
- 2The design process: discover, define, design, test, deliverMost teams follow some version of the same loop.
- 3Framing the problem before the solutionA problem statement says who is struggling, with what, and why it matters.
- 4Sketches, wireframes, mockups and prototypesFidelity means how finished a design looks and behaves.
- 5Who does what on a product teamJob titles vary, but the work is similar across companies.
- 6Measuring whether a design worksCheck design decisions against evidence, not taste.
6 in this stageOpen this stage2Visual design fundamentalsThe rules that make a screen look ordered and easy to scan: grids, spacing, type, colour, hierarchy and alignment. These are learnable rules, not talent.7 topics · ~4 weeks
- 1Layout grids and columnsA layout grid splits the screen into columns.
- 2A spacing system and white spaceA spacing system is a small, fixed set of distances you use everywhere.
- 3Typography: scales, line height and line lengthText does most of the work in an interface.
- 4Colour and contrastStart your colour palette with neutrals: a range of greys for text, borders and backgrounds.
- 5Visual hierarchyVisual hierarchy is the order in which the eye reads a screen.
- 6Alignment, grouping and Gestalt principlesPeople see structure before they read a word.
- 7Icons, images and illustrationIcons speed up recognition only when people already know them: a magnifying glass for search, a house for home.
7 in this stageOpen this stage- Figma in depthThe tool most product teams design in. Learn it properly: frames, auto layout, components, variants, variables, prototyping and Dev Mode, so your files are fast to change and easy to hand over.7 topics · ~5 weeksOpens with credits
- UX research and usabilityHow to learn what people need and whether your design works: interviews, personas used carefully, journey maps, information architecture, card sorting, usability tests and heuristic reviews.8 topics · ~4 weeksOpens with credits
- Interaction design and patternsHow interfaces behave: forms, navigation, the empty, loading, error and success states of every screen, feedback, overlays, mobile touch and the words on the interface.7 topics · ~4 weeksOpens with credits
- AccessibilityDesign and build for people with visual, motor, hearing and cognitive disabilities, and for everyone on a small screen in bright sun. WCAG 2.2 basics you can apply and check yourself.7 topics · ~3 weeksOpens with credits
- Design systemsHow teams keep hundreds of screens consistent: tokens, components with clear rules, documentation and governance. Learn from Material Design and Apple's guidelines, then work inside a system of your own.6 topics · ~3 weeksOpens with credits
- Portfolio and first design roleTurn your projects into case studies that show your process and thinking, learn to give and take critique, and find your first design job or freelance clients without falling for scams.7 topics · ~6 weeksOpens with credits
6 more stages, 42 more topics, free with an account.
You have seen the open stages of the UI/UX design roadmap. Every topic it covers is listed above, and an account opens the rest: what each topic means, a question to check yourself, the courses, the practice and Tauseef's advice for every stage. Early access is open: sign up and your account is active shortly after.
Everything here is free to learn from. A few things, like adding a roadmap, keeping a cheat sheet or asking Tauseef a question, use credits. You get 15 when you join, your first roadmap is free, and if you are learning seriously and run out, you can ask for more. Credits only make sure the platform goes to people who are actually learning.
Build a project
A finished project proves more than a certificate.
- Start with this onebeginner4 to 6 weeks · 1 or 2 studentsUsability Study and Redesign of a Public Service Flow
A full case study in one project: research, a tested redesign and measured results you can present
- Figma with auto layout and components
- FigJam or Excalidraw
- Maze or moderated remote sessions
- Google Forms for SUS questionnaires
- WAVE
- intermediate1 semester · 2 students (one design, one development)Documented Design System with Tokens and Storybook
Tokens, components and documentation shared by Figma and code: the core of both paths
- Figma variables
- TypeScript and React
- Style Dictionary (DTCG token format)
- CSS custom properties or Tailwind CSS
- Radix Primitives or shadcn/ui
Related on Sefism
Picked from the other libraries by shared topics.
Best practices
See all- Modern CSS Best PracticesModern CSS best practices: cascade layers, low specificity, custom properties, Grid and Flexbox layout, responsive design, container queries, :has() and nesting, plus Tailwind CSS v4 tips.
- Data Visualization Best PracticesHow to make charts that are clear, accessible and honest: choosing the chart, encoding, color, axes and scales, annotation, dashboards and avoiding misleading charts.
Checklists
See allCheat sheets
See allStuck on something specific?
Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.
- 1:1 Mentorship
- Fresh Graduate Mentorship
- Career Guidance
Brand deals, promos and partnerships: tauseeffayyaz@gmail.com