How to get into UX/UI design with no experience
What UX is, what UI is, what to learn in order (research, flows, Figma, accessibility and design systems) and how to build your portfolio from scratch.
You don't need to know how to draw or code to start in UX/UI design. You need to observe people, organize ideas and explain your decisions. This guide gives you the path.
1. UX and UI aren't the same
- UX (user experience): the app solves the right problem and is easy to use. It includes research, organizing information and testing with people.
- UI (user interface): how it looks. Typography, color, spacing, components.
A junior UX/UI designer does both, but always starts with people, not with a pretty screen.
2. What to learn and in what order
- Research: interviews with open questions, observation, competitor analysis and affinity maps. It ends in a well-defined problem: "How might we…?".
- Flows and wireframes: user flows with the happy path and the errors, information architecture, card sorting and wireframes on paper and in grayscale.
- UI: a type scale, a color palette, spacing on a 4- or 8-point scale, grids and visual hierarchy.
- Figma: auto layout, components with variants and clickable prototypes.
- Accessibility and testing: WCAG 2.2 guidelines and usability tests with real tasks.
- Design system and handoff: tokens with variables, component documentation and handoff to developers with Dev Mode.
3. Rules that save you mistakes
- Contrast (WCAG level AA): at least 4.5:1 for normal text and 3:1 for large text.
- Touch targets: WCAG 2.2 asks for a minimum of 24 × 24 px; 44 to 48 px is recommended for mobile buttons.
- Don't rely on color alone: show an error with text or an icon too.
- Nielsen's 10 heuristics: for example, show the system status and prevent errors.
4. Portfolio projects
- Redesign of a real app: one key task (paying, booking, signing up), with a clickable prototype and a case study.
- Heuristic and accessibility audit of a public website, with screenshots and proposals.
- Mini design system in Figma: color, type and spacing tokens, and 6 components with variants.
In UX/UI you show the process: problem, research, decisions and result. A pretty screen without context doesn't convince anyone.
5. Common mistakes
- Designing without talking to anyone. Five short interviews beat your assumptions.
- Leading questions, like "Wouldn't you like…?".
- Making up personas. They must come from research data.
- Delivering only the happy path. Design the empty, loading and error states too.
If you later want to turn your designs into code, continue with HTML, CSS and JavaScript from scratch.
Next step
Codea's free UX/UI Jr route takes you in 6 weeks from research to a design system, ending with the redesign of a real app with a clickable prototype, reviewed by a mentor. Route content is in Spanish.
Videos, hands-on challenges, quizzes and teacher reviews (route content is in Spanish).