Sefism is free for learners. We are here to help you grow, one step at a time.Join for free
Sefism.

Roadmap · Build products

UI/UX design (Developer who designs)

Opens with credits

For 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 week
Start the roadmapSign up to track your progress

By 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.

  1. 1How product design worksWhat UX and UI mean, how design work flows from problem to shipped screens, and where a developer who designs fits in. Knowing the process lets you ask better questions of designers and make sensible calls when there is no designer.6 topics · ~2 weeks
    1. 1UX and UI: what each one coversUser experience (UX) is everything about how someone gets a job done with a product.
    2. 2The design process: discover, define, design, test, deliverMost teams follow some version of the same loop.
    3. 3Framing the problem before the solutionA problem statement says who is struggling, with what, and why it matters.
    4. 4Sketches, wireframes, mockups and prototypesFidelity means how finished a design looks and behaves.
    5. 5Who does what on a product teamJob titles vary, but the work is similar across companies.
    6. 6Measuring whether a design worksCheck design decisions against evidence, not taste.
    6 in this stageOpen this stage
  2. 2Visual 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
    1. 1Layout grids and columnsA layout grid splits the screen into columns.
    2. 2A spacing system and white spaceA spacing system is a small, fixed set of distances you use everywhere.
    3. 3Typography: scales, line height and line lengthText does most of the work in an interface.
    4. 4Colour and contrastStart your colour palette with neutrals: a range of greys for text, borders and backgrounds.
    5. 5Visual hierarchyVisual hierarchy is the order in which the eye reads a screen.
    6. 6Alignment, grouping and Gestalt principlesPeople see structure before they read a word.
    7. 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
  3. Figma in depthEnough Figma to read any file a designer hands you and to design small features yourself: frames, auto layout, components, variants, variables, prototyping and Dev Mode, with an eye on how each maps to code.7 topics · ~5 weeksOpens with credits
  4. UX research and usabilityEnough research to check your own interfaces: short interviews, a simple IA, quick usability tests with five people and a heuristic review before every release.6 topics · ~4 weeksOpens with credits
  5. 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
  6. 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
  7. 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.7 topics · ~3 weeksOpens with credits
  8. Turning designs into codeBuild what you designed: modern CSS layout, responsive design, tokens as CSS variables or a Tailwind theme, a component library in Storybook, and the habits that make a plain app look good without a designer.8 topics · ~6 weeksOpens with credits
Keep reading

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.

Sign up freeBook a free call

Build a project

A finished project proves more than a certificate.

  • Start with this oneintermediate1 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

Checklists

See all

Cheat sheets

See all

Roadmaps

See all
Work with me

Stuck 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
Book a free sessionSee all services

Brand deals, promos and partnerships: tauseeffayyaz@gmail.com